<ejs-grid id="HierarchyGrid" queryString="kitId" dataSource="ViewBag.Data" gridLines="Both" load="load" toolbar="@(new List<string>() { "Add", "Edit", "Delete"})" allowPaging="true" allowFiltering="true">
<e-grid-pagesettings pageSizes="true">e-grid-pagesettings>
<e-grid-filterSettings type="Excel">e-grid-filterSettings>
<e-data-manager url="/Admin/UrlDatasource" updateUrl="/Admin/Update" insertUrl="/Admin/Insert" removeUrl="/Admin/Delete" adaptor="UrlAdaptor" crossdomain="true">e-data-manager>
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" showConfirmDialog="true" mode="Dialog" showDeleteConfirmDialog="true">e-grid-editSettings>
<e-grid-columns>
<e-grid-column field="kitId" headerText="KitId" isPrimaryKey="true" textAlign="Right" width="120">e-grid-column>
<e-grid-column field="dateCreated" hidden="" defaultValue="@DateTime.Now" textAlign="Right" hideAtMedia="true" width="120">e-grid-column>
<e-grid-column field="workOrderNumber" defaultValue="" headerText="Work Order
#" width="150">e-grid-column>
<e-grid-column field="partNumber" defaultValue="" headerText="Part
Number" width="130">e-grid-column>
<e-grid-column field="qtyIn" headerText="In Qty" defaultValue="" width="120">e-grid-column>
<e-grid-column field="firstTimeBuild" type="boolean" displayAsCheckBox="true" defaultValue="" headerText="1st Time
Build"
width="140">e-grid-column>
<e-grid-column field="isCompleted" type="boolean" displayAsCheckBox="true" defaultValue="" headerText="Completed?" width="140">e-grid-column>
<e-grid-column field="processCount" defaultValue="" headerText="Process
Count"
allowEditing="false" width="140">e-grid-column>
e-grid-columns>
ejs-grid>
<script>
function load(args) {
this.childGrid = {
dataSource: new ej.data.DataManager({
url: "/Process/ReturnProcess/",
adaptor: new ej.data.UrlAdaptor(),
crossDomain: true
}),
queryString:
'kitId',
columns: [
{ field: 'kitId', headerText: 'KitId', width: 120 },
{ field: 'processType', headerText: 'Process Name', width: 120 },
{ field: 'isClosed', headerText: 'Closed', width: 120 }
],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
toolbar: ['Add', 'Delete']
};
console.log(args);
}
script>
public IActionResult ReturnProcess(Guid KitId)
{
return
Json(_context.PROCESS_TBL.Where(x => x.KitId == KitId).ToList());
}
|
<div>
<ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Delete","Edit","Update", "Cancel" })" gridLines="Both" load="load" allowPaging="true">
<e-data-manager url="/Home/EmployeeDatasource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete"></e-data-manager>
<e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true"></e-grid-editSettings>
<e-grid-pagesettings pageCount="5"></e-grid-pagesettings>
<e-grid-columns>
<e-grid-column field="EmployeeID" headerText="EmployeeID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
<script>
function load(args) {
this.childGrid = {
dataSource: new ej.data.DataManager({
url: "Home/UrlDatasource",
adaptor: new ej.data.UrlAdaptor(),
crossDomain: true
}),
queryString: 'EmployeeID',
columns: [
{ field: 'EmployeeID', headerText: 'KitId', width: 120 },
],
};
}
</script> |
|
public IActionResult UrlDatasource([FromBody]Data dm)
{
var val = OrdersDetails.GetAllRecords();
var Data = val.ToList();
if (dm.Where != null)
{
Data = OrdersDetails.GetAllRecords().Where(or => or.EmployeeID == dm.Where[0].value).ToList(); fetch child grid data(filter child grid data based on parent)
}
int count = Data.Count();
if (dm.skip != 0)
Data = Data.Skip(dm.skip).ToList();
if (dm.take != 0)
Data = Data.Take(dm.take).ToList();
return dm.requiresCounts ? Json(new { result = Data, count = count }) : Json(Data);
} |
|
|
|
<script>
function load(args) {
this.childGrid = {
dataSource: new ej.data.DataManager({
url: "Home/UrlDatasource",
. . . .
}),
queryString: 'EmployeeID',
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 120, visible: false, isPrimaryKey: true},
],
};
}
</script> |
|
<script>
function load(args) {
this.childGrid = {
dataSource: new ej.data.DataManager({
url: "Home/UrlDatasource",
. . . .
adaptor: new ej.data.UrlAdaptor(),
crossDomain: true
}),
queryString: 'EmployeeID',
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
columns: [
{ field: 'EmployeeID', headerText: 'KitId', isIdendity: true},
],
actionBegin(args) {
if (args.requestType === 'add') {
// get the parentID value and assign to child grid field
args.data.EmployeeID = this.parentDetails.parentKeyFieldValue;
}
}
};
}
</script> |
|
<script>
function load(args) {
this.childGrid = {
dataSource: new ej.data.DataManager({
url: "Home/UrlDatasource",
. . . .
}),
queryString: 'EmployeeID',
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
columns: [
{ field: 'Verified', headerText: 'Closed', width: 120, displayAsCheckBox: true, editType: 'booleanedit' }
],
};
}
</script> |
|
<div>
<ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowResizing="true" allowPaging="true" allowSorting="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Cancel", "Update"})">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Employee ID" width="120"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" editType="dropdownedit" edit="new {@params = new { dataSource= ViewBag.DropdownData} }" width="120"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div> |
|
...
...
namespace TestSample.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
ViewBag.DataSource = OrdersDetails.GetAllRecords().ToList();
ViewBag.DropdownData = OrdersDetails1.GetAllRecords().ToList(); //dropdown data as a list
return View();
}
}
public class OrdersDetails
{
...
} |
|
<div>
<ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Delete","Edit","Update", "Cancel" })" gridLines="Both" load="load" allowPaging="true">
<e-grid-columns>
<e-grid-column field="EmployeeID" headerText="EmployeeID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
<script>
function load() {
this.childGrid = {
queryString: 'EmployeeID',
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
columns: [
{ field: 'ShipCountry', headerText: 'ShipCountry', width: 120, editType: 'dropdownedit', edit: { params: {dataSource: @Html.Raw(Json.Serialize(@ViewBag.DropDownData)) } } },
],
}
};
} |
|
<div>
<ejs-grid id="Grid" gridLines="Both" load="load" allowPaging="true">
<e-grid-columns>
<e-grid-column field="EmployeeID" headerText="EmployeeID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column>
. . . .
</e-grid-columns>
</ejs-grid>
</div>
<script>
function load() {
this.childGrid = {
queryString: 'EmployeeID',
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
columns: [
{ field: 'EmployeeID', headerText: 'KitId', width: 120},
//its necessary to set empty query and return false in actionComplete event
{ field: 'ShipCountry', headerText: 'ShipCountry', width: 120, editType: 'dropdownedit', edit: { params: { dataSource: @Html.Raw(Json.Serialize(@ViewBag.DropDownData)), query: new ej.data.Query(), actionComplete: () => false } } },
],
}; |
|
public IActionResult Index()
{
ViewBag.DropdownData = new string[] { "India", "UK", "USA" }; //dropdown data as a list
return View();
} |
|
<div>
<ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Edit", "Update", "Cancel" })" allowPaging="true" allowFiltering="true">
<e-datamanager url="/Home/UrlDatasource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update"></e-datamanager>
. . . . .
<e-grid-columns>
<e-grid-column field="ShipCity" headerText="Ship City" width="170" editType="dropdownedit" edit="@(new { @params = new Syncfusion.EJ2.DropDowns.DropDownList() {
DataSource = new List<object>() { new { ShipCity = "Brazil" }, new { ShipCity = "USA" }, new { ShipCity = "Germany" } },
Query = "new ej.data.Query()",
Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Text = "ShipCity", Value = "ShipCity" }
}
})"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div> |