This is a migrated thread and some comments may be shown as answers.

Kendo grid column bound to image path shows path not image

3 Answers 239 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anamika
Top achievements
Rank 1
Anamika asked on 05 Jul 2017, 02:57 PM

<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

3 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 07 Jul 2017, 12:06 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Anamika
Top achievements
Rank 1
answered on 10 Jul 2017, 09:15 AM

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

0
Preslav
Telerik team
answered on 12 Jul 2017, 06:41 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Anamika
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Anamika
Top achievements
Rank 1
Share this question
or