How to implement a header template

2 posts, 0 answers
  1. Musashi
    Musashi avatar
    23 posts
    Member since:
    Jan 2014

    Posted 19 Jun 2015 Link to this post

    I'm looking to make a custom header for my grid. In the end, I want it to have the title, sorting arrows, and a custom filter image button that bypasses the built-in filtering of the grid.
    To start off though, how do I get it to display the title?
    02.    .Name("grid")
    03.    .Filterable(filter => filter.Enabled(false))
    04.    .DataSource(ds => ds.Ajax().Read(read => read.Action("action", "controller")))
    05.    .Columns(columns =>
    06.    {
    07.        columns.Bound("field")
    08.            .Title("title")
    09.            .Sortable(true)
    10.            .HeaderTemplate("???");
    11.    });
  2. Dimo
    Dimo avatar
    8478 posts

    Posted 23 Jun 2015 Link to this post

    Hi Mushashi,

    If you want to implement a header template, which resembles the Grid's default header cell look, then use the following template string:

    columns.Bound(p => p.Freight).Width(100).HeaderTemplate("<a class='k-link myHeaderTemplate' href=''>Your Title Here</a>");

    In order to hide the Grid's native filtering icon in the above header cell, use the following code, placed after the Grid declaration:

    $(function () {

    At this point, you are free to include any other image or markup in the header template, which will serve as a filtering actuator. For custom filtering, you will need the access the Grid DataSource and use its API.

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top