This is a migrated thread and some comments may be shown as answers.

ClientGroupHeaderTemplate doesn't work

3 Answers 101 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Artur
Top achievements
Rank 1
Artur asked on 28 Jun 2017, 05:22 AM
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?

3 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 29 Jun 2017, 12:43 PM
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.
0
Artur
Top achievements
Rank 1
answered on 30 Jun 2017, 03:22 AM
Thanks for answering but I want users to choose grouped  themselves. So I don't have any groups by default.
0
Viktor Tachev
Telerik team
answered on 03 Jul 2017, 11:38 AM
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.
Tags
Grid
Asked by
Artur
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Artur
Top achievements
Rank 1
Share this question
or