|
In certain cases, changing the dataSource of one dropdown on selecting a value from other dropdown is known as the cascading effect. This effect can be applied to two dropdown controls within Grid upon editing that is explained in detail in this document. Solution The following example explains in detail on how to achieve the cascading effect in Grid for two ForeignKey columns that refreshes the dataSource of one dropdown based on the value selected in another dropdown. Example
HTML: <div id="Grid"></div>
Javascript: <script>
var data = @Html.Raw(Json.Encode(ViewBag.designation))
var data1 = @Html.Raw(Json.Encode(ViewBag.country))
$(function () {
$("#Grid").ejGrid({
// the datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
dataSource: window.gridData,
allowPaging:true,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true},
toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] },
actionComplete:"Complete",
columns: [
{ field: "OrderID", headerText: 'OrderID', isPrimaryKey: true, width: 75 },
{ field: "EmployeeID", headerText: 'EmployeeID', width: 75 },
{ field: "CustomerID", headerText: 'Designation', foreignKeyField: "CustomerID", foreignKeyValue: "Designation", dataSource: data, width: 75 },
{ field: "ShipCity", headerText: 'Country', foreignKeyField: "ShipCity", foreignKeyValue: "country", dataSource: data1, width: 75 }
]
});
});
</script>
C# namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public static List<Orders> order = new List<Orders>();
public static List<Customers> customer = new List<Customers>();
public static List<Country> city = new List<Country>();
public ActionResult Index()
{
BindDataSource();
ViewBag.datasource = order;
ViewBag.designation = customer;
ViewBag.country = city;
return View();
}
public ActionResult DataSource(string designation)
{
var userTemplates = city.Where(c => c.Designation == designation).Distinct().ToList();
var data = new List<object>();
foreach (var Cust in userTemplates)
{
data.Add(new { value = Cust.ShipCity, text = Cust.country });
}
return Json(data, JsonRequestBehavior.AllowGet);
}
private void BindDataSource()
{
int code = 10000;
for (int i = 1; i < 10; i++)
{
order.Add(new Orders(code + 1, "ALFKI", i + 2, 2.3 * i, "Berlin", "Germany"));
order.Add(new Orders(code + 2, "ANATR", i + 0, 3.3 * i, "Madrid", "Spain"));
order.Add(new Orders(code + 3, "ANTON", i + 4, 4.3 * i, "Cholchester", "UK"));
order.Add(new Orders(code + 4, "BLONP", i + 1, 5.3 * i, "Marseille", "France"));
order.Add(new Orders(code + 5, "BOLID", i + 3, 6.3 * i, "Tsawassen", "Canada"));
code += 5;
}
customer.Add(new Customers("ALFKI", "Sales Rep"));
customer.Add(new Customers("ANATR", "Admin"));
customer.Add(new Customers("ANTON", "Manager"));
customer.Add(new Customers("BLONP", "Representative"));
customer.Add(new Customers("BOLID", "Assistant Manager"));
city.Add(new Country("Berlin", "Sales Rep", "India"));
city.Add(new Country("Madrid", "Admin", "USA"));
city.Add(new Country("Cholchester", "Manager", "Russia"));
city.Add(new Country("Marseille", "Representative", "Australia"));
city.Add(new Country("Tsawassen", "Assistant Manager", "UK"));
} }
}
MVC RAZOR: @(Html.EJ().Grid<object>("Grid")
.Datasource(((IEnumerable<object>)ViewBag.datasource))
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
.AllowPaging()
.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);
});
})
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(75).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width(75).Add(); col.Field("CustomerID").HeaderText("Designation").ForeignKeyField("CustomerID").ForeignKeyValue("Designation").DataSource(((IEnumerable<object>)ViewBag.designation)).Width(75).Add();//Dropdownlist based on which the Country column dropdown is refreshed col.Field("ShipCity").HeaderText("Country").ForeignKeyField("ShipCity").ForeignKeyValue("country").DataSource(((IEnumerable<object>)ViewBag.country)).Width(75).Add();//Refreshed upon change in Designation Column
})
.ClientSideEvents(eve => eve.ActionComplete("Complete")
))
C# namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public static List<Orders> order = new List<Orders>();
public static List<Customers> customer = new List<Customers>();
public static List<Country> city = new List<Country>();
public ActionResult Index()
{
BindDataSource();
ViewBag.datasource = order;
ViewBag.designation = customer;
ViewBag.country = city;
return View();
}
public ActionResult DataSource(string designation)
{
var userTemplates = city.Where(c => c.Designation == designation).Distinct().ToList();
var data = new List<object>();
foreach (var Cust in userTemplates)
{
data.Add(new { value = Cust.ShipCity, text = Cust.country });
}
return Json(data, JsonRequestBehavior.AllowGet);
}
private void BindDataSource()
{
int code = 10000;
for (int i = 1; i < 10; i++)
{
order.Add(new Orders(code + 1, "ALFKI", i + 2, 2.3 * i, "Berlin", "Germany"));
order.Add(new Orders(code + 2, "ANATR", i + 0, 3.3 * i, "Madrid", "Spain"));
order.Add(new Orders(code + 3, "ANTON", i + 4, 4.3 * i, "Cholchester", "UK"));
order.Add(new Orders(code + 4, "BLONP", i + 1, 5.3 * i, "Marseille", "France"));
order.Add(new Orders(code + 5, "BOLID", i + 3, 6.3 * i, "Tsawassen", "Canada"));
code += 5;
}
customer.Add(new Customers("ALFKI", "Sales Rep"));
customer.Add(new Customers("ANATR", "Admin"));
customer.Add(new Customers("ANTON", "Manager"));
customer.Add(new Customers("BLONP", "Representative"));
customer.Add(new Customers("BOLID", "Assistant Manager"));
city.Add(new Country("Berlin", "Sales Rep", "India"));
city.Add(new Country("Madrid", "Admin", "USA"));
city.Add(new Country("Cholchester", "Manager", "Russia"));
city.Add(new Country("Marseille", "Representative", "Australia"));
city.Add(new Country("Tsawassen", "Assistant Manager", "UK"));
} }
}
ASP.NET <ej:Grid ID="FlatGrid" runat="server" AllowPaging="true"> <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"></EditSettings> <ToolbarSettings ShowToolbar="true" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> <ClientSideEvents ActionComplete="Complete" /> <Columns> <ej:Column Field="OrderID" HeaderText="OrderID" IsPrimaryKey="true" Width="75"/> <ej:Column Field="EmployeeID" HeaderText="EmployeeID" Width="75"/> <ej:Column Field="CustomerID" HeaderText="Designation" ForeignKeyField="CustomerID" ForeignKeyValue="Designation" Width="75"/> <ej:Column Field="ShipCity" HeaderText=”Country" ForeignKeyField="ShipCity" ForeignKeyValue="country" Width="75" /> </Columns> </ej:Grid>
C# namespace WebApplication21
{
public partial class _Default : Page
{
public static List<Orders> order = new List<Orders>();
public static List<Customers> customer = new List<Customers>();
public static List<Country> city = new List<Country>();
protected void Page_Load(object sender, EventArgs e)
{
BindDataSource();
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object DataSource(string designation)
{
var userTemplates = city.Where(c => c.Designation == designation).Distinct().ToList();
var data = new List<object>();
foreach (var Cust in userTemplates)
{
data.Add(new { value = Cust.ShipCity, text = Cust.country });
}
return data;
}
private void BindDataSource()
{
int code = 10000;
for (int i = 1; i < 10; i++)
{
order.Add(new Orders(code + 1, "ALFKI", i + 2, 2.3 * i, "Berlin", "Germany"));
order.Add(new Orders(code + 2, "ANATR", i + 0, 3.3 * i, "Madrid", "Spain"));
order.Add(new Orders(code + 3, "ANTON", i + 4, 4.3 * i, "Cholchester", "UK"));
order.Add(new Orders(code + 4, "BLONP", i + 1, 5.3 * i, "Marseille", "France"));
order.Add(new Orders(code + 5, "BOLID", i + 3, 6.3 * i, "Tsawassen", "Canada"));
code += 5;
}
this.FlatGrid.DataSource = order;
this.FlatGrid.DataBind();
customer.Add(new Customers("ALFKI", "Sales Rep"));
customer.Add(new Customers("ANATR", "Admin"));
customer.Add(new Customers("ANTON", "Manager"));
customer.Add(new Customers("BLONP", "Representative"));
customer.Add(new Customers("BOLID", "Assistant Manager"));
var index = this.FlatGrid.Columns.FindIndex(col => col.Field == "CustomerID");
this.FlatGrid.Columns.ElementAt(index).DataSource = customer;
city.Add(new Country("Berlin", "Sales Rep","India"));
city.Add(new Country("Madrid", "Admin","USA"));
city.Add(new Country("Cholchester", "Manager","Russia"));
city.Add(new Country("Marseille", "Representative","Australia"));
city.Add(new Country("Tsawassen", "Sales Rep","UK"));
var index1 = this.FlatGrid.Columns.FindIndex(col => col.Field == "ShipCity");
this.FlatGrid.Columns.ElementAt(index1).DataSource = city;
}
ASP.NET CORE HTML <ej-grid id="FlatGrid" datasource="ViewBag.datasource" action-complete="Complete">
<e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true"></e-edit-settings>
<e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' />
<e-columns>
<e-column field="OrderID" header-text="OrderID" width="75" is-primary-key="true"></e-column>
<e-column field="EmployeeID" header-text="EmployeeID" width="75"></e-column>
<e-column field="CustomerID" header-text="Designation" foreign-key-field="CustomerID" foreign-key-value="Designation" datasource="ViewBag.designation" width="75"></e-column>
<e-column field="ShipCity" header-text="Country" foreign-key-field="ShipCity" foreign-key-value="country" datasource="ViewBag.country" width="75"></e-column>
</e-columns>
</ej-grid>
C# namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
public static List<Orders> order = new List<Orders>();
public static List<Customers> customer = new List<Customers>();
public static List<Country> city = new List<Country>();
public IActionResult Index()
{
BindDataSource();
ViewBag.datasource = order;
ViewBag.designation = customer;
ViewBag.country = city;
return View();
}
public ActionResult DataSource(string designation)
{
var userTemplates = city.Where(c => c.Designation == designation).Distinct().ToList();
var data = new List<object>();
foreach (var Cust in userTemplates)
{
data.Add(new { value = Cust.ShipCity, text = Cust.country });
}
return Json(data);
}
private void BindDataSource()
{
int code = 10000;
for (int i = 1; i < 10; i++)
{
order.Add(new Orders(code + 1, "ALFKI", i + 2, 2.3 * i, "Berlin", "Germany"));
order.Add(new Orders(code + 2, "ANATR", i + 0, 3.3 * i, "Madrid", "Spain"));
order.Add(new Orders(code + 3, "ANTON", i + 4, 4.3 * i, "Cholchester", "UK"));
order.Add(new Orders(code + 4, "BLONP", i + 1, 5.3 * i, "Marseille", "France"));
order.Add(new Orders(code + 5, "BOLID", i + 3, 6.3 * i, "Tsawassen", "Canada"));
code += 5;
}
customer.Add(new Customers("ALFKI", "Sales Rep"));
customer.Add(new Customers("ANATR", "Admin"));
customer.Add(new Customers("ANTON", "Manager"));
customer.Add(new Customers("BLONP", "Representative"));
customer.Add(new Customers("BOLID", "Assistant Manager"));
city.Add(new Country("Berlin", "Sales Rep", "India"));
city.Add(new Country("Madrid", "Admin", "USA"));
city.Add(new Country("Cholchester", "Manager", "Russia"));
city.Add(new Country("Marseille", "Representative", "Australia"));
city.Add(new Country("Tsawassen", "Assistant Manager", "UK"));
} }
}
ANGULAR HTML <ej-grid id="Grid" #grid [dataSource]="datasource" [toolbarSettings]="toolbarItems" [editSettings]="editSettings" (actionComplete)="Complete($event)" > <e-columns> <e-column field="OrderID" headerText="OrderID" isPrimaryKey="true" width="75"></e-column> <e-column field="EmployeeID" headerText="EmployeeID" width="75" ></e-column> <e-column field="CustomerID" headerText="Designation" width="75" foreignKeyField= "CustomerID" foreignKeyValue= "Designation" [dataSource]= "data"></e-column> <e-column field="ShipCity" headerText="Country" width="75" foreignKeyField= "ShipCity" foreignKeyValue= "country" [dataSource]= "data1"></e-column> </e-columns> </ej-grid> TS import {Component, ViewEncapsulation,ViewChild} from '@angular/core';
import {CommonModule} from "@angular/common";
import { EJComponents } from "ej-angular2/src/ej/core";
@Component({
selector: 'ej-app',
templateUrl: 'src/grid/grid.component.html',
})
export class GridComponent {
public datasource;
public editSettings;
public toolbarItems;
public data;
public data1;
@ViewChild('grid') grid: EJComponents<any, any>;
constructor() {
//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.datasource = [
{OrderID:10001,EmployeeID:1,CustomerID:"ALFKI",ShipCity:"Berlin"},
{OrderID:10001,EmployeeID:1,CustomerID:"ALFKI",ShipCity:"Berlin"},
{OrderID:10002,EmployeeID:2,CustomerID:"ANATR",ShipCity:"Madrid"},
{OrderID:10003,EmployeeID:3,CustomerID:"BOLID",ShipCity:"Cholchester"},
{OrderID:10004,EmployeeID:4,CustomerID:"ANATR",ShipCity:"Tsawassen"},
{OrderID:10005,EmployeeID:5,CustomerID:"ANTON",ShipCity:"Berlin"},
{OrderID:10006,EmployeeID:6,CustomerID:"ALFKI",ShipCity:"Cholchester"},
{OrderID:10007,EmployeeID:7,CustomerID:"BLONP",ShipCity:"Marseille"},
{OrderID:10008,EmployeeID:8,CustomerID:"BOLID",ShipCity:"Tsawassen"}
];
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog: true};
this.toolbarItems = { showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel"]};
this.data = [
{CustomerID:"ALFKI",Designation:"Sales Rep"},
{CustomerID:"ANATR",Designation:"Admin"},
{CustomerID:"ANTON",Designation:"Manager"},
{CustomerID:"BLONP",Designation:"Representative"},
{CustomerID:"BOLID",Designation:"Assistant Manager"}];
this.data1 = [
{ShipCity:"Berlin",Designation:"Sales Rep",country:"India"},
{ShipCity:"Madrid",Designation:"Admin",country:"USA"},
{ShipCity:"Cholchester",Designation:"Manager",country:"Russia"},
{ShipCity:"Marseille",Designation:"Representative",country:"Australia"},
{ShipCity:"Tsawassen",Designation:"Assistant Manager",country:"UK"}
];
}
Complete(args: any) {
if (args.requestType == "beginedit" || args.requestType == "add") {
$("#GridCustomerID").ejDropDownList({ change: function(e){
$.ajax({
url: 'http://localhost:49449/Home/Datasource',
type: 'GET',
data: { "designation": e.text },//pass the selectedValue of the dropdown to server side
success: function (data1) {
$("#GridShipCity").ejDropDownList({ dataSource: data1 });//assign the filtered dataSource obtained from serverSide
$("#GridShipCity").ejDropDownList({ selectedIndex: 0 });
}
})
} });//bind the change event to dropdown
if (args.requestType == "beginedit") {
var titleObj = $("#GridCustomerID").data("ejDropDownList");//get the edited dropdown object
titleObj.selectItemByValue(args.rowData.CustomerID);
$.ajax({
url: 'http://localhost:49449/Home/Datasource',
type: 'GET',
data: { "designation": titleObj.getSelectedValue() },//passed the selectedValue of the dropdown to server side
success: function (data1) {
$("#GridShipCity").ejDropDownList({ dataSource: data1, selectedItemIndex: 0 });//assign the filtered dataSource obtained from serverSide
}
})
}
}
}
}
2. In the ActionComplete events of the Grid, the ValChange function is bound to the Change event of the ejDropDownList. The selected value of the Designation dropdown is passed to the server side on the Ajax call, getting the filtered data from the server side and assigning it to the Country dropdown’s dataSource. <script type="text/javascript">
function Complete(args) {
if (args.requestType == "beginedit" || args.requestType == "add") {
$("#GridCustomerID").ejDropDownList({ change: "ValChange" });//bind the change event to dropdown
if (args.requestType == "beginedit") {
var titleObj = $("#GridCustomerID").data("ejDropDownList");//get the edited dropdown object
$.ajax({
url: 'Home/DataSource',
type: 'GET',
data: { "designation": titleObj.selectedTextValue},//passed the selectedValue of the dropdown to server side
success: function (data1) {
$("#GridShipCity").ejDropDownList({ dataSource: data1 ,selectedItemIndex:0 });//assign the filtered dataSource obtained from serverSide
}
})
}
}
}
</script>
Result:
Figure 1Initial rendering of grid
Figure 2On editing a record
Figure 3On changing the value of designation column |
2X faster development
The ultimate ASP.NET MVC UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
Hi Laura,
We have prepared a sample based on the knowledge base document. We are not able to reproduce the reported issue. The sample can be download from below link
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionMvcApplication40-1317059239.zip
Kindly share the following details to reproduce the reported issue at our end.
1. Share the full grid rendering code
2. Share the screenshot for the script error in console window.
3. Essential studio version (XX.X.X.XX)
4. If possible try to reproduce the reported issue in provided sample
Regards,
Vignesh Natarajan
Hello can you update this sample in ASP MVC Core
In the cascading drop down, if a user picks one value/combination it should be unique, i.e. it should no longer be available in the other rows.
for DDl 1 - ddl2 - ddl 3 England - London - 20042
Once this selection is selected and added they should no longer be available in the futher rows below, and if they are deleted they should be added back
When I try to print this page, the css is totally messed up both here and the internal support ticket pages, its very hard to read
please fix CSS for printing