DropDownEdit Field with it's own datasource

[Sybil Charles]

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.

[Vignesh Natarajan]

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" /> 

                    <Columns> 

                        <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="80"> 

                            <ValidationRule> 

                                <ej:KeyValue Key="required" Value="true" /> 

                                <ej:KeyValue Key="number" Value="true" /> 

                            </ValidationRule> 

                        </ej:Column> 

                        <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80"> 

                            <ValidationRule> 

                                <ej:KeyValue Key="required" Value="true" /> 

                                <ej:KeyValue Key="minlength" Value="3" /> 

                            </ValidationRule> 

                        </ej:Column> 

                        <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" EditType="DropdownEdit" Width="80">                           

                        </ej:Column> 

                        <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}" EditType="NumericEdit"> 

                            <NumericEditOptions DecimalPlaces="2"></NumericEditOptions> 

                        </ej:Column> 

                        <ej:Column Field="ShipCountry" HeaderText="ShipCountry" Width="90" EditType="DropdownEdit" /> 

                        <ej:Column Field="ShipName" HeaderText="ShipName" Width="180" /> 

                         

                    </Columns> 

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

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

                <ClientSideEvents ActionComplete="oncomplete" /> 

                </ej:Grid> 

    <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 

            } 

        } 

    </script> 

 

C# 

 

public IEnumerable data; 

        List<Orders> order = new List<Orders>(); 

        protected void Page_Load(object sender, EventArgs e) 

        { 

            BindDataSource(); 

 

            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 

 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete  

 

https://help.syncfusion.com/api/js/ejdropdownlist#members:datasource  

 

please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan