two questions on jqGrid

Question

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');

Sorry, but your question is not clear enough. Do you tried `headertitles: true` jqGrid option? There are no auto column width based on the width of the string. You can calculate the string width if you place it inside of `` and get `jQuery.width` of the ``. You should make the calculation before creating of the grid. The whole solution will be not so simple. — Oleg, Nov 02 '11 at 23:53
You should write short comment to notify that you make changes in the text of the question. I found that you updated your question randomly. — Oleg, Nov 03 '11 at 17:14
You should place the code with `unbind` **inside** of `jQuery(document).ready(function () {...})` block directly after the `tableToGrid`. — Oleg, Nov 03 '11 at 18:57

score 1 · Accepted Answer · answered Nov 03 '11 at 17:10

1

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.

answered Nov 03 '11 at 17:10

Oleg

220,925
34
403
798

good explanation. I am getting an Unable to get Value of property 'grid':object is null or undefined exception – SoftwareSavant Nov 03 '11 at 17:23
@DmainEvent: You use sure the code in the wrong way. The `grid` property exist on all DOM `` elements where jqGrid are created.
– Oleg Nov 03 '11 at 17:26
Sorry? I am not sure I understand. So all 's have a grid element, or just tables with jqGrid? I will update my post with how I used the code.
– SoftwareSavant Nov 03 '11 at 17:35
@DmainEvent: If you have HTML code `
` then `$("#list")` is jQuery wrapper to DOM element which represent the `table` element. The `$("#list")[0]` is the DOM element itself. After you create jqGrid with `$("#list").jqGrid({...})` some additional properties will be added by jqGrid. One from the additional properties is `grid` which you can get with `$("#list")[0].grid`. See [here](http://stackoverflow.com/questions/3462071/jqgrid-get-th-and-thead-using-jquery/3463002#3463002) for more details. – Oleg Nov 03 '11 at 17:46
@DmainEvent: Of course you should use the code which I posted **after** creating the jqGrid with respect of `tableToGrid`. – Oleg Nov 03 '11 at 17:53
I did try the code after creating the jqGrid... I will update the code. – SoftwareSavant Nov 03 '11 at 18:20
Sorry for Doubting you kemo-sabi... It worked. You wouldn't happen to know how to expand the column size of your headers without making the data in the rows beneath disappear would ya? – SoftwareSavant Nov 03 '11 at 18:34

two questions on jqGrid

1 Answers1