Click handlers on iconified command buttons at row level

4 posts, 3 answers
  1. Answer
    Ferenc
    Ferenc avatar
    2 posts
    Member since:
    Feb 2011

    Posted 03 Jul 2013 Link to this post

    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.

  2. Answer
    Daniel
    Admin
    Daniel avatar
    2212 posts

    Posted 05 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Answer
    Ferenc
    Ferenc avatar
    2 posts
    Member since:
    Feb 2011

    Posted 05 Jul 2013 Link to this post

    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
  4. Saif
    Saif avatar
    1 posts
    Member since:
    Apr 2018

    Posted 18 Apr in reply to Ferenc Link to this post

    this article is helpful
    resolve my problem.
    Thanks
Back to Top