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

Re: YUI - Datatable DropdownCellEditor Issue fix

Expand Messages
  • 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 1 of 8 , Jul 30 11:41 PM
    • 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 2 of 8 , Jul 31 7:22 AM
      • 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 3 of 8 , Jul 31 9:49 AM
        • 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 4 of 8 , Jul 31 1:13 PM
          • 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 5 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 6 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 7 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.