Hierarchy grid hide empty child

[David]

Hi!

we have hierarchy grid and we apply filters to child rows:

 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);

            });

        }

Ok, so far so good. But sometimes, we have parent row with empty childs... ¿Exist any way to hide parent with empty child on client side? 

I try but don't find way know when row parent have empty rows childs.. :(

Thanks!

[Balaji Marimuthu]

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

[David]

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

HI!

first all, thank you for your answer.

I think i explained bad. I have a hierarchy grid, and i apply diferents filter on side client on child rows.

ie:

$.each(gridsChild, function (s, e) {
      gridObj.filterColumn("Instalacion", "equal", value, "and");

       ...
}

It's work great. Now, sometimes, we have child rows empty because the filter aplicated don't show rows... So, i want when PARENT rows don't have CHIILD rows, dont show parent row and child emtpy row. I try with $(...).hide() but when apply diferent filter, dont show never more...

IMG SAMPLE: http://oi61.tinypic.com/2ci8z85.jpg

[Balaji Marimuthu]

Hi David,

Thanks for the update and screen shot.

If you don’t want to show the parent row which has empty child row, you can hide the parent row by using the hide method. Please refer the sample and code example below:
Sample:  SyncfusionMvcApplication14_(2)

@(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

        }
    }

If you don’t want to show the parent rows which has empty child row, we suggest you to use the ActionComplete event in Grid. The ActionComplete event is triggered every grid complete action.

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();
    }

In above code snippets, we have called the detailsexpand method and hide the parent row in ActionComplete event.

Please refer the events help document as follows:
http://helpjs.syncfusion.com/js/api/ejgrid#events


Please get back to us if you have any further assistance.

Regards,
Balaji Marimuthu