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

Changing Inline Grid Command Icons

1 Answer 127 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Grant
Top achievements
Rank 2
Veteran
Iron
Grant asked on 27 Jan 2017, 12:33 PM

Hi, 

As my title says, im trying to change the icons of the command buttons in my inline grid.

Now I've managed about 73% of the way; by setting the edit icons in the 'dataBound' event and the update icons in the 'edit' event. But when the user clicks 'cancel' (in edit mode) kendo resets the icons to the kendo standard. What event can I trigger after a cancel has completed  to reset the icon to my custom ones?

For Info purposes

dataBound: function(e) {
  $(".k-grid-edit").find("span").removeClass().addClass("fa fa-pencil");
  $(".k-grid-destroy").find("span").removeClass().addClass("fa fa-times");
},
edit: function(e) {
  $(".k-grid-update").find("span").removeClass().addClass("fa fa-check");
  $(".k-grid-cancel").find("span").removeClass().addClass("fa fa-ban");
}

 

Please advise on how I can achieve this or if there is a more efficient way to do the same thing.

Kind Regards,
Grant

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 31 Jan 2017, 09:20 AM
Hi Grant,

The Grid cancel event is fired when editing is cancelled via the Cancel button.

Alternatively you can overwrite the built-in styles for the command buttons via CSS, replacing the "content" rule for the :before selector for the respective element  e.g.:

http://dojo.telerik.com/oWete

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Grant
Top achievements
Rank 2
Veteran
Iron
Answers by
Dimiter Topalov
Telerik team
Share this question
or