Displaying dynamic images in kendo grid

Question

I want to populate dynamic images in kendo grid. I am getting json data.

And I have following code

 var grid = $("#timeSegmentGrid").kendoGrid({
    //var icon='';  
        dataSource: {
            transport: {
                read: function (options) {
                    getTimeSegmentList("", onSuccess, null);
                    function onSuccess(responseData) {
                        if (responseData.segments != null)
                            options.success(responseData.segments);
                        else
                            options.success([]);
                    }
                }
            },
            pageSize: 5
        },
        pageable: {
            input: true,
            numeric: false,
            pageSizes: false,
            refresh: true
        },
        toolbar: kendo.template($("#template").html()),
        columns: [
            { field: "display_name", title: "&{'Name'}" },
            { field: "display_order", title: "&{'Display Order'}" },
            { field: "icon",
                title: "Icon"
            }
        ]
    }).data("kendoGrid");

"icon" contains path to the image. Now, I am able to print the path but I really dont know how to display image according to that path. Any help is highly appreciated.

Solution 1

Can you try:

columns : [
    { 
        field: "icon",
        title: "Icon",
        template: '<img src="#= icon #" alt="image" />'
    }
]

Solution 2

Try this may be its helpfull

@(Html.Kendo().Grid<TelerikMvcAppCombo.Models.ImageModel>()
.Name("grdImageModel")
.Columns(columns =>
{
    columns.Bound(c => c.IMAGESIZE_ID).ClientTemplate("<input type='checkbox'     value =#IMAGESIZE_ID#  />");
    columns.Bound(c => c.IMAGESIZE_NAME).Width(140);
    columns.Bound(c => c.IMAGESIZE_DESC).ClientTemplate("<img src='" + 
    Url.Content("~/Images/") + "#=IMAGESIZE_NAME#'/>");
    columns.Bound(c => c.created_by);
    columns.Bound(c => c.created_date);
    columns.Bound(c => c.modified_by);
    columns.Bound(c => c.modified_date);
})
.HtmlAttributes(new { style = "height: 580px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
    .Refresh(true)
    .PageSizes(true)
    .ButtonCount(10)
)
.DataSource(datasource => datasource
    .Ajax()
    .Read(read => read
            .Action("GetData", "Image")
          ))

)