Loading ...
Sorry, an error occurred while loading the content.

Datatable: how to exclude one column in sort operation

Expand Messages
  • htnhat@yahoo.com
    Hellow Everybody, I would like to ask that there are any ways to exclude one column in sort operation happening in a Datatable? I have a Datatable with 8
    Message 1 of 2 , Jul 28, 2009
    • 0 Attachment
      Hellow Everybody,

      I would like to ask that there are any ways to exclude one column in sort operation happening in a Datatable? I have a Datatable with 8 columns with own data and one column namely Line Number, it shows the line order in the Datatable (sortable property set is false), and I do not want to mess up the order of values in this column whenever user clicks on the headers of the other columns that their 'sortable' property is set to 'true'. I would like to include the function that defines my Datatable as below.

      Please help me to give me a clue to get over it

      Thanks and Regards,

      Nhat

      function initReceivingItemsDataTable()
      {

      YAHOO.widget.DataTable.Formatter.incoming_qty = function(el , oRecord , oColumn , oData )
      {
      var value = oRecord.getData(oColumn.field);

      if (value == null || value == undefined)
      value="";
      var dt = new Date();
      var id = dt.getTime();
      var markup = "<input type=\"text\" name='incoming_qty' id='incoming_qty" + id + "' class=\"fieldNormal\" style=\"width:110px;\" value=\"" + value + "\" />";
      el.innerHTML = markup;
      };

      YAHOO.widget.DataTable.Formatter.remark = function(el , oRecord , oColumn , oData )
      {
      var value = oRecord.getData(oColumn.field);

      if (value == null || value == undefined)
      value="";
      var dt = new Date();
      var id = dt.getTime();
      var markup = "<input type=\"text\" name='remark' id='remark" + id + "' class=\"fieldNormal\" style=\"width:110px;\" value=\"" + value + "\" />";
      el.innerHTML = markup;
      };

      YAHOO.widget.DataTable.Formatter.UOM = function(el , oRecord , oColumn , oData )
      {
      var value = oRecord.getData(oColumn.field);

      if (value == null || value == undefined)
      value = "";

      var dt = new Date();
      var id = dt.getTime();
      var markup = "<select class=\"fieldNormal\" id=\"UOMAndPackQuantity" + id + "\" style=\"width:110px;\">";

      for (var i=0; i < oData.length; i++)
      {
      markup += "<option value=" + oData[i].packquantity + ">" + oData[i].uom + "</option>"
      }

      markup += "</select>";
      el.innerHTML = markup;
      };

      YAHOO.widget.DataTable.Formatter.LocationCode = function(el , oRecord , oColumn , oData )
      {
      var value = oRecord.getData(oColumn.field);

      if (value == null || value == undefined)
      value = "";

      var dt = new Date();
      var id = dt.getTime();

      var markup = "<select class=\"fieldNormal\" id=\"LocationCode" + id + "\" style=\"width:110px;\">";
      for (var i=0; i < _WarehouseCodeList.length; i++)
      {
      markup += "<option value=" + _WarehouseCodeList[i].ID + ">" + _WarehouseCodeList[i].Code + "</option>"
      }
      markup += "</select>";
      el.innerHTML = markup;
      };
      /*
      var sortID= function(a, b, desc) {
      alert("Hello");
      // Deal with empty values
      if (!YAHOO.lang.isValue(a)) {
      return (!YAHOO.lang.isValue(b)) ? 0 : 1;
      }
      else if(!YAHOO.lang.isValue(b)) {
      return -1;
      }

      // First compare by state
      var comp = YAHOO.util.Sort.compare;
      var compState = comp(a.getData("_ID"), b.getData("_ID"), desc);

      // If states are equal, then compare by areacode
      //return (compState !== 0) ? compState : comp(a.getData("_ID"), b.getData("_ID"), desc);
      };
      */

      _ReceivingItemsDataTableColumnDefs =
      [
      {
      key: "LineNumber",
      field: "_LineNumber",
      label: _CilReceivingSectionReceivingDataTableLine,
      //sortable: true,
      resizeable: false
      },
      {
      key: "ID",
      field: "_ID",
      label: _CilReceivingSectionReceivingDataTableItemID,
      sortable: true,
      resizeable: false
      //,sortOptions: {field: "_ID"}
      //sortOptions: {sortFunction: sortID}
      },
      {
      key: "ManufacturerCode",
      field: "_ManufacturerCode",
      label: _CilReceivingSectionReceivingItemManufacturerCode,
      sortable: true,
      resizeable: true
      },
      {
      key: "EAN",
      field: "_EAN",
      label: _CilReceivingSectionReceivingDataTableItemEAN,
      sortable: true,
      resizeable: true
      },
      {
      key: "ShortDescription",
      field: "_ShortDescription",
      label: _CilReceivingSectionReceivingDataTableItemShortDescription,
      sortable: true,
      resizeable: true
      },
      {
      key: "IncomingQty",
      field: "_IncomingQty",
      label: _CilReceivingSectionReceivingDataTableItemIncomingQuantity,
      formatter:YAHOO.widget.DataTable.Formatter.incoming_qty,
      resizeable: false
      },
      {
      key: "UOM",
      field: "_UOM",
      label: _CilReceivingSectionReceivingDataTableItemUOM,
      formatter: "UOM",
      resizeable: false
      },
      {
      key: "LocationCode",
      field: "_LocationCode",
      label: _CilReceivingSectionReceivingDataTableItemLocationCode,
      formatter: "LocationCode",
      resizeable: false
      },
      {
      key: "Remarks",
      field: "_Remarks",
      label: _CilReceivingSectionReceivingDataTableItemRemarks,
      formatter:YAHOO.widget.DataTable.Formatter.remark,
      resizeable: false
      }
      ];

      //Define the data soruce of the Data Table (ie. the search function in the CustomerAdmin Controller)
      var dataSource = new YAHOO.util.XHRDataSource(_WMSRootURL + "checkinListReceiving/getReceivingItems", {connMethodPost: true});
      dataSource.responseType = YAHOO.util.XHRDataSource.TYPE_JSON;

      // var dataSource = new YAHOO.util.DataSource(getReceivingItemsForDataSource());
      // dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;



      dataSource.responseSchema =
      {
      resultsList : "Items",
      fields:
      [
      {key: "_LineNumber"},
      {key: "_ID", parser: "number"},
      {key: "_ManufacturerCode"},
      {key: "_EAN"},
      {key: "_ShortDescription"},
      {key: "_IncomingQty"},
      {key: "_UOM"},
      {key: "_LocationCode"},
      {key: "_Remarks"}
      ]
      };
      var requestBuilder = function(oState, oSelf) {
      alert("IN SORT");
      }

      //Define the configuration for the Data Table
      var config =
      {
      //dynamicData : true,
      //sortedBy : {key: "ID", dir:"asc"},
      //initialRequest : "",
      //generateRequest: "",
      generateRequest: requestBuilder,
      //sortedBy : {key: _defaultColumn, dir: YAHOO.widget.DataTable.CLASS_ASC},
      //MSG_LOADING : _DataTableLoadingText,
      //MSG_EMPTY : _DataTableEmptyText
      };

      //Create the Data Table
      _ReceivingItemsDataTable = new YAHOO.widget.DataTable("itemReceivingDataTable",
      _ReceivingItemsDataTableColumnDefs,
      dataSource, config);

      //Set the event handlers for various Data Table events we want to respond to
      _ReceivingItemsDataTable.subscribe("rowMouseoverEvent", _ReceivingItemsDataTable.onEventHighlightRow);
      _ReceivingItemsDataTable.subscribe("rowMouseoutEvent" , _ReceivingItemsDataTable.onEventUnhighlightRow);
      _ReceivingItemsDataTable.subscribe("renderEvent" , resizeReceivingItemsDataTable);
      _ReceivingItemsDataTable.subscribe("rowClickEvent" , _ReceivingItemsDataTable.onEventSelectRow);
      }
    • Satyam
      I guess that you could assign the line number a formatter that ignores the value in the Record object and simply puts the number there based on the page number
      Message 2 of 2 , Jul 29, 2009
      • 0 Attachment
        I guess that you could assign the line number a formatter that ignores
        the value in the Record object and simply puts the number there based on
        the page number plus the number of rows in the tbody. The formatter is
        run in the context of the DataTable so this.getTbodyEl() should give you
        the reference to the <tbody> element that contains the data rows, then
        you can check the length of the rows array. Otherwise, you can have a
        globally accessible counter which you initialize to zero and increment
        it when you format each cell and set it to zero again on a listener to
        renderEvent, which is triggered every time the DataTable, or a page of
        it, is finished, so that the counter is back again ready for the next
        redraw.

        Also, I notice that you go and retrieve the value from the Record in
        every formatter, it should be the same value as it comes in oData, you
        shouldn't need to fetch it yourself. You also assign ID's to the input
        elements based on a prefix and a timestamp which seems just as good as
        random ids, which doesn't seem to be particularly useful. All DataTable
        events you could listen to to detect changes in the input elements will
        let you reach the Record for that row and from it you can get your own
        primary key for that record, which is a better identifier.

        Satyam

        htnhat@... escribió:
        > Hellow Everybody,
        >
        > I would like to ask that there are any ways to exclude one column in sort operation happening in a Datatable? I have a Datatable with 8 columns with own data and one column namely Line Number, it shows the line order in the Datatable (sortable property set is false), and I do not want to mess up the order of values in this column whenever user clicks on the headers of the other columns that their 'sortable' property is set to 'true'. I would like to include the function that defines my Datatable as below.
        >
        > Please help me to give me a clue to get over it
        >
        > Thanks and Regards,
        >
        > Nhat
        >
        > function initReceivingItemsDataTable()
        > {
        >
        > YAHOO.widget.DataTable.Formatter.incoming_qty = function(el , oRecord , oColumn , oData )
        > {
        > var value = oRecord.getData(oColumn.field);
        >
        > if (value == null || value == undefined)
        > value="";
        > var dt = new Date();
        > var id = dt.getTime();
        > var markup = "<input type=\"text\" name='incoming_qty' id='incoming_qty" + id + "' class=\"fieldNormal\" style=\"width:110px;\" value=\"" + value + "\" />";
        > el.innerHTML = markup;
        > };
        >
        > YAHOO.widget.DataTable.Formatter.remark = function(el , oRecord , oColumn , oData )
        > {
        > var value = oRecord.getData(oColumn.field);
        >
        > if (value == null || value == undefined)
        > value="";
        > var dt = new Date();
        > var id = dt.getTime();
        > var markup = "<input type=\"text\" name='remark' id='remark" + id + "' class=\"fieldNormal\" style=\"width:110px;\" value=\"" + value + "\" />";
        > el.innerHTML = markup;
        > };
        >
        > YAHOO.widget.DataTable.Formatter.UOM = function(el , oRecord , oColumn , oData )
        > {
        > var value = oRecord.getData(oColumn.field);
        >
        > if (value == null || value == undefined)
        > value = "";
        >
        > var dt = new Date();
        > var id = dt.getTime();
        > var markup = "<select class=\"fieldNormal\" id=\"UOMAndPackQuantity" + id + "\" style=\"width:110px;\">";
        >
        > for (var i=0; i < oData.length; i++)
        > {
        > markup += "<option value=" + oData[i].packquantity + ">" + oData[i].uom + "</option>"
        > }
        >
        > markup += "</select>";
        > el.innerHTML = markup;
        > };
        >
        > YAHOO.widget.DataTable.Formatter.LocationCode = function(el , oRecord , oColumn , oData )
        > {
        > var value = oRecord.getData(oColumn.field);
        >
        > if (value == null || value == undefined)
        > value = "";
        >
        > var dt = new Date();
        > var id = dt.getTime();
        >
        > var markup = "<select class=\"fieldNormal\" id=\"LocationCode" + id + "\" style=\"width:110px;\">";
        > for (var i=0; i < _WarehouseCodeList.length; i++)
        > {
        > markup += "<option value=" + _WarehouseCodeList[i].ID + ">" + _WarehouseCodeList[i].Code + "</option>"
        > }
        > markup += "</select>";
        > el.innerHTML = markup;
        > };
        > /*
        > var sortID= function(a, b, desc) {
        > alert("Hello");
        > // Deal with empty values
        > if (!YAHOO.lang.isValue(a)) {
        > return (!YAHOO.lang.isValue(b)) ? 0 : 1;
        > }
        > else if(!YAHOO.lang.isValue(b)) {
        > return -1;
        > }
        >
        > // First compare by state
        > var comp = YAHOO.util.Sort.compare;
        > var compState = comp(a.getData("_ID"), b.getData("_ID"), desc);
        >
        > // If states are equal, then compare by areacode
        > //return (compState !== 0) ? compState : comp(a.getData("_ID"), b.getData("_ID"), desc);
        > };
        > */
        >
        > _ReceivingItemsDataTableColumnDefs =
        > [
        > {
        > key: "LineNumber",
        > field: "_LineNumber",
        > label: _CilReceivingSectionReceivingDataTableLine,
        > //sortable: true,
        > resizeable: false
        > },
        > {
        > key: "ID",
        > field: "_ID",
        > label: _CilReceivingSectionReceivingDataTableItemID,
        > sortable: true,
        > resizeable: false
        > //,sortOptions: {field: "_ID"}
        > //sortOptions: {sortFunction: sortID}
        > },
        > {
        > key: "ManufacturerCode",
        > field: "_ManufacturerCode",
        > label: _CilReceivingSectionReceivingItemManufacturerCode,
        > sortable: true,
        > resizeable: true
        > },
        > {
        > key: "EAN",
        > field: "_EAN",
        > label: _CilReceivingSectionReceivingDataTableItemEAN,
        > sortable: true,
        > resizeable: true
        > },
        > {
        > key: "ShortDescription",
        > field: "_ShortDescription",
        > label: _CilReceivingSectionReceivingDataTableItemShortDescription,
        > sortable: true,
        > resizeable: true
        > },
        > {
        > key: "IncomingQty",
        > field: "_IncomingQty",
        > label: _CilReceivingSectionReceivingDataTableItemIncomingQuantity,
        > formatter:YAHOO.widget.DataTable.Formatter.incoming_qty,
        > resizeable: false
        > },
        > {
        > key: "UOM",
        > field: "_UOM",
        > label: _CilReceivingSectionReceivingDataTableItemUOM,
        > formatter: "UOM",
        > resizeable: false
        > },
        > {
        > key: "LocationCode",
        > field: "_LocationCode",
        > label: _CilReceivingSectionReceivingDataTableItemLocationCode,
        > formatter: "LocationCode",
        > resizeable: false
        > },
        > {
        > key: "Remarks",
        > field: "_Remarks",
        > label: _CilReceivingSectionReceivingDataTableItemRemarks,
        > formatter:YAHOO.widget.DataTable.Formatter.remark,
        > resizeable: false
        > }
        > ];
        >
        > //Define the data soruce of the Data Table (ie. the search function in the CustomerAdmin Controller)
        > var dataSource = new YAHOO.util.XHRDataSource(_WMSRootURL + "checkinListReceiving/getReceivingItems", {connMethodPost: true});
        > dataSource.responseType = YAHOO.util.XHRDataSource.TYPE_JSON;
        >
        > // var dataSource = new YAHOO.util.DataSource(getReceivingItemsForDataSource());
        > // dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        >
        >
        >
        > dataSource.responseSchema =
        > {
        > resultsList : "Items",
        > fields:
        > [
        > {key: "_LineNumber"},
        > {key: "_ID", parser: "number"},
        > {key: "_ManufacturerCode"},
        > {key: "_EAN"},
        > {key: "_ShortDescription"},
        > {key: "_IncomingQty"},
        > {key: "_UOM"},
        > {key: "_LocationCode"},
        > {key: "_Remarks"}
        > ]
        > };
        > var requestBuilder = function(oState, oSelf) {
        > alert("IN SORT");
        > }
        >
        > //Define the configuration for the Data Table
        > var config =
        > {
        > //dynamicData : true,
        > //sortedBy : {key: "ID", dir:"asc"},
        > //initialRequest : "",
        > //generateRequest: "",
        > generateRequest: requestBuilder,
        > //sortedBy : {key: _defaultColumn, dir: YAHOO.widget.DataTable.CLASS_ASC},
        > //MSG_LOADING : _DataTableLoadingText,
        > //MSG_EMPTY : _DataTableEmptyText
        > };
        >
        > //Create the Data Table
        > _ReceivingItemsDataTable = new YAHOO.widget.DataTable("itemReceivingDataTable",
        > _ReceivingItemsDataTableColumnDefs,
        > dataSource, config);
        >
        > //Set the event handlers for various Data Table events we want to respond to
        > _ReceivingItemsDataTable.subscribe("rowMouseoverEvent", _ReceivingItemsDataTable.onEventHighlightRow);
        > _ReceivingItemsDataTable.subscribe("rowMouseoutEvent" , _ReceivingItemsDataTable.onEventUnhighlightRow);
        > _ReceivingItemsDataTable.subscribe("renderEvent" , resizeReceivingItemsDataTable);
        > _ReceivingItemsDataTable.subscribe("rowClickEvent" , _ReceivingItemsDataTable.onEventSelectRow);
        > }
        >
        >
        >
        >
        >
        >
        > ------------------------------------
        >
        > Yahoo! Groups Links
        >
        >
        >
        > ------------------------------------------------------------------------
        >
        >
        > No virus found in this incoming message.
        > Checked by AVG - www.avg.com
        > Version: 8.5.392 / Virus Database: 270.13.34/2268 - Release Date: 07/28/09 06:00:00
        >
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.