Problem with tooltip in grid

[NephilimParticipant]

Hi!

I am using the tooltip-plugin on the grid and when hovering oder a row i try to get back the value of the first column in this row, which contains the ID of the appropriate dataset.

This works quite fine on the first page – but when the grid is switched to its second, third…. page the hover on (for e.g.) row 1 still delivers the id of the row 1 one the first page!

Some notes which is below:

– in every row, the first column contains the ID i need
– the data comes via ajax call
– i have activated sorting and filtering
–> This all works fine!

– in the cellhover-function i try to get the ID in the hovered line
–> This works in first page. On second page the ID from the row with the same index on page 1 is returned…

Does anybody has an idea, how to fix this problem?

Thank’s a lot in forward…

Ralf

            $.jqx.theme = "bootstrap";
                        
            listdata = performAjaxCall(uri,"json");
        
            // prepare the data
            var source =
            {
                localdata: listdata,
                dataType: "json",
                dataFields: [
                    { name: 'id',       type: 'string' },
                    { name: 'info',     type: 'string' },
                    { name: 'lock',     type: 'string' },
                    { name: 'channel',  type: 'string' },
                    { name: 'craft',    type: 'string' },
                    { name: 'country',  type: 'string' },
                    { name: 'provider', type: 'string' },
                    { name: 'location', type: 'string' }
                ],
                id: 'id'
            };            
            
            var columns = [                    
                        { text: 'ID',           filterable: false,          width:'8%'  ,dataField: 'id'},
                        { text: 'Fall-Info',    filterable: false,          width:'23%' ,dataField: 'info'},
                        { text: '',             filterable: false,          width:cellwidth  ,dataField: 'lock',      cellsalign: 'center', align: 'center'},
                        { text: 'Kanal',        filtertype: 'checkedlist',  width:cellwidth  ,dataField: 'channel',   cellsalign: 'center', align: 'center'},
                        { text: 'Gewerk',       filtertype: 'checkedlist',  width:cellwidth  ,dataField: 'craft',     cellsalign: 'center', align: 'center'},
                        { text: 'Land',         filtertype: 'checkedlist',  width:cellwidth  ,dataField: 'country',   cellsalign: 'center', align: 'center'},
                        { text: 'DL',           filtertype: 'checkedlist',  width:cellwidth  ,dataField: 'provider',  cellsalign: 'center', align: 'center'},
                        { text: 'Standort',     filtertype: 'checkedlist',  width:cellwidth  ,dataField: 'location',  cellsalign: 'center', align: 'center'}
                    ];
            
            if (listType != "new") {                
                source["dataFields"].push( { "name":"process","type":"string" } );
                columns.push( {"text":"Prozess", "filterable":false, "width":"7%", "dataField":"process", "cellsalign":"center", "align":"center"} );                
                source["dataFields"].push( { "name":"state","type":"string" } );
                columns.push( {"text":"Status", "filterable":false, "width":"7%", "dataField":"state", "cellsalign":"center", "align":"center"} );                
                source["dataFields"].push( { "name":"rating","type":"int" } );
                columns.push( {"text":"%", "filterable":false, "width":"7%", "dataField":"rating", "cellsalign":"center", "align":"center"} );                                                                                                
            }
            
            var dataAdapter = new $.jqx.dataAdapter(source, {
                    loadComplete: function () { $('#jqxLoader').jqxLoader('close'); },
                }); 

            $(box).on('bindingcomplete', function (event) {
                var gridState = performAjaxCall("/tickets/ajxloadfilters","t=" + box.replace("#",""),"json");
                if (gridState != "") {
                    $(box).jqxGrid('loadstate', gridState);
                }                                               
            });  

            $(box).jqxTooltip();
            $(box).jqxGrid(
            {
                width: "100%",
                source: dataAdapter,                   
                pageable: true,  
                showfilterrow: true,
                filterable: true, 
                sortable: true,
                selectionmode: 'multiplecellsextended',                                                    
                columns: columns,
                autoheight: false,
                autorowheight: false,
                
                showdefaultloadelement: false,
                autoshowloadelement: false,                
                
                cellhover: function (element, pageX, pageY, record) {
                    var tooltipMsg = "";
                    var index = $(box).jqxGrid('hoveredrow');           
                    var data = $(box).jqxGrid('getrowdata', index); 
                    var id = data.id;                                                                                
                    tooltipMsg = performAjaxCall("/ticket/ajxshortinfo/" + id);
                                        
                    if (tooltipMsg != "") {                   
                        $(box).jqxTooltip({ content: tooltipMsg });
                        $(box).jqxTooltip('open', pageX + 15, pageY + 15);
                    } else {                        
                        $(box).jqxTooltip('close');
                    }
                }
            });             
            
            var localizationobj = {};
            localizationobj.filterselectstring      = ".";
            localizationobj.filterselectallstring   = "Alle";
            $(box).jqxGrid('localizestrings', localizationobj);
                           
            $(box).on("cellclick", function (event) {
                var args            = event.args;
                var value           = args.value; 
                var dataField       = args.datafield;
                var rowBoundIndex   = args.rowindex;
                var rowVisibleIndex = args.visibleindex;                                                
                
                var IDcell = $(box).jqxGrid('getcell', rowBoundIndex, "id");
                
                if (dataField == "id") {                    
                    openModal("/ticket/ticketinfo/" + IDcell.value);                    
                } else if (dataField == "lock") {                                                                                    
                    
                    if (value != "") {                        
                            var checkUnlock = performAjaxCall("/permission/checkunlock/" + IDcell.value);
                            if (checkUnlock == "GRANTED") {
                                unlockMsg = unlockTicket(IDcell.value);
                                if (unlockMsg == "OK") {
                                    $(box).jqxGrid('setcellvalue', rowBoundIndex, "lock", "");        
                                }
                            } else {
                                openModalSimple("Sie haben keine Berechtigung, diesen Fall freizuschalten");
                            }
                    } else {
                        ticketJump(IDcell.value);
                    }
                                        
                } else if (dataField == "info") {                                        
                    ticketJump(IDcell.value);                    
                }
                                               
            });
            
            
            $(box).on("filter", function (event) {                                
                var gridState = $(box).jqxGrid('getstate');
                var response  = performAjaxCall("/tickets/ajxsavefilters","f=" + JSON.stringify(gridState) + "&t=" + box.replace("#",""),"text");
            });
            $(box).on("sort", function (event) {
                var gridState = $(box).jqxGrid('getstate');
                var response  = performAjaxCall("/tickets/ajxsavefilters","f=" + JSON.stringify(gridState) + "&t=" + box.replace("#",""),"text");
            });                                       
        
}

