This is a migrated thread and some comments may be shown as answers.

Custom save/canceledit command column buttons

5 Answers 1192 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michele
Top achievements
Rank 2
Michele asked on 25 Feb 2015, 09:45 AM
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







5 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 27 Feb 2015, 08:51 AM

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!
 
0
Michele
Top achievements
Rank 2
answered on 04 Mar 2015, 09:06 AM
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
0
Kiril Nikolov
Telerik team
answered on 06 Mar 2015, 07:54 AM

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!
 
0
Martin
Top achievements
Rank 1
answered on 30 Sep 2016, 12:28 PM

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

0
Stefan
Telerik team
answered on 04 Oct 2016, 10:32 AM
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.
 
Tags
Grid
Asked by
Michele
Top achievements
Rank 2
Answers by
Kiril Nikolov
Telerik team
Michele
Top achievements
Rank 2
Martin
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or