Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 149275 | Nov 20,2019 11:29 AM UTC | Nov 21,2019 09:44 AM UTC | ASP.NET Core - EJ 2 | 1 |
|
Tags: DataGrid |
|
<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> |
|
// 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");
}
} |
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.
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.
