Grid header format

2 posts, 0 answers
  1. Hung
    Hung avatar
    15 posts
    Member since:
    Sep 2017

    Posted 19 Oct 2020 Link to this post

    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.

  2. George Gindev
    Admin
    George Gindev avatar
    13 posts

    Posted 21 Oct 2020 Link to this post

    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).

Back to Top