Add button to column header

[Junseo]

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

[Dimiter Madjarov]

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

[Mark]

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

[Dimiter Madjarov]

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