jQuery UI Widgets Forums Grid Problem with tooltip in grid

This topic contains 4 replies, has 2 voices, and was last updated by  Nephilim 6 years, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Problem with tooltip in grid #81569

    Nephilim
    Participant

    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");
                });                                       
            
    }
    
    Problem with tooltip in grid #81586

    Dimitar
    Participant

    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/

    Problem with tooltip in grid #81598

    Nephilim
    Participant

    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

    Problem with tooltip in grid #81601

    Dimitar
    Participant

    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/

    Problem with tooltip in grid #81604

    Nephilim
    Participant

    Yeeeehhhaaa – that worked 😉

    Thank you very much for your help!!!

    Best regards,

    Ralf

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.