[DimitarParticipant]

Hi Nephilim,

The method getrowdata has to be passed the row’s bound index, but you are passing its visible index. Please try the following modification as a solution:

cellhover: function(element, pageX, pageY, record) {
    var tooltipMsg = "";
    var index = $(box).jqxGrid('hoveredrow');
    var boundindex = $(box).jqxGrid('getrowboundindex', index);
    var data = $(box).jqxGrid('getrowdata', boundindex);
    var id = data.id;
    tooltipMsg = performAjaxCall("/ticket/ajxshortinfo/" + id);

    if (tooltipMsg != "") {
        $(box).jqxTooltip({
            content: tooltipMsg
        });
        $(box).jqxTooltip('open', pageX + 15, pageY + 15);
    } else {
        $(box).jqxTooltip('close');
    }
}

Best Regards,
Dimitar

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

[NephilimParticipant]

Hi Dimitar!

Thank’s for your quick response!

Unfortunately this does not fix the problem…the grid show’s the same behaviour as before.

Any other suggestions?

Best regards!

Ralf

[DimitarParticipant]

Hi Ralf,

Here is an alternative solution:

cellhover: function(element, pageX, pageY, record) {
    var tooltipMsg = "";
    var cell = $(box).jqxGrid('getcellatposition', pageX, pageY);
    var data = $(box).jqxGrid('getrowdata', cell.row);
    var id = data.id;
    tooltipMsg = performAjaxCall("/ticket/ajxshortinfo/" + id);

    if (tooltipMsg != "") {
        $(box).jqxTooltip({
            content: tooltipMsg
        });
        $(box).jqxTooltip('open', pageX + 15, pageY + 15);
    } else {
        $(box).jqxTooltip('close');
    }
}

and here is a working example with it (based on the demo Paging):

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            var url = "../sampledata/orders.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url,
                pager: function (pagenum, pagesize, oldpagenum)
                {
                    // callback called when a page or page size is changed.
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                selectionmode: 'multiplerowsextended',
                sortable: true,
                pageable: true,
                autoheight: true,
                columnsresize: true,
                cellhover: function (element, pageX, pageY, record)
                {
                    var tooltipMsg = "";
                    var cell = $('#jqxgrid').jqxGrid('getcellatposition', pageX, pageY);
                    var data = $('#jqxgrid').jqxGrid('getrowdata', cell.row);
                    tooltipMsg = data.ShipName;

                    if (tooltipMsg != "")
                    {
                        $('#jqxgrid').jqxTooltip({
                            content: tooltipMsg
                        });
                        $('#jqxgrid').jqxTooltip('open', pageX + 15, pageY + 15);
                    } else
                    {
                        $('#jqxgrid').jqxTooltip('close');
                    }
                },
                columns: [
                  { text: 'Ship Name', datafield: 'ShipName', width: 250 },
                  { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
                  { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
                  { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
                  { text: 'Ship City', datafield: 'ShipCity', width: 100 },
                  { text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

[NephilimParticipant]

Yeeeehhhaaa – that worked 😉

Thank you very much for your help!!!

Best regards,

Ralf

[Author]

Posts