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

DropDownEdit Field with it's own datasource

I would like to know if we can bind the dropdown in edit view to a lookup datasource?  So for example, I have a table with config settings  and a table with available config settings.  I want to bind the grid to the current settings, but on edit or add give them the values in available config settings.  I am sure this has probably been asked before but I am not finding it in my search.

1 Reply

VN Vignesh Natarajan Syncfusion Team February 27, 2019 10:18 AM UTC

Hi Sybil, 
Thanks for using Syncfusion products. 
Query: “I want to bind the grid to the current settings, but on edit or add give them the values in available config settings.” 
From your query, we understand that you need to bind different dataSource to DrodDownList while editing. We have achieved your requirement using ActionComplete event of ejGrid and dataSource property of ejDropDownList.  
Refer the below code example 
  <ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True"  AllowTextWrap="true" OnServerEditRow="EditEvents_ServerEditRow" 
                    OnServerAddRow="EditEvents_ServerAddRow" OnServerDeleteRow="EditEvents_ServerDeleteRow"> 
                    <ClientSideEvents ActionComplete="complete" EndAdd="endAdd" EndDelete="endDelete" EndEdit="endEdit" /> 
                        <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="80"> 
                                <ej:KeyValue Key="required" Value="true" /> 
                                <ej:KeyValue Key="number" Value="true" /> 
                        <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80"> 
                                <ej:KeyValue Key="required" Value="true" /> 
                                <ej:KeyValue Key="minlength" Value="3" /> 
                        <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" EditType="DropdownEdit" Width="80">                           
                        <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}" EditType="NumericEdit"> 
                            <NumericEditOptions DecimalPlaces="2"></NumericEditOptions> 
                        <ej:Column Field="ShipCountry" HeaderText="ShipCountry" Width="90" EditType="DropdownEdit" /> 
                        <ej:Column Field="ShipName" HeaderText="ShipName" Width="180" /> 
                    <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings> 
                    <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 
                <ClientSideEvents ActionComplete="oncomplete" /> 
    <script type="text/javascript"> 
        var data = JSON.parse('<%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.data)%>'); // to get the dataSource from server. 
        function oncomplete(args) { 
            var id = this.element.attr("id"); 
            if (args.requestType == "add" || args.requestType == "beginedit") { 
       //GridID + ColumnName 
                var ddl = $("#" + id + "EmployeeID").ejDropDownList("instance"); 
                    ddl.setModel({ dataSource: data }); // update the new dataSource 
public IEnumerable data; 
        List<Orders> order = new List<Orders>(); 
        protected void Page_Load(object sender, EventArgs e) 
            this.data = new List<int>() {10,11,12,13,14,15,16,19,20,200,400 }; 
            Session["InlineEditDataSource"] = order; 
Note: in above code example we have modified the dataSource in actionComplete. If you want you can use ajax post to retireve dataSource frm and bind it to dropdownlist.  
Refer our help documentation for your reference 
please get back to us if you have further queries. 
Vignesh Natarajan 

Live Chat Icon For mobile
Up arrow icon