1. Home
  2. Forum
  3. ASP.NET MVC
  4. Hide header row in child grid + custom background in child grid + expand only certain parents based on one of their model properties

Hide header row in child grid + custom background in child grid + expand only certain parents based on one of their model properties

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

10 Replies
GV Gowthami V Syncfusion Team December 23, 2015 09:40 AM UTC

Hi Carlo,

Thanks for using Syncfusion products.

Query 1:  Child rows shouldn't have an header

We can get the child grid’s header element using “getHeaderTable” method and remove it in “Create” event of the child grid as follows,

@(Html.EJ().Grid<object>("HierarchyGrid")

.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource)
                .Adaptor(AdaptorType.RemoteSaveAdaptor))
. . . .

. . . .

.ChildGrid(child =>
                 {
. . . .
. . . .

.ClientSideEvents(eve => { eve.Create("childCreate"); });


})


)

<script type="text/javascript">

    function childCreate(args)

    {


        this.getHeaderTable().remove();

       
    }
</script>



Refer to the below link for more clarification about getHeaderTable method,

http://help.syncfusion.com/js/api/ejgrid#methods:getheadertable

Query 2: Child rows background should be gray so that it's more clear that they refer to child elements

We can differ the odd rows and even rows for the grid using “e-row” and “e-alt_row” classes of the “tr” elements.

Refer to the below code example for setting background color for the child grid (“.e-childGrid”) rows,

 

<style type="text/css">

.e-childGrid .e-row {

    background-color: grey;

   

    }

    .e-childGrid .e-alt_row {

    background-color:lightgrey;

    }

</style>



@(Html.EJ().Grid<object>("HierarchyGrid")

. . .  .

. . . .

. . . .

.ChildGrid(child =>

                 {

. . . .

. . . .

//Adding class for the child grid element

.CssClass("e-childGrid")


})


)




Refer to the below link for more clarification about “cssClass“ property,

http://help.syncfusion.com/js/api/ejgrid#members:cssclass

Query 3: Instead of expanding each and every parent row, only parent rows with a certain Model value should be expanded

We can achieve your requirement in RowDataBound event of the parent grid as follows,

@(Html.EJ().Grid<object>("HierarchyGrid")


                .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource)
. . . .
. . . .
.ClientSideEvents(eve => { eve.RowDataBound("dataBound");})
. . . .
. . . .

)


<script type="text/javascript">


function dataBound(args)

    {

        if (args.data.City == "London")

            this.expandCollapse($(args.row.find(".e-detailrowcollapse")));

    }

</script>


Refer to the below link for more clarification about “expandCollapse” method,

We have created a sample with the above code examples and the same can be downloaded from the following link,

http://www.syncfusion.com/downloads/support/directtrac/general/MVCAPP~2576413506.ZIP

Regards,

Gowthami V.


CA Carlo December 23, 2015 03:56 PM UTC

Greetings. Thanks for the kind reply, I mean..really. Your proposed solutions worked right out of the box, so thanks for your excellent support.




GV Gowthami V Syncfusion Team December 24, 2015 08:38 AM UTC

Hi Carlo,
 
We are happy to hear that your requirement has been achieved.
 
Thanks & Regards,
 
Gowthami V.

CA Carlo December 26, 2015 03:05 AM UTC

I've been asked to meet the following requirement on the same grid structure: through the press of a button, present in each child row, a new cell is shown (only in THAT child row; other child rows must show no change) with text retriven from the controller through an AJAX POST (get?) request, according to the value of a property in the child row model whose the button belongs to. I hope that the attached pictures could better depict what I'm trying to achieve. If you have any doubts pertaining my request just let me know. Thanks again for your unvaluable help!
Attachment: cell_text_from_post_77482cfa.7z

CA Carlo December 27, 2015 04:06 AM UTC

just a brief note to further elaborate on the requirement expressed in the previous post: after clicking the button, another click should bring the row to its initial state. A further press should trigger a new ajax request so that the shown text is always updated.

GV Gowthami V Syncfusion Team December 28, 2015 11:55 AM UTC

Hi Carlo,

We have analyzed your requirement and we can achieve your requirement partially.

We have analyzed your requirement and we can achieve it partially. If we add a cell for the particular child row, then the next child rows gets misaligned due to the addition of an extra “td” element to the row.


To avoid this, we have loaded the text to the existing child row cell instead of adding a new cell in “DataBound” event of the parent Grid as follows,

@(Html.EJ().Grid<object>("HierarchyGrid")

. . . .

. . . .

.ClientSideEvents(eve => { eve.DataBound("dataBound").RowDataBound("rowDataBound");})

                 .ChildGrid(child =>

                 {

                     child.Datasource((IEnumerable<object>)ViewBag.datasource1)

                        .QueryString("EmployeeID")

. . . .

. . . .

  })


)



<script type="text/javascript">

function dataBound(args) {


        $(".btn").ejButton({


            text: "click",

            click: function (args) {

            

                $(this.element.closest("tr").find("td")[1]).load("/Grid/GetData",

                   {data: parseInt($(this.element.closest("tr").find("td")[1]).text()) });


            }

        });

    }


    </script>



We have created a sample with the above requirement and the same can be downloaded from the following link,

http://www.syncfusion.com/downloads/support/directtrac/general/ze/MvcApplication4-1910659991.zip

Refer to the below screenshot,



Regards,

Gowthami V.


CA Carlo December 29, 2015 04:53 PM UTC

Excellent. Though not complete, your solution pointed me in the right direction in order to met the requirement (which has been met). Again, let me thank you for your outstanding support!

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 30, 2015 06:04 AM UTC

Hi Carlo,

We are happy to hear that your issue has been resolved.

Get back to us if you need further assistance.

Regards,

Seeni Sakthi Kumar S.

S s April 27, 2017 12:04 PM UTC

Hi,

I tried to remove the child grid header bar using the create event and this.getHeaderTable().remove(), but the header bar is still visible? Any idea how we can remove or hide the child grid headers

Ta
Shashank J

MS Mani Sankar Durai Syncfusion Team April 28, 2017 09:52 AM UTC

Hi Shashank, 

We have analyzed your query and we suggest you to remove the child grid header element using Create event in child grid.  
 
Refer the below code example. 
 
@(Html.EJ().Grid<object>("HierarchyGrid")
.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource)
                .Adaptor(AdaptorType.RemoteSaveAdaptor))
. . . .

 
.ChildGrid(child =>          //child grid
                 {
. . . .
. . . . 
.ClientSideEvents(eve => { eve.Create("childCreate"); });  //create event in child grid 
}) 
)
<script type="text/javascript"> 
   function childCreate(args) 
    {         
       this.getHeaderTable().remove(); 
        }
</script> 

From the above code example we have bound the Create event for the child grid and from that we have remove the header element of child grid using getHeaderTable method in grid. 

Refer to the below link for more clarification about getHeaderTable method and Create event in grid.

https://help.syncfusion.com/api/js/ejgrid#methods:getheadertable 
 
Please let us know if you need further assistance. 
 
Regards, 
Manisankar Durai 


Loader.
Up arrow icon