Tree Grid not freezing columns correctly

[David Price]

Hi,

When I try and freeze the first 3 columns so the user can scroll right and see the rest of the tree grid the display is messed up.

Code

<ej:TreeGrid ID="TreeGrid" Height="10px" AllowColumnResize="true"  ChildMapping="Children" ShowColumnChooser="false" TreeColumnIndex="4" style="height: 10px;" runat="server" >

                                        <Columns>

                                            <ej:TreeGridColumn field="ID"  HeaderText="ID" Width="0"></ej:TreeGridColumn>

                                            <ej:TreeGridColumn Field="DataID" HeaderText="DataID" Width="0" ></ej:TreeGridColumn>

                                            <ej:TreeGridColumn Field="xxxx0" HeaderText="Head1" AllowFreezing="true" IsFrozen="true" ></ej:TreeGridColumn>

                                            <ej:TreeGridColumn Field="xxxx1" HeaderText="Head2" AllowFreezing="true" IsFrozen="true"></ej:TreeGridColumn>

                                            <ej:TreeGridColumn Field="xxxx2" HeaderText="Head3" AllowFreezing="true" IsFrozen="true"></ej:TreeGridColumn>

                                            <ej:TreeGridColumn Field="xxxx3" HeaderText="&#10004;" AllowFreezing="true" ></ej:TreeGridColumn>                                            

                                            <ej:TreeGridColumn Field="xxxx4" HeaderText="Head5" AllowFreezing="true"></ej:TreeGridColumn>

                                            <ej:TreeGridColumn Field="xxxx5" HeaderText="Head" AllowFreezing="true"></ej:TreeGridColumn>

                                            <ej:TreeGridColumn Field="xxxx6" HeaderText="Head" AllowFreezing="true"></ej:TreeGridColumn>

                                            <ej:TreeGridColumn Field="xxxx7" HeaderText="Head" AllowFreezing="true"></ej:TreeGridColumn>

                                            <ej:TreeGridColumn Field="xxxx8" HeaderText="Head" AllowFreezing="true"></ej:TreeGridColumn>                                            

                                        </Columns>

                    

                                        <EditSettings  AllowEditing="false" AllowAdding="false" AllowDeleting="false" ></EditSettings>

                                        <ToolbarSettings ShowToolbar="true" ToolbarItems="pdfExport,excelExport,print" />

                                    </ej:TreeGrid>

If I remove AllowFreezing="true" from xxxx0 , xxxx1 and xxxx2 the data is displayed correctly, just the columns are lost when you scroll right? 

I want to freeze the first 3 columns as well as the headings.

David

 

[Punniyamoorthi Elangovan]

Hi David, 

Thank you for contacting Syncfusion support. 

We have analysed your attached screenshot and code snippet, but we are unable to reproduce the reported issue. We are prepared a sample with your requirement 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 Location: http://www.syncfusion.com/downloads/support/forum/136594/ze/TreeGridSample-1976943688 

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

Regards, 

Punniyamoorthi 

[David Price]

Hi,

Thank you for your test project I have examined your project and combined it with mine it seems I am using 

link rel='nofollow' href=/css/bootstrap.min.css rel=stylesheet ( edited since it wouldn't accept the correct line in this post )

which when using the  IsFrozen="true"  it makes the tree grid go crazy.

David

Attachment: bootstrap.min_5ccd1a92.zip

[Punniyamoorthi Elangovan]

Hi David,            

Thank you for your update. 

We have analyzed the reported issue in our sample with bootstarp.css file. We can reproduce this issue, this issue was occurred due to box-sizing property of TreeGrid content element overridden by bootstarp.css file. 

This issue can be resolved by referring default.css file in your project, you can get this file from the provided  sample or you can resolve this by adding below CSS style in you sample. 

Please find the code snippet below.  

 

.e-treegrid .e-gridcontent{ 

    box-sizing: content-box !important 

} 

 

<head runat="server"> 

    <title>TreeGrid Sample</title> 

      //.. 

     <link rel='nofollow' href="Content/custom%20theme/default.css" rel="stylesheet" /> 

</head> 

 

 

We have prepared the sample for your reference, please find the sample link below. 

Sample Link - http://www.syncfusion.com/downloads/support/forum/136594/ze/TreeGridSample-156888514 

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

 

Regards, 

Punniyamoorthi.