Kendo grid column bound to image path shows path not image

4 posts, 0 answers
  1. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 05 Jul 2017 Link to this post

    <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

  2. Preslav
    Admin
    Preslav avatar
    579 posts

    Posted 07 Jul 2017 Link to this post

    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.
  3. Anamika
    Anamika avatar
    157 posts
    Member since:
    Mar 2014

    Posted 10 Jul 2017 in reply to Preslav Link to this post

    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

  4. Preslav
    Admin
    Preslav avatar
    579 posts

    Posted 12 Jul 2017 Link to this post

    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.
Back to Top