[Solved] Drop-down woes, foreign key

[Lars]

Hello,

I have a grid with a drop-down, which is populating properly only as long as I hard-code the values for the drop down in a local array.  If I load the data from a server, the drop down does not bind properly.  Here is a simple plunker to illustrate:
http://plnkr.co/edit/DWaaHGVAS6YuDcqTXPL8

I load the categories (the data source for the drop down) via setTimeout to "simulate" an async ajax call:

var categories = [];

  setTimeout(function() {
      categories = [{
          "value": 1,
          "text": "Beverages"
      },{
          "value": 2,
          "text": "Condiments"
      },{
          "value": 3,
          "text": "Confections"
      }];
    $('#grid').data('kendoGrid').dataSource.read();
    $('#grid').data('kendoGrid').refresh();
  }, 100);

As you can see in the plunker, the category field shows the value instead of the text, and the drop down does not work.  

If you simply remove the setTimeout and just populate the categories directly, everything works fine.

How can I make it work without having to hard-code the values?

Also, it appears the names "value" and "text" are required.  Can this be set, so that other names can be used for these properties?

Thanks,
Lars

[Alexander Popov]

Hi Lars,

Basically, the columns.values array should be specified before rendering the Grid, as the data is necessary in order to display populate the DropDownList and to replace the IDs with the corresponding text. You can use the Grid's setOptions method to update the columns array, as shown in this example. 
Alternatively, you could use a custom editor and a template that matches the IDs and the text to emulate the default behavior. That would also allow you to use custom field names instead of "text" and "value".

Regards,
Alexander Popov
Telerik

 

 

[Lars]

Thanks Alexander, that works!