Greetings. I have a hierarchical grid with this kind of setup:
@(Html.EJ().Grid<object>("Grid")
.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource)
.Adaptor(AdaptorType.RemoteSaveAdaptor))
.Locale("it-IT")
.AllowPaging()
.Columns(col =>
{
col.Field("Id").HeaderText("Id").IsPrimaryKey(true).Visible(false).Add();
col.Field("Name").HeaderText("Name").Add();
col.Field("Surname").HeaderText("Surname").Add();
})
.ClientSideEvents(eve => { DataBound("dataBound"); })
.ChildGrid(child1 =>
{
child1
.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.AttivitaDataSource))
.QueryString("PersonId")
.Locale("it-IT") //necessario per avere colonna currency con € anzichè $
.Columns(col =>
{
col.Field("Id").IsPrimaryKey(true).Visible(false).Add();
col.Field("Description").Add();
col.Field("Quantity").Add();
})
})
)
function dataBound() {
//expand all child rows
var detailRow = this.element.find(".e-detailrowcollapse");
for (var i = 0; i < detailRow.length; i++) {
this.expandCollapse($(detailRow[i]));
}
}
Through the dataBound() function, every parent row is expanded so that its childs are shown.
Both grids are using the following css, which is declared at the top of the view:
<style type="text/css">
.e-grid .e-rowcell {
line-height: 20px;
font-size: 12px;
padding: 0px 2px 0px 2px;
}
.e-grid .e-headercelldiv{
font-weight:bold;
font-size: 12px;
}
.e-grid .e-icon.e-gdiagonalnext,
.e-grid .e-icon.e-gnextforward{
margin-top: 2px;
}
.e-grid .e-recordpluscollapse>div,
.e-grid .e-detailrowcollapse>div,
.e-grid .e-recordplusexpand>div,
.e-grid .e-detailrowexpand>div{
height:8px;
}
.e-grid .e-detailcell {
padding: 13px;
border-top: 1px;
border-top-color: #c8c8c8;
border-top-style: solid;
}
.e-grid .e-detailindentcell{
border-top-width: 1px;
border-top-style: solid;
border-top-color: #c8c8c8;
border-right-width: 0px;
}
</style>
My requirements are the following:
1) Child rows shouldn't have an header (so that only actual child rows are shown, instead of displaying an header for each group of child rows which belong to the same parent)
2) Child rows background should be gray so that it's more clear that they refer to child elements (the optimal solution would be 2 kind of grey for even and odd child rows, but if that is hard to achieve it's ok to have only 1 kind of gray as a background for child rows)
3) Instead of expanding each and every parent row, only parent rows with a certain Model value should be expanded, like the following pseudocode:
function dataBound() {
//expand child rows according to model value
var detailRow = this.element.find(".e-detailrowcollapse");
for (var i = 0; i < detailRow.length; i++) {
if (model[i].Surname == "EXPANDABLE")
this.expandCollapse($(detailRow[i]));
}
}
