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?
    01.Html.Kendo().Grid<dynamic>()
    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
    Admin
    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 () {
        $(".myHeaderTemplate").parent().find(".k-grid-filter").hide();
    });

    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.

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-dataSource
     
    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter

    Regards,
    Dimo
    Telerik
    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