[Solved] Grid Header padding issue

[Wai Kei]

Hi Telerik,

    Currently we are using the telerik grid with the sortable column. Since we need to display many columns so we are setting the header title with line breaks and set the header html attributes to have the height of 45px. However, when we display it, it looks as if there are bunch of spaces/paddings on top of the header row. The user complains all the time. Is there a way to reduce the padding on top? We try to set the height to be a lesser value but instead of reducing the top padding, it actually reduces the bottom padding, which truncates the headers containing the line break.

     Please see the screenshot for the example.

Thank you,

Wai Kei

[Atanas Korchev]

Hi Wai Kei,

 We are not sure what CSS  you are using to achieve this behavior. Without the actual CSS we cannot help you. Please paste it here.

Regards,
Atanas Korchev
the Telerik team

[Wai Kei]

We are currently using the Telerik default style for all our controls. And here is an example grid that we have:

        Html.Telerik().Grid<LetterSearchResult>(Model.Letters)
                .Name(Constants.LIST)
                .Columns(columns =>
                {
                    columns.Bound(letter => letter.LetterSequence)
                    .Template(letter => {%>
                        <%= Html.ActionLink(letter.LetterSequence.ToString(), Constants.CODING, Constants.LETTER, new { id = letter.LetterId }, null)%>
                        <%}).ClientTemplate("<a href=" + Url.Action(Constants.CODING, Constants.LETTER, new { id = "<#= LetterId #>" }) + "><#= LetterSequence #></a >")
                          .Width(50).Title("Letter\n#").HeaderHtmlAttributes(new { style = Constants.GRID_HEADER_STYLE });
                    columns.Bound(letter => letter.AuthorName).Width(100);
                    columns.Bound(letter => letter.DateSubmitted).Format("{0:MM/dd/yyyy}")
                        .Title("Date\nSubmitted").HeaderHtmlAttributes(new { style = Constants.GRID_HEADER_STYLE });
                    columns.Bound(letter => letter.LetterTypeName)
                        .Title("Letter\nType").HeaderHtmlAttributes(new { style = Constants.GRID_HEADER_STYLE });
                    columns.Bound(letter => letter.LetterStatusName)
                        .Title("Letter\nStatus").HeaderHtmlAttributes(new { style = Constants.GRID_HEADER_STYLE });
                })
                .ClientEvents(events => events.OnDataBound("showNoDataText"))
                .DataBinding(dataBinding => dataBinding.Ajax().Select("LetterListBinding", Constants.LETTER))
                .EnableCustomBinding(true)
                .Pageable(settings => settings.PageSize(25).Total((int)ViewData["total"]))
                .Sortable()
                .HtmlAttributes(new { style = "width: 950px;" })
                .Render();
    } %>

where

Constants.GRID_HEADER_STYLE = "white-space:pre;height:50px;";

The height setting is to make the header higher to accommodate the line break in the header title. If you adjust the height to be smaller, as I mentioned, will not decrease the padding above the header; hence, it looks as if there is a big padding on top of each header as seen in the screenshot.

thanks.

[Dimo]

Hello Wai Kei,

The Grid component's header styles are optimized for the case when the header is single lined. In your case please add the following CSS rule to your page:

.t-grid .t-grid-header .t-header .t-link
{
    height: auto ;
}

Afterwards, you can remove the height:50px setting, as it is not required to achieve the desired layout. The header cells will expand vertically as much as needed.

In addition, if you want to fix the issue with the hover background not expanding on single-lined headers, here is what you can do:

columns.Bound(letter => letter.AuthorName).Width(100)
        .HeaderHtmlAttributes(new { @class = "t-header single" });

.t-grid-header .single a.t-link
{
    line-height: 36px;
}

Adjust the number (36) to match the actual height of the header row.


Greetings,
Dimo
the Telerik team

[Wai Kei]

Perfect solution. Thank you!