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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

DropDown In Grid

Thread ID:





149275 Nov 20,2019 11:29 AM UTC Nov 21,2019 09:44 AM UTC ASP.NET Core - EJ 2 1
Tags: DataGrid
Naga Padmasree
Asked On November 20, 2019 11:29 AM UTC


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())

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On November 21, 2019 09:44 AM UTC

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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon