We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Hierarchy grid hide empty child

Thread ID:

Created:

Updated:

Platform:

Replies:

119951 Aug 18,2015 05:19 AM Aug 21,2015 05:38 AM ASP.NET MVC 3
loading
Tags: Grid
David
Asked On August 18, 2015 05:19 AM

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 [Syncfusion]
Replied On August 19, 2015 09:12 AM

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
Replied On August 20, 2015 05:15 AM

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 [Syncfusion]
Replied On August 21, 2015 05:38 AM

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

CONFIRMATION

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.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;