Kendo grid column bound to image path shows path not image

[Anamika]

<script type="text/javascript">
function ImgTemplate(data) {
var html = "<img src='" + data + "' />";
return html;
}
</script>
@(Html.Kendo().Grid(Model)
.Name("ObjGrid")
.Mobile(MobileMode.Tablet)
.HtmlAttributes(new { style = "height: 300px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
if (Model != null)
{
foreach (System.Data.DataColumn column in Model.Columns)
{
model.Field(column.ColumnName, column.DataType);
}
}
})
.ServerOperation(false)
)
.Columns(columns =>
{
for (int i = 0; i < ViewBag.ListHeader.GetLength(0); i++)
{
if(ViewBag.ListHeader[i, 0] != null){
if (ViewBag.ListHeader[i, 1] == "imagePath")
{
columns.Bound(ViewBag.ListHeader[i, 0]).Title("Typ").ClientTemplate("#= ImgTemplate(imagePath) #").Width(12);
}

               
else
{
columns.Bound(ViewBag.ListHeader[i, 0]).Title(ViewBag.ListHeader[i, 1]).Width(150);
}
}
}
})
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single))
.ToClientTemplate()
)

 

This code Displays Image properly when run on Desktop Browsers. But the view for tablet with same code does not diosplay Image but Displays the path. This partial view gets embeded in a tab using LoadContentFrom

 

What can cause this

 

Thanks

Anamika

[Preslav]

Hello Anamika,

Based on the provided information, I am not sure what might be the cause for this behavior.

That said, could you please elaborate on the scenario. For example, it will help me a lot if you provide:

• A runnable sample Dojo that clearly replicates the issue. If this is not doable, you could send us a sample MVC project.
• The model of the testing device that reproduces the problem.
• The browser version. 

I look forward to your reply.


Regards,
Preslav
Progress Telerik

[Anamika]

Hello Preslav,

I narrowed down to the line of code which if i remove the Images gets displayed. Not sure why the line of code will give any Problem though

I have a Kendo Editor in one of the Tabs and in document.ready i have the code to make the Editor readonly or editable based on some variable. If i remove that code then Images get displayed

 
        var ses = '@Session["editAdress"]';
       
            if (ses === 'false') {
$("#editor").data("kendoEditor").body.contentEditable = false;
               
            } else {
$("#editor").data("kendoEditor").body.contentEditable = true;
               
            }
        If i remove this code the Images gets displayed. But this code is fine on Desktop Browsers, only Problem is on Samsung galaxy tab any browser. I have not tried ipad.

Thanks

 

Anamika

[Preslav]

Hi Anamika,

Thank you for elaborating on the issue. However, I am still not sure how this could be the reason for the described behavior.

That said, could you please provide a sample project that clearly isolates the issue. We will use this project to fully understand the cause of the problem and eventually provide a workaround.


Regards,
Preslav
Progress Telerik