Search code examples
jqgrid

It is possible to customise asc desc in jqgrid version 4-4-3

Is it possible to show only asc or desc icon at time of loading of data into jqgrid? How can i customise like color of icons?

Solution

  • The main problem, which you have: you use very old version 4.4.3 of jqGrid, which is almost 5 years old. The old jqGrid don't allow to display only one sorting icon. Moreover it allows to use only old jQuery UI icons, which uses PNG images for icons. The color of png images can't be changed for different icons because every icon is a part of one image like this one:

    enter image description here

    You can see that above image, used by Redmond team, uses blue color for all icons. It makes more complex to implement your requirements.

    I'd recommend you to consider to upgrade to the current version (4.15.1) of free jqGrid - the fork of jqGrid, which I develop staring with end of 2014. The fork is compatible with 4.4.3.

    Free jqGrid supports many new options, like the option showOneSortIcon: true, which you need. Moreover, it allows to include CSS of Font Awesome 4.x font-awesome.min.css and to add iconSet: "fontAwesome" option to replace all jQuery UI icons to vector-based Font Awesome icons. See here an example of usage. As the result you can easy specify any color for any icon. For example, the demo https://jsfiddle.net/OlegKi/2cgyL4qx/ uses the following CSS rules in combination with showOneSortIcon: true and iconSet: "fontAwesome" options:

    .ui-jqgrid .s-ico > .ui-icon-desc.fa {
    color: green;
    top: -0.3em;
}
.ui-jqgrid .s-ico > .ui-icon-asc.fa {
    color: red;
    top: 0.1em;
}

    As the result the asc/desc icons looks like on the pictures below

    enter image description here enter image description here

    Free jqGrid contains many other options, which allows to customize sorting icons (see here). For example, one can full overwrite the standard icons to your custom icons and uses the icons, for example, depend on the type of data in the corresponding column. You can try one more demo https://jsfiddle.net/OlegKi/1c7rxfLn/ and to examine the sorting icons in different columns. You will see 3 different group of icons: for numeric, alpha and other types of data. The sorting icons will look like on the pictures below:

    enter image description here enter image description here enter image description here enter image description here enter image description here enter image description here