Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
143402 | Mar 19,2019 09:29 AM UTC | Aug 11,2020 08:05 AM UTC | ASP.NET Core - EJ 2 | 5 |
![]() |
Tags: DataGrid |
<div class="container">
<ejs-grid id="Grid" allowPaging=true load='load'>
<e-grid-pagesettings pageSize="4"> </e-grid-pagesettings>
<e-data-manager url='https://js.syncfusion.com/demos/ejservices//Wcf/Northwind.svc/Employees/' adaptor="ODataAdaptor" crossdomain="true"></e-data-manager>
<e-grid-columns>
<e-grid-column field="EmployeeID" headerText="Employee ID" width="110"></e-grid-column>
<e-grid-column field="FirstName" headerText="First Name" width="110"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
<script>
function load(args) {
this.childGrid = {
dataSource: new ej.data.DataManager({
url: "https://js.syncfusion.com/demos/ejservices//Wcf/Northwind.svc/Orders/",
adaptor: new ej.data.ODataAdaptor(),
crossDomain: true
}),
queryString: 'EmployeeID', //queryString value will be same in both parent and child grid dataSource
allowPaging: true,
pageSettings: { pageSize: 5 },
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
};
}
</script> |
[Index.cshtml]
<ejs-grid id="Grid" gridLines="Both" load="gridLoad" allowPaging="true">
<e-data-manager url="/Home/CoursesDatasource" adaptor="UrlAdaptor" ></e-data-manager>
<e-grid-columns>
<e-grid-column field="CourseId" isPrimaryKey="true" headerText="Cource ID" textAlign="Right" width="120"> </e-grid-column>
<e-grid-column field="CourseName" headerText="Course Name" width="150"></e-grid-column>
<e-grid-column field="Duration" headerText="Duration" width="170"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function gridLoad(args) {
this.childGrid = {
dataSource: new ej.data.DataManager({
url: "Home/ClassesDatasource",
adaptor: new ej.data.UrlAdaptor(),
crossDomain: true
}),
allowPaging: true,
queryString: 'CourseId',
columns: [
{ field: 'ClassId', headerText: 'Class ID', width: 120 },
{ field: 'CourseName', headerText: 'Course Name', width: 120 },
{ field: 'Session', headerText: 'Session', width: 120 }
],
childGrid: {
dataSource: new ej.data.DataManager({
url: "Home/SubjectsDatasource",
adaptor: new ej.data.UrlAdaptor(),
crossDomain: true
}),
queryString: 'ClassId',
columns: [
{ field: 'SubId', headerText: 'Subject ID', width: 120 },
{ field: 'SubjectName', headerText: 'Subject Name', width: 120 },
],
childGrid: {
dataSource: new ej.data.DataManager({
url: "Home/TopicsDatasource",
adaptor: new ej.data.UrlAdaptor(),
crossDomain: true
}),
queryString: 'SubId',
columns: [
{ field: 'SubId', headerText: 'Subject ID', width: 120 },
{ field: 'TopicName', headerText: 'Topic Name', width: 120 },
{ field: 'TopicId', headerText: 'Topic ID', width: 120 },
],
childGrid: {
dataSource: new ej.data.DataManager({
url: "Home/SubTopicsDatasource",
adaptor: new ej.data.UrlAdaptor(),
crossDomain: true
}),
queryString: 'TopicId',
columns: [
{ field: 'TopicId', headerText: 'Topic ID', width: 120 },
{ field: 'SubtopicName', headerText: 'SubTopic Name', width: 120 },
],
}
}
}
};
}
</script> |
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.