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. Image for the cookie policy date

Edit template with a dropdown - databind


I haven't stumbled across an example of this, so not sure how to pull this off.  Any help is appreciated!

Lets say for example I have a grid containing addresses.  I am using a custom object to do this, so it may have the following properties:

string Address
string City
string State
Country Country
string ZipCode

Country looks like this
int CountryID
string CountryDescription

I am using Entity Framework to manage all of this, but roughly this is what the data objects would look like.

I just received an example on how to bind to a composite object like this, so I should be able to get the CountryDescription.  What I am wanting to do for editing, however, is provide a list of countries from the database for the user to select from.  The examples I have seen will produce a dropdown of the already used values in that field, but that isn't going to be the case in my deployment.  

How can I databind a List<Country> collection to a dropdown in an edit template column?

Thanks!  You guys rock by the way!


1 Reply

BM Balaji Marimuthu Syncfusion Team April 10, 2015 11:44 AM UTC

Hi Paul,

Thanks for using Syncfusion Products.

Based on your requirement, we have created a sample and please download the sample from the following link:


Please refer the code snippet as follows


<ej:Grid ID="Grid" runat="server" >


<ej:Column Field="ID" HeaderText="ID" IsPrimaryKey="true" Visible="false" >


<ej:Column Field="FirstName" HeaderText="First Name" >


<ej:Column Field="LastName" HeaderText="Last Name" >


<ej:Column Field="Addresses.0.Address1" HeaderText="Address" >

<EditTemplate Create="create" Read="read" Write="write" />



<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>

<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>



<script type="text/javascript">

function create() {

return $("<input>");


function write(args) {

args.element.ejDropDownList({ width: "100%", dataSource: args.column[3].dataSource, fields: { text: "CountryDescription", value: "CountryDescription" }, selectedItemIndex:0 });


function read(args) {

return args.ejDropDownList("getSelectedValue");


In the EditTemplate, we have bound the list of datasources and rendered the dropdownlist in the EditTemplate's write function. Please refer the documentation for more information to use EditTemplate in Grid. Documentation: http://help.syncfusion.com/ug/js/index.html#!Documents/edittemplate.htm


List<Country> country = new List<Country>();

private void BindDataSource()


List<Address> adrs1 = new List<Address>();

adrs1.Add(new Address() { Address1 = "No: 417", Address2 = "1st street", City = "Aurora", Country = "Arapahoe", Zip = "80010" });

List<Address> adrs2 = new List<Address>();

adrs2.Add(new Address() { Address1 = "No: 378", Address2 = "3rd cross street", City = "Austin", Country = "Travis", Zip = "78701" });

List<Address> adrs3 = new List<Address>();

adrs3.Add(new Address() { Address1 = "No: 195", Address2 = "7th golden street", City = "Sandy", Country = "Salt Lake", Zip = "84070" });

country.Add(new Country() { CountryID = 1, CountryDescription = adrs1[0].Country });

country.Add(new Country() { CountryID = 2, CountryDescription = adrs2[0].Country });

country.Add(new Country() { CountryID = 3, CountryDescription = adrs3[0].Country });

. . . . .

this.Grid.Columns[3].DataSource = country;

this.Grid.DataSource = Persons;


Please let us know if you have any queries.

Balaji Marimuthu

Live Chat Icon For mobile
Up arrow icon