Edit template with a dropdown - databind

[Paul Yanzick]

Hello!

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!

Paul

[Balaji Marimuthu]

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:

TestGrid.zip

Please refer the code snippet as follows

<div>

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

<Columns>

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

</ej:Column>

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

</ej:Column>

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

</ej:Column>

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

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

</ej:Column>

</Columns>

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

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

</ej:Grid>

</div>

<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");

}
</script>

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

[Default.aspx]

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;

this.Grid.DataBind();
}

Please let us know if you have any queries.

Regards,
Balaji Marimuthu