ClientGroupHeaderTemplate doesn't work

4 posts, 0 answers
  1. Artur
    Artur avatar
    2 posts
    Member since:
    Jun 2017

    Posted 28 Jun Link to this post

    Hi!

     

    I need to have a button in my group header rows. Added ClientGroupHeaderTemplate but button is not displayed (in fact nothing has changed at all). What's wrong in my code?

     

    Thank you!

    @(Html
        .Kendo()
        .Grid<ClientSearchResultModel>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Select().Width(50);
            columns.Bound(o => o.FirstName);
            columns.Bound(o => o.LastName);
            columns.Bound(o => o.Type)
                .ClientGroupHeaderTemplate("<button class='myButton'>Select Items</button>");
        })
        .Pageable()
        .Sortable()
        .Filterable()
        .Scrollable()
        .Groupable()
        .PersistSelection()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("GetDataModels", "Client"))
        )
    )

     

    Side question: is it possible to define common group header template for all collumns?

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1727 posts

    Posted 29 Jun Link to this post

    Hello Artur,

    Note that in order for the group header to be displayed the data needs to be grouped. Try grouping the Grid by the Type field and the header should be displayed. 

    Alternatively you can add a default group to the DataSource like illustrated below.


    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetDataModels", "Client"))
        .Group(g=>g.Add(c=>c.Type))
    )


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Artur
    Artur avatar
    2 posts
    Member since:
    Jun 2017

    Posted 29 Jun in reply to Viktor Tachev Link to this post

    Thanks for answering but I want users to choose grouped collumns themselves. So I don't have any groups by default.
  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1727 posts

    Posted 03 Jul Link to this post

    Hi Artur,

    With the setup you have for the Grid the users will be able to apply grouping themselves. When they apply grouping the GroupHeaderTemplate specified for the respective column will be shown. This enables you to define a different group header template for each column.


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top