|
<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-columns>
<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">
</e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
// 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() {
countryObj.destroy();
}
// 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'
});
countryObj.appendTo(countryElem);
}
// 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() {
cityObj.destroy();
}
// 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'
});
cityObj.appendTo(cityElem);
}
</script> | 
