Click handlers on iconified command buttons at row level

[Ferenc]

Hi All,

I am using custom commands in a Grid column (provided as array of buttons), which works until I use the standard 'text' attribute captioned buttons. To reduce the column size I am trying to replace the standard button appearance with the Kendo provided icons (seen here), the definition starts like this:

columns: [
    {
        command: [
            { name: "decreaseIndent", click: decreaseIndent, template: "<a class='k-button'><span class='k-icon k-i-arrow-w'></span></a>" },

with CSS override of:

<style type="text/css">
    .k-grid tbody .k-button {
        min-width: 28px;
        width: 28px;
        padding: .1em .4em .3em;
    }
</style>

The column appears properly, however the decreaseIndent function does not get triggered. Can not add the call to the template by onclick either, as the event arguments are lost that way, therefore loosing the vital info of the current row position, so the following does not work anymore:

function decreaseIndent(e) {
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

Could someone please advise on the proper approach to have Kendo icons as command buttons and on the same time having a click function with proper event arguments? Tried to find similar topics, but could not find any.

[Daniel]

Hi,

The element should have class with name "k-grid-" plus command name in order for the grid to bind to the event e.g.

{ name: "decreaseIndent", click: decreaseIndent, template: "<a class='k-grid-decreaseIndent k-button'><span class='k-icon k-i-arrow-w'></span></a>" }

Regards,
Daniel
Telerik

[Ferenc]

Thanks Daniel,

I just figured it out exactly the same time, also that the href='#' should be double escaped with backslash (like href='\\#') as its an inline template.

Thanks for the help anyway, its greatly appreciated.

Cheers,

Ferenc

[Saif]

this article is helpful
resolve my problem.
Thanks