1

I have to show the sort column icons in a Jqgrid. I have found answers here itself. I tried with that, now I can able to see the sort icons on all sortable column headers, but the default sort column is not showing the highlighted icon.

This is my script :

var $tempX= $(divId), colModel, sortName;


    jQuery(divId).jqGrid({
        datatype: "local",
        height: 250,
        width:1000,
        colNames:eval(colNamesVal),
        colModel:eval(colModelVal),
        rowNum:35, 
        rowList:[35,60,100,1000000000],
        rownumbers: true,
        rownumWidth:50,
        height:"auto",
        pager: '#pager2',
        ignoreCase: true,
        //altRows:true,
        pagination:true,
        headertitles:true,
        sortable:true,
        sortorder: "asc",
        viewrecords: true,
        onSortCol: function (index, idxcol, sortorder) {
            if (this.p.lastsort >= 0 && this.p.lastsort !== idxcol
                    && this.p.colModel[this.p.lastsort].sortable !== false) {
                // show the icons of last sorted column
                $(this.grid.headers[this.p.lastsort].el)
                    .find(">div.ui-jqgrid-sortable>span.s-ico").show();
                $(this.grid.headers[this.p.lastsort].el).removeClass('sortedColumnHeader');
            }
            $(this.grid.headers[idxcol].el).addClass('sortedColumnHeader');
        },
        loadComplete: function(){
            $("option[value=1000000000]").text('All');
        } 
    });

colModel = $tempX.jqGrid('getGridParam', 'colModel');
    sortName = $tempX.jqGrid('getGridParam', 'sortname');
    $('#gbox_' + $.jgrid.jqID($tempX[0].id) +
        ' tr.ui-jqgrid-labels th.ui-th-column').each(function (i) {
        var cmi = colModel[i], colName = cmi.name;

        if (cmi.sortable !== false) {
            // show the sorting icons
            $(this).find('>div.ui-jqgrid-sortable>span.s-ico').show();
        } else if (!cmi.sortable && colName !== 'rn' && colName !== 'cb' && colName !== 'subgrid') {
            // change the mouse cursor on the columns which are non-sortable
            $(this).find('>div.ui-jqgrid-sortable').css({cursor: 'default'});
        }
        if (cmi.name === sortName) {
            $(this).addClass('sortedColumnHeader');
        }
    });

Can anybody help in this? Thanks!

user1199537
  • 65
  • 5
  • 12

1 Answers1

0

You mean probably the following my old answer. The demo or this one which is what you use.

You wrote that you want to see the highlighted icon in the default sort column. To solve the problem you have to have the sortname option in the grid. It is also important to define .sortedColumnHeader > div CSS setting. If you do this like in the demo then everything work as expected.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Just I need to show the Icon for default sorted column. I tried your script. But still same. All the columns have icons, but for the sorted column icons are bit bright color, either down arrow or the up arrow depending on the sort order!. – user1199537 Jun 16 '12 at 08:54
  • @user1199537: There are no default sorted column, because you don't define `sortname` option. If you would use `data` parameter to create non-empty grid the data will be **not sorted**. To have sorted data you have to use specify the column by which the sorted should be done by including `sortname` option. Just examine the code of [the demo](http://www.ok-soft-gmbh.com/jqGrid/ShowAlwaysSortableIcons1.htm) more carefully. – Oleg Jun 16 '12 at 09:33
  • For each grid I'm passing the sortname... just like this : loadGrid(colNames,colModels,jsonObj.result,divId,'name'); – user1199537 Jun 16 '12 at 09:49
  • @user1199537: I can say nothing about the function `loadGrid` which you *not posted*, but the code which you posted create jGrid without `sortname`. Just search for the string `sortname` on the current page and you will don't find it in the parameters of jqGrid which you create. – Oleg Jun 16 '12 at 11:19