- Home
- Forum
- ASP.NET Core - EJ 2
- Child grid not active on the first rendering of grid
Child grid not active on the first rendering of grid
Initial rendering of the grid the child grid is inactive.....you click in the arrow and nothing happens.
To activate it you need to drag a grouping, for example, location and only then the arrows are available to drop down the child details.
See attachment with pictures.
Regards
- Share the Grid sample with the reported issue.
- Please share your issue scenario in video demonstration format.
- Share the Hosted link for the sample.
Attachment: Initial_rendering_of_the_grid_the_child_grid_is_inactive_e3bd6419.zip
Here is my code sample
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Grids
@using State3.Common
@{
var ChildGrid = new Syncfusion.EJ2.Grids.Grid()
{
DataSource = ViewBag.Technologies,
QueryString = "Id",
Columns = new List
new Syncfusion.EJ2.Grids.GridColumn(){ Field="SoftwareSolutionName", HeaderText="Technologies", Width="120" }
}
};
}
<div class="card border-light z-depth-0 my-3">
<ejs-grid id="DataGrid"
dataSource="ViewBag.DataSource"
childGrid="ChildGrid"
allowPaging="true"
allowSorting="true"
allowResizing="true"
allowFiltering="true"
allowGrouping="true"
allowPdfExport="true"
allowExcelExport="true"
hierarchyPrintMode="All"
toolbarClick="toolbarClick"
toolbar="@(new List<string>() {"Search","PdfExport","ExcelExport","Print"})">
<e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="false" mode="Normal">e-grid-editSettings>
<e-grid-filterSettings type="Excel">e-grid-filterSettings>
<e-grid-pagesettings pageSize="15">e-grid-pagesettings>
<e-grid-columns>
<e-grid-column field="Id" headerText="Id" isPrimaryKey="true" isIdentity="true" visible="false" allowEditing="false" showInColumnChooser="false">e-grid-column>
<e-grid-column field="Name" headerText="Name" allowResizing="true">e-grid-column>
<e-grid-column field="UserName" headerText="User Name" allowResizing="true">e-grid-column>
<e-grid-column field="LocationId" foreignKeyField="Id" foreignKeyValue="Name" headerText="Location">
<e-data-manager url="/OData/Locations"
adaptor="ODataV4Adaptor"
headers='@new Object[]{ new Dictionary<string, object>{ { "modelid", Model.Id} } }'>
e-data-manager>
e-grid-column>
@if (ViewBag.Show != "NonAzure")
{
<e-grid-column field="AzureUserIdentifier" foreignKeyField="AzureUserIdentifier" foreignKeyValue="DisplayName" headerText="Azure User Identifier">
<e-data-manager url="/OData/AzureUsers"
adaptor="ODataV4Adaptor"
offline="true"
headers='@new Object[]{ new Dictionary<string, object>{ { "organisationid", Model.OrganisationId} } }'>e-data-manager>
e-grid-column>
}
e-grid-columns>
ejs-grid>
div>
<script>
var reportTitle = "@ViewBag.ReportTitle";
var organisationHeading = "@ViewBag.OrganisationHeading";
var reportFileName = "@ViewBag.ReportFileName";
var colSpan = 4;
function toolbarClick(args) {
var gridObj = document.getElementById("DataGrid").ej2_instances[0];
if (args.item.id === 'DataGrid_pdfexport') {
gridObj.pdfExport(getPdfExportProperties());
}
if (args.item.id === 'DataGrid_excelexport') {
gridObj.excelExport(getExcelExportProperties());
}
}
function getExcelExportProperties() {
return {
header: {
headerRows: 2,
rows: [
{
index: 1,
cells: [
{ index: 1, colSpan: colSpan, value: organisationHeading, style: { fontColor: '#000000', fontSize: 25, hAlign: 'Center', bold: true } }
]
},
{
index: 2,
cells: [
{ index: 1, colSpan: colSpan, value: reportTitle, style: { fontColor: '#000000', fontSize: 25, hAlign: 'Center', bold: true } }
]
}
]
},
footer: {
footerRows: 2,
rows: [
{
index: 1,
cells: [{ index: 1, colSpan: colSpan, value: organisationHeading, style: { fontColor: '#000000', hAlign: 'Center', bold: true } }]
},
{
index: 2,
cells: [{ index: 1, colSpan: colSpan, value: reportTitle, style: { fontColor: '#000000', hAlign: 'Center', bold: true } }]
}
]
},
hierarchyExportMode: "All",
fileName: reportFileName + ".xlsx"
};
}
function getPdfExportProperties() {
return {
header: {
fromTop: 0,
height: 120,
contents: [
{
type: 'Text',
value: organisationHeading + ' - ' + reportTitle,
position: { x: 0, y: 0 },
style: { textBrushColor: '#000000', fontSize: 25 },
}
]
},
footer: {
fromBottom: 160,
height: 100,
contents: [
{
type: 'Text',
value: organisationHeading + ' - ' + reportTitle,
position: { x: 0, y: 20 },
style: { textBrushColor: '#000000', fontSize: 14 }
}
]
},
hierarchyExportMode: "All",
fileName: reportFileName + ".pdf"
};
}
script>
|
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Grids
@{
var ChildGrid = new Syncfusion.EJ2.Grids.Grid()
{
DataSource = ViewBag.foreign,
QueryString = "EmployeeID",
Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
new Syncfusion.EJ2.Grids.GridColumn(){ Field="EmployeeID", HeaderText="Number of Items", Width="150", CustomAttributes = new{@class="customcss"} },
}
};
}
@{
ViewData["Title"] = "Home Page";
}
<div class="card border-light z-depth-0 my-3">
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" allowGrouping="true" childGrid="ChildGrid"
allowSorting="true"
allowResizing="true"
allowFiltering="true"
allowPdfExport="true"
allowExcelExport="true"
hierarchyPrintMode="All"
toolbarClick="toolbarClick"
toolbar="@(new List<string>() {"Search","PdfExport","ExcelExport","Print"})">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" type="number" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" width="120"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="140"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Employee ID"
foreignKeyValue="FirstName" foreignKeyField="EmployeeID" dataSource="ViewBag.foreign"
type="string" validationRules="@(new { required= true })" width="120">
<e-data-manager url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/' ,
crossdomain: true,
adaptor: new ej.data.ODataV4Adaptor>
</e-data-manager>
</e-grid-column>
@if (ViewBag.Show != "NonAzure")
{
<e-grid-column field="AzureUserIdentifier" foreignKeyField="AzureUserIdentifier" foreignKeyValue="DisplayName" headerText="Azure User Identifier">
<e-data-manager url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/' ,
crossdomain: true,
adaptor: new ej.data.ODataV4Adaptor>
</e-data-manager>
</e-grid-column>
}
</e-grid-columns>
</ejs-grid>
</div> |
|
@{
ViewData["Title"] = "Home Page";
}
<div id="History" style="display: none"></div>
<div id="InProgress">
<p>
The Syncfusion ASP.NET Core UI controls library is the only suite that you will ever need to build an application since it contains over 70 high-performance, lightweight, modular, and responsive UI controls in a single package.
</p>
</div>
<div>
<ejs-tab id="adminTabs" selected="tabSelected">
<e-tab-tabitems>
<e-tab-tabitem content="#InProgress">
<e-tabitem-header text="In Progress" />
</e-tab-tabitem>
<e-tab-tabitem content="#History">
<e-tabitem-header text="History" />
</e-tab-tabitem>
</e-tab-tabitems>
</ejs-tab>
</div>
<script>
var flag = true;
var data = @Html.Raw(Json.Serialize(ViewBag.DataSource));
function tabSelected(args) {
var grid = new ej.grids.Grid({
dataSource: data,
height: 400,
childGrid: ChildGrid,
load: load,
enableVirtualization: true,
columns: [
{
field: "OrderID",
headerText: "OrderID",
isPrimaryKey: true,
},
{
field: "CustomerID",
headerText: "CustomerID",
},
{
field: "Freight"
},
{
field: "ShipCountry"
}
]
});
grid.appendTo(args.selectedContent.querySelector("#History"));
}
function load(args) {
this.childGrid = {
dataSource: new ej.data.DataManager({
adaptor: new ej.data.ODataAdaptor(),
crossDomain: true
}),
queryString: 'EmployeeID',
allowPaging: true,
pageSettings: { pageSize: 5 },
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 120 }
],
};
}
</script> |
- 12 Replies
- 2 Participants
- Marked answer
-
BB Basil Buwalda
- Jul 26, 2020 10:00 PM UTC
- Aug 6, 2020 02:50 PM UTC
