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

Add button to column header

3 Answers 2277 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Junseo
Top achievements
Rank 1
Junseo asked on 06 Sep 2013, 06:46 AM
hi.

I'm looking for sample code about add button to column header.

I was previously using the jqgrid. this feature was implemented that refer to the following URL . 
http://stackoverflow.com/questions/8213162/add-button-to-jqgrid-column-header

I can't find that information about kendo ui. Please post it if you have any sample code.

thanks

3 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 06 Sep 2013, 08:35 AM
Hello Junseo,


To achieve this you could use the headerTemplate option of the Grid columns.
E.g.
columns: [
    {
        field: "ProductName",
        headerTemplate: "Product Name <button class='myButton'>click me</button>"
    },
    ...
]

Since clicking the button may cause some issues if sorting is enabled for example, I recommend stopping the event propagation in the click handler.
E.g.
$(".myButton").click(function (e) {
    e.stopPropagation();
    return false;
});


Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mark
Top achievements
Rank 1
answered on 01 Oct 2015, 05:29 PM

I was asked to add a small button to "Clear all Filters" in the Group Header Column cell(first one top left of Filter Row).  Can I do that somehow?  I'm sure I probably can insert something with JQuery.  Just didn't know if you had a way to inject a small button into that cell.

 

Thanks

0
Dimiter Madjarov
Telerik team
answered on 02 Oct 2015, 01:30 PM

Hello Mark,

I assume that the groupHeaderTemplate property would help in that case. You could add the button inside of it.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Junseo
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Mark
Top achievements
Rank 1
Share this question
or