Does the Kendo UI Grid support Column Header Templates?

9 posts, 0 answers
  1. Michael
    Michael avatar
    12 posts
    Member since:
    Jan 2008

    Posted 13 Jun 2012 Link to this post

    I've been reading through the documentation and I've been unable to find a definitive answer on this.

    Does the Kendo UI grid support column header templates?

    We need to put a custom totals div into column headers on certain columns so we can update them on the fly as the data changes.
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 14 Jun 2012 Link to this post

    Hi Michael,

    I am afraid that this feature is not supported out of the box at present, but we will appreciate if you could submit the idea at KendoUI user voice forum. Thus way the community would be able to vote for and evaluate it, if the feature request turns out to be popular we will consider its implementation for one of our future releases.

    At the moment as a workaround you could try to modify the corresponding html elements with custom code.
    $(".k-grid-header-wrap th") //returns grid header cells


    All the best,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Jojo
    Jojo avatar
    2 posts
    Member since:
    Sep 2012

    Posted 08 Sep 2012 Link to this post

    "template" for column values and "headerTemplate" for the header of the column seems to do the trick
  5. poet_byron
    poet_byron avatar
    21 posts
    Member since:
    Mar 2010

    Posted 26 Sep 2012 Link to this post

    Thanks Michael!  I have confirmed that the headerTemplate does work.  Kendo team, the documentation for the kendo ui grid configuration column options should be updated to include this option, unless the headerTemplate is supposed to be deprecated.  Again, thanks Mike.
  6. Jojo
    Jojo avatar
    2 posts
    Member since:
    Sep 2012

    Posted 26 Sep 2012 Link to this post

    I am not Michael, but you are welcome anyways... like you, I only found that "headerTemplate" option within the forums, so yeah, I hope the Kendo team would really update the documentations and make it a priority.

    That would probably save them a lot of time, since most of the questions here in the forums could have been answered/solved if there was proper/complete documentation.
  7. Tahir Ahmad
    Tahir Ahmad avatar
    6 posts
    Member since:
    Feb 2010

    Posted 24 Oct 2012 Link to this post

    Is it available now? Or is there a way to change CSS Class and text-alignment.
  8. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 29 Oct 2012 Link to this post

    Hello,

    The headerTemplate setting will be documented shortly. Its usage is identical to the one of the template property.

    In order to set a custom CSS class or other attributes to the Grid (header) cells, one can use attributes and headerAttributes:

    $("#grid").kendoGrid({
        columns: [
            {
                field: "Price",
                attributes: {
                    "class": "myClass",
                    style: "text-align: right"
                }
            }
        ]
    });


    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Todd
    Todd avatar
    26 posts
    Member since:
    Sep 2012

    Posted 30 Oct 2012 Link to this post

    Thanks for finally adding this to the API doc.  While you're taking missing API documentation requests, what about grid columns.values (values property for foreignkey feature), and the requestEnd event of the data-source (just to name a few) ??

    Thanks.
  10. charan
    charan avatar
    29 posts
    Member since:
    May 2012

    Posted 13 Nov 2012 Link to this post

    hi,
    I have to display column names dynamically.In my controller I am getting my names and I want to display those names in my columns of my grid.can you help me how to do this?
Back to Top
Kendo UI is VS 2017 Ready