Custom save/canceledit command column buttons

[Michele]

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

[Kiril Nikolov]

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

 

 

[Michele]

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

[Kiril Nikolov]

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

 

 

[Martin]

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');
        }
    }

[Stefan]

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