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

YUI - Datatable DropdownCellEditor Issue fix

Expand Messages
  • franklin.7707
    I am not sure, if some one has already done a fix for this. As we already know that if we edit a cell using a dropdowncelleditor, the value gets displayed in
    Message 1 of 8 , Jul 30, 2009
    • 0 Attachment
      I am not sure, if some one has already done a fix for this. As we already know that if we edit a cell using a dropdowncelleditor, the value gets displayed in the cell instead of displaying the label description. As an example, for a list like 1:Employee 2:Spouse 3:Child 4:Parent 5:Others, if we select an option, the numeric value gets displayed in the respective cell. I have gone through the 'datatable-debug.js' and modified the relevant scripts, to make it behave as expected.

      The problem here is there a two sets of records maintained. One is the recordset, which will be the data that is actually used (for example, saving in the database while inline editing). So for this we need the value of the dropdown. The other data is the one which is rendered in the screen as contents in the table. I have made a few changes to this.

      Below is what I have done

      1. We already have a getInputValue() function defined similar to other cell editors. I added a method getDescription() defined as below

      getDescription : function() {
      var desc = this.dropdown.options[this.dropdown.options.selectedIndex].text;
      return desc;
      }


      2. In the save method, I add the following code
      var editorName = this._sId;

      if(editorName.length>=19){
      if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
      inputValue = this.getInputValue();
      validValue = this.getDescription();
      }
      }

      and the existing line
      oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);

      is replaced with
      if(editorName.length>=19){
      if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
      oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), inputValue);
      }else{
      oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
      }
      }


      3. Then in the formatCell: function(), find what type of cell editor is being used.
      var celleditor = this.getCellEditor();

      4. The data object 'oData', will hold the value by default. But we need the oData to hold description rather than value. But we want to do this only when the editor is a dropdown. Also, the formatCell is called when the table is rendered. We should not do anything at that time. So, I added a few lines of code as below
      if(celleditor!=null){
      if(celleditor._sId.length>=19){
      if(celleditor._sId.substring(0,(19)) == 'yui-dropdownceditor'){
      oData = celleditor.getDescription();
      }
      }
      }else{
      oColumn = this.getColumn(elCell);
      var obj = oColumn.editor;
      if(obj!=null){
      if(obj._sId.length>=19){
      if(obj._sId.substring(0,(19)) == 'yui-dropdownceditor'){
      for (var i = 0; i < obj.dropdown.length; i++){
      if(obj.dropdown.options[i].value == oData){
      oData = obj.dropdown.options[i].text;
      }
      }
      }
      }
      }
      }

      I have tested this to some extent and found that it does not affect any other function/usecase.
      Since, I am new to this forum, I am yet to find a way to attach the js file. Below, I am providing the complete code for the changed methods

      ***************************************************************************

      getDescription : function() {
      var desc = this.dropdown.options[this.dropdown.options.selectedIndex].text;
      return desc;
      }

      ***************************************************************************

      save : function() {
      // Get new value
      var inputValue = this.getInputValue();
      var validValue = inputValue;

      var editorName = this._sId;

      if(editorName.length>=19){
      if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
      inputValue = this.getInputValue();
      validValue = this.getDescription();
      }
      }

      // Validate new value

      if(this.validator) {
      validValue = this.validator.call(this.getDataTable(), inputValue, this.value, this);
      if(validValue === undefined ) {
      if(this.resetInvalidData) {
      this.resetForm();
      }
      this.fireEvent("invalidDataEvent",
      {editor:this, oldData:this.value, newData:inputValue});
      YAHOO.log("Could not save Cell Editor input due to invalid data " +
      lang.dump(inputValue), "warn", this.toString());
      return;
      }
      }

      var oSelf = this;
      var finishSave = function(bSuccess, oNewValue) {
      var oOrigValue = oSelf.value;
      if(bSuccess) {
      // Update new value
      oSelf.value = oNewValue;

      if(editorName.length>=19){
      if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
      oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), inputValue);
      }else{
      oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
      }
      }

      // Hide CellEditor
      oSelf.getContainerEl().style.display = "none";
      oSelf.isActive = false;
      oSelf.getDataTable()._oCellEditor = null;

      oSelf.fireEvent("saveEvent",
      {editor:oSelf, oldData:oOrigValue, newData:oSelf.value});
      YAHOO.log("Cell Editor input saved", "info", this.toString());
      }
      else {
      oSelf.resetForm();
      oSelf.fireEvent("revertEvent",
      {editor:oSelf, oldData:oOrigValue, newData:oNewValue});
      YAHOO.log("Could not save Cell Editor input " +
      lang.dump(oNewValue), "warn", oSelf.toString());
      }
      oSelf.unblock();
      };

      this.block();
      if(lang.isFunction(this.asyncSubmitter)) {
      this.asyncSubmitter.call(this, finishSave, validValue);
      }
      else {
      finishSave(true, validValue);
      }
      },

      ***************************************************************************

      formatCell : function(elCell, oRecord, oColumn) {

      if(!oRecord) {
      oRecord = this.getRecord(elCell);
      }
      if(!oColumn) {
      oColumn = this.getColumn(elCell.parentNode.cellIndex);
      }
      var celleditor = this.getCellEditor();

      if(oRecord && oColumn) {
      var sField = oColumn.field;
      var oData = oRecord.getData(sField);
      if(celleditor!=null){
      if(celleditor._sId.length>=19){
      if(celleditor._sId.substring(0,(19)) == 'yui-dropdownceditor'){
      oData = celleditor.getDescription();
      }
      }
      }else{
      oColumn = this.getColumn(elCell);
      var obj = oColumn.editor;
      if(obj!=null){
      if(obj._sId.length>=19){
      if(obj._sId.substring(0,(19)) == 'yui-dropdownceditor'){
      //oData = obj.getDescription();
      for (var i = 0; i < obj.dropdown.length; i++){
      if(obj.dropdown.options[i].value == oData){
      oData = obj.dropdown.options[i].text;
      }
      }

      }else{

      }
      }
      }
      }

      var fnFormatter = typeof oColumn.formatter === 'function' ?
      oColumn.formatter :
      DT.Formatter[oColumn.formatter+''] ||
      DT.Formatter.defaultFormatter;

      // Apply special formatter
      if(fnFormatter) {
      fnFormatter.call(this, elCell, oRecord, oColumn, oData);
      }
      else {
      elCell.innerHTML = oData;
      }

      this.fireEvent("cellFormatEvent", {record:oRecord, column:oColumn, key:oColumn.key, el:elCell});
      }
      else {
      YAHOO.log("Could not format cell " + elCell, "error", this.toString());
      }
      },

      ***************************************************************************
    • Ryan V. Bayona
      I solved this problem by subscribing to the editorSaveEvent. If these event fires up, the code will check if the editor is a dropdown editor and then it get
      Message 2 of 8 , Jul 30, 2009
      • 0 Attachment
        I solved this problem by subscribing to the editorSaveEvent. If these
        event fires up, the code will check if the editor is a dropdown editor
        and then it get the selected values (the option element). The OPTION
        element returns two things , the value (in this case numeric) and the
        text (the one that is seen on the dropdown). And then it updates the
        target cell..

        The next thing is I have a doBeforeShowCellEditor function which gets
        the text value stored in the recordset (for the target cell) and then
        loops through the OPTION elements of the dropdown cell editor and if it
        finds a match , sets the matching OPTION element to 'selected'..'

        //utility to get the selected option
        function getSelectedOption (select){
        return select.options[select.selectedIndex];
        }

        MyDataTable.subscribe("editorSaveEvent",function (obj){
        var rec = obj.editor.getRecord();
        if(obj.editor.dropdown){
        var data = getSelectedOption(obj.editor.dropdown);
        var value = data.value;
        var text = data.text;

        rec.setData(obj.editor.getColumn().key ,text);
        //update the contents of the cell with the text
        this.updateCell(rec,obj.editor.getColumn().key,text);

        }else{
        rec.setData(obj.editor.getColumn().key,obj.newData);
        this.updateCell(rec,obj.editor.getColumn().key,obj.newData);
        }
        });

        MyDataTable.doBeforeShowCellEditor = function(cellEditor) {
        var el = cellEditor.getContainerEl();
        if(cellEditor.dropdown){
        cellEditor.resetForm();
        /*sets the cell editor's value to the currently selected
        key*/
        var cell_data = cellEditor.getRecord().getData();
        $A(cellEditor.dropdown.options).each(function (o,i){
        cellEditor.dropdown.options[i].selected = false;

        if(!YAHOO.lang.isNull(cell_data[cellEditor.getColumn().key])){
        if(o.text.strip() ==
        cellEditor.getRecord().getData(cellEditor.getColumn().key).strip()){
        cellEditor.dropdown.options[i].selected = true;
        }
        }
        });
        }
        return true;
        };
      • Satyam
        A less intrusive solution would be to provide an extra formatter, let is call it formatLookup that can display values based on any lookup table, be it the
        Message 3 of 8 , Jul 31, 2009
        • 0 Attachment
          A less intrusive solution would be to provide an extra formatter, let is
          call it formatLookup that can display values based on any lookup table,
          be it the value:text values of a dropdown or any other sort of encoded
          data.

          YAHOO.widget.DataTable.formatLookup = function(elCell, oRecord,
          oColumn, oData) {
          var lookupTable = oColumn.lookupTable;
          if (YAHOO.lang.isArray(lookupTable)) {
          for (var i = 0; i < lookupTable.length; i++) {
          if (lookupTable[i].value === oData) {
          elCell.innerHTML = lookupTable[i].label;
          return;
          }
          }
          }
          elCell.innerHTML = oData || ""; // if oData is null, show a blank.
          };

          YAHOO.widget.DataTable.Formatter.lookup =
          YAHOO.widget.DataTable.formatLookup;

          If the lookup table is not an array or if the value is not found, the
          raw oData will be shown.

          If you have your dropdown options in a variable like myDropdownOptions,
          then the column could be defined:

          { key:'dropdown',formatter:'lookup', lookupTable:myDropdownOptions,
          editor: new
          YAHOO.widget.DropdownCellEditor(dropdownOptions:myDropdownOptions, ...),
          ...}

          You could use the same lookup table for both or use different ones, thus
          allowing an entry such as "--- Please select on ----" on the editor and
          not have it on the display, which might be blank.

          The above has not been tested.

          Satyam


          franklin.7707 escribió:
          > I am not sure, if some one has already done a fix for this. As we already know that if we edit a cell using a dropdowncelleditor, the value gets displayed in the cell instead of displaying the label description. As an example, for a list like 1:Employee 2:Spouse 3:Child 4:Parent 5:Others, if we select an option, the numeric value gets displayed in the respective cell. I have gone through the 'datatable-debug.js' and modified the relevant scripts, to make it behave as expected.
          >
          > The problem here is there a two sets of records maintained. One is the recordset, which will be the data that is actually used (for example, saving in the database while inline editing). So for this we need the value of the dropdown. The other data is the one which is rendered in the screen as contents in the table. I have made a few changes to this.
          >
          > Below is what I have done
          >
          > 1. We already have a getInputValue() function defined similar to other cell editors. I added a method getDescription() defined as below
          >
          > getDescription : function() {
          > var desc = this.dropdown.options[this.dropdown.options.selectedIndex].text;
          > return desc;
          > }
          >
          >
          > 2. In the save method, I add the following code
          > var editorName = this._sId;
          >
          > if(editorName.length>=19){
          > if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
          > inputValue = this.getInputValue();
          > validValue = this.getDescription();
          > }
          > }
          >
          > and the existing line
          > oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
          >
          > is replaced with
          > if(editorName.length>=19){
          > if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
          > oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), inputValue);
          > }else{
          > oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
          > }
          > }
          >
          >
          > 3. Then in the formatCell: function(), find what type of cell editor is being used.
          > var celleditor = this.getCellEditor();
          >
          > 4. The data object 'oData', will hold the value by default. But we need the oData to hold description rather than value. But we want to do this only when the editor is a dropdown. Also, the formatCell is called when the table is rendered. We should not do anything at that time. So, I added a few lines of code as below
          > if(celleditor!=null){
          > if(celleditor._sId.length>=19){
          > if(celleditor._sId.substring(0,(19)) == 'yui-dropdownceditor'){
          > oData = celleditor.getDescription();
          > }
          > }
          > }else{
          > oColumn = this.getColumn(elCell);
          > var obj = oColumn.editor;
          > if(obj!=null){
          > if(obj._sId.length>=19){
          > if(obj._sId.substring(0,(19)) == 'yui-dropdownceditor'){
          > for (var i = 0; i < obj.dropdown.length; i++){
          > if(obj.dropdown.options[i].value == oData){
          > oData = obj.dropdown.options[i].text;
          > }
          > }
          > }
          > }
          > }
          > }
          >
          > I have tested this to some extent and found that it does not affect any other function/usecase.
          > Since, I am new to this forum, I am yet to find a way to attach the js file. Below, I am providing the complete code for the changed methods
          >
          > ***************************************************************************
          >
          > getDescription : function() {
          > var desc = this.dropdown.options[this.dropdown.options.selectedIndex].text;
          > return desc;
          > }
          >
          > ***************************************************************************
          >
          > save : function() {
          > // Get new value
          > var inputValue = this.getInputValue();
          > var validValue = inputValue;
          >
          > var editorName = this._sId;
          >
          > if(editorName.length>=19){
          > if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
          > inputValue = this.getInputValue();
          > validValue = this.getDescription();
          > }
          > }
          >
          > // Validate new value
          >
          > if(this.validator) {
          > validValue = this.validator.call(this.getDataTable(), inputValue, this.value, this);
          > if(validValue === undefined ) {
          > if(this.resetInvalidData) {
          > this.resetForm();
          > }
          > this.fireEvent("invalidDataEvent",
          > {editor:this, oldData:this.value, newData:inputValue});
          > YAHOO.log("Could not save Cell Editor input due to invalid data " +
          > lang.dump(inputValue), "warn", this.toString());
          > return;
          > }
          > }
          >
          > var oSelf = this;
          > var finishSave = function(bSuccess, oNewValue) {
          > var oOrigValue = oSelf.value;
          > if(bSuccess) {
          > // Update new value
          > oSelf.value = oNewValue;
          >
          > if(editorName.length>=19){
          > if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
          > oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), inputValue);
          > }else{
          > oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
          > }
          > }
          >
          > // Hide CellEditor
          > oSelf.getContainerEl().style.display = "none";
          > oSelf.isActive = false;
          > oSelf.getDataTable()._oCellEditor = null;
          >
          > oSelf.fireEvent("saveEvent",
          > {editor:oSelf, oldData:oOrigValue, newData:oSelf.value});
          > YAHOO.log("Cell Editor input saved", "info", this.toString());
          > }
          > else {
          > oSelf.resetForm();
          > oSelf.fireEvent("revertEvent",
          > {editor:oSelf, oldData:oOrigValue, newData:oNewValue});
          > YAHOO.log("Could not save Cell Editor input " +
          > lang.dump(oNewValue), "warn", oSelf.toString());
          > }
          > oSelf.unblock();
          > };
          >
          > this.block();
          > if(lang.isFunction(this.asyncSubmitter)) {
          > this.asyncSubmitter.call(this, finishSave, validValue);
          > }
          > else {
          > finishSave(true, validValue);
          > }
          > },
          >
          > ***************************************************************************
          >
          > formatCell : function(elCell, oRecord, oColumn) {
          >
          > if(!oRecord) {
          > oRecord = this.getRecord(elCell);
          > }
          > if(!oColumn) {
          > oColumn = this.getColumn(elCell.parentNode.cellIndex);
          > }
          > var celleditor = this.getCellEditor();
          >
          > if(oRecord && oColumn) {
          > var sField = oColumn.field;
          > var oData = oRecord.getData(sField);
          > if(celleditor!=null){
          > if(celleditor._sId.length>=19){
          > if(celleditor._sId.substring(0,(19)) == 'yui-dropdownceditor'){
          > oData = celleditor.getDescription();
          > }
          > }
          > }else{
          > oColumn = this.getColumn(elCell);
          > var obj = oColumn.editor;
          > if(obj!=null){
          > if(obj._sId.length>=19){
          > if(obj._sId.substring(0,(19)) == 'yui-dropdownceditor'){
          > //oData = obj.getDescription();
          > for (var i = 0; i < obj.dropdown.length; i++){
          > if(obj.dropdown.options[i].value == oData){
          > oData = obj.dropdown.options[i].text;
          > }
          > }
          >
          > }else{
          >
          > }
          > }
          > }
          > }
          >
          > var fnFormatter = typeof oColumn.formatter === 'function' ?
          > oColumn.formatter :
          > DT.Formatter[oColumn.formatter+''] ||
          > DT.Formatter.defaultFormatter;
          >
          > // Apply special formatter
          > if(fnFormatter) {
          > fnFormatter.call(this, elCell, oRecord, oColumn, oData);
          > }
          > else {
          > elCell.innerHTML = oData;
          > }
          >
          > this.fireEvent("cellFormatEvent", {record:oRecord, column:oColumn, key:oColumn.key, el:elCell});
          > }
          > else {
          > YAHOO.log("Could not format cell " + elCell, "error", this.toString());
          > }
          > },
          >
          > ***************************************************************************
          >
          >
          >
          > ------------------------------------
          >
          > Yahoo! Groups Links
          >
          >
          >
          > ------------------------------------------------------------------------
          >
          >
          > No virus found in this incoming message.
          > Checked by AVG - www.avg.com
          > Version: 8.5.392 / Virus Database: 270.13.36/2272 - Release Date: 07/30/09 05:58:00
          >
          >
        • Ryan V. Bayona
          In my approach, i also added a new property in the column definitions named idHolder, where the value of the OPTION element gets stored. {key:
          Message 4 of 8 , Jul 31, 2009
          • 0 Attachment
            In my approach, i also added a new property in the column definitions named idHolder, where the value of the OPTION element gets stored.

            {key: 'fieldname',idHolder: 'fieldID'}

            Thanks Satyam for showing us another way to do this :)


            --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
            >
            > A less intrusive solution would be to provide an extra formatter, let is
            > call it formatLookup that can display values based on any lookup table,
            > be it the value:text values of a dropdown or any other sort of encoded
            > data.
            >
            > YAHOO.widget.DataTable.formatLookup = function(elCell, oRecord,
            > oColumn, oData) {
            > var lookupTable = oColumn.lookupTable;
            > if (YAHOO.lang.isArray(lookupTable)) {
            > for (var i = 0; i < lookupTable.length; i++) {
            > if (lookupTable[i].value === oData) {
            > elCell.innerHTML = lookupTable[i].label;
            > return;
            > }
            > }
            > }
            > elCell.innerHTML = oData || ""; // if oData is null, show a blank.
            > };
            >
            > YAHOO.widget.DataTable.Formatter.lookup =
            > YAHOO.widget.DataTable.formatLookup;
            >
            > If the lookup table is not an array or if the value is not found, the
            > raw oData will be shown.
            >
            > If you have your dropdown options in a variable like myDropdownOptions,
            > then the column could be defined:
            >
            > { key:'dropdown',formatter:'lookup', lookupTable:myDropdownOptions,
            > editor: new
            > YAHOO.widget.DropdownCellEditor(dropdownOptions:myDropdownOptions, ...),
            > ...}
            >
            > You could use the same lookup table for both or use different ones, thus
            > allowing an entry such as "--- Please select on ----" on the editor and
            > not have it on the display, which might be blank.
            >
            > The above has not been tested.
            >
            > Satyam
            >
            >
            > franklin.7707 escribió:
            > > I am not sure, if some one has already done a fix for this. As we already know that if we edit a cell using a dropdowncelleditor, the value gets displayed in the cell instead of displaying the label description. As an example, for a list like 1:Employee 2:Spouse 3:Child 4:Parent 5:Others, if we select an option, the numeric value gets displayed in the respective cell. I have gone through the 'datatable-debug.js' and modified the relevant scripts, to make it behave as expected.
            > >
            > > The problem here is there a two sets of records maintained. One is the recordset, which will be the data that is actually used (for example, saving in the database while inline editing). So for this we need the value of the dropdown. The other data is the one which is rendered in the screen as contents in the table. I have made a few changes to this.
            > >
            > > Below is what I have done
            > >
            > > 1. We already have a getInputValue() function defined similar to other cell editors. I added a method getDescription() defined as below
            > >
            > > getDescription : function() {
            > > var desc = this.dropdown.options[this.dropdown.options.selectedIndex].text;
            > > return desc;
            > > }
            > >
            > >
            > > 2. In the save method, I add the following code
            > > var editorName = this._sId;
            > >
            > > if(editorName.length>=19){
            > > if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
            > > inputValue = this.getInputValue();
            > > validValue = this.getDescription();
            > > }
            > > }
            > >
            > > and the existing line
            > > oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
            > >
            > > is replaced with
            > > if(editorName.length>=19){
            > > if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
            > > oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), inputValue);
            > > }else{
            > > oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
            > > }
            > > }
            > >
            > >
            > > 3. Then in the formatCell: function(), find what type of cell editor is being used.
            > > var celleditor = this.getCellEditor();
            > >
            > > 4. The data object 'oData', will hold the value by default. But we need the oData to hold description rather than value. But we want to do this only when the editor is a dropdown. Also, the formatCell is called when the table is rendered. We should not do anything at that time. So, I added a few lines of code as below
            > > if(celleditor!=null){
            > > if(celleditor._sId.length>=19){
            > > if(celleditor._sId.substring(0,(19)) == 'yui-dropdownceditor'){
            > > oData = celleditor.getDescription();
            > > }
            > > }
            > > }else{
            > > oColumn = this.getColumn(elCell);
            > > var obj = oColumn.editor;
            > > if(obj!=null){
            > > if(obj._sId.length>=19){
            > > if(obj._sId.substring(0,(19)) == 'yui-dropdownceditor'){
            > > for (var i = 0; i < obj.dropdown.length; i++){
            > > if(obj.dropdown.options[i].value == oData){
            > > oData = obj.dropdown.options[i].text;
            > > }
            > > }
            > > }
            > > }
            > > }
            > > }
            > >
            > > I have tested this to some extent and found that it does not affect any other function/usecase.
            > > Since, I am new to this forum, I am yet to find a way to attach the js file. Below, I am providing the complete code for the changed methods
            > >
            > > ***************************************************************************
            > >
            > > getDescription : function() {
            > > var desc = this.dropdown.options[this.dropdown.options.selectedIndex].text;
            > > return desc;
            > > }
            > >
            > > ***************************************************************************
            > >
            > > save : function() {
            > > // Get new value
            > > var inputValue = this.getInputValue();
            > > var validValue = inputValue;
            > >
            > > var editorName = this._sId;
            > >
            > > if(editorName.length>=19){
            > > if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
            > > inputValue = this.getInputValue();
            > > validValue = this.getDescription();
            > > }
            > > }
            > >
            > > // Validate new value
            > >
            > > if(this.validator) {
            > > validValue = this.validator.call(this.getDataTable(), inputValue, this.value, this);
            > > if(validValue === undefined ) {
            > > if(this.resetInvalidData) {
            > > this.resetForm();
            > > }
            > > this.fireEvent("invalidDataEvent",
            > > {editor:this, oldData:this.value, newData:inputValue});
            > > YAHOO.log("Could not save Cell Editor input due to invalid data " +
            > > lang.dump(inputValue), "warn", this.toString());
            > > return;
            > > }
            > > }
            > >
            > > var oSelf = this;
            > > var finishSave = function(bSuccess, oNewValue) {
            > > var oOrigValue = oSelf.value;
            > > if(bSuccess) {
            > > // Update new value
            > > oSelf.value = oNewValue;
            > >
            > > if(editorName.length>=19){
            > > if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
            > > oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), inputValue);
            > > }else{
            > > oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
            > > }
            > > }
            > >
            > > // Hide CellEditor
            > > oSelf.getContainerEl().style.display = "none";
            > > oSelf.isActive = false;
            > > oSelf.getDataTable()._oCellEditor = null;
            > >
            > > oSelf.fireEvent("saveEvent",
            > > {editor:oSelf, oldData:oOrigValue, newData:oSelf.value});
            > > YAHOO.log("Cell Editor input saved", "info", this.toString());
            > > }
            > > else {
            > > oSelf.resetForm();
            > > oSelf.fireEvent("revertEvent",
            > > {editor:oSelf, oldData:oOrigValue, newData:oNewValue});
            > > YAHOO.log("Could not save Cell Editor input " +
            > > lang.dump(oNewValue), "warn", oSelf.toString());
            > > }
            > > oSelf.unblock();
            > > };
            > >
            > > this.block();
            > > if(lang.isFunction(this.asyncSubmitter)) {
            > > this.asyncSubmitter.call(this, finishSave, validValue);
            > > }
            > > else {
            > > finishSave(true, validValue);
            > > }
            > > },
            > >
            > > ***************************************************************************
            > >
            > > formatCell : function(elCell, oRecord, oColumn) {
            > >
            > > if(!oRecord) {
            > > oRecord = this.getRecord(elCell);
            > > }
            > > if(!oColumn) {
            > > oColumn = this.getColumn(elCell.parentNode.cellIndex);
            > > }
            > > var celleditor = this.getCellEditor();
            > >
            > > if(oRecord && oColumn) {
            > > var sField = oColumn.field;
            > > var oData = oRecord.getData(sField);
            > > if(celleditor!=null){
            > > if(celleditor._sId.length>=19){
            > > if(celleditor._sId.substring(0,(19)) == 'yui-dropdownceditor'){
            > > oData = celleditor.getDescription();
            > > }
            > > }
            > > }else{
            > > oColumn = this.getColumn(elCell);
            > > var obj = oColumn.editor;
            > > if(obj!=null){
            > > if(obj._sId.length>=19){
            > > if(obj._sId.substring(0,(19)) == 'yui-dropdownceditor'){
            > > //oData = obj.getDescription();
            > > for (var i = 0; i < obj.dropdown.length; i++){
            > > if(obj.dropdown.options[i].value == oData){
            > > oData = obj.dropdown.options[i].text;
            > > }
            > > }
            > >
            > > }else{
            > >
            > > }
            > > }
            > > }
            > > }
            > >
            > > var fnFormatter = typeof oColumn.formatter === 'function' ?
            > > oColumn.formatter :
            > > DT.Formatter[oColumn.formatter+''] ||
            > > DT.Formatter.defaultFormatter;
            > >
            > > // Apply special formatter
            > > if(fnFormatter) {
            > > fnFormatter.call(this, elCell, oRecord, oColumn, oData);
            > > }
            > > else {
            > > elCell.innerHTML = oData;
            > > }
            > >
            > > this.fireEvent("cellFormatEvent", {record:oRecord, column:oColumn, key:oColumn.key, el:elCell});
            > > }
            > > else {
            > > YAHOO.log("Could not format cell " + elCell, "error", this.toString());
            > > }
            > > },
            > >
            > > ***************************************************************************
            > >
            > >
            > >
            > > ------------------------------------
            > >
            > > Yahoo! Groups Links
            > >
            > >
            > >
            > > ------------------------------------------------------------------------
            > >
            > >
            > > No virus found in this incoming message.
            > > Checked by AVG - www.avg.com
            > > Version: 8.5.392 / Virus Database: 270.13.36/2272 - Release Date: 07/30/09 05:58:00
            > >
            > >
            >
          • Satyam
            ... Aren t we all learning from each other? That s why this is a forum and that s why I am here for. When I first saw Douglas Crockford s videos about
            Message 5 of 8 , Jul 31, 2009
            • 0 Attachment
              Ryan V. Bayona escribió:
              > In my approach, i also added a new property in the column definitions named idHolder, where the value of the OPTION element gets stored.
              >
              > {key: 'fieldname',idHolder: 'fieldID'}
              >
              > Thanks Satyam for showing us another way to do this :)
              >

              Aren't we all learning from each other? That's why this is a forum and
              that's why I am here for. When I first saw Douglas Crockford's videos
              about JavaScript, I thought there was a bunch of things I didn't know
              and were worth learning. That's what got me here in the first place, and
              I haven't stopped learning yet. And it would be selfish not to share
              them, wouldn't it?

              I came up with an improvement, the first line of the formatter can read:

              var lookupTable = oColumn.lookupTable || ((editor instanceof
              YAHOO.widget.DropdownCellEditor) && editor.dropdownOptions);

              So, if the options are to be the same and there is an editor, read it
              from the editor.

              Anyway, this is all theory so far because I haven't tested it yet.

              Satyam

              >
              > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
              >
              >> A less intrusive solution would be to provide an extra formatter, let is
              >> call it formatLookup that can display values based on any lookup table,
              >> be it the value:text values of a dropdown or any other sort of encoded
              >> data.
              >>
              >> YAHOO.widget.DataTable.formatLookup = function(elCell, oRecord,
              >> oColumn, oData) {
              >> var lookupTable = oColumn.lookupTable;
              >> if (YAHOO.lang.isArray(lookupTable)) {
              >> for (var i = 0; i < lookupTable.length; i++) {
              >> if (lookupTable[i].value === oData) {
              >> elCell.innerHTML = lookupTable[i].label;
              >> return;
              >> }
              >> }
              >> }
              >> elCell.innerHTML = oData || ""; // if oData is null, show a blank.
              >> };
              >>
              >> YAHOO.widget.DataTable.Formatter.lookup =
              >> YAHOO.widget.DataTable.formatLookup;
              >>
              >> If the lookup table is not an array or if the value is not found, the
              >> raw oData will be shown.
              >>
              >> If you have your dropdown options in a variable like myDropdownOptions,
              >> then the column could be defined:
              >>
              >> { key:'dropdown',formatter:'lookup', lookupTable:myDropdownOptions,
              >> editor: new
              >> YAHOO.widget.DropdownCellEditor(dropdownOptions:myDropdownOptions, ...),
              >> ...}
              >>
              >> You could use the same lookup table for both or use different ones, thus
              >> allowing an entry such as "--- Please select on ----" on the editor and
              >> not have it on the display, which might be blank.
              >>
              >> The above has not been tested.
              >>
              >> Satyam
              >>
              >>
              >> franklin.7707 escribió:
              >>
              >>> I am not sure, if some one has already done a fix for this. As we already know that if we edit a cell using a dropdowncelleditor, the value gets displayed in the cell instead of displaying the label description. As an example, for a list like 1:Employee 2:Spouse 3:Child 4:Parent 5:Others, if we select an option, the numeric value gets displayed in the respective cell. I have gone through the 'datatable-debug.js' and modified the relevant scripts, to make it behave as expected.
              >>>
              >>> The problem here is there a two sets of records maintained. One is the recordset, which will be the data that is actually used (for example, saving in the database while inline editing). So for this we need the value of the dropdown. The other data is the one which is rendered in the screen as contents in the table. I have made a few changes to this.
              >>>
              >>> Below is what I have done
              >>>
              >>> 1. We already have a getInputValue() function defined similar to other cell editors. I added a method getDescription() defined as below
              >>>
              >>> getDescription : function() {
              >>> var desc = this.dropdown.options[this.dropdown.options.selectedIndex].text;
              >>> return desc;
              >>> }
              >>>
              >>>
              >>> 2. In the save method, I add the following code
              >>> var editorName = this._sId;
              >>>
              >>> if(editorName.length>=19){
              >>> if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
              >>> inputValue = this.getInputValue();
              >>> validValue = this.getDescription();
              >>> }
              >>> }
              >>>
              >>> and the existing line
              >>> oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
              >>>
              >>> is replaced with
              >>> if(editorName.length>=19){
              >>> if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
              >>> oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), inputValue);
              >>> }else{
              >>> oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
              >>> }
              >>> }
              >>>
              >>>
              >>> 3. Then in the formatCell: function(), find what type of cell editor is being used.
              >>> var celleditor = this.getCellEditor();
              >>>
              >>> 4. The data object 'oData', will hold the value by default. But we need the oData to hold description rather than value. But we want to do this only when the editor is a dropdown. Also, the formatCell is called when the table is rendered. We should not do anything at that time. So, I added a few lines of code as below
              >>> if(celleditor!=null){
              >>> if(celleditor._sId.length>=19){
              >>> if(celleditor._sId.substring(0,(19)) == 'yui-dropdownceditor'){
              >>> oData = celleditor.getDescription();
              >>> }
              >>> }
              >>> }else{
              >>> oColumn = this.getColumn(elCell);
              >>> var obj = oColumn.editor;
              >>> if(obj!=null){
              >>> if(obj._sId.length>=19){
              >>> if(obj._sId.substring(0,(19)) == 'yui-dropdownceditor'){
              >>> for (var i = 0; i < obj.dropdown.length; i++){
              >>> if(obj.dropdown.options[i].value == oData){
              >>> oData = obj.dropdown.options[i].text;
              >>> }
              >>> }
              >>> }
              >>> }
              >>> }
              >>> }
              >>>
              >>> I have tested this to some extent and found that it does not affect any other function/usecase.
              >>> Since, I am new to this forum, I am yet to find a way to attach the js file. Below, I am providing the complete code for the changed methods
              >>>
              >>> ***************************************************************************
              >>>
              >>> getDescription : function() {
              >>> var desc = this.dropdown.options[this.dropdown.options.selectedIndex].text;
              >>> return desc;
              >>> }
              >>>
              >>> ***************************************************************************
              >>>
              >>> save : function() {
              >>> // Get new value
              >>> var inputValue = this.getInputValue();
              >>> var validValue = inputValue;
              >>>
              >>> var editorName = this._sId;
              >>>
              >>> if(editorName.length>=19){
              >>> if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
              >>> inputValue = this.getInputValue();
              >>> validValue = this.getDescription();
              >>> }
              >>> }
              >>>
              >>> // Validate new value
              >>>
              >>> if(this.validator) {
              >>> validValue = this.validator.call(this.getDataTable(), inputValue, this.value, this);
              >>> if(validValue === undefined ) {
              >>> if(this.resetInvalidData) {
              >>> this.resetForm();
              >>> }
              >>> this.fireEvent("invalidDataEvent",
              >>> {editor:this, oldData:this.value, newData:inputValue});
              >>> YAHOO.log("Could not save Cell Editor input due to invalid data " +
              >>> lang.dump(inputValue), "warn", this.toString());
              >>> return;
              >>> }
              >>> }
              >>>
              >>> var oSelf = this;
              >>> var finishSave = function(bSuccess, oNewValue) {
              >>> var oOrigValue = oSelf.value;
              >>> if(bSuccess) {
              >>> // Update new value
              >>> oSelf.value = oNewValue;
              >>>
              >>> if(editorName.length>=19){
              >>> if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
              >>> oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), inputValue);
              >>> }else{
              >>> oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
              >>> }
              >>> }
              >>>
              >>> // Hide CellEditor
              >>> oSelf.getContainerEl().style.display = "none";
              >>> oSelf.isActive = false;
              >>> oSelf.getDataTable()._oCellEditor = null;
              >>>
              >>> oSelf.fireEvent("saveEvent",
              >>> {editor:oSelf, oldData:oOrigValue, newData:oSelf.value});
              >>> YAHOO.log("Cell Editor input saved", "info", this.toString());
              >>> }
              >>> else {
              >>> oSelf.resetForm();
              >>> oSelf.fireEvent("revertEvent",
              >>> {editor:oSelf, oldData:oOrigValue, newData:oNewValue});
              >>> YAHOO.log("Could not save Cell Editor input " +
              >>> lang.dump(oNewValue), "warn", oSelf.toString());
              >>> }
              >>> oSelf.unblock();
              >>> };
              >>>
              >>> this.block();
              >>> if(lang.isFunction(this.asyncSubmitter)) {
              >>> this.asyncSubmitter.call(this, finishSave, validValue);
              >>> }
              >>> else {
              >>> finishSave(true, validValue);
              >>> }
              >>> },
              >>>
              >>> ***************************************************************************
              >>>
              >>> formatCell : function(elCell, oRecord, oColumn) {
              >>>
              >>> if(!oRecord) {
              >>> oRecord = this.getRecord(elCell);
              >>> }
              >>> if(!oColumn) {
              >>> oColumn = this.getColumn(elCell.parentNode.cellIndex);
              >>> }
              >>> var celleditor = this.getCellEditor();
              >>>
              >>> if(oRecord && oColumn) {
              >>> var sField = oColumn.field;
              >>> var oData = oRecord.getData(sField);
              >>> if(celleditor!=null){
              >>> if(celleditor._sId.length>=19){
              >>> if(celleditor._sId.substring(0,(19)) == 'yui-dropdownceditor'){
              >>> oData = celleditor.getDescription();
              >>> }
              >>> }
              >>> }else{
              >>> oColumn = this.getColumn(elCell);
              >>> var obj = oColumn.editor;
              >>> if(obj!=null){
              >>> if(obj._sId.length>=19){
              >>> if(obj._sId.substring(0,(19)) == 'yui-dropdownceditor'){
              >>> //oData = obj.getDescription();
              >>> for (var i = 0; i < obj.dropdown.length; i++){
              >>> if(obj.dropdown.options[i].value == oData){
              >>> oData = obj.dropdown.options[i].text;
              >>> }
              >>> }
              >>>
              >>> }else{
              >>>
              >>> }
              >>> }
              >>> }
              >>> }
              >>>
              >>> var fnFormatter = typeof oColumn.formatter === 'function' ?
              >>> oColumn.formatter :
              >>> DT.Formatter[oColumn.formatter+''] ||
              >>> DT.Formatter.defaultFormatter;
              >>>
              >>> // Apply special formatter
              >>> if(fnFormatter) {
              >>> fnFormatter.call(this, elCell, oRecord, oColumn, oData);
              >>> }
              >>> else {
              >>> elCell.innerHTML = oData;
              >>> }
              >>>
              >>> this.fireEvent("cellFormatEvent", {record:oRecord, column:oColumn, key:oColumn.key, el:elCell});
              >>> }
              >>> else {
              >>> YAHOO.log("Could not format cell " + elCell, "error", this.toString());
              >>> }
              >>> },
              >>>
              >>> ***************************************************************************
              >>>
              >>>
              >>>
              >>> ------------------------------------
              >>>
              >>> Yahoo! Groups Links
              >>>
              >>>
              >>>
              >>> ------------------------------------------------------------------------
              >>>
              >>>
              >>> No virus found in this incoming message.
              >>> Checked by AVG - www.avg.com
              >>> Version: 8.5.392 / Virus Database: 270.13.36/2272 - Release Date: 07/30/09 05:58:00
              >>>
              >>>
              >>>
              >
              >
              >
              >
              > ------------------------------------
              >
              > Yahoo! Groups Links
              >
              >
              >
              > ------------------------------------------------------------------------
              >
              >
              > No virus found in this incoming message.
              > Checked by AVG - www.avg.com
              > Version: 8.5.392 / Virus Database: 270.13.38/2274 - Release Date: 07/31/09 05:58:00
              >
              >
            • franklin.7707
              Thank you Ryan and Satyam, for showing a very quick and easier solution. I would prefer to approach any of these methods in my project, as I do not have to
              Message 6 of 8 , Aug 4, 2009
              • 0 Attachment
                Thank you Ryan and Satyam, for showing a very quick and easier solution. I would prefer to approach any of these methods in my project, as I do not have to change the primary js files from YUI. But, I would like to know if, I can suggest the changes done in datatable-debug.js to the YUI team, as many developers using YUI, would not require to do all the formatting work.

                --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                >
                >
                >
                > Ryan V. Bayona escribió:
                > > In my approach, i also added a new property in the column definitions named idHolder, where the value of the OPTION element gets stored.
                > >
                > > {key: 'fieldname',idHolder: 'fieldID'}
                > >
                > > Thanks Satyam for showing us another way to do this :)
                > >
                >
                > Aren't we all learning from each other? That's why this is a forum and
                > that's why I am here for. When I first saw Douglas Crockford's videos
                > about JavaScript, I thought there was a bunch of things I didn't know
                > and were worth learning. That's what got me here in the first place, and
                > I haven't stopped learning yet. And it would be selfish not to share
                > them, wouldn't it?
                >
                > I came up with an improvement, the first line of the formatter can read:
                >
                > var lookupTable = oColumn.lookupTable || ((editor instanceof
                > YAHOO.widget.DropdownCellEditor) && editor.dropdownOptions);
                >
                > So, if the options are to be the same and there is an editor, read it
                > from the editor.
                >
                > Anyway, this is all theory so far because I haven't tested it yet.
                >
                > Satyam
                >
                > >
                > > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                > >
                > >> A less intrusive solution would be to provide an extra formatter, let is
                > >> call it formatLookup that can display values based on any lookup table,
                > >> be it the value:text values of a dropdown or any other sort of encoded
                > >> data.
                > >>
                > >> YAHOO.widget.DataTable.formatLookup = function(elCell, oRecord,
                > >> oColumn, oData) {
                > >> var lookupTable = oColumn.lookupTable;
                > >> if (YAHOO.lang.isArray(lookupTable)) {
                > >> for (var i = 0; i < lookupTable.length; i++) {
                > >> if (lookupTable[i].value === oData) {
                > >> elCell.innerHTML = lookupTable[i].label;
                > >> return;
                > >> }
                > >> }
                > >> }
                > >> elCell.innerHTML = oData || ""; // if oData is null, show a blank.
                > >> };
                > >>
                > >> YAHOO.widget.DataTable.Formatter.lookup =
                > >> YAHOO.widget.DataTable.formatLookup;
                > >>
                > >> If the lookup table is not an array or if the value is not found, the
                > >> raw oData will be shown.
                > >>
                > >> If you have your dropdown options in a variable like myDropdownOptions,
                > >> then the column could be defined:
                > >>
                > >> { key:'dropdown',formatter:'lookup', lookupTable:myDropdownOptions,
                > >> editor: new
                > >> YAHOO.widget.DropdownCellEditor(dropdownOptions:myDropdownOptions, ...),
                > >> ...}
                > >>
                > >> You could use the same lookup table for both or use different ones, thus
                > >> allowing an entry such as "--- Please select on ----" on the editor and
                > >> not have it on the display, which might be blank.
                > >>
                > >> The above has not been tested.
                > >>
                > >> Satyam
                > >>
                > >>
                > >> franklin.7707 escribió:
                > >>
                > >>> I am not sure, if some one has already done a fix for this. As we already know that if we edit a cell using a dropdowncelleditor, the value gets displayed in the cell instead of displaying the label description. As an example, for a list like 1:Employee 2:Spouse 3:Child 4:Parent 5:Others, if we select an option, the numeric value gets displayed in the respective cell. I have gone through the 'datatable-debug.js' and modified the relevant scripts, to make it behave as expected.
                > >>>
                > >>> The problem here is there a two sets of records maintained. One is the recordset, which will be the data that is actually used (for example, saving in the database while inline editing). So for this we need the value of the dropdown. The other data is the one which is rendered in the screen as contents in the table. I have made a few changes to this.
                > >>>
                > >>> Below is what I have done
                > >>>
                > >>> 1. We already have a getInputValue() function defined similar to other cell editors. I added a method getDescription() defined as below
                > >>>
                > >>> getDescription : function() {
                > >>> var desc = this.dropdown.options[this.dropdown.options.selectedIndex].text;
                > >>> return desc;
                > >>> }
                > >>>
                > >>>
                > >>> 2. In the save method, I add the following code
                > >>> var editorName = this._sId;
                > >>>
                > >>> if(editorName.length>=19){
                > >>> if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
                > >>> inputValue = this.getInputValue();
                > >>> validValue = this.getDescription();
                > >>> }
                > >>> }
                > >>>
                > >>> and the existing line
                > >>> oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
                > >>>
                > >>> is replaced with
                > >>> if(editorName.length>=19){
                > >>> if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
                > >>> oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), inputValue);
                > >>> }else{
                > >>> oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
                > >>> }
                > >>> }
                > >>>
                > >>>
                > >>> 3. Then in the formatCell: function(), find what type of cell editor is being used.
                > >>> var celleditor = this.getCellEditor();
                > >>>
                > >>> 4. The data object 'oData', will hold the value by default. But we need the oData to hold description rather than value. But we want to do this only when the editor is a dropdown. Also, the formatCell is called when the table is rendered. We should not do anything at that time. So, I added a few lines of code as below
                > >>> if(celleditor!=null){
                > >>> if(celleditor._sId.length>=19){
                > >>> if(celleditor._sId.substring(0,(19)) == 'yui-dropdownceditor'){
                > >>> oData = celleditor.getDescription();
                > >>> }
                > >>> }
                > >>> }else{
                > >>> oColumn = this.getColumn(elCell);
                > >>> var obj = oColumn.editor;
                > >>> if(obj!=null){
                > >>> if(obj._sId.length>=19){
                > >>> if(obj._sId.substring(0,(19)) == 'yui-dropdownceditor'){
                > >>> for (var i = 0; i < obj.dropdown.length; i++){
                > >>> if(obj.dropdown.options[i].value == oData){
                > >>> oData = obj.dropdown.options[i].text;
                > >>> }
                > >>> }
                > >>> }
                > >>> }
                > >>> }
                > >>> }
                > >>>
                > >>> I have tested this to some extent and found that it does not affect any other function/usecase.
                > >>> Since, I am new to this forum, I am yet to find a way to attach the js file. Below, I am providing the complete code for the changed methods
                > >>>
                > >>> ***************************************************************************
                > >>>
                > >>> getDescription : function() {
                > >>> var desc = this.dropdown.options[this.dropdown.options.selectedIndex].text;
                > >>> return desc;
                > >>> }
                > >>>
                > >>> ***************************************************************************
                > >>>
                > >>> save : function() {
                > >>> // Get new value
                > >>> var inputValue = this.getInputValue();
                > >>> var validValue = inputValue;
                > >>>
                > >>> var editorName = this._sId;
                > >>>
                > >>> if(editorName.length>=19){
                > >>> if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
                > >>> inputValue = this.getInputValue();
                > >>> validValue = this.getDescription();
                > >>> }
                > >>> }
                > >>>
                > >>> // Validate new value
                > >>>
                > >>> if(this.validator) {
                > >>> validValue = this.validator.call(this.getDataTable(), inputValue, this.value, this);
                > >>> if(validValue === undefined ) {
                > >>> if(this.resetInvalidData) {
                > >>> this.resetForm();
                > >>> }
                > >>> this.fireEvent("invalidDataEvent",
                > >>> {editor:this, oldData:this.value, newData:inputValue});
                > >>> YAHOO.log("Could not save Cell Editor input due to invalid data " +
                > >>> lang.dump(inputValue), "warn", this.toString());
                > >>> return;
                > >>> }
                > >>> }
                > >>>
                > >>> var oSelf = this;
                > >>> var finishSave = function(bSuccess, oNewValue) {
                > >>> var oOrigValue = oSelf.value;
                > >>> if(bSuccess) {
                > >>> // Update new value
                > >>> oSelf.value = oNewValue;
                > >>>
                > >>> if(editorName.length>=19){
                > >>> if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
                > >>> oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), inputValue);
                > >>> }else{
                > >>> oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
                > >>> }
                > >>> }
                > >>>
                > >>> // Hide CellEditor
                > >>> oSelf.getContainerEl().style.display = "none";
                > >>> oSelf.isActive = false;
                > >>> oSelf.getDataTable()._oCellEditor = null;
                > >>>
                > >>> oSelf.fireEvent("saveEvent",
                > >>> {editor:oSelf, oldData:oOrigValue, newData:oSelf.value});
                > >>> YAHOO.log("Cell Editor input saved", "info", this.toString());
                > >>> }
                > >>> else {
                > >>> oSelf.resetForm();
                > >>> oSelf.fireEvent("revertEvent",
                > >>> {editor:oSelf, oldData:oOrigValue, newData:oNewValue});
                > >>> YAHOO.log("Could not save Cell Editor input " +
                > >>> lang.dump(oNewValue), "warn", oSelf.toString());
                > >>> }
                > >>> oSelf.unblock();
                > >>> };
                > >>>
                > >>> this.block();
                > >>> if(lang.isFunction(this.asyncSubmitter)) {
                > >>> this.asyncSubmitter.call(this, finishSave, validValue);
                > >>> }
                > >>> else {
                > >>> finishSave(true, validValue);
                > >>> }
                > >>> },
                > >>>
                > >>> ***************************************************************************
                > >>>
                > >>> formatCell : function(elCell, oRecord, oColumn) {
                > >>>
                > >>> if(!oRecord) {
                > >>> oRecord = this.getRecord(elCell);
                > >>> }
                > >>> if(!oColumn) {
                > >>> oColumn = this.getColumn(elCell.parentNode.cellIndex);
                > >>> }
                > >>> var celleditor = this.getCellEditor();
                > >>>
                > >>> if(oRecord && oColumn) {
                > >>> var sField = oColumn.field;
                > >>> var oData = oRecord.getData(sField);
                > >>> if(celleditor!=null){
                > >>> if(celleditor._sId.length>=19){
                > >>> if(celleditor._sId.substring(0,(19)) == 'yui-dropdownceditor'){
                > >>> oData = celleditor.getDescription();
                > >>> }
                > >>> }
                > >>> }else{
                > >>> oColumn = this.getColumn(elCell);
                > >>> var obj = oColumn.editor;
                > >>> if(obj!=null){
                > >>> if(obj._sId.length>=19){
                > >>> if(obj._sId.substring(0,(19)) == 'yui-dropdownceditor'){
                > >>> //oData = obj.getDescription();
                > >>> for (var i = 0; i < obj.dropdown.length; i++){
                > >>> if(obj.dropdown.options[i].value == oData){
                > >>> oData = obj.dropdown.options[i].text;
                > >>> }
                > >>> }
                > >>>
                > >>> }else{
                > >>>
                > >>> }
                > >>> }
                > >>> }
                > >>> }
                > >>>
                > >>> var fnFormatter = typeof oColumn.formatter === 'function' ?
                > >>> oColumn.formatter :
                > >>> DT.Formatter[oColumn.formatter+''] ||
                > >>> DT.Formatter.defaultFormatter;
                > >>>
                > >>> // Apply special formatter
                > >>> if(fnFormatter) {
                > >>> fnFormatter.call(this, elCell, oRecord, oColumn, oData);
                > >>> }
                > >>> else {
                > >>> elCell.innerHTML = oData;
                > >>> }
                > >>>
                > >>> this.fireEvent("cellFormatEvent", {record:oRecord, column:oColumn, key:oColumn.key, el:elCell});
                > >>> }
                > >>> else {
                > >>> YAHOO.log("Could not format cell " + elCell, "error", this.toString());
                > >>> }
                > >>> },
                > >>>
                > >>> ***************************************************************************
                > >>>
                > >>>
                > >>>
                > >>> ------------------------------------
                > >>>
                > >>> Yahoo! Groups Links
                > >>>
                > >>>
                > >>>
                > >>> ------------------------------------------------------------------------
                > >>>
                > >>>
                > >>> No virus found in this incoming message.
                > >>> Checked by AVG - www.avg.com
                > >>> Version: 8.5.392 / Virus Database: 270.13.36/2272 - Release Date: 07/30/09 05:58:00
                > >>>
                > >>>
                > >>>
                > >
                > >
                > >
                > >
                > > ------------------------------------
                > >
                > > Yahoo! Groups Links
                > >
                > >
                > >
                > > ------------------------------------------------------------------------
                > >
                > >
                > > No virus found in this incoming message.
                > > Checked by AVG - www.avg.com
                > > Version: 8.5.392 / Virus Database: 270.13.38/2274 - Release Date: 07/31/09 05:58:00
                > >
                > >
                >
              • Satyam
                The way to do that is through an enhancement request, which I filed a couple of days ago: http://yuilibrary.com/projects/yui2/ticket/2528271 Satyam
                Message 7 of 8 , Aug 4, 2009
                • 0 Attachment
                  The way to do that is through an enhancement request, which I filed a
                  couple of days ago:

                  http://yuilibrary.com/projects/yui2/ticket/2528271

                  Satyam


                  franklin.7707 escribió:
                  > Thank you Ryan and Satyam, for showing a very quick and easier solution. I would prefer to approach any of these methods in my project, as I do not have to change the primary js files from YUI. But, I would like to know if, I can suggest the changes done in datatable-debug.js to the YUI team, as many developers using YUI, would not require to do all the formatting work.
                  >
                  > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                  >
                  >>
                  >> Ryan V. Bayona escribió:
                  >>
                  >>> In my approach, i also added a new property in the column definitions named idHolder, where the value of the OPTION element gets stored.
                  >>>
                  >>> {key: 'fieldname',idHolder: 'fieldID'}
                  >>>
                  >>> Thanks Satyam for showing us another way to do this :)
                  >>>
                  >>>
                  >> Aren't we all learning from each other? That's why this is a forum and
                  >> that's why I am here for. When I first saw Douglas Crockford's videos
                  >> about JavaScript, I thought there was a bunch of things I didn't know
                  >> and were worth learning. That's what got me here in the first place, and
                  >> I haven't stopped learning yet. And it would be selfish not to share
                  >> them, wouldn't it?
                  >>
                  >> I came up with an improvement, the first line of the formatter can read:
                  >>
                  >> var lookupTable = oColumn.lookupTable || ((editor instanceof
                  >> YAHOO.widget.DropdownCellEditor) && editor.dropdownOptions);
                  >>
                  >> So, if the options are to be the same and there is an editor, read it
                  >> from the editor.
                  >>
                  >> Anyway, this is all theory so far because I haven't tested it yet.
                  >>
                  >> Satyam
                  >>
                  >>
                  >>> --- In ydn-javascript@yahoogroups.com, Satyam <satyam@> wrote:
                  >>>
                  >>>
                  >>>> A less intrusive solution would be to provide an extra formatter, let is
                  >>>> call it formatLookup that can display values based on any lookup table,
                  >>>> be it the value:text values of a dropdown or any other sort of encoded
                  >>>> data.
                  >>>>
                  >>>> YAHOO.widget.DataTable.formatLookup = function(elCell, oRecord,
                  >>>> oColumn, oData) {
                  >>>> var lookupTable = oColumn.lookupTable;
                  >>>> if (YAHOO.lang.isArray(lookupTable)) {
                  >>>> for (var i = 0; i < lookupTable.length; i++) {
                  >>>> if (lookupTable[i].value === oData) {
                  >>>> elCell.innerHTML = lookupTable[i].label;
                  >>>> return;
                  >>>> }
                  >>>> }
                  >>>> }
                  >>>> elCell.innerHTML = oData || ""; // if oData is null, show a blank.
                  >>>> };
                  >>>>
                  >>>> YAHOO.widget.DataTable.Formatter.lookup =
                  >>>> YAHOO.widget.DataTable.formatLookup;
                  >>>>
                  >>>> If the lookup table is not an array or if the value is not found, the
                  >>>> raw oData will be shown.
                  >>>>
                  >>>> If you have your dropdown options in a variable like myDropdownOptions,
                  >>>> then the column could be defined:
                  >>>>
                  >>>> { key:'dropdown',formatter:'lookup', lookupTable:myDropdownOptions,
                  >>>> editor: new
                  >>>> YAHOO.widget.DropdownCellEditor(dropdownOptions:myDropdownOptions, ...),
                  >>>> ...}
                  >>>>
                  >>>> You could use the same lookup table for both or use different ones, thus
                  >>>> allowing an entry such as "--- Please select on ----" on the editor and
                  >>>> not have it on the display, which might be blank.
                  >>>>
                  >>>> The above has not been tested.
                  >>>>
                  >>>> Satyam
                  >>>>
                  >>>>
                  >>>> franklin.7707 escribió:
                  >>>>
                  >>>>
                  >>>>> I am not sure, if some one has already done a fix for this. As we already know that if we edit a cell using a dropdowncelleditor, the value gets displayed in the cell instead of displaying the label description. As an example, for a list like 1:Employee 2:Spouse 3:Child 4:Parent 5:Others, if we select an option, the numeric value gets displayed in the respective cell. I have gone through the 'datatable-debug.js' and modified the relevant scripts, to make it behave as expected.
                  >>>>>
                  >>>>> The problem here is there a two sets of records maintained. One is the recordset, which will be the data that is actually used (for example, saving in the database while inline editing). So for this we need the value of the dropdown. The other data is the one which is rendered in the screen as contents in the table. I have made a few changes to this.
                  >>>>>
                  >>>>> Below is what I have done
                  >>>>>
                  >>>>> 1. We already have a getInputValue() function defined similar to other cell editors. I added a method getDescription() defined as below
                  >>>>>
                  >>>>> getDescription : function() {
                  >>>>> var desc = this.dropdown.options[this.dropdown.options.selectedIndex].text;
                  >>>>> return desc;
                  >>>>> }
                  >>>>>
                  >>>>>
                  >>>>> 2. In the save method, I add the following code
                  >>>>> var editorName = this._sId;
                  >>>>>
                  >>>>> if(editorName.length>=19){
                  >>>>> if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
                  >>>>> inputValue = this.getInputValue();
                  >>>>> validValue = this.getDescription();
                  >>>>> }
                  >>>>> }
                  >>>>>
                  >>>>> and the existing line
                  >>>>> oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
                  >>>>>
                  >>>>> is replaced with
                  >>>>> if(editorName.length>=19){
                  >>>>> if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
                  >>>>> oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), inputValue);
                  >>>>> }else{
                  >>>>> oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
                  >>>>> }
                  >>>>> }
                  >>>>>
                  >>>>>
                  >>>>> 3. Then in the formatCell: function(), find what type of cell editor is being used.
                  >>>>> var celleditor = this.getCellEditor();
                  >>>>>
                  >>>>> 4. The data object 'oData', will hold the value by default. But we need the oData to hold description rather than value. But we want to do this only when the editor is a dropdown. Also, the formatCell is called when the table is rendered. We should not do anything at that time. So, I added a few lines of code as below
                  >>>>> if(celleditor!=null){
                  >>>>> if(celleditor._sId.length>=19){
                  >>>>> if(celleditor._sId.substring(0,(19)) == 'yui-dropdownceditor'){
                  >>>>> oData = celleditor.getDescription();
                  >>>>> }
                  >>>>> }
                  >>>>> }else{
                  >>>>> oColumn = this.getColumn(elCell);
                  >>>>> var obj = oColumn.editor;
                  >>>>> if(obj!=null){
                  >>>>> if(obj._sId.length>=19){
                  >>>>> if(obj._sId.substring(0,(19)) == 'yui-dropdownceditor'){
                  >>>>> for (var i = 0; i < obj.dropdown.length; i++){
                  >>>>> if(obj.dropdown.options[i].value == oData){
                  >>>>> oData = obj.dropdown.options[i].text;
                  >>>>> }
                  >>>>> }
                  >>>>> }
                  >>>>> }
                  >>>>> }
                  >>>>> }
                  >>>>>
                  >>>>> I have tested this to some extent and found that it does not affect any other function/usecase.
                  >>>>> Since, I am new to this forum, I am yet to find a way to attach the js file. Below, I am providing the complete code for the changed methods
                  >>>>>
                  >>>>> ***************************************************************************
                  >>>>>
                  >>>>> getDescription : function() {
                  >>>>> var desc = this.dropdown.options[this.dropdown.options.selectedIndex].text;
                  >>>>> return desc;
                  >>>>> }
                  >>>>>
                  >>>>> ***************************************************************************
                  >>>>>
                  >>>>> save : function() {
                  >>>>> // Get new value
                  >>>>> var inputValue = this.getInputValue();
                  >>>>> var validValue = inputValue;
                  >>>>>
                  >>>>> var editorName = this._sId;
                  >>>>>
                  >>>>> if(editorName.length>=19){
                  >>>>> if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
                  >>>>> inputValue = this.getInputValue();
                  >>>>> validValue = this.getDescription();
                  >>>>> }
                  >>>>> }
                  >>>>>
                  >>>>> // Validate new value
                  >>>>>
                  >>>>> if(this.validator) {
                  >>>>> validValue = this.validator.call(this.getDataTable(), inputValue, this.value, this);
                  >>>>> if(validValue === undefined ) {
                  >>>>> if(this.resetInvalidData) {
                  >>>>> this.resetForm();
                  >>>>> }
                  >>>>> this.fireEvent("invalidDataEvent",
                  >>>>> {editor:this, oldData:this.value, newData:inputValue});
                  >>>>> YAHOO.log("Could not save Cell Editor input due to invalid data " +
                  >>>>> lang.dump(inputValue), "warn", this.toString());
                  >>>>> return;
                  >>>>> }
                  >>>>> }
                  >>>>>
                  >>>>> var oSelf = this;
                  >>>>> var finishSave = function(bSuccess, oNewValue) {
                  >>>>> var oOrigValue = oSelf.value;
                  >>>>> if(bSuccess) {
                  >>>>> // Update new value
                  >>>>> oSelf.value = oNewValue;
                  >>>>>
                  >>>>> if(editorName.length>=19){
                  >>>>> if(editorName.substring(0,(19)) == 'yui-dropdownceditor'){
                  >>>>> oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), inputValue);
                  >>>>> }else{
                  >>>>> oSelf.getDataTable().updateCell(oSelf.getRecord(), oSelf.getColumn(), oNewValue);
                  >>>>> }
                  >>>>> }
                  >>>>>
                  >>>>> // Hide CellEditor
                  >>>>> oSelf.getContainerEl().style.display = "none";
                  >>>>> oSelf.isActive = false;
                  >>>>> oSelf.getDataTable()._oCellEditor = null;
                  >>>>>
                  >>>>> oSelf.fireEvent("saveEvent",
                  >>>>> {editor:oSelf, oldData:oOrigValue, newData:oSelf.value});
                  >>>>> YAHOO.log("Cell Editor input saved", "info", this.toString());
                  >>>>> }
                  >>>>> else {
                  >>>>> oSelf.resetForm();
                  >>>>> oSelf.fireEvent("revertEvent",
                  >>>>> {editor:oSelf, oldData:oOrigValue, newData:oNewValue});
                  >>>>> YAHOO.log("Could not save Cell Editor input " +
                  >>>>> lang.dump(oNewValue), "warn", oSelf.toString());
                  >>>>> }
                  >>>>> oSelf.unblock();
                  >>>>> };
                  >>>>>
                  >>>>> this.block();
                  >>>>> if(lang.isFunction(this.asyncSubmitter)) {
                  >>>>> this.asyncSubmitter.call(this, finishSave, validValue);
                  >>>>> }
                  >>>>> else {
                  >>>>> finishSave(true, validValue);
                  >>>>> }
                  >>>>> },
                  >>>>>
                  >>>>> ***************************************************************************
                  >>>>>
                  >>>>> formatCell : function(elCell, oRecord, oColumn) {
                  >>>>>
                  >>>>> if(!oRecord) {
                  >>>>> oRecord = this.getRecord(elCell);
                  >>>>> }
                  >>>>> if(!oColumn) {
                  >>>>> oColumn = this.getColumn(elCell.parentNode.cellIndex);
                  >>>>> }
                  >>>>> var celleditor = this.getCellEditor();
                  >>>>>
                  >>>>> if(oRecord && oColumn) {
                  >>>>> var sField = oColumn.field;
                  >>>>> var oData = oRecord.getData(sField);
                  >>>>> if(celleditor!=null){
                  >>>>> if(celleditor._sId.length>=19){
                  >>>>> if(celleditor._sId.substring(0,(19)) == 'yui-dropdownceditor'){
                  >>>>> oData = celleditor.getDescription();
                  >>>>> }
                  >>>>> }
                  >>>>> }else{
                  >>>>> oColumn = this.getColumn(elCell);
                  >>>>> var obj = oColumn.editor;
                  >>>>> if(obj!=null){
                  >>>>> if(obj._sId.length>=19){
                  >>>>> if(obj._sId.substring(0,(19)) == 'yui-dropdownceditor'){
                  >>>>> //oData = obj.getDescription();
                  >>>>> for (var i = 0; i < obj.dropdown.length; i++){
                  >>>>> if(obj.dropdown.options[i].value == oData){
                  >>>>> oData = obj.dropdown.options[i].text;
                  >>>>> }
                  >>>>> }
                  >>>>>
                  >>>>> }else{
                  >>>>>
                  >>>>> }
                  >>>>> }
                  >>>>> }
                  >>>>> }
                  >>>>>
                  >>>>> var fnFormatter = typeof oColumn.formatter === 'function' ?
                  >>>>> oColumn.formatter :
                  >>>>> DT.Formatter[oColumn.formatter+''] ||
                  >>>>> DT.Formatter.defaultFormatter;
                  >>>>>
                  >>>>> // Apply special formatter
                  >>>>> if(fnFormatter) {
                  >>>>> fnFormatter.call(this, elCell, oRecord, oColumn, oData);
                  >>>>> }
                  >>>>> else {
                  >>>>> elCell.innerHTML = oData;
                  >>>>> }
                  >>>>>
                  >>>>> this.fireEvent("cellFormatEvent", {record:oRecord, column:oColumn, key:oColumn.key, el:elCell});
                  >>>>> }
                  >>>>> else {
                  >>>>> YAHOO.log("Could not format cell " + elCell, "error", this.toString());
                  >>>>> }
                  >>>>> },
                  >>>>>
                  >>>>> ***************************************************************************
                  >>>>>
                  >>>>>
                  >>>>>
                  >>>>> ------------------------------------
                  >>>>>
                  >>>>> Yahoo! Groups Links
                  >>>>>
                  >>>>>
                  >>>>>
                  >>>>> ------------------------------------------------------------------------
                  >>>>>
                  >>>>>
                  >>>>> No virus found in this incoming message.
                  >>>>> Checked by AVG - www.avg.com
                  >>>>> Version: 8.5.392 / Virus Database: 270.13.36/2272 - Release Date: 07/30/09 05:58:00
                  >>>>>
                  >>>>>
                  >>>>>
                  >>>>>
                  >>>
                  >>>
                  >>> ------------------------------------
                  >>>
                  >>> Yahoo! Groups Links
                  >>>
                  >>>
                  >>>
                  >>> ------------------------------------------------------------------------
                  >>>
                  >>>
                  >>> No virus found in this incoming message.
                  >>> Checked by AVG - www.avg.com
                  >>> Version: 8.5.392 / Virus Database: 270.13.38/2274 - Release Date: 07/31/09 05:58:00
                  >>>
                  >>>
                  >>>
                  >
                  >
                  >
                  >
                  > ------------------------------------
                  >
                  > Yahoo! Groups Links
                  >
                  >
                  >
                  > ------------------------------------------------------------------------
                  >
                  >
                  > No virus found in this incoming message.
                  > Checked by AVG - www.avg.com
                  > Version: 8.5.392 / Virus Database: 270.13.43/2280 - Release Date: 08/03/09 17:56:00
                  >
                  >
                • franklin.7707
                  I would try to post this as an enhancement request. Thank you Satyam, for all your good work in this group.
                  Message 8 of 8 , Aug 5, 2009
                  • 0 Attachment
                    I would try to post this as an enhancement request. Thank you Satyam, for all your good work in this group.

                    --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                    >
                    > The way to do that is through an enhancement request, which I filed a
                    > couple of days ago:
                    >
                    > http://yuilibrary.com/projects/yui2/ticket/2528271
                    >
                    > Satyam
                  Your message has been successfully submitted and would be delivered to recipients shortly.