How to display svg icons in a grid column ClientTemplate?

[Anders]

Hi,

After update from 2023.3.718 to 2024.1.319 I could no longer see icons. I understand that there has been a switch to svg icons.

I use icons like this in grid columns

columns.Bound(p => p.Id).ClientTemplate("" +

"<a href='" + @Url.Action("Details", "Orders", new { id = "#=Id#" }) + "'target='_blank' '><i title ='Show details' class='k-icon k-i-detail-section'></i></a>")

Could you please modify code above so I can understand how to use svg icons instead?

/Br. Anders

[Alexander]

Hi Anders,

In order to achieved the desired outcome, I would advise employing a technique which will instantiate the rendering of the SVG icons via JavaScript intervention. In order to circumvent this peculiar anomaly.

For example:

Columns and Events Configuration:

.Columns(columns =>
{
    columns.Bound(p => p.Discontinued)
		.ClientTemplate("<span class='myIcon'></span>");
})
.Events(events => events.DataBound("onDataBound"))


<script type="text/javascript">
    function onDataBound(e){
        kendo.ui.icon($(".myIcon"), {icon: "camera"});
    }
</script>

JavaScript:

<script type="text/javascript">
    function onDataBound(e){
        kendo.ui.icon($(".myIcon"), {icon: "camera"});
    }
</script>

As you may have noticed, we a leveraging here the DataBound event in order to make sure that each row records have been fully rendered within the DOM tree.

We are also using the newly inducted "kendo.ui.icon()" method, which accepts two handlers:

1. A collection of DOM elements.
2. Settings object for determining the icon.

More information is available within the following resource more-or-less covers this subject matter as well:

Setting SVG Icons from Client (Documentation) - https://docs.telerik.com/aspnet-core/styles-and-layout/sass-themes/svg-icons#setting-svg-icons-from-client

For your convenience, here is a Telerik REPL example for you to explore and experiment with further:

Telerik REPL Example - https://netcorerepl.telerik.com/mIkJlxaq24p5SYHQ33

On a seperate note, I understand that invoking the previously mentioned method in scenarios where numerous SVG Icons are employed may place in a predicament. In terms of adding another portion of JavaScript code.

This is why, you can still revert to the old Font Icon Type behavior. More information is available within the following resource:

Missing Font Icons (Knowledge Base) - https://docs.telerik.com/aspnet-core/knowledge-base/missing-font-icons

Web Font Icons (Documentation) - https://docs.telerik.com/aspnet-core/styles-and-layout/sass-themes/font-icons#web-font-icons

I hope this helps.

Kind Regards,
Alexander
Progress Telerik

[Anders]

Hi Alexander, thanks. It's working great. /Br. Anders