How Add icon class to custom.Command

[Chad]

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?

[Dimiter Madjarov]

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

[Jean-François]

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]

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

[Daniel]

[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]

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

[Don]

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]

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

[Don]

Dimiter,

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

thanks

Don

[Dimiter Madjarov]

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

[Heiko]

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]

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:

@(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

[Francesc]

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]

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

[Kris Nobels]

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]

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

[Jignesh]

Another workaround without DataBound event.

command.Custom("ViewButton").Text("<span class='k-icon k-i-pdf'></span>View").Click("viewbutton_click");