1

The grids in our application allow users to sort on multiple columns. I am now implementing a "favorites" feature to easily remember&restore filter, ordering and column order. I am facing some issues to correctly refresh the sort icons in the table header.

The code looks roughly like:

thegrid.setGridParam({
  sortname: favorite_to_restore["sidx"],
  sortorder: favorite_to_restore["sord"]
  });
thegrid.trigger('reloadGrid');

This works correctly in the backend (ie the sorting order for the sql query in our database reflects the favorite), but the icons in header row aren't updated.

Is there an extra API call I can do to update the sort icons? I looked into "sortGrid", but that doesn't provide an easy answer.

Sohail Ahmad
  • 7,309
  • 5
  • 27
  • 46
jdetaeye
  • 43
  • 1
  • 4

2 Answers2

1

You can try to restore user preferences before creating the grid. See the demo created for the answer. In the case you will don't need to reload the grid at all.

Alternatively you can use sortData method of DOM element of the grid. The demo https://jsfiddle.net/OlegKi/1gpz4mat/ uses the following code to call it:

$("#reload").click(function () {
    var $grid = $("#grid"),
        p = $grid.jqGrid("getGridParam"),
        newSortName = "amount",
        newSortOrder = "asc", // "asc", "desc"
        iCol = p.iColByName[newSortName],
        $th = $("#" + p.id + "_" + newSortName);

    $grid[0].sortData(newSortName, iCol, false, newSortOrder, $th[0]);
});
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • The favorites are applied dynamically when the grid is already loaded. I would like to avoid reloading the complete page. So, the first suggestion won't apply. I'll work with your snippet. We're using multisort, so it looks like I'll need to do some splitting&parsing and repeated calls to sortData. I was hoping that a convenient shortcut would be available - no luck :-) – jdetaeye Feb 24 '20 at 11:53
  • @jdetaeye: In general, `sortData` be used in case of multisort too. I suppose, that you could have problem with `lso` properties of `colModel` elements. If the user change the order in case of usage multisort then `lso` properties of the corresponding `colModel` columns will be modified (from `"asc"` to `"asc-desc"`, `"desc-asc"` and `"desc"`). The state of multisort grid will be not described with `sortname` and `sortorder`, but with values of `lso` properties of all columns of the grid. I'd recommend you to examine the `lso` properties of columns in debugger. – Oleg Feb 24 '20 at 12:17
0

I ended up using the following code:

        // From the favorite to restore I retrieve the fields to sort on
        var sortstring= "field 1 asc, field2 desc".split(",");

        // Reset the sort icons
        var p = thegrid.jqGrid('getGridParam');     
        for (var k of p.colModel) {
            var headercell = $("#" + p.id + "_" + k["name"]);
            headercell.find("span.s-ico").css("display","none");
            headercell.find("span.ui-grid-ico-sort").addClass("disabled");
            headercell.find("span.ui-jqgrid-sort-order").html(" ");
            k.lso = "";
        }

        // Update the sort icons
        for (var k in sortstring) {
            var s = sortstring[k].trim().split(" ");
            var colname = s[0].trim();
            var headercell = $("#" + p.id + "_" + colname);
            headercell.find("span.s-ico").css("display","");
            if (s[1].trim() == "asc") {
              headercell.find("span.ui-icon-asc").removeClass("disabled");
              p.colModel[p.iColByName[colname]].lso = "asc-desc";
            }
            else {
              headercell.find("span.ui-icon-desc").removeClass("disabled");
              p.colModel[p.iColByName[colname]].lso = "desc-asc";
            }
          headercell.find("span.ui-jqgrid-sort-order").html(parseInt(k)+1);
        }
jdetaeye
  • 43
  • 1
  • 4