Add button to GROUP HEADER

[Oliver]

How is it possible to add a fully functional icon button in grids Group Header ?

My approach : 

                @(Html.Kendo().Grid<ClaimViewModel>()
                    .Name("dgvClaims")
                    .Columns(columns =>
                    {
                        columns.Command(command => command.Custom("Vorgang hinzufügen").IconClass("save").Click("showDetails")).Width(300);
                        columns.Bound(p => p.Id).Filterable(false).Visible(false);
                        @* columns.Bound(p => p.ClaimId).ClientGroupHeaderTemplate(@"<div>Alfred Mustermann</div><div><button name=""textButton""  theme-color=""ThemeColor.Primary"" type=""button"" icon=""arrow-rotate-cw"" on-click=""onClick"">Add Button</button></div>"); *@
                        columns.Bound(p => p.ClaimId).ClientGroupHeaderTemplate(@"<div>
                                                                                    <div>Alfred Mustermann</div>
                                                                                    <kendo-button name=""textButton"" type=""button"" theme-color=""ThemeColor.Primary"">Add Button</kendo-button>
                                                                                  </div>");
                        columns.Bound(p => p.VnName).Width(300);
                        columns.Bound(p => p.ClaimState).Title("Status").Width(100);
                        columns.Bound(p => p.ClaimnumberInsurance).Title("Schadennummer VU").Width(150);
                        columns.Bound(p => p.ClaimnumberRisktaker).Title("Schadennummer Risikoträger").Width(150);
                        columns.Bound(p => p.ClaimFriendlyName).Title("Beschreibung").Width(200);
                        columns.Bound(p => p.ClaimDate).Title("Schadendatum").Format("{0:dd.MM.yyyy}");
                        columns.Bound(p => p.ClaimItemReference).Title("Verweis auf Mappeneintrag").Width(200);
                        columns.Bound(p => p.ClaimItemReferenceType).Title("Eintragstyp").Width(150);
                        columns.Bound(p => p.ClaimItemRemark).Title("Bemerkungen").Width(150);
                    
                    })
                    .Selectable(s => s.Mode(GridSelectionMode.Single)
                    .Type(GridSelectionType.Row))
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .Filterable()
 
                   .HtmlAttributes(new { style = "height:650px;" })
                   .Events(events => events.Change("onChangeCustomerGrid"))
                   .DataSource(dataSource => dataSource.Ajax()

[Ivaylo]

Hi Oliver,

Thank you for the details provided.

I assume that you want to get the current group header element. To do this, we can use the "event" parameter in the "onClick" Event handler. The event will point to the button of the grid header template. So you can get the parent of the button, that way you will get the whole current group header.

event.target.parentNode

Please note, that you need to add the event in the button onclick event in the handle, like this: 

<button class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base' onclick='onClick(event)'><i class='fa fa-home'></i>Click me</button>

Furthermore, I have prepared a sample REPL, so you can test the logic and observe its functionality:

•  https://netcorerepl.telerik.com/GoEhGGlc56IL7a8L45 

Feel free to correct me if I misunderstood the requirements, and if this is not the desired behavior, please provide more information, and we will do our best to assist you.

Best Regards,
Ivaylo
Progress Telerik

[Oliver]

Thank you ...
This was exactly what i was looking for.

[Ivaylo]

Hello Oliver,

Thank you for the provided information! 

In order to achieve the desired behavior, I would recommend using a plain HTML Button which can be styled by using Telerik UI button CSS classes and manually configuring the onClick Event using the "onclick" attribute of the button.

<button class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base' onclick='onClick()'><i class='fa fa-home'></i>Click me</button>

For the icon, I recommend using the FontAwesome library with the "i" tag where in the "class" attribute you put the class of the icon you want to use. You can see the icons on the FontAwesome website. https://fontawesome.com/v4/icons/ 

<i class='fa fa-home'></i>

Furthermore, there is a REPL demo, where you can run the code and see how it works. https://netcorerepl.telerik.com/QouhFUbw55WT6Prg55 

Regards,
Ivaylo
Progress Telerik

[Oliver]

thank ... That was second approach and i hoped there was a more elegant way out of the box.

If you do so how is it possible to access the grid header content wothin the click event ?