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.
Hi
EJ2.Grid in ASP.Net Core with Razor Pages.
Do you have sample code for a cascading dropdownlist in a
grid for Razor Pages?
Regards,
/S
|
<ejs-grid id="Grid" dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true" height="300">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>
<e-grid-columns>
<e-grid-column field="OrderID" width="110" isPrimaryKey=true></e-grid-column>
<e-grid-column field="ShipCountry" headerText="ShipCountry" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="110"></e-grid-column>
<e-grid-column field="ShipCity" width="110" edit="@(new {create = "createcity", read = "readcity", destroy = "destroycity", write = "writecity"})"> </e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function create() {
countryElem = document.createElement('input');
return countryElem;
};
function read() {
return countryObj.text;
};
function destroy() {
countryObj.destroy();
};
function write() {
countryObj = new ej.dropdowns.DropDownList({
dataSource: country,
fields: { value: 'countryId', text: 'countryName' },
change: function () {
stateObj.enabled = true;
based on the country(filter for state column) we have bind data for city column
var tempQuery = new ej.data.Query().where('countryId', 'equal', countryObj.value);
stateObj.query = tempQuery;
stateObj.text = null;
stateObj.dataBind();
},
placeholder: 'Select a country',
floatLabelType: 'Never'
});
countryObj.appendTo(countryElem);
};
function createcity() {
stateElem = document.createElement('input');
return stateElem;
};
function readcity() {
return stateObj.text;
};
function destroycity() {
stateObj.destroy();
};
function writecity() {
stateObj = new ej.dropdowns.DropDownList({
dataSource: state,
fields: { value: 'stateId', text: 'stateName' },
enabled: false,
placeholder: 'Select a state',
floatLabelType: 'Never'
});
stateObj.appendTo(stateElem);
}
</script> |
Hi
When I save the grid the name of country and state in
dropdowns are posted correctly but countryId and stateId are always original
values. The changed ids in dropdown are never sent to server on postback. Do you have a sample
with insert and update?
|
<ejs-grid id="Grid" dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true" height="300">
<e-datamanager url="/Home/UrlDatasource" insertUrl="/Home/Insert" updateUrl="/Home/Update" adaptor="UrlAdaptor"></e-datamanager>
<e-grid-editSettings allowAdding="true" allowEditing="true"></e-grid-editSettings>
<e-grid-columns>
<e-grid-column field="OrderID" width="110" isPrimaryKey=true></e-grid-column>
<e-grid-column field="ShipCountry" valueAccessor="@("shipCountry")" headerText="ShipCountry" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="110"></e-grid-column>
<e-grid-column field="ShipCity" valueAccessor="@("shipCity")" width="110" edit="@(new {create = "createcity", read = "readcity", destroy = "destroycity", write = "writecity"})"> </e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function shipCountry(field, data, column) {
return (data[field] === '1') ? 'United States' : 'Australia';
}
function shipCity(field, data) {
var city;
switch (data[field]) {
case '101':
city = "New York";
break;
. . . .
}
return city;
}
function create() {
countryElem = document.createElement('input');
return countryElem;
};
function read() {
return countryObj.value;
};
function destroy() {
countryObj.destroy();
};
function write(args) {
countryObj = new ej.dropdowns.DropDownList({
dataSource: country,
fields: { value: 'countryId', text: 'countryName' },
value: args.rowData['ShipCountry'],
change: function () {
stateObj.enabled = true;
var tempQuery = new ej.data.Query().where('countryId', 'equal', countryObj.value);
stateObj.query = tempQuery;
stateObj.text = null;
stateObj.dataBind();
},
placeholder: 'Select a country',
floatLabelType: 'Never'
});
countryObj.appendTo(countryElem);
};
function createcity() {
stateElem = document.createElement('input');
return stateElem;
};
function readcity() {
return stateObj.value;
};
function destroycity() {
stateObj.destroy();
};
function writecity(args) {
stateObj = new ej.dropdowns.DropDownList({
dataSource: state,
fields: { value: 'stateId', text: 'stateName' },
enabled: false,
value: args.rowData['ShipCity'],
placeholder: 'Select a state',
floatLabelType: 'Never'
});
stateObj.appendTo(stateElem);
}
</script> |
|
Index.cshtml
function shipCity(field, data) {
var city;
var swithData = data[field].toString();
switch (swithData) {
case '101':
city = "New York";
break;
case '102':
city = "Virginia";
break;
case '103':
city = "Washington";
break;
case '104':
city = "Queensland";
break;
case '105':
city = "Tasmania";
break;
case '106':
city = "Victoria";
}
return city;
}
var country = [
{ countryName: 'United States', countryId: 1 },
{ countryName: 'Australia', countryId: 2 }
];
var state = [
{ stateName: 'New York', countryId: 1, stateId: 101 },
{ stateName: 'Virginia ', countryId: 1, stateId: 102 },
{ stateName: 'Washington', countryId: 1, stateId: 103 },
{ stateName: 'Queensland', countryId: 2, stateId: 104 },
{ stateName: 'Tasmania ', countryId: 2, stateId: 105 },
{ stateName: 'Victoria', countryId: 2, stateId: 106 }
];
function write(args) {
countryObj = new ej.dropdowns.DropDownList({
dataSource: country,
fields: { value: 'countryId', text: 'countryName' },
value: args.rowData['ShipCountry'],
change: function () {
stateObj.enabled = true;
var tempQuery = new ej.data.Query().where('countryId', 'equal', countryObj.value);
stateObj.query = tempQuery;
stateObj.text = null;
stateObj.dataBind();
},
placeholder: 'Select a country',
floatLabelType: 'Never'
});
countryObj.appendTo(countryElem);
}; |
