Populating a grid, with dropdown edit.

Question

What is the correct way to populate a grid that has a dropdown edit.

When i put the value as the populated value it displays the value, not the text (when editing it defaults to the right value, just doesn't display it). When i use the text, when editing it defaults to the first dropdown choice.

var dateUnit = [{ text: "hours", value : 1}, {text: "days", value: 2}];

$("#Grid").ejGrid({

dataSource: data,

toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },

editSettings: { allowEditing: true, allowAdding: true },

allowSelection: false,

columns: [

{ field: "Id", isPrimaryKey: true, headerText: "ID", width: 80, textAlign: ej.TextAlign.Center },

{ field: "Age", headerText: 'Age', width: 80, textAlign: ej.TextAlign.Center },

{ field: "Unit", headerText: "Unit", textAlign: ej.TextAlign.Center, editType: "dropdownedit", dataSource: dateUnit, defaultValue: 2 }

],

actionComplete: function (args) {

if (args.requestType == "add") {

var drpdwn = this.getContentTable("#detailGrid").find("#detailGridUnit").ejDropDownList("instance");

console.log(drpdwn);

drpdwn.setSelectedValue(2);

}

});

Balaji Marimuthu · Answer

Hi Mike, Thanks for contacting Syncfusion support.To achieve your requirement, please use the ForeignKey column in Grid. Please refer to the sample and code example as below, 
http://jsplayground.syncfusion.com/q2ppu5xf

$("#detailGrid").ejGrid({
            dataSource: data,
            toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
            editSettings: { allowEditing: true, allowAdding: true },
            allowSelection: false,
            columns: [
                    { field: "Id", isPrimaryKey: true, headerText: "ID", width: 80, textAlign: ej.TextAlign.Center },
                    { field: "Age", headerText: 'Age', width: 80, textAlign: ej.TextAlign.Center },
                    { field: "Unit", headerText: "Unit", width: 80, textAlign: ej.TextAlign.Center, foreignKeyField: "Unit", foreignKeyValue: "Value", dataSource: dateUnit }
            ],
            actionComplete: function (args) {
                if (args.requestType == "add") {
                    var drpdwn = this.getContentTable("#detailGrid").find("#detailGridUnit").ejDropDownList("instance");
                    console.log(drpdwn);
                    drpdwn.setSelectedValue(2);
                }
            }
        });

Refer to the below Help document, 
http://help.syncfusion.com/js/grid/columns#foreign-key-columns

If we misunderstood your requirement, update how you want to display the values in dropdown.

Regards,
Balaji Marimuthu