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

Re: [ydn-javascript] YUI - Datatable DropdownCellEditor Issue fix

Expand Messages
  • 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 1 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 2 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 3 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 4 of 8 , Aug 4 1:37 AM
          • 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 5 of 8 , Aug 4 4:57 AM
            • 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 6 of 8 , Aug 5 3:54 AM
              • 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.