How Add icon class to custom.Command

Hi, 

Sorry for the thread necromancy, but I've been referenced here from this thread : http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/grid/htmlattributes-in-custom-commands-not-working-(for-class).aspx

In our case, adding a class would be better since we have pre-defined classes for anchors that make them look like certain buttons. We could add kendo's class to the list, but I think it would be better if it was supported. Or since it's .net wrappers, you could throw a meaning full exception suggesting the work around. This way, some time would be saved. Offering an API option that does nothing is a little confusing. 

Furthermore, the databound callback didn't work for us. I don't have the code near me to test it, but if I remember correctly, the issue was with the cancel event. This event does not trigger a databound event (and it shouldn't), however the button is still re-generated after the cancel, leading to the loss of the class on the anchor. 

Thanks,
Jni

Hello Jean,


Fixing the class issue for custom commands is in our future development plans, but at the moment there are other tasks with higher priority.

I assume that the reason for the issue is that when the user changes a value, the change event of the model is triggered, which also triggers the repainting of the row according to the default template (which does not contain the custom class). As a workaround I would suggest you to bind to the cancel event too and add the custom class to the button for the current row again.

 

Regards,
Dimiter Madjarov
Telerik

[quote]
I assume that the reason for the issue is that when the user changes a value, the change event of the model is triggered, which also triggers the repainting of the row according to the default template (which does not contain the custom class). As a workaround I would suggest you to bind to the cancel event too and add the custom class to the button for the current row again.

[/quote]

Hi Dimiter, 

If you have a single-row selectable grid with an edit command, this still fails if you edit a row that is not currently selected and then cancel . Even if you hook into the cancel event and re-add the classes this only works for the currently selected row.

Any ideas?

Hello Daniel,

It is not clear what is causing the problem on your end. Could you please demonstrate it with a small runnable example, so we could inspect it locally?

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Telerik

Dimiter,

Can you please share code of cancel event workaround.

I've followed this post and I was able to add icon form my custom command (Remove).
And I am using Editor popup. When I cancel out editor window without making any changes to the data, added icon in my custom remove button disappears. So I added a workaround (which I found from another post) using cancel event by adding 

e.preventDefault();
e.sender.refresh();
With this it takes care the icon disappearing issue when I cancel out from updating data.

This work around however, seems to break when I try to add new record. If I cancel out without adding a new record,
a row temporarily added to the grid don't seem to go away.

If I remove work around with cancel event, works. But then again, icon disappears.

Do you have better work around for this?

thanks

Don

Hello Don,

Here is a sample implementation for the cancel event handler of the Grid. The same logic should be executed inside, but this time in a setTimeout call, so the Grid table is redrawn before the execution.

Regards,
Dimiter Madjarov
Telerik

Dimiter,

Sample link don't seem to work. It launches but with blank page.
Can you double check?

thanks

Don

Hello Don,

I tried the example and is opening as expected on my end. You could try running it with a different browser.

Regards,
Dimiter Madjarov
Telerik

Today I tried this example (according to the FAQ http://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-add-kendo-ui-icons-to-custom-command-buttons) but I had to notice that the Custom Command is not rendering with the <span>text</span> element, just plain anchor.

<a role="button" class="k-button k-button-icontext k-grid-myCommand" href="#">text</a>

?????

Hello Heiko,

Thank you for reporting this.

In the 2017.2.621 release, we introduced a change with the custom buttons. For example, if the iconClass configuration is not set, the span will not be created. However, for the MVC wrappers, this configuration is not yet available. This behavior is logged as a bug and our development team already fixed it. That said, it will be available in the next Kendo UI release. You could follow the status of the bug here:

• https://github.com/telerik/kendo-ui-core/issues/3347

Once the fix is released, the correct syntax should be:
Please, note that no more event handling and JavaScript will be needed.

In the meantime, until the fix is released, you could use the following workaround, change the addIcons function to something similar to:

I hope the above information helps.


Regards,
Preslav
Progress Telerik

Hi Dimiter,

Great news but I use this fix and the text shows in a button. I'm only need a icon,

@(Html.Kendo().Grid<OfficeModel>()                        .Name("grid")                        .Columns(columns =>                        {                            columns.Bound(p => p.Code).Title("Código").Filterable(false);                            columns.Bound(p => p.Name).Title("Nombre");                            columns.Bound(p => p.FiscalNumber).Title("Cif");                            columns.Bound(p => p.Email);                            columns.Bound(p => p.Phone).Title("Teléfono");                            columns.Bound(p => p.Active).Title("Activa");                            columns.Command(command => command.Custom("CustomEdit").Text(string.Empty).Click("Edit"));                            columns.Command(command => command.Custom("CustomDelete").Text(string.Empty).Click("Delete"));                        })                        .Pageable()                        .Sortable()                        .Scrollable()                        .Events(ev => ev.DataBound("addIcons"))                        .DataSource(dataSource => dataSource                            .Ajax()                            .Read(read => read.Action("Read", "Office"))                         )                    )

 

Can you help me please?

Best,

Hi Fjaumot,

The correct syntax for you could be:




Regards,
Preslav
Progress Telerik

Hello Kris,


Yes, this is the correct approach if you would like to use the built in Kendo UI icons. Just a small addition, the dataBound event is fired only once, when the grid is bound to the data, not once for each row.

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik