cellhover not working properly with hide/show columns

[babydragonParticipant]

I modified the show/hide column code from the demo and added to display the content of the cell when hovering on the cell. However, the content of the column after the hidden column is not properly shown in the tooltip.

var data = generatedata(500);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 500,
     theme: 'energyblue',
     source: adapter,
     sortable: true,
     selectionmode: 'singlecell',
     cellhover: function (html, x, y) {
         $("#jqxgrid").jqxTooltip({content: html.innerText});
         $("#jqxgrid").jqxTooltip('open', x + 15, y + 15);     
     },
     columns: [{
         text: 'First Name',
         datafield: 'firstname',
         columngroup: 'Name',
         hidden: true,
         width: 90
     }, {
         text: 'Last Name',
         columngroup: 'Name',
         datafield: 'lastname',
         width: 90
     }, {
         text: 'Product',
         datafield: 'productname',
         width: 170
     }, {
         text: 'Order Date',
         datafield: 'date',
         width: 160,
         cellsformat: 'dd-MMMM-yyyy'
     }, {
         text: 'Quantity',
         datafield: 'quantity',
         width: 80,
         cellsalign: 'right'
     }, {
         text: 'Unit Price',
         datafield: 'price',
         cellsalign: 'right',
         cellsformat: 'c2'
     }]
 });

 $("#jqxbutton").jqxButton({
     theme: 'energyblue',
     width: 300,
     height: 30
 });
 $('#jqxbutton').click(function () {
     $('#jqxgrid').jqxGrid('hidecolumn', 'lastname');
     $('#jqxgrid').jqxGrid('showcolumn', 'firstname');
 });

[DimitarParticipant]

Hello babydragon,

Please try the following approach:

cellhover: function (html, x, y) {
    var cell = $('#jqxgrid').jqxGrid('getcellatposition', x, y);
    $("#jqxgrid").jqxTooltip({ content: cell.value });
    $("#jqxgrid").jqxTooltip('open', x + 15, y + 15);
},

It works only for cells, though. The demo Column Tooltips shows how to display tooltips for column headers.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[babydragonParticipant]

Thanks for your reply. The example works perfectly but my code wasn’t able to display properly at all even for ‘getcellatposition’. I’ll try to post my code on here very soon.

[Author]

Posts