BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
function filterChildsGrid(column, value, checked, operator, matchcase) { //Valor por defecto para el operator = equals if (operator == undefined) { operator = ej.FilterOperators.equal; } if (matchcase == undefined) matchcase = true; if (checked) { $.each(gridsChild, function (s, e) { var gridId = e; var gridObj = $(gridId).data("ejGrid"); if (gridObj != null) { gridObj.filterColumn(column, operator, value, "and", matchcase); } // onCreateRowChildres(e); }); } else { $.each(gridsChild, function (s, e) { var gridId = e; var gridObj = $(gridId).ejGrid("instance"); var itemRemove; if (gridObj.model != undefined) { gridObj.model.filterSettings.filteredColumns.forEach(function (p, z) { if (p.field == column) { itemRemove = z; } }); } if (itemRemove != undefined) { //gridObj.model.filterSettings.filteredColumns = []; gridObj.model.filterSettings.filteredColumns.splice(itemRemove); gridObj.refreshContent(); } // onCreateRowChildres(e); }); } |
@(Html.EJ().Grid<SyncfusionMvcApplication14.OrdersView>("FlatGrid") .Datasource((IEnumerable<object>)ViewBag.dataSource1) .AllowPaging() /*Paging Enabled*/ .Columns(col => { col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); col.Field("FirstName").HeaderText("First Name").Width(100).Add(); col.Field("Title").Width(120).Add(); col.Field("City").Width(100).Add(); col.Field("Country").Width(100).Add(); }) .ClientSideEvents(eve => eve.DetailsExpand("detailsexpand")) .ChildGrid(child => { child.Datasource((IEnumerable<object>)ViewBag.dataSource2) .QueryString("EmployeeID") . . . . .ClientSideEvents(eve => eve.DataBound("databound"));
}) |
function databound(args) { obj = $("#child1_grid0").data("ejGrid") if (!ej.isNullOrUndefined(obj)) obj.filterColumn("OrderID", "equal", 10, true); //filtering the first child grid
if (this._id.indexOf("child") != -1 && this.model.currentViewData.length == 0) $("#" + this._id).closest('tr').hide(); //hiding the child grid if it's a empty child
|
function detailsexpand(args) { var childgrid = $(args.detailsRow).find('div.e-grid').data("ejGrid"); if (!ej.isNullOrUndefined(childgrid) && childgrid.model.currentViewData.length == 0) $("#" + childgrid._id).closest('tr').hide(); //hide the detailsrow if it not had the child grid |
Hi David,
Thanks for using Syncfusion products.
Please let us know whether you want to hide the empty child Grid when clicking the expand icon or in initial Grid (parent grid) render?
If you want to hide when clicking the expand icon, please refer the sample and code as below,
Sample: SyncfusionMvcApplication14
In the below code, the empty child Grid is hidden by using the client side events DetailsExpand and DataBound and hidden the Grid in initial rendering by using the DataBound event in child Grid.
@(Html.EJ().Grid<SyncfusionMvcApplication14.OrdersView>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.dataSource1)
.AllowPaging() /*Paging Enabled*/
.Columns(col =>
{
col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
col.Field("FirstName").HeaderText("First Name").Width(100).Add();
col.Field("Title").Width(120).Add();
col.Field("City").Width(100).Add();
col.Field("Country").Width(100).Add();
})
.ClientSideEvents(eve => eve.DetailsExpand("detailsexpand"))
.ChildGrid(child =>
{
child.Datasource((IEnumerable<object>)ViewBag.dataSource2)
.QueryString("EmployeeID")
. . . .
.ClientSideEvents(eve => eve.DataBound("databound"));
})
)
The DataBound event is triggered when the Grid is bound with data during initial rendering and refer the below help document.
http://helpjs.syncfusion.com/js/api/ejgrid#events:databound
function databound(args) {
obj = $("#child1_grid0").data("ejGrid")
if (!ej.isNullOrUndefined(obj))
obj.filterColumn("OrderID", "equal", 10, true); //filtering the first child grid
if (this._id.indexOf("child") != -1 && this.model.currentViewData.length == 0)
$("#" + this._id).closest('tr').hide(); //hiding the child grid if it's a empty child
}
The DetailsExpand event is triggered when the detail row is clicked to expand and refer the help documentation in below link:
http://helpjs.syncfusion.com/js/api/ejgrid#events:detailsexpand
function detailsexpand(args) {
var childgrid = $(args.detailsRow).find('div.e-grid').data("ejGrid");
if (!ej.isNullOrUndefined(childgrid) && childgrid.model.currentViewData.length == 0)
$("#" + childgrid._id).closest('tr').hide(); //hide the detailsrow if it not had the child grid
}
In above code, we have checked the child Grid has empty data by using the currentViewData length in Grid.
Please try using the above code snippets and get back to us if you have further queries.
Regards,
Balaji Marimuthu
$.each(gridsChild, function (s, e) { gridObj.filterColumn("Instalacion", "equal", value, "and"); ... } |
@(Html.EJ().Grid<SyncfusionMvcApplication14.OrdersView>("FlatGrid") .Datasource((IEnumerable<object>)ViewBag.dataSource1) . . . .ClientSideEvents(eve => eve.DetailsExpand("detailsexpand").ActionComplete("complete").Create("create")) .ChildGrid(child => { . . . .
.ClientSideEvents(eve => eve.DataBound("databound"));
}) ) function databound(args) { obj = $("#child1_grid0").data("ejGrid")
//applied different filter to the first row of parent grid(EmployeeID=1) to display the empty child grid if (!ej.isNullOrUndefined(obj) && this.model.parentDetails.parentRowData["EmployeeID"] == 1) this.filterColumn("OrderID", "equal", 10, true); //filtering the first child grid
if (this._id.indexOf("child") != -1 && this.model.currentViewData.length == 0) { $("#" + this._id).closest('tr').hide(); //hiding the child grid if it's a empty child $("#" + this._id).closest('tr').prev('tr').hide(); //hide the parent row which has empty child }
}
function detailsexpand(args) { var childgrid = $(args.detailsRow).find('div.e-grid').data("ejGrid"); if (!ej.isNullOrUndefined(childgrid) && childgrid.model.currentViewData.length == 0) { $("#" + this._id).closest('tr').hide(); //hide the detailsrow if it not had the child grid $("#" + this._id).closest('tr').prev('tr').hide(); //hide the parent row which has empty child } |
function create() { var obj = $("#FlatGrid").data("ejGrid"); var detailRow = obj.element.find(".e-detailrowcollapse"); for (var i = 0; i < detailRow.length; i++) { obj.expandCollapse($(detailRow[i])); //detailsexpand method called } }
function complete(args) { //actioncomplete event triggered
if (args.requestType == "paging") //checking when perform paging operation
create(); |