This is a migrated thread and some comments may be shown as answers.

Grid header format

1 Answer 35 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Hung
Top achievements
Rank 1
Veteran
Hung asked on 19 Oct 2020, 02:28 PM

Attached is the same grid header displays on Chrome and Edge browser. 

Is there a way to force the header not to display C... in Chrome?

var RHCenterOverFlow = "text-align:center; font-size:10px; font-weight:bold; padding:0.5px; overflow:visible; white-space:normal";

                        columns
                        .Bound(c => c.Class)
                        .Title("Class")
                        .HeaderHtmlAttributes(new { style = RHCenterOverFlow })
                        .Width(40)
                        .MinResizableWidth(40);

Thanks.

1 Answer, 1 is accepted

Sort by
0
George Gindev
Telerik team
answered on 21 Oct 2020, 02:42 PM

Hello Hung,

The header cells only cut off the content with ellipses (...) when there isn't enough space to render the full text.

Inside each <th></th> there is an element with class .k-link, which contains the text, and has the property text-overflow: ellipses. To target this property, and change it, the following CSS could be used:

 

.k-grid-header .k-header>.k-link {
    text-overflow: initial;
}

 

Let me know if you need further assistance.

Regards,
George Gindev
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
Grid
Asked by
Hung
Top achievements
Rank 1
Veteran
Answers by
George Gindev
Telerik team
Share this question
or