Custom dropdownlist editor does not seem to honour valueMember

[JazzParticipant]

I’m having a bit of a problem with a particular grid column. Basically I have two values for the column, an ID and a NAME. I want to display the name, but I want the ID to be the actual value. I have the basic display working fine, but when editing, it keep setting the value to the name value instead of the ID.

In the source data there is a column called ‘advisor’, which is the id of the advisor, and a column called ‘advisor_name’, which is their name. I want to display the name, but have the value that is saved on an update to be the id.

The below code correctly displays the name but when I go to edit the column, the ‘newvalue’ parameter in the ‘cellvaluechanging’ callback function is the name selected in the dropdownlist, not the value, despite setting ‘valueMember’ to id when initialising the dropdownlist.

jQuery( function(){ 

var data = new $.jqx.dataAdapter( { 
  url : "http://localhost/site/public/clientList", 
  datatype : "json", 
  updaterow : function(rowid, rowdata, commit){ 
    $.post("http://localhost/site/public/clientUpdate", rowdata).done(function(data){ 
      if( data["result"] == "OK" ) commit(true); else commit(false); 
    }); 
  }, 
  deleterow : function(rowid, commit){ 
    $.post("http://localhost/site/public/clientDel", rowdata).done(function(data){ 
      if( data["result"] == "OK" ) commit(true); else commit(false); 
    }); 
  } 
} );

$('#clientGrid').jqxGrid( { 
  theme : jqxTheme , 
  source :
  columns : [ 
    { datafield : "last_name", text : "Last Name" }, 
    { datafield : "first_name", text : "First Name" }, 
    { datafield : "preferred_name", text : "Preferred Name" }, 
    { datafield : "username", text : "User name" }, 
    { datafield : "contact_phone", text : "Phone" }, 
    { datafield : "contact_email", text : "Email" }, 
    { datafield : "advisor_name", text : "Advisor", columntype : "dropdownlist", map : "advisor", initeditor : function(row, cellvalue, editor){
        editor.jqxDropDownList( { 
          source: [
            {"id":"4fe3e021f31f02a208000003","name":"Joe Bloggs"},
            {"id":"4fe3e021f31f02a208000002","name":"Samm Spade"},          
            {"id":"4fe3e021f31f02a208000001","name":"Franky Bones"},
            {"id":"4fe3e021f31f02a208000000","name":"Jimmy Hands"},
            {"id":"50920932033cdcad57000000","name":"Tommy Twotone"}
          ], 
          valueMember : "id", 
          displayMember : "name"
        });
      },
      cellvaluechanging : function(row, column, columntype, oldvalue, newvalue){ 
        console.log(newvalue); 
        console.log(oldvalue);
      }
    },
    { datafield : "private", text : "Private", columntype : "checkbox" }, 
    { datafield : "last_access", text : "Last Activity" } 
  ],
  columnsresize : true,
  editable : true, 
  editmode : "dblclick", 
} ) );

So what have I messed up. Or is this actually a bug?

[Peter StoevKeymaster]

Hi,

The initialization of the DropDownList column in the provided code is not correct and you also tried to use properties like map that are not part of the columns API The Grid’s source property is not set, too.. I suggest you to take a look at that sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridkeyvaluescolumnwitharray.htm?web. It illustrates how to initialize a DropDownList editor that has DisplayMember and ValueMember.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[JazzParticipant]

Thanks Peter.

Just ignore the missing source thing. I was patching together an example from my PHP wrapper and must have just missed some stuff.

The fix was actually quite simple. The column definition was just missing some attributes. The key was using ‘datafield’ and ‘displayfield’. As soon as set both of those correctly, everything just started working.

Thanks.

[Author]

Posts