Articles in this section
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

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied