Question

I have used a JGGrid(version 4.1.1) in my application. The problem with my grid is, tooltip is getting displayed for empty cells also. How to avoid or hide the tooltip if the data not available in a grid cell? I read in some post that, this issue resolved from 3.6 version of JQGrid onwards. But still it is coming. Can somebody help me to fix this issue.

Update #1

Another issue with this code is the sorting. It is not working properly. Part Number column is not getting sorted and columns like Length, Diameter and GlobalShipments are getting sorted based on Text type instead of Float type. I have specified the sorttype as float for these columns. but still they are getting sorted based on text values.

Here is my code (This has both tooltip issue and Sorting issues):

jqGrid Demos

    <link rel="stylesheet" type="text/css" media="screen" href="themes/blitzer/jquery-ui-1.8.16.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />  
    <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script> 
    <script src="js/grid.locale-en.js" type="text/javascript"></script>        
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>  

    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true; 

        var mydata = [];
        var jsonColModel = {};

        $(function () {
            mydata = [
                { //hiding the data as it is conf.. }];

            var strColumnModelold = '[{ "label": "Part Number", "name": "partNumber", "index": "partNumber ", "width": 80 }, { "label": "Part Revision", "name": "partRevision", "index": "partRevision", "width": 50, "align": "center" }, { "label": "Part Status", "name": "partStatus", "index": "partStatus", "width": 80, "hidden": true }, { "label": "Policy", "name": "policy", "index": "policy", "width": 100, "hidden": true }, { "label": "Status", "name": "status", "index": "status", "width": 80 }, { "label": "IDM", "name": "idm", "index": "idm", "width": 45, "align": "center" }, { "label": "IDM2", "name": "idm2", "index": "idm2", "width": 45, "hidden": true, "align": "center" }, { "label": "Part Type", "name": "partType", "index": "partType", "width": 75, "align": "center" }, { "label": "Diameter [min] (mm)", "name": "diameterMinMm", "index": "diameterMinMm", "width": 50, "hidden": true, "align": "center", "sortType": "float" }, { "label": "Diameter [max] (mm)", "name": "diameterMaxMm", "index": "diameterMaxMm", "width": 50, "hidden": true, "align": "center", "sortType": "float" }, { "label": "Diameter [nominal] (mm)", "name": "diameterNomMm", "index": "diameterNomMm", "width": 50, "align": "center", "sortType": "float" }, { "label": "Length [min] (mm)", "name": "lengthMinMm", "index": "lengthMinMm", "width": 50, "hidden": true, "align": "center", "sortType": "float" }, { "label": "Length [max] (mm)", "name": "lengthMaxMm", "index": "lengthMaxMm", "width": 50, "hidden": true, "align": "center", "sortType": "float" }, { "label": "Length [nominal] (mm)", "name": "lengthNomMm", "index": "lengthNomMm", "width": 50, "align": "center", "sortType": "float" }, { "label": "Global Shipments", "name": "globalShipments", "index": "globalShipments", "width": 50, "align": "center", "sortType": "float" }, { "label": "IFP", "name": "ifp", "index": "ifp", "width": 35, "align": "center" }, { "label": "Inch or Metric", "name": "metricSystem", "index": "metricSystem", "width": 45, "align": "center"}]';

            jsonColModel = $.parseJSON(strColumnModelold);
            createGrid();
        });

        function createGrid() {

            $("#list2").jqGrid({
                datatype: 'local',
                data: mydata,
                colModel: jsonColModel,
                rowNum: 10,
                rowList: [10, 25, 50],
                pager: '#pager2',
                page: 1,
                gridview: true,
                rownumbers: false,
                viewrecords: true,
                altRows: true,
                loadtext: "Loading parts data...",
                ajaxGridOptions: { cache: false },
                caption: 'Part Data',
                width: 713,
                shrinkToFit: false,
                scrollOffset: 0,
                height: '100%'
            });
        }
    </script>
</head>
<body>
    <div>
        <table id="list2"></table>
        <div id="pager2" ></div>    
    </div>
</body>

sorry for posting huge code here.

Answer 1

The problem exist because your current data are not empty. You data contains "status": " " instead of "status": "". If you would trim the data before usage in jqGrid the problem will be solved.

Some small additional comments to your code. You use datatype: 'local', so ajaxGridOptions: { cache: false } option can be removed. You can also remove page: 1 which is default.

You use $.jgrid.no_legacy_api = true in a wrong was. The correct way will be

<script type="text/javascript" src="js/grid.locale-en.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

In the case $.jgrid.no_legacy_api will be set before jquery.jqGrid.min.js, but after grid.locale-en.js which create $.jgrid object.

Additionally I would recommend you definition of mydata, jsonColModel and createGrid inside of $(function () {...});. It will reduce possible name conflicts with other global objects from all other JavaScripts which you includes on the page.