Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
149569 | Nov 30,2019 05:54 PM UTC | Dec 11,2019 01:13 PM UTC | ASP.NET Core - EJ 2 | 12 |
![]() |
Tags: DataGrid |
Index.cshtml
@{
ViewData["Title"] = "Home Page";
}
<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="CustomerID" headerText="CustomerID" width="110"></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="ShipName" width="110" edit="@(new {create = "createcity", read = "readcity", destroy = "destroycity", write = "writecity"})"> </e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
var countryElem;
var countryObj;
var stateElem;
var stateObj;
//data for shipCounty
var country = [
{ countryName: 'United States', countryId: '1' },
{ countryName: 'Australia', countryId: '2' }
];
//data for shipName
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 create() {
countryElem = document.createElement('input');
return countryElem;
};
function read() {
return countryObj.text;
};
function destroy() {
countryObj.destroy();
};
function write(args) {
// creating dropDownList edit for ShipCountry column
countryObj = new ej.dropdowns.DropDownList({
dataSource: country,
fields: { value: 'countryId', text: 'countryName' },
value: args.rowData['ShipCountry'],
change: function () {
//enable the shipCity DropDownList dynamically
stateObj.enabled = true;
//Apply the query to change the dropDown DataSource change based on ShipCoutry
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(args) {
// creating dropDownList edit for ShipName column
stateObj = new ej.dropdowns.DropDownList({
dataSource: state,
fields: { value: 'stateId', text: 'stateName' },
//initially disable the ShipName column dropDownlist before selecting any value in SHipCountry
enabled: false,
value: args.rowData['ShipName'],
placeholder: 'Select a state',
floatLabelType: 'Never'
});
stateObj.appendTo(stateElem);
}
</script> |
<ejs-grid id="Grid" dataSource="@ViewBag.datasource">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Empolyee Name" foreignKeyValue="FirstName" dataSource="ViewBag.foreign" width="150"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
<e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid> |
Index.cshtml
@{
ViewData["Title"] = "Home Page";
}
@{
. . .
Object ShipCountryvalueAccess;
ShipCountryvalueAccess = "ShipCountryvalueAccessFn";
}
<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="CustomerID" visible="false" headerText="CustomerID" width="110"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" valueAccessor="ShipCountryvalueAccess" width="150" editType='dropdownedit'></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function ShipCountryvalueAccessFn(field, data, column) {
// in the data and field you will get the value for other columns.
return data.CustomerID;
}
</script>
|
Index.cshtml
<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="EmployeeID" visible="false"></e-grid-column>
<e-grid-column field="ShipCountry" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="110"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
var countryElem;
var countryObj;
var state = [
{ stateName: 'New York', countryId: 1 },
{ stateName: 'California', countryId: 1 },
{ stateName: 'Virginia ', countryId: 2 },
{ stateName: 'Washington', countryId: 3 },
{ stateName: 'Queensland', countryId: 4 },
{ stateName: 'Tasmania ', countryId: 5 },
{ stateName: 'Victoria', countryId: 6 }
];
function create() {
countryElem = document.createElement('input');
return countryElem;
};
function read() {
// here you can return the text or value as per your requirement
return countryObj.vaule;
};
function destroy() {
countryObj.destroy();
};
function write(args) {
countryObj = new ej.dropdowns.DropDownList({
dataSource: state,
// here we have showed and saved statename, you can change the text and value as per your requirement.
fields: { value: 'stateName', text: 'stateName' },
value: args.rowData['ShipCountry'],
// applied the quet based on the EmployeeID value to retrieve the data
query: new ej.data.Query().where('countryId', 'equal', args.rowData.EmployeeID ),
placeholder: 'Select a value',
floatLabelType: 'Never'
});
countryObj.appendTo(countryElem);
};
</script>
|
Index.cshtml
@{
ViewData["Title"] = "Home Page";
}
@{
var editParams = new Syncfusion.EJ2.DropDowns.DropDownList() { ActionComplete="actionComplete", ActionBegin = "DropDownactionBegin", DataSource ="state", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Text = "stateName", Value= "countryId" } };
// mentioned stateName as text , show it will be showed on dropdown
//mentioned CountryID as value, show it will be saved to Grid.
}
<ejs-grid id="Grid" rowSelected="onRowSelected" 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="EmployeeID" visible="false"></e-grid-column>
<e-grid-column field="ShipCountry" editType="dropdownedit" edit="@(new {@params=editParams })" width="110"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
var employeeValue;
function actionComplete(args) {
return false;
}
function onRowSelected(args) {
employeeValue = args.data["EmployeeID"];
}
function DropDownactionBegin(args) {
args.query = new ej.data.Query().where('countryId', 'equal', employeeValue);
}
var state = [
{ stateName: 'New York', countryId: 1 },
{ stateName: 'California', countryId: 1 },
{ stateName: 'Virginia ', countryId: 2 },
{ stateName: 'Washington', countryId: 3 },
{ stateName: 'Queensland', countryId: 4 },
{ stateName: 'Tasmania ', countryId: 5 },
{ stateName: 'Victoria', countryId: 6 }
];
</script>
|
<ejs-grid id="Grid" dataSource="@ViewBag.datasource">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Empolyee Name" foreignKeyValue="FirstName" dataSource="ViewBag.foreign" width="150"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
<e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid> |
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.