CODEWITHSUNDEEP
javascriptjqgrid
SoftwareSavant
SoftwareSavant

Reputation: 9767

two questions on jqGrid

I need to get rid of the mouse-over highlighting that occurs when you mouse over the Column headers in jqgrid and nothing else. Any documentation on how to do that? Or where I could get started anyway? Also, how do I get an auto column width based on the width of the string in the column header? Would I have to set that manually?

Thanks.

Updated For Clarity Sake

I use tabletoGrid. I get rid of the sort functionality of the table (it was giving me some problems). But when you mouse over it, the column still lights up. My anal retentive BA wants that functionality gone. So go it must. The is no auto Column width option? The Guys on jqGrid need to get with it. If I had known this earlier on, I would have chosen a different tool. 

    var $grid = $('#table1'),
        hdiv = $grid[0].grid.hDiv,
        $columnHeaders = $("thead tr.ui-jqgrid-labels th", hdiv)
    $columnHeaders.unbind('mouseenter');
    $columnHeaders.unbind('mouseleave');

UPDATE: How I call the code

    jQuery(document).ready(function () {             
        tableToGrid("#table1", { cmTemplate: { sortable: false },
            height: 500,
            autowidth: true,
            colNames: ['Name', 'Description', 'Population Type']
        });
    });
    var $grid = $('#table1'),
        hdiv = $grid[0].grid.hDiv,
        $columnHeaders = $("thead tr.ui-jqgrid-labels th", hdiv)
    $columnHeaders.unbind('mouseenter');
    $columnHeaders.unbind('mouseleave');

Upvotes: 0

Views: 1813

Answers (1)

Oleg
Oleg

Reputation: 222017

If I understand you correct your problem is the line of jqGrid code

$("thead tr:first th",this).hover(
    function(){$(this).addClass('ui-state-hover');},
    function(){$(this).removeClass('ui-state-hover');}
);

The hover method is the shortcut of mouseenter and mouseleave binding. So to unbind the events you need execute the following code:

var $grid = $('#list'), // the grid
    hdiv = $grid[0].grid.hDiv, // DOM of the hdiv - the div which contain headers
    $columnHeaders = $("thead tr.ui-jqgrid-labels th", hdiv); // th elements
$columnHeaders.unbind('mouseenter');
$columnHeaders.unbind('mouseleave');

See the demo here.

Upvotes: 1

Related Questions