jQuery UI Widgets Forums Grid cellhover not working properly with hide/show columns

This topic contains 2 replies, has 2 voices, and was last updated by  babydragon 7 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • babydragon
    Participant

    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');
     });

    Dimitar
    Participant

    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/


    babydragon
    Participant

    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.

    • This reply was modified 7 years ago by  babydragon.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.