jQuery Grid Plugin - jqGridForum

18/10/2013
01:13

aerowhiz

California, US

Member

Members

Forum Posts: 4

Member Since:
11/10/2013

Offline

1

I am writing a reset function for the grid. I need to restore to the original sort order.

If I use setGridParam the sort occurs, but the icons for the previous sort remain.

If I use sortGrid the sort occurs, but the icons on all sortable columns turn on.

How do I programmatically sort and have only the icons for the newly sorted column show properly as they did when the grid was initialized.

Here are my initial option settings:

        rowNum: 0,
        rowList: [],
        userData: true,
        scrollrows: true,
        sortname: "Order_Num",
        sortorder: "DESC",
        width: winWidth,
        height: winHeight,
        shrinkToFit: false,
        deselectAfterSort: true,
        ignoreCase: true,
        gridview: true,
        autoencode: true,
        postData: { qtype:1, cdate:cdate, team:team },
        onCellSelect: function(id, col) {
          var ord = col==0 ? id : 0;
          detail(ord);
        },
        onSelectRow: function(id){
          lastId = id;
        },
        onSortCol: function(){
          lastId = false;
          detail(0);
        },
        gridComplete: function(){
          $("#ddg1").jqGrid('setSelection', lastId, false);
        },
        beforeProcessing: function(data){
          personnel = data['userdata'];
          for(i in personnel) {
            if (personnel[i][2] == 'Advisor') {
              advisor[personnel[i][0]] = personnel[i][1] + '\nId: ' + personnel[i][4];
            }
            if (personnel[i][3] == 'Technician') {
              tech[personnel[i][0]] = personnel[i][1] + '\nJob: ' + personnel[i][2] + '\nId: ' + personnel[i][4];
            }
          }
        }

PS Love the grid...!

18/10/2013
11:23

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

2

Hello

If I use sortGrid the sort occurs, but the icons on all sortable columns turn on.

Can you please post a simple test case?

In principle when using sortGrid the only sort icon should be on.

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

18/10/2013
21:13

aerowhiz

California, US

Member

Members

Forum Posts: 4

Member Since:
11/10/2013

Offline

3

Here is a shortened version of the progam that demonstrates the problem. Press the 'Reset' button after sorting a column other than column 0. The problem disappears if the 'setFrozenColumns' directive is removed.

sorttest.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Shopflo</title>
    <meta name="author" content="Copyright 2013 Michael Cannon, Cannon Research" />
    

    <link rel="stylesheet" type="text/css" media="screen" href="css/ui-redmond/jquery-ui-1.9.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui.multiselect.css" />
    <style type="text/css">
        html, body { font-size: 75%; }
        .ui-jqgrid tr.jqgrow td { height: 15px; }
    </style>
    <script src="js/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/ui.multiselect.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>

    <script type="text/javascript">
    var team="";
    var cdate = "2013-10-14"

    $(document).ready(function() {
      $.extend($.jgrid.defaults,{emptyrecords: "No Orders", loadtext: "Updating..."});
      $("#ddg1").jqGrid({
        url: "query.php",
        datatype: "jsonp",
        mtype: "GET",
        colNames: ["Order", "H", "W", "Adv", "Tag", "Status", "Last Name", "First Name"],
        colModel: [
          { name: "Order_Num", index:'Order_Num',width: 55, align: "left", hidedlg: true, frozen: true, resizable: false },
          { name: "Hold", index:'Hold',width: 15, align: "center", hidedlg: true, frozen: true, resizable: false},
          { name: "Waiting ", index:'Waiting',width: 15, align: "center", hidedlg: true, frozen: true, resizable: false},
          { name: "Advisor", index:'Advisor',width: 45, align: "left", hidedlg: true, frozen: true, resizable: false },
          { name: "Tag", index:'Tag',width: 75, search: false, align: "left" },
          { name: "Status", index:'Status',width: 95, search: false, align: "left"},
          { name: "Last_Name", index:'Last_Name',width: 90, searchoptions: {sopt:['eq','cn']}, align: "left"},
          { name: "First_Name", index:'First_Name',width: 90, search: false, align: "left"}
        ],
        rowNum: 0,
        rowList: [],
        scrollrows: true,
        sortname: "Order_Num",
        sortorder: "DESC",
        width: 1000,
        height: 300,
        shrinkToFit: false,
        ignoreCase: true,
        gridview: true,
        autoencode: true,
        postData: { qtype:1, cdate:cdate, team:team }
      });
      $("#ddg1").jqGrid('setFrozenColumns');

    });
    </script>
</head>
<body>

      <table id="ddg1"><tr><td></td></tr></table>

<button id="st3" class="st-button" title="Reset Logsheet to Today" onClick="$('#ddg1').jqGrid('setGridParam', { search: false, sortorder:'desc',
postData: { 'filters':'', qtype:1, cdate:cdate, team:team }}).jqGrid('sortGrid', 'Order_Num', true);">Reset</button>
</body>
</html>

18/10/2013
21:53

aerowhiz

California, US

Member

Members

Forum Posts: 4

Member Since:
11/10/2013

Offline

4

I have a workaround for the issue. I added 'destroyFrozenColumns' before the sort, and 'setFrozenColumns' after the sort.

The reset button code is now:

      <button id="st3" class="st-button" title="Reset Logsheet to Today" onClick="$('#ddg1').jqGrid('setGridParam',
        { search: false, sortorder:'desc', postData: { 'filters':'', qtype:1, cdate:cdate, team:team }})
        .jqGrid('destroyFrozenColumns').jqGrid('sortGrid', 'Order_Num', true).jqGrid('setFrozenColumns');">Reset</button>

22/10/2013
08:30

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

5

Hello,

Thanks for investigation - yes you sort on column which is frozen, which causes the problem.

Also should look at sortGrid to see if I can fix this situation.

Thanks

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.