TreeGrid minor issues

[Gyorgy Gorog]

Hi All,

I find TreeGrid very useful. I have only minor problems (really :).

1. When loaded, the scrollbar (if shown) hides part of the rows:

After expanding and collapsing again, it's OK:

2. Not independently of this, the columns are not auto-sized upon load, however the docs say so. If they were, the horizontal scrollbar would not appear (the vertical scrollbar I think appears because the horizontal one hides part of the pane): settings are 

AllowColumnResize = true, 

ColumnResizeSettings = new TreeGridColumnResizeSettings{ ColumnResizeMode = TreeGridColumnResizeMode.NextColumn},

AllowTextWrap = true,

 Please advise.

[Punniyamoorthi Elangovan]

Hi Gyorgy, 

Thank you for contacting Syncfusion support 

Please find the below update 

Query1: When loaded, the scrollbar (if shown) hides part of the rows: 

Answer: We have analyzed your reported issue, but we are unable to reproduce the reported issue in our end. We have prepared the sample with details you have shared with us and we request you to revert us by modifying the sample based on your application along with the replication procedure. This would be helpful for us to serve you better. 

Sample Link: http://www.syncfusion.com/downloads/support/forum/138403/ze/TreeGrid_MVC-152133544 

Query2:  Not independently of this, the columns are not auto-sized upon load, however the docs say so 

Answer: In TreeGrid the columns are not resized based upon the column texts while loading the TreeGrid but we can achieve your requirement by setting the width to the TreeGrid columns based upon the requirement. Please refer the below code snippet. 

[CSHTML] 

(Html.EJ().TreeGrid("TreeGridContainer" 

          .ChildMapping("Children") 

          .TreeColumnIndex(1) 

          .IsResponsive(true) 

          .Columns(co => 

              { 

                  co.Field("TaskId").HeaderText("Task Id").Width(45).Add(); 

                  co.Field("TaskName").HeaderText("Task Name").Add(); 

                                  co.Field("StartDate").HeaderText("Start Date").Width(100).Add(); 

               } 

          //.. 

) 

@(Html.EJ().ScriptManager()) 

Please let us know if you require further assistance on this. 

Regards, 

Punniyamoorthi 

[Gyorgy Gorog]

Punniyamoorthi, thanks for the update. 

Is the documentation incorrect?  Not that I understand the difference between Normal and NextColumn.

Strange things is, a simple Html <table> resizes columns correctly.

columnResizeSettings.columnResizeMode enum

Specifies the mode for column resizing

Name	Description
FixedColumns	At load time column are rendered with given width value, while resizing the column only current column width is changed
Normal	At load time columns are stretched with control width,while resizing the column, current column width updated based on next column
NextColumn	In this mode columns are stretched with control width in load time and on resizing action.

[Gyorgy Gorog]

also, I am unable to set the header height (I would need a minimal one, just to allow click and dislay the sort icon). I tried

@model JustNet.Models.TabModel

<div>

    @(Html.EJ().TreeGrid(Model.TabName + "Grid", Model.TabGrid.TreeGridModel))

</div>

<script type="text/javascript">

    $(document).ready(function () {

        var header = $("#" + @Model.TabName + "Grid").find(".e-columnheader");

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

    })

</script>

and 

AutoFormat = new TreeGridAutoFormat{ HeaderFontSize = 6 }

but I have huge headers. The grids are on tabs.

 

[Punniyamoorthi Elangovan]

Hi Gyorgy, 

 

Sorry for the inconvenience caused. 

 

Query1: I am unable to set the header height (I would need a minimal one, just to allow click and dislay the sort icon). 

 

Answer: In TreeGrid there is no support to render the column header with the height below “45px”, this is the minimum header height required for displaying the column menu and filter menu header icons when the features are enabled.  

 

Query2: Not that I understand the difference between Normal and NextColumn. 

 

Answer: We regret for the inconvenience caused, we have updated our API documentation regarding the resizing modes definition with more clear details. It will be refreshed online soon and we will let you know once the changes are published. We have also explained the behavior of the column resizing modes below. 

The achieve the normal HTML table column resizing, we suggest you to set the column resizing mode as ‘Fixed column’. 

 

NextColumn: In this mode when resizing a column, the width of the adjacent column will be changed according to the resizing done. 

Normal: This resizing mode will be suited for adjusting the empty space which will be appearing when sum of the total columns’ width is lesser than the control’s width. Every columns’ width will be expanded to hide the empty space irrespective of the defined column widths.  

FixedColumn: Column are rendered with given width value at load time. Therefore in this mode, the empty space will be visible at the initial load, if sum of the columns’ width is lesser than the control’s width. And while resizing a column dynamically in this mode, only the resized column width will be changed, where other columns’ width will remain the same. 

 

When the TreeGrid is displayed with horizontal scrollbar, the ‘fixed column’ and ‘normal’ column resizing modes behaves the same. To know the exact behavior of the column resizing modes we suggest you to display the TreeGrid without the horizontal scrollbar, such that the columns’ width should  

Please refer our below online sample browser sample link for your reference  

https://js.syncfusion.com/demos/web/#!/bootstrap/treegrid/columns/columnresize 

 

Regards, 

Punniyamoorthi 

[Gyorgy Gorog]

Punniyamoorthi, thanks for update. 

I will experiment with the columns widths. 

The header minimum height is really bad news.  Once they are there, is there any way to display the sorting icons before the users click on the header? My headers are empty otherwise.

 

Do you think I'm better off with JS2 data grid grouping? JS1 grid grouping failed in my hands. Do you plan a treegrid in JS2?

[Punniyamoorthi Elangovan]

Hi Gyorgy,  

Please find the response below. 

Query 1 : Customize the TreeGrid header height 

Solution : Sorry for the inconvenience caused.  

We have analyzed the possibility of your requirement in work around and we can achieve this by customizing the style of TreeGrid header with CSS property. 

Please refer the below code snippet. 

<style> 

        .e-treegrid .e-headercell { 

            height: 10px; 

        } 

 

        .e-treegrid .e-headercelldiv { 

            height: 10px; 

            line-height: 10px; 

        } 

    </style> 

In TreeGrid we can render the icons in header by using headerTemplate support, please refer the demo link for this below. 

Demo Link – https://mvc.syncfusion.com/demos/web/treegrid/treegridcolumnheadertemplate 

We have prepared the sample to reduce the TreeGrid header height, please find the sample link below. 

http://jsplayground.syncfusion.com/rtu0gayu 

 

Query 2 : Do you plan a treegrid in JS2? 

Solution :  

Currently, we don’t have any immediate plan for TreeGrid component in Essential JS 2. We would like to know more about your application use cases so that it will be helpful in defining and prioritizing features from our end.  

 

Please let us know if you require any further assistance on this.  

 

 

Regards, 

Punniyamoorthi. 

 

[Gyorgy Gorog]

Punniyamoorthi, thanks for the header size solution. It's just perfect. 

[Punniyamoorthi Elangovan]

Hi Gyorgy, 

We are glad that your requirement has been achieved. 

Please let us know if you require further assistance on this. 

Regards, 

Punniyamoorthi