[Solved] Adding tooltip to header text

[thdwlgP]

Is there a way to customize the header text of the grid so that on mouse over it displays a tooltip or an alternatetext for a tag?


I have a grid like

Html.Telerik().Grid(Model)
             .Name("Grid")
                 .Columns(columns =>
                          {

                              columns.Bound(o => o.FirstName).Title("FirstName").Width(100);
         })
                          .Sortable(sort => sort.Enabled(true))
                 .Scrollable(scrolling => scrolling.Height(350))
                 .Footer(false)
                 .Pageable(paging => paging.Enabled(false))
                 .Groupable(grouping => grouping.Enabled(false))
                 .Render();

Thanks

[Rosen]

Hi,

You may use column's HeaderHtmlAttributes method to add title attribute to a given header cell.

Html.Telerik().Grid(Model)
            .Name("Grid")
            .Columns(columns =>
            {
              columns.Bound(o => o.FirstName)
                     .HeaderHtmlAttributes(new { title = "some_text" })
                     .Title("FirstName").Width(100);
            })
//...

Regards,
Rosen
the Telerik team

[Aaron]

I've taken to using an extension method to make this easier to work with:

public static class GridExtensions
{
    public static GridBoundColumnBuilder<TModel> HeaderTitle<TModel, TValue>(
        this GridBoundColumnBuilder<TModel> builder,
        Expression<Func<TModel, TValue>> expression)
        where TModel : class
    {
        var column = builder.Column as GridBoundColumn<TModel, TValue>;
        if ((column != null) && (column.Metadata != null))
            return builder.HeaderHtmlAttributes(new { title = column.Metadata.Description });
        return builder;
    }
}

Using this, you can write your column descriptions where they're actually supposed to go - in the data annotations:

public class Widget
{
    [Display(Name = "ID", Description = "The unique system-generated ID of the request.")]
    public int Id { get; set; }

    // More properties...
}

Then you set up your grid this way:

@(Html.Telerik().Grid<Widget>(Model.Widgets)
    .Name("Widgets")
    .Columns(columns =>
    {
        columns.Bound(r => r.Id).HeaderTitle(r => r.Id);
        columns.Bound(r => r.Name).HeaderTitle(r => r.Name);
    }))

I use a similar extension for setting the title attribute of <label> (Html.LabelFor) and <th> elements.  Would be really nice if the MVC grid could be updated to do this automatically - that is essentially what the Description property is supposed to be for - but in the meantime, this is serviceable and scales much better than dense repetitive inline view code in projects with many grids and lots of columns.