0

When the mouse hovers over each column I'd like the tooltip to indicate whether that column is sortable.
I am able to change the title attribute with something like this: 

$("#List .ui-th-column").each(function(i) { 
    var isSortable = i % 2;
    $(this).attr('title', isSortable ? "Not Sortable" : "Click header to sort."); 
});

I'd like to replace the demo expression 'i % 2' with a check of the colMode's sortable property, but I can't figure out how to get the value of the colModel's sortable property.

colModel: [ { name: 'Name', index: 'Name', width: 100, sortable: true  },
            { name: 'Note', index: 'Note', width: 200, sortable: false } ]

I've tried .getGridParam and .getColProp but I don't think the syntax I'm using is correct.

Robert Harvey
  • 178,213
  • 47
  • 333
  • 501
Greg
  • 1
  • 1
  • 1

2 Answers2

0

To get the value of the sortable property like any other property from the column definition you can do about following:

var grid=$("#list");
var propsName = grid.jqGrid('getColProp','Name');
var propsNote = grid.jqGrid('getColProp','Note');
alert("'Name' has sortable="+propsName.sortable+
      "\n'Note' has sortable="+propsNote.sortable);

To set tooltip on the column header you can do following

var setTooltipsOnColumnHeader = function (grid, iColumn, text) {
    var thd = $("thead:first", grid.hdiv)[0];
    $("tr th:eq(" + iColumn + ")", thd).attr("title", text);
};
var grid=$("#list");
setTooltipsOnColumnHeader(grid,2,"Bla Bla!");

Here we identify the column by index of visible columns.

You can easy rewrite the code examples for your purpose.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • @Greg: Sorry, what do you mean? – Oleg Nov 16 '10 at 22:56
  • the var propsName = grid.jqGrid('getColProp','Name'); gives me the boolean i need for the isSortable - thanks. Is there a way for me to use the variable i in the .each(function(i) to replace the column name so i don't have to type 'Name', 'Description' etc? – Greg Nov 16 '10 at 22:58
  • @Greg: the var propsName = grid.jqGrid('getColProp','Name'); gives **an object** having boolean property `sortable` if it is defined in the `colModel``. Look at the example http://www.ok-soft-gmbh.com/jqGrid/isSortable.htm. Of cause you can make a loop through all columns, but the usage of `$("#List .ui-th-column")` seems me wrong because columns are not a part of `$("#List")`. jqGrid some parent divs over the main table element. See http://stackoverflow.com/questions/3462071/jqgrid-get-th-and-thead-using-jquery/3463002#3463002 for more information. – Oleg Nov 16 '10 at 23:20
0

This works nicely. thanks for all the help Oleg.

$("#gbox_List .ui-th-column").each(function(i) {
    var col = grid.getGridParam('colModel'); 
    var isSortable = grid.jqGrid("getColProp", col[i].name).sortable;
    $(this).attr('title', isSortable ? "Click header to sort by column." : "Not Sortable"); 
});

You were right about the $(#List not being in the correct place on the DOM, it should have been #gbox_List - the additional info made that clear.

I had to use .ui-th-column rather than .ui-th-labels for the .each to loop through each column.

I was able to avoid hard coding the column name by using the grid.getGridParam('colModel') to return an array and then grabbing the .name property off of that for each column.

This solution is nice because I have ~20 grids, each with lots of unsortable columns and having to have a different line for each unsortable column would have been messy. Now I can take advantage of the sortable property setting in the colModel.

Greg
  • 1
  • 1
  • 1