Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Under Review
Last Updated: 01 May 2024 12:52 by ADMIN
Janki
Created on: 22 Apr 2024 21:01
Category: TreeList
Type: Feature Request
1
TreeList Spacing on Expandable Cells

Problem

The Treelist expandable cells are indented for each level. When a name is too long, however, the indentation and spacing are difficult to read and throw off the grid's design (Codesandbox link):

Solution

We don't frequently run into this issue, and we've now got a common component for this cell redesign, but it would be nice if it worked like this out of the box:

  • Utilize padding on the cell instead of empty icon boxes (screenshot of DOM below) ==> this would prevent the text overflow from falling onto the next line as the padding will force the overflow text to stay indented by a certain amount. This would fix the design of the Stacey Lynnwoodhaven text and the Meredithanalynn Parrish text

 

Thank you,

Janki

5 comments
ADMIN
Konstantin Dikov
Posted on: 01 May 2024 12:52

Hello Janki,

Thank you for sharing your implementation. I do agree showing the text in this way is much more structured and easier to read. Regardless of whether this will be added as a built-in style or not, I am sure the custom implementation will be useful for others, so once again, thank you for sharing. 

 

Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Janki
Posted on: 24 Apr 2024 17:55

Hi Konstantin,

I agree, and I think then the next workaround with the padding in place is to give that column a bit more width with a manual width override.

Unfortunately, I cannot share our TreeList data or a screenshot of our fixed cell design/layout from our env, but I can share our custom cell (which I'm sure can be written better):

const TreeListExpandCollapseCell = ({ props, value }) => {
    const icons = [];
    if (props.expandable) {
        icons.push(...props.level.slice(1).map((_x, i) => <span className="no-icon" key={i} />));
        if (props.hasChildren) {
            icons.push(
                <span className="render-icon" key="expand-collapse" onClick={(event) => props.onExpandChange(event, props.dataItem, props.level)}>
                    <SvgIcon icon={props.expanded ? caretAltDownIcon : caretAltRightIcon} />
                </span>
            );
        } else {
            icons.push(<span className="no-icon" key={icons.length} />);
        }
    }
    const numBlankSpace = icons.filter((it) => it.props.className?.includes("no-icon"));
    const removeBlankIcons = icons.filter((it) => !it.props.className?.includes("no-icon"));
    return (
        <td
            className={removeBlankIcons.length === 0 ? "" : "clickable"}
            style={{ paddingLeft: numBlankSpace.length === 0 ? 13 : (numBlankSpace.length + 1) * 13 }}
            onClick={(event) => (props.hasChildren ? props.onExpandChange(event, props.dataItem, props.level) : {})}
        >
            {removeBlankIcons}
            <span>{value}</span>
        </td>
    );

};

 

=-=-=-=-=-=-=-=-=

 

Implementing this in the original Codesandbox makes the long cells look like this:

 


ADMIN
Konstantin Dikov
Posted on: 24 Apr 2024 17:30

Hi Janki,

If the text is limited to be displayed only within the remaining space after the padding, that would most likely make long text really difficult to read as well. Could you please share a screenshot of the desired result or share the custom cell that you are using? This could prove to be helpful with the evaluation of the feature request.

 

Best Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Janki
Posted on: 24 Apr 2024 14:37

Hey Konstantin,

I appreciate you posting a workaround! Unfortunately, I believe that would be unacceptable for users on smaller screens for who, when they reach level 5+, the text would become completely unreadable. Going from "Konstantin" to "Ko...", for example. For the best UX, I would prefer to keep the whole text in the cell (in a readable design/format/layout).

Thank you for converting this issue into a ticket for me! I hope it will be planned for a fix soon!

 

Best,

Janki

ADMIN
Konstantin Dikov
Posted on: 24 Apr 2024 09:05

Hi Janki,

Thank you for contacting us.

I converted the request to a public feedback item, so that other developers can vote for the idea and increase its priority.

Meanwhile, using a custom cell seems to be the only option.

Just as a side note, another thing that can be used is to show ellipsis, so that the text stays on a single line:

            <style>
            .k-treelist-scrollable td,
            .k-treelist-scrollable th,  
            .k-treelist-scrollable col{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 0;
            }

 

Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Create an account Log In
View
Type
Status
Category