Custom save/canceledit command column buttons

6 posts, 0 answers
  1. Paolo
    Paolo avatar
    423 posts
    Member since:
    Jun 2009

    Posted 25 Feb 2015 Link to this post

    Hello,
    after many sufferings with Asp.Net Mvc helpers, I've finally understood that if I define a Javascript KendoGrid i'm able to define custom command buttons without altering the grid behaviour:
    "command": [
        {
            "name": "edit",
            "buttonType": "ImageAndText",
            "iconClass": "fa",
            "imageClass": "fa-edit",
            "text": {
                "cancel": "",
                "update": "",
                "edit": ""
            }
        },
        {
            "name": "mydelete",
            "buttonType": "ImageAndText",
            "text": "",
            "imageClass": "fa-trash-o",
            "className": "my-delete-button",
            "iconClass": "fa",
            "click": function (e) {
                $(e.target).confirmation('show');
            }
        }
    ]

    As you can see I want to customize my buttons with FontAwesome, white icons.

    Now the point is that I'm still not able to change the icons on the two buttons (save changes and cancel edit) that appears when creating or editing a row.

    How do I handle it?

    Thanks







  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 27 Feb 2015 Link to this post

    Hello Paolo,

    I believe the following documentation examples that shows how to use FA icons in custom command buttons in the grid will be helpful:

    http://docs.telerik.com/kendo-ui/web/grid/how-to/Layout/font-awesome-icons-in-custom-grid-command-buttons

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Paolo
    Paolo avatar
    423 posts
    Member since:
    Jun 2009

    Posted 04 Mar 2015 in reply to Kiril Nikolov Link to this post

    Hello Kiril.

    As you can see from the example, I'm already changing icons to commands, but the point is, that i cannot change the icons to the "save" and "cancel" buttons, those that you see when you are in edit mode.

    I'll attach you a Jing demo video of the same code that I posted above.

    Thanks
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 06 Mar 2015 Link to this post

    Hello Paolo,

    For such scenario you need to implement custom buttons, with your custom icons that will handle the save,cancel functionality, as the built-in buttons cannot be easily customized to use FontAwesome icons. I believe the following article will help:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-saveChanges

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Martin
    Martin avatar
    5 posts
    Member since:
    May 2016

    Posted 30 Sep in reply to Kiril Nikolov Link to this post

    Where can I find the documentation for what properties you can use for a command button? Can I also set disabled?

    {
            "name": "mydelete",
            "buttonType": "ImageAndText",
            "text": "",
            "imageClass": "fa-trash-o",
            "className": "my-delete-button",
            "iconClass": "fa",
            "click": function (e) {
                $(e.target).confirmation('show');
            }
        }

  7. Stefan
    Admin
    Stefan avatar
    265 posts

    Posted 04 Oct Link to this post

    Hello Martin,

    The documentation for the available properties of the command button can be found at:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.command

    Disabling the custom button is not available out of the box. This can be done via custom logic, by selecting the button via jQuery, and adding the disabled attribute to it.

    Regards,
    Stefan
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready