Multiple clickable icons in grid column

[Irina]

Hi,

I am using a Telerik MVC Grid and I am trying to get multiple clickable icons in one column. Did manage to do this via

columns.Command(command => {
                 command.Custom("View").Click("view").IconClass("k-icon k-i-preview k-i-eye");     

                 command.Custom("Modify").Click("modify").IconClass("k-icon k-i-track-changes"); });

What I really want to achieve is to do this not via command, but in a normal column, using own icon with "onclick" event.

Did try this, but does not really work.

columns.Template(@<text><span class='viewicon' onclick='view'><span class='modifyicon' onclick='modify'></text>)

When I tried : columns.Template(@<text><span class='viewicon' onclick='view'></text>), the event does not get attached to the icon.

Maybe you have some useful input on the topic. 

Thanks a lot!

[Irina]

Hi,

as I managed this and maybe someone also needs something similar, this is how I solved it:

columns.Bound(p => p.Action).ClientTemplate(
   "<span class='k-icon k-i-preview k-i-eye' title='View' onclick='view()'></span>" +
   "<span class='k-icon k-i-track-changes' title='Modify'  onclick='modify()'></span>" +
    "<span class='k-icon k-i-delete k-i-trash' title='Delete' onclick='delete()'></span>");
})

[Ianko]

Hi Rina,

Using template is valid option for the required icons. You could also use the custom command options, but using HtmlAttributes method to add your own classes and achieve similar result.

Regards,
Ianko
Progress Telerik

[Irina]

Thanks Ianko, good to know that this is achievable both ways.

[Yih Wern]

Hi Ianko,

Thanks for the information about the HtmlAttributes method.

I would hope that you could provide a live demo or code snippets of using HtmlAttributes to display clickable icons that will redirect to other Razor pages.

Thank you :)

[Aleksandar]

Hello Yih Wern,

You can attach an onclick handler via the HtmlAttributes and then redirect to the required page:

columns.Command(command => {
                    command.Custom("Custom Command").IconClass("k-icon k-i-preview").HtmlAttributes(new {@onclick="myFunction(this)"});
                });

function myFunction(args) {
        var grid = $('#grid').getKendoGrid();
        var dataItem = grid.dataItem(args.closest('tr'));
        location.href = "@Url.Action("MyAction","MyController")" + dataItem.OrderID;
    }

Regards,
Aleksandar
Progress Telerik

[Yih Wern]

Hi Aleksandar,

Thank you very much for the excellent answer with the sample codes :)

Cheers

Yih Wern