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

custom icon dissapears after click cancel (inline editing)

3 Answers 215 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 08 Jun 2017, 02:36 PM

Hi there,

i have a custom button in the command cell of my grid and bind a custom icon to this button, like in this example.

dataBound: function (e) {
e.sender.tbody.find('.k-button.ownIcon').each(function (idx, element)
{
$(element).find('span').addClass('k-icon k-i-delete');
});
}

After clicking the cancel Button with "inline" editing the custom icon dissapears. I tried to add the icon a second time when the cancel event is fired, but at this time my custom button is not initialized. Is there any event after this, that i can reach to redraw the icon? 

3 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 12 Jun 2017, 07:50 AM
Hi Daniel,

If you would like to customize the icons for custom buttons in the Grid component you can use an approach similar to the one illustrated in the example below. Note that custom class is specified for the buttons via className attribute. Then that CSS class is used to set an icon.


In case you have a different scenario please send a dojo sample that illustrates the behavior you are observing so we can examine it.


Regards,
Viktor Tachev
Progress Telerik
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.
0
Daniel
Top achievements
Rank 1
answered on 12 Jun 2017, 08:07 AM

Hi, 

http://dojo.telerik.com/AdupA

I hope this example explains what i want to do. (And I hop the link works :) )

There you have a custom 'delete' button with a trash icon. The grid edit mode is set to 'inline'. Now if you klick on the edit button und than the cancel button the icon from the delete button disapears.

Regards,

Daniel

0
Daniel
Top achievements
Rank 1
answered on 13 Jun 2017, 01:59 PM

Hey there, 

i found a solution for this Problem. 

this workaround worked for me. I simply added the classes for the icons in an empty <span> tag and after this the name of the button.

{command: [
{name: "delete"
 text: '<span class="k-icon k-i-delete"></span>Remove',
 click: function(e){
       //code for click function
      }
}]

 

 

Regards, 

Daniel

Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Daniel
Top achievements
Rank 1
Share this question
or