Category / Section
how to change dropdown datasource while editing
1 min read
How to change the dropdown data source while editing?
We can change the Dropdown data source while editing the Grid instead of default data source. This can be achieved by using actionComplete event in Grid. The following code example demonstrates how to change the dropdown data source while editing.
JS
$("#Grid").ejGrid({ dataSource: window.gridData, allowPaging: true, actionComplete:"actionComplete", editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, columns: [ { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 90 }, { field: "CustomerID", headerText: 'Customer ID', width: 90 }, { field: "EmployeeID", headerText: 'Employee ID', editType: ej.Grid.EditingType.Dropdown, textAlign: ej.TextAlign.Right, width: 80 }, { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, width: 80, format: "{0:C}" }, ] }); });
MVC
@(Html.EJ().Grid<object>("FlatGrid") // .Datasource(ds => ds.URL("OrderDataSource").Adaptor(AdaptorType.UrlAdaptor)) .Datasource((IEnumerable<object>)ViewBag.datasource) .AllowPaging() .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) .ToolbarSettings(toolbar => { toolbar.ShowToolbar().ToolbarItems(items => { items.AddTool(ToolBarItems.Add); items.AddTool(ToolBarItems.Edit); items.AddTool(ToolBarItems.Delete); items.AddTool(ToolBarItems.Update); items.AddTool(ToolBarItems.Cancel); }); }) .ClientSideEvents(eve=>eve.ActionComplete("actionComplete")) .Columns(col => { col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add(); col.Field("EmployeeID").HeaderText("Employee ID").EditType(EditingType.Dropdown).TextAlign(TextAlign.Right).Width(75).Add(); col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).EditType(EditingType.Numeric).Width(75).Format("{0:C}").Add(); }))
ASP
<ej:Grid runat="server" ID="Grid" EnableViewState="false" AllowPaging="true" DataManagerID="DataManager" > <ClientSideEvents ActionComplete="actionComplete" ></ClientSideEvents> <Columns> <ej:Column Field="OrderID" HeaderText="OrderID" IsPrimaryKey="true" TextAlign="Right" /> <ej:Column Field="CustomerID" HeaderText="CustomerID" /> <ej:Column Field="EmployeeID" EditType="Dropdown" HeaderText="EmployeeID "/> <ej:Column Field="Freight" HeaderText="Freight" EditType="Numeric" Format="{0:C2}" TextAlign="Right" /> </Columns> <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" ></EditSettings> <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> </ej:Grid>
actionComplete event
function actionComplete(args) { //while editing the grid if (args.requestType == "beginedit") { //New Dropdown data source and here text is display purpose and values is saved to data base. var dpDataSource = [{ value: 1, text: 'One' }, { value: 2, text: 'two' }, { value: 3, text: 'three' }, { value: 4, text: "four" }, { value: 5, text: "five" }, { value: 6, text: "six" }, { value: 7, text: "seven" }, { value: 8, text: "eight" }, { value: 9, text: "nine" }, ]; $("#GridEmployeeID").ejDropDownList({ dataSource: dpDataSource, selectedIndex: 1 }); //Set the new Dropdown datasource } }
The following screenshot display the new Dropdown data source while editing the Grid.
Figure 1: Output