Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 20 Oct 2020 10:20 by ADMIN
Derek
Created on: 16 Apr 2020 19:26
Category: KendoReact
Type: Bug Report
0
TreeList locked columns not locking in correct position

Hi,

I'm seeing a bug in TreeList which seems to be related to how locked column positions are being set.  The issue I'm seeing is when I scroll to the right the columns either overlap of have a gap between them.  See image below.

I also created a demo that demonstrates this issue: https://stackblitz.com/edit/react-lwp4ua?file=app%2Fmain.jsx


Seeing this issue in:

"@progress/kendo-react-treelist": "3.12.0",
4 comments
Nikolay
Posted on: 18 Sep 2020 08:28

Hi Derek,

Setting table-layout: 'fixed' to the TreeList HTML table will resolve the issue.

<TreeList
tableProps={{ style: { tableLayout: 'fixed' } }}
...
</TreeList>
ADMIN
Stefan
Posted on: 01 May 2020 13:41

Hello, Derek,

Thank you for the additional details.

The column width can be set dynamically using a function for the column width that will calculate it based on the column's value before each render:

tableProps={{ style: { width: this.setWidth()} }}
  setWidth = () => {
    let combinedWidth = 0;
    columns.forEach(column=>combinedWidth += column.width)
    return combinedWidth;
  }

 

I can see that some of the issues still remain and I logged directly a GitHub item and the progress on those specific issues can be monitored:

https://github.com/telerik/kendo-react/issues/568

Apologies for the inconvenience this styling issue has caused you.

Regards,
Stefan
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Derek
Posted on: 30 Apr 2020 14:56

Hi Stefan,

Thanks for letting me know that we need to set a width on tableProps for this to work.  In our use case we won't know the width of the columns when rendering.  I have experimented with a couple of approaches to handle this.

First experiment, I tried defaulting a width if not provide on a column and then summing up those widths to set the tables width.  The problem with that is if the content in locked columns was small than the width then I'd have a gap between locked columns.  If the content was bigger than the column's width then the locked columns would scroll over each other.

The next thing I tried was setting tableProps={{ style: { width: "max-content" } }}.  That worked great when the content in locked columns was <= the width of the column.  If the content is bigger than the column width then the locked column start scrolling over each other.  I hacked together some css to fix this by providing a max-width on those columns' th and td elements.  That worked great!  Is there any way the treelist can dynamically set max-width on locked columns?

Demo:

This demonstrates my issue and the fix.  To see the fix uncomment import "./hack.css"; on line 10.

https://stackblitz.com/edit/react-lwp4ua-9h7z3f?file=app%2Fmain.jsx


ADMIN
Stefan
Posted on: 17 Apr 2020 13:32

Hello, Derek,

Thank you for the runnable example.

After researching it I can confirm that there are two main reasons for this:

1) The tableProps width has to be equal to the combined width of all columns which is this case is "1550px". We have updated the locked columns article to highlight this as an important requirement:

tableProps={{ style: { width: "1550px" } }}

2) The second part is that even if the first column is set to 50px because the title is larger, the column is rendered as 100px which causes a mismatch in the calculations and leads to the undesired white space between the columns. We will further investigate this to prevent the content to make the width larger.

I have applied both changes and the TreeList was rendered as expected:

https://stackblitz.com/edit/react-lwp4ua-alsbvz?file=app%2Fmain.jsx

I have also added some Telerik points for bringing this to our attention.

Regards,
Stefan
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Create an account Log In
View
Type
Status
Category