Declined
Last Updated: 15 Dec 2023 09:14 by ADMIN
Smiljan
Created on: 01 Dec 2023 08:46
Category: UI for Blazor
Type: Feature Request
3
Prevent the Grid from wrapping text in multiple lines and show ellipsis - Grid option

Hi,

It would be VERY helpful if you integrated "Prevent the Grid from wrapping text in multiple lines and show ellipsis" into grid as an option (so we would not have to write separate code and style).

I think this is one of the most needed features since grids almost always have data that wraps line.

BR, Smiljan

3 comments
ADMIN
Hristian Stefanov
Posted on: 15 Dec 2023 09:14

Hi Smiljan,

The sample provided in the documentation already demonstrates the Template + CSS approach alongside other methods. For your convenience, I have reduced the code snippet to specifically highlight this approach.
Double click a row to see the full Notes value.
<br />
<TelerikGrid Data="@MyData" Height="300px"
             Pageable="true" Sortable="true"
             Resizable="true" Reorderable="true"
             OnRowDoubleClick="@OnRowDoubleClickHandler">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.Note))" Title="Notes Template">
            <Template>
                @{ var dataItem = (SampleData)context; }
                <div class="custom-ellipsis">
                    @dataItem.Note
                </div>
            </Template>
        </GridColumn>
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

<style>
    div.custom-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>

<TelerikWindow @bind-Visible="@WindowIsVisible" Modal="true">
    <WindowTitle>
        <strong>Details for @CurrEmployee.Name</strong>
    </WindowTitle>
    <WindowContent>
        @CurrEmployee.Note
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize"></WindowAction>
        <WindowAction Name="Maximize"></WindowAction>
        <WindowAction Name="Close"></WindowAction>
    </WindowActions>
</TelerikWindow>

@code {
    private bool WindowIsVisible { get; set; }

    private SampleData CurrEmployee { get; set; } = new SampleData();

    private void OnRowDoubleClickHandler(GridRowClickEventArgs args)
    {
        CurrEmployee = args.Item as SampleData;

        WindowIsVisible = !WindowIsVisible;
    }

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        Name = "Employee Name " + x,
        Team = "Team Name " + x % 5,
        Note = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has... ",
        HireDate = DateTime.Now.AddDays(-x).Date
    });

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public string Note { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Regards,
Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Smiljan
Posted on: 08 Dec 2023 13:57

Hi,

tnx for consideration.

In the following doc-link there is an option:"You can achieve the same behavior if you use the Template instead of the OnCellRender event.".

Can you please post short example of template+CSS used in sucha a case?

BR, Smiljan

ADMIN
Hristian Stefanov
Posted on: 07 Dec 2023 14:58

Hi Smiljan,

After a discussion with our team, we have categorized this feature request as ambiguous. We can introduce a parameter to enable ellipsis and disable text wrapping. However, there is no single way to show the clipped text afterward (e.g. through Window, Tooltip, Expansion Panel, etc.). Different developers have diverse requirements for displaying the remaining text from the ellipsis, and a singular parameter isn't practical to accommodate all possible scenarios.

Currently, achieving the ellipsis effect is relatively straightforward: Prevent the Grid from wrapping text in multiple lines and show ellipsis.

Given these considerations, I have marked this item as declined, and the recommended approach remains to utilize CSS, as detailed in the above link. It's worth noting that the landscape is dynamic, and based on customer demand and interest, the status may be revisited in the future.

Regards,
Hristian Stefanov
Progress Telerik

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