adjust the height of header in treegrid

[Harry Zheng]

Hi,

I wonder if we can adjust the height of treegrid header.

Thanks,

Harry

[Dinesh Kumar Nagarathinam]

 

Hi Harry,

Thank you for using Syncfusion products.

Yes we can change the height of the TreeGrid header by applying custom style to the header element. Please find the below code example for more

details

Code Snippet:

   @(Html.EJ().TreeGrid("Tree")

     //...

     .EnableResize(true)

       .EnableCollapseAll(false)

       .EnableVirtualization(false)

       )

<script type="text/javascript">

        $(document).ready(function () {

            var header = $("#Tree").find(".e-columnheader");

            header.css({ height: '100px' });

        })

    </script>

 

Also, we have prepared a sample based on your requirement, find it from below location.

Sample: http://www.syncfusion.com/downloads/support/forum/120742/ze/TreeGrid_Header-1489895312

 

Regards,

Dinesh kumar.N

[Harry Zheng]

Hi Dinesh,

I followed the solution, but it did not work. Could you please check the code to see if it's working on your side?

Also, I could not run the sample. It simply gives me the following error:

The resource cannot be found. Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly.

Requested URL: /

Regards,

Harry

[Harry Zheng]

BTW: BTW: I am using asp.net mvc 5, .Net framework 4.5, Syncfusion, 13.2.0.39, visual studio 2013, IE 11.

Harry

[Dinesh Kumar Nagarathinam]

 
Hi Harry,

Sorry for the inconvenience caused.

The MVC sample provided previously doesn’t consists of a default page, that is the reason you couldn’t run the sample at your end. Now, we have prepared a sample with the below configuration and with a default page in it. 

MVC version	MVC 5
Visual studio version	VS 2013
.Net framework	4.5
Syncfusion version	13.2.0.39

Please find the sample from the below location,

Sample: http://www.syncfusion.com/downloads/support/forum/120742/ze/treeGridHeaderHeight1533267509

Please find the below screenshot for TreeGrid with varied header height.

Screenshot: http://www.syncfusion.com/downloads/support/forum/120742/ze/HeaderHieght-1850272086

The code example provided previously for changing the TreeGrid header height is working fine at our end.


Regards,
Dinesh kumar N.

[Harry Zheng]

Hi Dinesh,

Thank you for the sample. It works well. However, I changed my code accordingly, still not working. I give up for now, it's not a big issue.

Regards,

Harry

[Dinesh Kumar Nagarathinam]

Hi Harry,

Thank you for the update.

We request you to check once whether the ID value used to create the TreeGrid widget and the ID value used to obtain the header element are the same.

   @(Html.EJ().TreeGrid("Tree")

     //...

     .EnableResize(true)

     .EnableCollapseAll(false)

     .EnableVirtualization(false)

    )

<script type="text/javascript">

        $(document).ready(function () {

       //Change the ID “Tree” to Your ID of the sample.

            var header = $("#Tree").find(".e-columnheader");

            header.css({ height: '100px' });

        })

    </script>

Please let us know, if you need further assistance on this.

Regards,
Dinesh kumar.N

[Harry Zheng]

Hi Dinesh,

I checked to make sure everything is correct, still no good luck.

Harry

[Dinesh Kumar Nagarathinam]

Hi Harry,

We have analyzed on all the possibilities for reproducing the issue you are facing, but we were unable to reproduce the issue from our end. Can you please
provide us your sample, in which you are facing the issue. This would be helpful for us to provide a solution for the issue.
 
Regards,
Dinesh kumar.N