Bind image path to a controller function in Kendo Grid

2 posts, 0 answers
  1. Purna
    Purna avatar
    1 posts
    Member since:
    Jun 2013

    Posted 24 Oct 2013 Link to this post

    Hi All ,

    Please help me ......

    I have a kendo grid and i have bind it a controller function , there is a document filed(Attachment Name) in it and it is showing different document name Now i wil have to add a image on the basis of document in each row corresponding document name . and i have written a function in controller  that is returning a string image path . I just want to call a function in grid column and bind it into a image URl of image control .

     $.ajax({
                    type: "POST",
                    "url": '@Url.Action("TSController", "TSFunction")',
                    "data": data,
                    "dataType": this.datatype,
                    "contentType": "application/json; charset=utf-8",
                    "success": function (data) {

                        if (data.length > 0) {

                            $("<div/>").appendTo(e.detailCell).kendoGrid({
                                dataSource: data,
                                columns: [
                                 {
                             title: "",width: 30,template: "<img src='../../Images/accent.png' width='10px' height='10px'/>"
                        },
                        {
                            field: "DocName", title: "Attachment Name"
                        },
                        {
                            field: "DocPrimaryId", title: "DocumentId", hidden: true
                        },
                        {
                            field: "TSd", title: "TSd", hidden: true
                        },
                        {
                            field: "AttachmentType", title: "Attachment Type"
                        },
                        {
                            command: { text: "Re-Link Attachment",
                                click: RelinkAttachment,
                                title: "Action",
                                width: "140px"
                            }
                        },
                        {
                            command: { text: "Download",
                                click: DownloadAttachment,
                                title: "Action",
                                width: "140px"
                            }
                        },
                       {
                           command: { text: "Delete",
                               click: DeleteAttachment,
                               title: "Action",
                               width: "140px"
                           }
                       }
                        ]
                            })
                        }
                        else {

                        }
                    },
                    error: function (result) {
                        var data = jQuery.parseJSON(result);
                        alert("Error :" + data);
                    }
                });
  2. nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 24 Oct 2013 Link to this post

    Hi Purna,

    I think instead of your controller returning a string with the URL of the image it might be easier for it to just return the image itself.
    Something like this
    That way you can just have your template point the src property of the img html element to this controller action that would presumably take as parameter something to pinpoint the corresponding image file to each row element.

    Hope that helps.
  3. Kendo UI is VS 2017 Ready
Back to Top