jQuery Grid Plugin - jqGridForum

Topic RSS

onSortCol fails to fire with certain grid name

11/10/2013
22:48

aerowhiz

California, US

Member

Members

Forum Posts: 4

Member Since:
11/10/2013

Offline

When my grid is named "dg1" the onSortCol event fails to fire. Tested only in Firefox 24. Noticed that header clicks no longer caused sorting to occur and no warning or errors were reported by the debugger. Backed out the changes between two backups (one working, one not working) until I found that changing the grid name and corresponding table id from "list" to "dg1" prompted the failure (Of course that was the last change I backed out:). The 3 character name "lis" also worked.

I do not see a way to attach a file, so here is the page that fails:

<!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" />
    <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 lastId=false;
    var team="";
    var cdate="2013-10-03";

    function lineBreak (max, txt) { //breaks up text longer than max into lines
      var t='', nl='', sp='', w=0;
      var a = txt.split(' ')
      for (x in a) {
        if (w + a[x].length > max) {
          t += nl + a[x];
          w = a[x].length;
        } else {
          t += sp + a[x] ;
          w += a[x].length +1;
        }
        nl = '\n'; sp = ' ';
      }
      return t;
    }
    function orderTitle (row, val, r) {
      var h = r[1]==1 ? 'Yes' : 'No';
      var w = r[2]==1 ? 'Yes' : 'No';
      var ot = toCellDate(r[8]);
      var pt = toCellDate(r[9]);
      var dt = toCellDate(r[10]);
      return ' title="Order: ' + val + '\nHold: ' + h + '\nWaiting: ' + w + '\nAdvisor: ' + r[3] + '\nTag: ' + r[4] + '\nStatus: ' + r[5] +
      '\nLast Name: ' + r[6] + '\nFirst Name: ' + r[7] + '\nOrdered: ' + ot + '\nPromised: ' + pt + '\nDelivered: ' + dt +
      '\nLicense: ' + r[11] + '\nVin: ' + r[12] + '\nStock Number: ' + r[13] + '\nMileage: ' + r[14] + '\nYear: ' + r[15] + '\nMake: ' + r[16] +
      '\nModel: ' + r[17] + '\nColor: ' + r[18] + '\nAddress: ' + r[19] + '\nCity: ' + r[20] + '\nState: ' + r[21] + '\nZip: ' + r[22] +
      '\nPhone: ' + r[23] + '\nCell: ' + r[24] + '\nEmail: ' + r[25] + '\nCustomer: ' + r[26] + '\nLabor: ' + r[27] +
      '\nParts: ' + r[28] + '\nCost: ' + r[29] + '\n' + lineBreak(22, 'Remark: ' + r[30]) + '"';
    }
    function advisorTitle (row, val) {
      return ' title="Goofball' + 'asdf"';
    }
    function zfill (max, str) { //zerofill
      return str.length < max ? zfill(max, "0" + str) : str;
    }
    function toCellDate(cellvalue) {
      if (cellvalue == null) { return ""; }
      var d1 = new Date(cellvalue.replace(" ","T"));
      var d2 = cdate.split("-");
      var value = zfill(2, d1.getHours() + '') + ":" + zfill(2, d1.getMinutes() + ''); //time only if current date
      if (d1.getDate() != d2[2] || 1 + d1.getMonth() != d2[1] || d1.getFullYear() != d2[0]) {
        value = zfill(2, 1 + d1.getMonth() + "") + "/" + zfill(2, d1.getDate() + "") + "/" + d1.getFullYear() + " " + value;
      }
      return value;
    }
    function toSqlDate(cellvalue) {

    }
    function statusColor (row, val, r) {
      var s = r[31];
      var c = '';
      if (r[31] == 'C98') {
        c = '#E0E0E0'; //closed- gray
      } else if (r[2] == 1) {
        c = '#F0C0C0'; //waiting- red
      } else if (r[31] == 'I98') {
        c = '#C0C0C0'; //working- blue
      } else if (s[0] == 'C') {
        c = '#C0F0C0'; //completed- green
      } else if (s[0] == 'H') {
        c = '#F0F0C0'; //hold- yellow
      }
      if (c != '') {c = ' style="background-color:' + c + ';"'}
      return ' title = "' + r[31] + '"' + c;
    }

    jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "No Orders for this date.", loadtext: "Updating..."});
    $(function () {
      $("#dg1").jqGrid({
        url: "query.php?qtype=1&cdate=" + cdate + "&team=" + team,
        datatype: "jsonp",
        mtype: "GET",
        colNames: ["Ord", "H", "W", "Adv", "Tag", "Status", "Last Name", "First Name", "Ordered", "Promised", "Delivered",
                  "License", "Vin", "Stk #", "Miles", "Yr", "Make", "Model", "Color", "Address", "City", "S", "Zip", "Phone",
                  "Cell", "Email", "Cus", "Labor", "Parts", "Cost", "Remark"],
        colModel: [
          { name: "Order_Num", index:'Order_Num',width: 50, align: "left", hidedlg: true, frozen: true, resizable: false, cellattr: orderTitle },
          { name: "Hold", index:'Hold',width: 15, align: "center", hidedlg: true, frozen: true, resizable: false, formatter: 'checkbox',
                   formatoptions: { disabled: false }, cellattr: function() { return ' onclick="return false"'; } },
          { name: "Waiting ", index:'Waiting',width: 15, align: "center", hidedlg: true, frozen: true, resizable: false, formatter: 'checkbox',
                   formatoptions: { disabled: false }, cellattr: function() { return ' onclick="return false"'; } },
          { name: "Advisor", index:'Advisor',width: 45, align: "left", hidedlg: true, frozen: true, resizable: false, cellattr: advisorTitle },
          { name: "Tag", index:'Tag',width: 60, align: "left" },
          { name: "Status", index:'Status',width: 80, align: "left", cellattr: statusColor },
          { name: "Last_Name", index:'Last_Name',width: 90, align: "left"},
          { name: "First_Name", index:'Last_Name',width: 90, align: "left"},
          { name: "Order_Time", index:'Order_Time',width: 105, align: "right", formatter:toCellDate},
          { name: "Promised_Time", index:'Promised_Time',width: 105, align: "right", formatter:toCellDate},
          { name: "Delivered_Time", index:'Delivered_Time',width: 105, align: "right", formatter:toCellDate},
          { name: "License", index:'License',width: 65, align: "left"},
          { name: "Vin", index:'Vin',width: 140, align: "left"},
          { name: "Stock_Num", index:'Stock_Num',width: 65, align: "left"},
          { name: "Mileage", index:'Mileage',width: 55, align: "left"},
          { name: "Year", index:'Year',width: 40, align: "centered"},
          { name: "Make", index:'Make',width: 70, align: "left"},
          { name: "Model", index:'Model',width: 65, align: "left"},
          { name: "Color", index:'Color',width: 80, align: "left"},
          { name: "Address", index:'Address',width: 140, align: "left"},
          { name: "City", index:'City',width: 90, align: "left"},
          { name: "State", index:'State',width: 30, align: "center"},
          { name: "Zip", index:'Zip',width: 50, align: "center"},
          { name: "Phone", index:'Phone',width: 90, align: "left"},
          { name: "Cell", index:'Cell',width: 90, align: "left"},
          { name: "Email", index:'Email',width: 140, align: "left"},
          { name: "Customer", index:'Customer',width: 50, align: "left"},
          { name: "Labor_Sale", index:'Labor_Sale',width: 60, align: "right"},
          { name: "Parts_Sale", index:'Parts_Sale',width: 60, align: "right"},
          { name: "Parts_Cost", index:'Parts_Cost',width: 60, align: "right"},
          { name: "Remark", index:'Remark',width: 90, align: "left"}
        ],
        pager: "#pager",
        rowNum: 0,
        rowList: [],
        pgtext: false,
        pginput: false,
        pgbuttons: false,
        hidegrid: false,
        viewrecords: true,
        recordtext: "{2} Orders Shown",
        scrollrows: true,
        sortname: "Order_Num",
        sortorder: "DESC",
        width: 1000,
        height: 400,
        shrinkToFit: false,
        gridview: true,
        autoencode: true,
        caption: "My first grid",
        gridComplete: function(){
          jQuery("#dg1").jqGrid('setSelection', lastId, false);
        },
        onSelectRow: function(id){
          lastId = id;
        },
        onSortCol: function(){
          lastId = false;
        }
      });
      jQuery("#dg1").jqGrid('setFrozenColumns');
      jQuery("#dg1").jqGrid('navGrid','#pager',{add:false,edit:false,del:false,search:false,refresh:false});
      jQuery("#dg1").jqGrid('navButtonAdd','#pager',{
        caption: "Columns", title: "Reorder Columns",buttonicon: 'ui-icon-wrench', onClickButton : function (){
          jQuery("#dg1").jqGrid('columnChooser');
        }
      });
    });
    </script>

</head>
<body>
<table id="dg1"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>

14/10/2013
15:30

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Just tested your example (one to one copy/paste - of cource with my data ) and it works fine.

The simple test is to use FireFox and set in grid options

...

onSortCol: function(){

lastId = false;

console.log("onSort");

...

Thgis will tell you if it works, otherwiese check your additional code for some errors.

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.