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

Custom Cell Editing - DataTable - Urgent!!!!!!!!!!!

Expand Messages
  • Raja
    Hi, I m trying to define a custom cell editing for my table which outputs the value of two different columns to one field, as in the below code. The custom
    Message 1 of 1 , Jun 4, 2008
      Hi,

      I'm trying to define a custom cell editing for my table which outputs
      the value of two different columns to one field, as in the below code.

      The custom cell editing is not working. I've even tried logging the
      javascript objects but the newData and OldData variables are
      'undefined' in the custom formmatter. Code snippet:

      YAHOO.namespace("advancedtrade");

      this.dataTableExample = [

      {checked:false,account:"",ordertype:"Buy",quantity:"10",symbol:"T",account_type:\
      "",limit_price:"",stop_price:"",duration:"Day
      Only",qualifier:"",unsolicited:""},

      {checked:false,account:'',orderType:"Buy",quantity:'15',symbol:'YHOO',account_ty\
      pe:'',limit_price:'23.54',stop_price:'',duration:'Day
      Only',qualifier:'',unsolicited:''},

      {checked:false,account:'',orderType:"Buy",quantity:'23',symbol:'GOOG',account_ty\
      pe:'',limit_price:'530.67',stop_price:'678.93',duration:'',qualifier:'',unsolici\
      ted:''
      }
      ];

      YAHOO.util.Event.addListener(window, "load", function() {
      YAHOO.advancedtrade.TradesTable = new function() {

      console.log(dataTableExample);

      this.myDataSource = new YAHOO.util.DataSource(dataTableExample);

      this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;

      this.myDataSource.responseSchema = {
      fields: [
      {key: "checked", parser:YAHOO.util.DataSource.parseBoolean},
      {key: "account", parser:YAHOO.util.DataSource.parseString},
      {key: "ordertype", parser:YAHOO.util.DataSource.parseString},
      {key: "quantity", parser:YAHOO.util.DataSource.parseNumber},
      {key: "symbol", parser:YAHOO.util.DataSource.parseString},
      {key: "account_type", parser:YAHOO.util.DataSource.parseString},
      {key: "limit_price", parser:YAHOO.util.DataSource.parseString},
      {key: "stop_price", parser:YAHOO.util.DataSource.parseString},
      {key: "duration", parser:YAHOO.util.DataSource.parseString},
      {key: "qualifier", parser:YAHOO.util.DataSource.parseString},
      {key: "unsolicited", parser:YAHOO.util.DataSource.parseString}
      ]
      };

      // Custom editor for price column
      this.editPrice = function(oEditor, oSelf) {

      var elCell = oEditor.cell;
      var oRecord = oEditor.record;
      var oColumn = oEditor.column;
      var elContainer = oEditor.container;
      var limitValue = oRecord.getData('limit_price');
      var stopValue = oRecord.getData('stop_price');

      // Limit Textbox
      var limitLabel =
      elContainer.appendChild(document.createElement("span"));
      limitLabel.innerHTML = 'Limit:';
      var limitTextbox =
      elContainer.appendChild(document.createElement("input"));
      limitTextbox.type = "text";
      limitTextbox.style.width = (elCell.offsetWidth + 20) + "px";
      limitTextbox.value = limitValue;

      elContainer.appendChild(document.createElement("br"));

      // Stop Textbox
      var stopLable =
      elContainer.appendChild(document.createElement("span"));
      stopLable.innerHTML = 'Stop:';
      var stopTextBox =
      elContainer.appendChild(document.createElement("input"));
      stopTextBox.type = "text";
      stopTextBox.style.width = (elCell.offsetWidth + 20) + "px";
      stopTextBox.value = stopValue;

      // Select the text
      limitTextbox.select();
      };

      this.formatPrice = function(elCell, oRecord, oColumn, oData) {

      console.log("Column :"+oColumn);
      console.log("Data :"+oData);
      var limitPrice = (oRecord.getData("limit_price"));
      var stopPrice = (oRecord.getData("stop_price"));
      console.log("Record, LimitPrice :"+limitPrice+", Stop Price
      :"+stopPrice);
      var order_price = 'Market';
      if (limitPrice != '') {
      order_price = "Limit: " + limitPrice;
      if (stopPrice != '') {
      order_price += "<br>Stop: " + stopPrice;
      }
      } else if (stopPrice != '') {
      order_price = "Stop: " + stopPrice;
      }
      console.log('Format Price :'+order_price);
      elCell.innerHTML = order_price;
      };

      var myColumnDefs = [
      {key:"checked", label:"<input type='checkbox'
      onclick='toggleSelect(this);'>", sortable:false, resizeable:false,
      formatter:YAHOO.widget.DataTable.formatCheckbox},
      {key:"account", label:"Account", sortable:false,
      resizeable:false, editor:"textbox",
      editorOptions:{validator:YAHOO.widget.DataTable.validateNumber}},
      {key:"ordertype", label:"Order", sortable:false,
      resizeable:false, editor:"dropdown",
      editorOptions:{dropdownOptions:['Buy', 'Sell']}},
      {key:"quantity", label:"Quantity", sortable:false,
      resizeable:false, editor:"textbox",
      editorOptions:{validator:YAHOO.widget.DataTable.validateNumber}},
      {key:"symbol", label:"Symbol", sortable:false, resizeable:false,
      editor:"textbox"},
      {key:"account_type", label:"Account Type", sortable:false,
      resizeable:false, editor:"dropdown",
      editorOptions:{dropdownOptions:['Cash', 'Margin']}},
      {label:"Price",formatter:this.formatPrice, sortable:false,
      resizeable:false, editor:this.editPrice},
      {key:"duration", label:"Duration", sortable:false,
      resizeable:false, editor:"dropdown",
      editorOptions:{dropdownOptions:['Day Only', 'GTC']}},
      {key:"qualifier", label:"Qualifier", sortable:false,
      resizeable:false, editor:"dropdown",
      editorOptions:{dropdownOptions:['ALL','AON']}},
      {key:"unsolicited", label:"Unsol.", sortable:false,
      resizeable:false, editor:"dropdown",
      editorOptions:{dropdownOptions:['Yes', 'No']}}
      ];

      this.myDataTable = new YAHOO.widget.DataTable("trades",
      myColumnDefs, this.myDataSource, {MSG_EMPTY:'none'});
      var headEl = new YAHOO.util.Element('yui-dt0-hdrow0');
      headEl.addClass('tableheading');

      // Set up editing flow
      this.highlightEditableCell = function(oArgs) {
      var elCell = oArgs.target;
      if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) {
      this.highlightCell(elCell);
      }
      };

      this.myDataTable.subscribe("cellMouseoverEvent",
      this.highlightEditableCell);
      this.myDataTable.subscribe("cellMouseoutEvent",
      this.myDataTable.onEventUnhighlightCell);
      this.myDataTable.subscribe("cellClickEvent",
      this.myDataTable.onEventShowCellEditor);

      this.myDataTable.subscribe("editorSaveEvent", function(oArgs) {
      console.log(oArgs);
      if (oArgs.editor.column.key == 'symbol' || oArgs.editor.column.key
      == 'quantity') {
      generateSummary();
      }

      var oEditor = oArgs.editor;
      var newData = oArgs.newData;
      var oldData = oArgs.oldData;
      console.log("Editor :"+oEditor.column.getKey()+", newData
      :"+newData+", oldData :"+oldData);

      });

      this.myDataTable.onEventShowCellEditor = function(oArgs) {
      alert('test');
      };

      // this.myDataTable.doBeforeShowCellEditor = function(oCellEditor) {
      // console.log(new
      YAHOO.util.Element(oCellEditor.container).getElementsByClassName('yui-dt-button'\
      ));
      // alert('test');
      // console.log(oCellEditor);
      // };

      this.myDataTable.subscribe("editorBlurEvent", function(oArgs) {
      this.cancelCellEditor();
      });

      this.myDataTable.subscribe("checkboxClickEvent", function(oArgs) {
      console.log(oArgs);
      var elCheckbox = oArgs.target;
      var elRecord = this.getRecord(elCheckbox);
      if (elCheckbox.checked) {
      elRecord.setData("checked", 'true');
      this.selectRow(elRecord);
      } else {
      elRecord.setData("checked", 'false');
      this.unselectRow(elRecord);
      }
      });
      };

      I need to display the values of the two columns edited in one cell of
      the Data Table.

      thanks,
      Raja
    Your message has been successfully submitted and would be delivered to recipients shortly.