Tooltip on grid row hover depends on cellValue

[supun151515Participant]

Hi everyone,

I would like to know, is there a way to to get hover tooltip as follows.
When I hover on a row, if datafield == ‘Close’ then it shoud display a tooltip text or a one of cellValue.

Thank You,
Supun Silva

[Peter StoevKeymaster]

Hi Supun,

For creating Tooltips on cell hover and updating their content, please refer to: http://www.jqwidgets.com/community/topic/grid-mouse-hover-popup-window/

Best Regards,
Peter Stoev

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

[supun151515Participant]

Hello Peter,
I have tried cellhover method. But it gives me an error uncaught exception: jqxCore: invalid property 'cellhover'
My version data below;

JQWidgets 3.0.3 (jqx-all.js)
jQuery 2.0.3
jQuery UI 1.10.3

Below is my code;

   $(document).ready(function () {

 var theme = "ui-start";
            // prepare the data
            var data = "css/emp_list.php";
            var source =
            {
                //localdata: data,
                datafields:
                [
                    { name: 'auto_no', type: 'number' },
                    { name: 'reg_date', type: 'date', format: "yyyy-MM-dd" },
                    { name: 'file_no', type: 'string' },
                    { name: 'emp_name', type: 'string' },
                    { name: 'emp_qid', type: 'string' },
                    { name: 'qid_exp', type: 'date' },
                    { name: 'passport_no', type: 'string' },
                    { name: 'passport_exp', type: 'date' },
                    { name: 'nationality', type: 'string' },
                    { name: 'dob', type: 'date' },
                    { name: 'gender', type: 'string' },
                    { name: 'home_contact', type: 'string' },
                    { name: 'mobile', type: 'string' },
                    { name: 'emp_type', type: 'string' },
                    { name: 'emp_status', type: 'string' },
                    { name: 'job_title', type: 'string' },
                    { name: 'basic_salary', type: 'number' },
                    { name: 'acc_allow', type: 'number' },
                    { name: 'trans_allow', type: 'number' },
                    { name: 'food_allow', type: 'number' },
                    { name: 'mobile_allow', type: 'number' },
                    { name: 'picture', type: 'string' },
                    { name: 'comments', type: 'string' },
                    { name: 'user_name', type: 'string' },
                    { name: 'e_nation', type: 'string' },
                    { name: 'e_type', type: 'string' },
                    { name: 'e_batch', type: 'string' },
                    { name: 'e_dep', type: 'string' },
                    { name: 'e_job', type: 'string' },
                    { name: 'e_status', type: 'string' },
                ],
                 datatype: "json",
                 id: 'id',
                 url: data,
                 async: false,
                 updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }

            };
         

       var cellclass = function (row, columnfield, value, record) {
           var status = record.e_status;
           if (status == 'Vacation' || status == 'Suspended'){
                return 'red'; //call color style from custom_boostrap
           }
           else
           {
            return 'normal';
           }

            }
       

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

           // initialize jqxGrid
            $("#jqxdropdownbutton").jqxDropDownButton({ width: 200, height: 25, theme: theme });
            $("#jqxgrid").jqxGrid(
            {
                width: 660,
                source: dataAdapter,
                theme: theme,
                groupable: true,
                showfilterrow: true,
                filterable: true,
                autoheight: true,
                altrows: true, //color every other row
                pageable: true,
                columnsresize: true,
                
                 cellhover: function (element, pageX, pageY) {
                    // update tooltip.
                    if (!element.button) {
                        $("#jqxgrid").jqxTooltip({ content: element.innerHTML });
                    } else {
                        $("#jqxgrid").jqxTooltip({ content: "Button to open pop-up" });
                    };
                    // open tooltip.
                    $("#jqxgrid").jqxTooltip('open', pageX + 15, pageY + 15);
                },

                columns: [
                  { text: 'File No.', columntype: 'textbox', datafield: 'file_no', width: 90, cellclassname: cellclass },
                  { text: 'Employee Name', datafield: 'emp_name', columntype: 'textbox', width: 300, cellclassname: cellclass },
                  { text: 'Employee ID', columntype: 'textbox', datafield: 'emp_qid', width: 100, cellclassname: cellclass },
                  { text: 'Gender', datafield: 'gender', width: 70, cellsalign: 'center', cellclassname: cellclass },
                  { text: 'status', datafield: 'e_status', width: 70, cellsalign: 'center', cellclassname: cellclass },
                  { text: 'Mobile No.', datafield: 'mobile', cellsalign: 'left', width: 100, cellclassname: cellclass }
                ]
            });

            //$("#jqxgrid").jqxGrid('selectrow', 0);
  
        });

Thank You,
Supun Silva

[supun151515Participant]

I have upgraded to JQXWidgets 3.5.0 and error is ok now.
But still I can’t figure out how to display specific datafield value on row hover.
$("#jqxgrid").jqxTooltip({ content: element.innerHTML });
Is this possible to get with element?

[supun151515Participant]

Hello Mr.Peter,
I have done it by myself. You can see the code here;

 cellhover: function (element, pageX, pageY, record) {
                 var index = $("#jqxgrid").jqxGrid('hoveredrow');           
                 var data = $('#jqxgrid').jqxGrid('getrowdata', index); 
                 var e_status = data.e_status; // get hover row data
                 if (e_status == 'Vacation' || e_status == 'Suspended'){
                    $("#jqxgrid").jqxTooltip({ content: 'This employee on ' + e_status });
                    $("#jqxgrid").jqxTooltip('open', pageX + 15, pageY + 15);
                 }
                 else
                 {
                   $("#jqxgrid").jqxTooltip('close'); 
                 }
                 
                    },

[Author]

Posts