We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Populating a grid, with dropdown edit.

Thread ID:

Created:

Updated:

Platform:

Replies:

120637 Sep 29,2015 02:02 PM Sep 30,2015 02:56 AM JavaScript 1
loading
Tags: ejGrid
Mike Rosenberger
Asked On September 29, 2015 02:02 PM

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 [Syncfusion]
Replied On September 30, 2015 02:56 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;