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

DropDown In Grid


I have a EJS().Grid in that grid have a dropdown of editType(dropdownedit).When i change the dropdown,based on that change have to fill another dropdown.How to write a change event for that.

                                                                                                                                                                                                        .DataSource(dataManager => { dataManager.Url("/employee/EmployeesProject").BatchUrl("/employee/BatchUpdate").Adaptor("UrlAdaptor"); })

.Columns(col =>
}).Toolbar(new List<string>
() { "Add", "Update", "Cancel" })

.EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).NewRowPosition(Syncfusion.EJ2.Grids.NewRowPosition.Bottom).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Render())

3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 21, 2019 04:44 AM

Hi Naga, 

You can achieve your requirement of “Rendering cascading dropdownlist with foreign key column” by using the below code snippet, 

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" cellSaved="onCellSaved" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true"> 
  <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings> 
    <e-grid-column field="OrderID" width="110" isPrimaryKey=true></e-grid-column> 
    <e-grid-column field="CustomerID" headerText="CustomerID" width="110"></e-grid-column> 
    <e-grid-column field="ShipCountry" headerText="ShipCountry" foreignKeyField="ShipCountry" foreignKeyValue="ShipCountry" dataSource="ViewBag.ShipCountryData" edit="@(new {create="CountryCreate",read="CountryRead",write="CountryWrite",destroy="CountryDestroy" })" width="110"> </e-grid-column> 
    <e-grid-column field="ShipCity" headerText="Ship City" foreignKeyField="ShipCity" foreignKeyValue="ShipCity" dataSource="ViewBag.ShipCityData" edit="@(new {create="CityCreate",read="CityRead",write="CityWrite",destroy="CityDestroy" })" width="110"> 
// Here country is the first dropdownlist and city is the second dropdownlist 
var countryElem; 
var countryObj; 
var cityElem; 
var cityObj; 
// Country dropdownlist’s data 
var cityData = new ej.data.DataManager({ 
    url: '/Home/CityDataSource', 
    adaptor: new ej.data.UrlAdaptor(), 
// City dropdownlist’s data 
var countryData = new ej.data.DataManager({ 
    url: '/Home/CountryDatasource', 
    adaptor: new ej.data.UrlAdaptor(), 
// Country dropdownlist’s create method 
function CountryCreate() { 
    // Creates and returns input element 
    countryElem = document.createElement('input'); 
    return countryElem; 
// Country dropdownlist’s read method 
function CountryRead() { 
    // Returns dropdownlist’s value 
    return countryObj.text; 
// Country dropdownlist’s destroy method 
function CountryDestroy() { 
// Country dropdownlist’s write method 
function CountryWrite() { 
    var gridObj = document.getElementById('Grid').ej2_instances[0]; 
    var index = parseInt(countryElem.closest('.e-row').getAttribute('aria-rowindex')); 
    // Get the cell value 
    var text = gridObj.currentViewData[index]["ShipCountry"]; 
    // Create country dropdownlist and append it to the element 
    countryObj = new ej.dropdowns.DropDownList({ 
      dataSource: countryData, 
      fields: { value: 'Country', text: 'ShipCountry' }, 
      // Set the cell value as default text to the dropdownlist 
      text: text, 
      placeholder: 'Select a country', 
      floatLabelType: 'Never' 
// City dropdownlist’s create method 
function CityCreate() { 
    cityElem = document.createElement('input'); 
    return cityElem; 
// City dropdownlist’s read method 
function CityRead() { 
    return cityObj.text; 
// City dropdownlist’s destroy method 
function CityDestroy() { 
// City dropdownlist’s write method 
function CityWrite(args) { 
    // Create city dropdownlist and append it to the element 
    var gridObj = document.getElementById('Grid').ej2_instances[0]; 
    var index = parseInt(cityElem.closest('.e-row').getAttribute('aria-rowindex')); 
    // Get the cell value 
    var text = gridObj.currentViewData[index]["ShipCity"]; 
    // Initialize the dropdownlist query based on country dropdownlist’s value 
    var newQuery = new ej.data.Query().where('ShipCountry', 'equal', args.rowData["ShipCountry"]); 
    cityObj = new ej.dropdowns.DropDownList({ 
      dataSource: cityData, 
      fields: { value: 'City', text: 'ShipCity' }, 
      // Set the dropdownlist query 
      query: newQuery, 
      // Set the cell value as default text to the dropdownlist 
      text: text, 
      placeholder: 'Select a city', 
      floatLabelType: 'Never' 

Since you are using batch editing, you can use the below code for changing the city dropdownlist to edit state when the country dropdownlist is edited, 

// Grid’s cellSaved event function 
function onCellSaved(args) { 
    var gridObj = document.getElementById('Grid').ej2_instances[0]; 
    // Check if saved cell is country dropdownlist  
    if (args.columnName === "ShipCountry") { 
      // Get the row’s index  
      var rowIndex = parseInt(args.cell.closest('.e-row').getAttribute('aria-rowindex')); 
      // Use the editCell method to edit the city dropdownlist  
      gridObj.editCell(rowIndex, "ShipCity"); 

We have prepared a sample based on this for your reference. You can find it below, 

Let us know if you have any concerns.

Seeni Sakthi Kumar S 

AI Ainab September 16, 2021 10:06 PM


I checked the attached application.

It works only for edit but not for create

no drop down on create

RR Rajapandi Ravi Syncfusion Team September 20, 2021 08:43 AM

Hi Ainab, 

Thanks for the update 

We have checked our attached sample and we are able to reproduce your mentioned problem at our end. When clicking on Add button in the toolbar it throws the script error in the console window. It was the cause of the problem. To overcome the problem, we suggest you use the below way to achieve your requirement. Please refer the below code example and screenshot for more information. 

function CountryWrite(args) { //use argument here 
    var gridObj = document.getElementById('Grid').ej2_instances[0]; 
        var text = args.rowData.ShipCountry; //get the shipcountry value by using argument 
    countryObj = new ej.dropdowns.DropDownList({ 
      dataSource: countryData, 
      fields: { value: 'Country', text: 'ShipCountry' }, 
      text: text, 
      placeholder: 'Select a country', 
      .  .  .  .  .  .  .  .  . 
      .  .  .  .  .  .  .  .  . 
      .  .  .  .  .  .  .  .  .  



Rajapandi R 

Live Chat Icon For mobile
Up arrow icon