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.
Syncfusion Feedback

Edit template with a dropdown - databind

Thread ID:

Created:

Updated:

Platform:

Replies:

118783 Apr 9,2015 03:07 PM UTC Apr 10,2015 11:44 AM UTC ASP.NET Web Forms 1
loading
Tags: Grid
Paul Yanzick
Asked On April 9, 2015 03:07 PM UTC

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 [Syncfusion]
Replied On 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:

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

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.

Warning Icon 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.Close Icon

;