JQXGrid CellSelect vs CellClick

by mogador

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
This Fiddle checks problems using on('cellclick'…) versus on('cellselect' )
event.args.datafield exists in ceelclick, but not anymore in cellselect, since Virson 20 of JQWidgets

grid1 : subscribe to the 'cellclick' events : popup to inform which column is clicked
<div id="grid1"></div>

grid2 : subscribe to the 'cellselect' events : popup to inform which column is clicked ==> BUG
<div id="grid2"></div>

JavaScript

var data = generatedata(5);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }],
     datatype: "array"
 };

var dataAdapter = new $.jqx.dataAdapter(source);


	$("#grid1").jqxGrid({
			 source: dataAdapter,
			 selectionmode: 'singlerow',
			editable: false,
			 columns: [{
					 text: 'First Name',
					 datafield: 'firstname',
					 width: 90
			 }, {
					 text: 'Last Name',
					 datafield: 'lastname',
					 width: 90
			 }]
	 });

	$("#grid2").jqxGrid({
			 source: dataAdapter,
			 selectionmode: 'singlerow',
			editable: false,
			 columns: [{
					 text: 'First Name',
					 datafield: 'firstname',
					 width: 90
			 }, {
					 text: 'Last Name',
					 datafield: 'lastname',
					 width: 90
			 }]
	 });


$('#grid1').on('cellclick', function(event)
 {
  var datafield = event.args.datafield;
    var row = event.args.rowindex;
    var columntext = $("#grid1").jqxGrid('getcolumn', event.args.datafield).text;
	 
alert('you are in column : ' + columntext);
});

$('#grid2').on('cellselect', function(event)
 {
  var datafield = event.args.datafield;
    var row = event.args.rowindex;
    var columntext = $("#grid2").jqxGrid('getcolumn', event.args.datafield).text;
	 
alert('you are in column : ' + columntext);
});