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.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

121513 Dec 22,2015 11:14 AM Apr 28,2017 05:52 AM ASP.NET MVC 10
loading
Tags: Grid
Carlo
Asked On December 22, 2015 11:14 AM

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

Gowthami V [Syncfusion]
Replied On December 23, 2015 04:40 AM

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.


Carlo
Replied On December 23, 2015 10:56 AM

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




Gowthami V [Syncfusion]
Replied On December 24, 2015 03:38 AM

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

Carlo
Replied On December 25, 2015 10:05 PM

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

Carlo
Replied On December 26, 2015 11:06 PM

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.

Gowthami V [Syncfusion]
Replied On December 28, 2015 06:55 AM

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.


Carlo
Replied On December 29, 2015 11:53 AM

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!

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 30, 2015 01:04 AM

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
Replied On April 27, 2017 08:04 AM

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

Mani Sankar Durai [Syncfusion]
Replied On April 28, 2017 05:52 AM

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 


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.

;