Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
143002 | Feb 28,2019 08:00 AM UTC | Mar 20,2019 10:27 AM UTC | ASP.NET Core - EJ 2 | 9 |
![]() |
Tags: DataGrid |
[index.cshtml]
<div class="col-lg-12 control-section" id="target" style="height:600px; width:700px">
<ejs-dialog id="parentDialog" width="500px" animationSettings="defaultanimation" visible="true" height="400px" target="#target"
showCloseIcon="true" header="First Dialog">
<e-content-template>
<ejs-grid id="parentGrid" dataSource="ViewBag.DataSource" allowPaging="true">
<e-grid-columns>
. . . .
<e-grid-column headerText="CustomButton" type="string" template="#template" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</e-content-template>
</ejs-dialog>
<ejs-dialog id="childDialog" width="300px" animationSettings="defaultanimation" visible="false" height="500px" target="#target"
showCloseIcon="true" >
<e-content-template>
<ejs-grid id="childGrid" dataSource="ViewBag.DataSource" allowPaging="true" >
. . . .
</ejs-grid>
</e-content-template>
</ejs-dialog>
</div>
</div>
<script id="template" type="text/x-template">
<button id="customBtn" onclick="parentBtnClick.apply(this,arguments)">ClickMe</button>
</script>
<script>
function parentBtnClick(e) { // Trigger grid button column click action
var dialogObj = document.getElementById('childDialog').ej2_instances[0];
dialogObj.show();
var parentGrid = document.getElementById("parentGrid").ej2_instances[0];
var parentGridSelectedRow = ej.grids.parentsUntil(e.target, "e-row");
var parentGridSelectedData = parentGrid.getRowObjectFromUID(parentGridSelectedRow.getAttribute("data-uid")).data;
var childGrid = document.getElementById("childGrid").ej2_instances[0];
childGrid.dataSource = [parentGridSelectedData];
console.log(parentGridSelectedData.OrderID); // Show primaryKey column value in console window
}
|
<div class="container">
<ejs-grid id="Grid" allowPaging=true load='load'>
<e-grid-pagesettings pageSize="4"> </e-grid-pagesettings>
<e-datamanager url='http://js.syncfusion.com/demos/ejservices//Wcf/Northwind.svc/Employees/' adaptor="ODataAdaptor" crossdomain="true"></e-datamanager>
<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({
adaptor: new ej.data.ODataAdaptor(),
crossDomain: true
}),
queryString: 'EmployeeID', //queryString value will be same in both parent and child grid
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>. . . |
I have try, but it not works and there are error
The <e-datamanager> tag is not allowed by parent <ejs-grid> tag helper. Only child tags with name(s) 'e-grid-columns, e-grid-aggregates, e-grid-filtersettings, e-grid-sortsettings, e-grid-groupsettings, e-grid-editsettings, e-grid-pagesettings, e-grid-rowdropsettings, e-grid-searchsettings, e-grid-selectionsettings, e-grid-textwrapsettings, e-data-manager' are allowed.
<ejs-dialog id="parentDialog" width="1000px" visible="false" target="#target" showCloseIcon="true" header="Audit Trail by Screen" zIndex="500" created="onLoadconfirm2">
<e-content-template>
<ejs-grid id="parentGrid" dataSource="ViewBag.AuditTrail" allowPaging="true" load="load">
<e-grid-pagesettings pageCount="5" pageSize="10" pageSizes="@(new string[] { "5", "10", "20", "All"}) "></e-grid-pagesettings>
<e-datamanager adaptor="ODataAdaptor" crossdomain="true"></e-datamanager>
<e-grid-columns>
<e-grid-column field="AuditTrailID" headerText="Audit Trail ID" textAlign="Center" isPrimaryKey="true" isIdentity="true" visible="false" showInColumnChooser="false"></e-grid-column>
<e-grid-column field="LoggedDate" headerText="Date" textAlign="Center"></e-grid-column>
<e-grid-column field="LoggedByName" headerText="Logged By" textAlign="Center"></e-grid-column>
<e-grid-column field="LoggedByNRIC" headerText="IC Number" textAlign="Center"></e-grid-column>
<e-grid-column field="Action" headerText="Action" textAlign="Center" width="150"></e-grid-column>
<e-grid-column field="UserID" headerText="User" visible="false" showInColumnChooser="false" textAlign="Center"></e-grid-column>
<e-grid-column headerText="CustomButton" type="string" template="#template2" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</e-content-template>
</ejs-dialog>
<script>
function load(args) {
this.childGrid = {
dataSource: new ej.data.DataManager({
url: "Audit/AuditTrailHistory2",
adaptor: new ej.data.ODataAdaptor(),
crossDomain: true
}),
queryString: 'UserID', 'AuditTrailID', //queryString value will be same in both parent and child grid
allowPaging: true,
pageSettings: { pageSize: 5 },
columns: [
{ field: 'Caption', headerText: 'Caption', textAlign: 'Right', width: 120 },
{ field: 'OldValue', headerText: 'OldValue', width: 150 },
{ field: 'NewValue', headerText: 'NewValue', width: 150 }
],
};
}
</script>
<e-data-manager url="/Home/UrlDatasource/" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete" adaptor="UrlAdaptor" crossdomain="true"></e-data-manager>
|
[index.cshtml]
<div class="col-lg-12 control-section" id="target" style="height:600px; width:700px">
<ejs-dialog id="parentDialog" width="500px" animationSettings="defaultanimation" visible="true" height="400px" target="#target"
showCloseIcon="true" header="First Dialog">
<e-content-template>
<ejs-grid id="parentGrid" dataSource="ViewBag.DataSource" allowPaging="true">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="150"></e-grid-column>
<e-grid-column field="CustomerID" headerText="CustomerID" width="150"></e-grid-column>
<e-grid-column headerText="Custom Button" type="string" template="#template" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</e-content-template>
</ejs-dialog>
. . . .
<script id="template" type="text/x-template">
<button id="customBtn" onclick="parentBtnClick.apply(this,arguments)">ClickMe</button>
</script>
<script>
function parentBtnClick(e) {
var dialogObj = document.getElementById('childDialog').ej2_instances[0];
dialogObj.show();
var parentGrid = document.getElementById("parentGrid").ej2_instances[0];
var parentGridSelectedRow = ej.grids.parentsUntil(e.target, "e-row");
var parentGridSelectedData = parentGrid.getRowObjectFromUID(parentGridSelectedRow.getAttribute("data-uid")).data;
var childGrid = document.getElementById("childGrid").ej2_instances[0];
var childGridData = @Html.Raw(Json.Serialize(ViewBag.Employees));
// Parent dialog’s Grid, selected data value based to filter childGrid datasource and bind filtered data to child dialog’s Grid
childGrid.dataSource = new ej.data.DataManager(childGridData).executeLocal(new ej.data.Query().where("OrderID", 'equal', parentGridSelectedData.OrderID)); } |
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.