1

Here is my colNames:

colNames: ['', '<span class="ui-icon ui-icon-flag"></span>', 'NTPEP Number', 'Manufacturer', 'Product', 'Status','','Data', 'Actions'],

Here is my colModel:

 colModel: [{ name: 'tc_id', index: 'tc_id', align: 'left', hidden: true, resizable: false, key: true },
            { name: 'Flag', index: 'Flag', width:30,align: 'left', resizable: false, formatter: function (cellvalue, options, rowObject) { return "<div id= flag_" + rowObject[0] + " class='flag'><span class='ui-icon ui-icon-flag'></span></div>" } },
                   { name: 'NTPEP_Number', index: 'NTPEP_Number', width: 150, align: 'left', resizable: false, formatter: fontColorFormat },
                   { name: 'Manufacturer', index: 'Manufacturer', width: 200, align: 'left', resizable: false },
                   { name: 'Product', index: 'Product', width: 150, align: 'left', resizable: false, formatter: fontColorFormat },
                   { name: 'Status', index: 'Status', width: 80, align: 'left', resizable: false },
                   { name: 'Locked_Flag', index: 'Locked_Flag', width: 30, align: 'left', resizable: false,formatter:lockedFlag},

                  { name: 'Data', sortable: false, edittype: 'select', width: 70, align: 'left', sortable: false, formatter: function (cellvalue, options, rowObject) { return "<div id= action_" + rowObject[0] + " class='action'><div class='btn-group' id='actions'><div class='collapse navbar-collapse'><ul class='actions'><li class='dropdown'><a href='#' class='dropdown-toggle grid-icon' data-toggle='dropdown'></a><ul class='dropdown-menu'><li><a href='#'>Product</a></li><li><a href='#'>Test</a></li></ul></li></ul></div></div><div class='clear'></div></div>"; }, resizable: false },
                   { name: 'Actions', index: 'Actions', sortable: false, edittype: 'select', width: 85, align: 'left', sortable: false, formatter: function (cellvalue, options, rowObject) { return "<div id= action1_" + rowObject[0] + " class='action1'><div class='btn-group' id='actions'><div class='collapse navbar-collapse'><ul class='actions'><li class='dropdown'><a href='#' class='dropdown-toggle grid-icon' data-toggle='dropdown'></a><ul class='dropdown-menu'><li><a href='#'>Product</a></li><li><a href='#'>Test</a></li></ul></li></ul></div></div><div class='clear'></div></div>"; }, resizable: false }],

        rowNum: 20,
        rowList: [2, 10, 20, 50],   // page size dropdown
        pager: jQuery('#pager_Alerts'),
        pgbuttons: true,            
        viewrecords: true,          
        pagerpos: 'right',
        recordpos: 'left',
        shrinkToFit: false,
        sortorder: "asc",
        sortname: "tc_id",
        loadtext: "Loading",
        width: 795,
       height: "100%",
        hoverrows: false,
        onCellSelect: function (rowid, iCol, cellcontent, e) {}

In Chrome,when i move the mouse over rows,row height increase automatically like as follow. enter image description here

This is not desired behavior:

While in IE,it works fine ,just like normal jqgrid row. enter image description here

Kindly tell me,what is the problem?Is it css problem or i am missing some property?

0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.