How Add icon class to custom.Command

3 Answers 2882 Views
Grid
Chad
Top achievements
Rank 1
Chad asked on 12 Feb 2013, 11:35 PM
Hello,

I have a command column, and I'd like to add a custom command within it, not in a separate column:
columns.Command(command =>
    {
        command.Edit();
        command.Destroy();
        command.Custom("Copy").Click("CopyPOLine").HtmlAttributes(new { @class = "k-copy-icon"});
    }).Width(175);
The above renders this:
<a class="k-button k-button-icontext k-grid-Copy" href="#"><span class=" "></span>Copy</a>
I cannot figure out how to add a custom class to the <span> tag inside the <a> tag so I can specify the image to display. I see how you can create a columns.Template to accomplish this, but that would be in a new column and I want all command buttons to be within the same column. 

Side Note in the above: the HtmlAttributes class specified doesn't get appended to the class list in the <a> tag either...it looks like it generates a new class of "k-grid-NAME_OF_COMMAND". So HtmlAttributes has no affect on class???

Is there a way to accomplish this?

3 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 14 Feb 2013, 09:01 AM
Hello Chad,

 
You can add any CSS styles with the HtmlAttributes method to a custom command, except classes, because they are generated by template. The most convenient way to specify custom styles is to use the auto generated "k-grid-NAME_OF_COMMAND" class. If this is not suitable in the current implementation, I would suggest you to bind to the dataBound event and attach the class there.
E.g.

.Events(e => e.DataBound("onDataBound")

function onDataBound(e) {
    $(".k-grid-NAME_OF_COMMAND").addClass("k-grid-Copy");
}


Regards,
Dimiter Madjarov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Jean-François
Top achievements
Rank 1
commented on 04 Oct 2013, 12:14 PM

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
Dimiter Madjarov
Telerik team
commented on 07 Oct 2013, 09:09 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Daniel
Top achievements
Rank 2
commented on 11 Aug 2015, 02:59 PM

[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?
Dimiter Madjarov
Telerik team
commented on 12 Aug 2015, 08:37 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Don
Top achievements
Rank 1
commented on 01 Mar 2016, 06:11 PM

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

Dimiter Madjarov
Telerik team
commented on 03 Mar 2016, 09:59 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Don
Top achievements
Rank 1
commented on 03 Mar 2016, 03:44 PM

Dimiter,

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

thanks

Don

Dimiter Madjarov
Telerik team
commented on 03 Mar 2016, 04:00 PM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Heiko
Top achievements
Rank 1
commented on 08 Jul 2017, 09:13 AM

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>

?????

Preslav
Telerik team
commented on 11 Jul 2017, 01:54 PM

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:
Once the fix is released, the correct syntax should be:
@(Html.Kendo().Grid()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Command(command => { command.Custom("myCommand").Text("My Text").IconClass("k-icon k-i-custom"); });
        })
        .Events(ev => ev.DataBound("addIcons"))
    )
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:
function addIcons(e) {
    var span = "<span class='k-icon k-i-custom'></span>"
    e.sender.tbody.find(".k-grid-myCommand").prepend(span);
}

I hope the above information helps.


Regards,
Preslav
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.
Francesc
Top achievements
Rank 1
commented on 11 Jul 2017, 08:36 PM

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,

Preslav
Telerik team
commented on 12 Jul 2017, 01:52 PM

Hi Fjaumot,

The correct syntax for you could be:

columns.Command(command => command.Custom("myCommand").Text(" ")).Width(180);

function addIcons(e) {
    var span = "<span class='k-icon k-i-custom'></span>"
    e.sender.tbody.find(".k-grid-myCommand").prepend(span);
}


Regards,
Preslav
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
Kris Nobels
Top achievements
Rank 2
answered on 12 Oct 2013, 03:20 PM
This does the trick :-)

columns.Command(command =>
              {
                  command.Custom("Edit").Click("showDetails");
                  command.Custom("Delete").Click("DeleteDetails");
                  command.Custom("View").Click("ViewDetails");
              }).Title("Actions");


          .Events(e => e.DataBound("onRowBound"))


 <script type="text/javascript">
        function onRowBound(e) {
        $(".k-grid-Edit").find("span").addClass("k-icon k-edit");
        $(".k-grid-Delete").find("span").addClass("k-icon k-delete");
        $(".k-grid-View").find("span").addClass("k-icon km-view");
    }
</script>

Dimiter Madjarov
Telerik team
commented on 14 Oct 2013, 07:25 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jignesh
Top achievements
Rank 1
answered on 16 Aug 2017, 06:50 PM

Another workaround without DataBound event.

command.Custom("ViewButton").Text("<span class='k-icon k-i-pdf'></span>View").Click("viewbutton_click");
Tags
Grid
Asked by
Chad
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Kris Nobels
Top achievements
Rank 2
Jignesh
Top achievements
Rank 1
Share this question
or