how to add image in kendo grid in mvc?

Question

Hello Anyone can tell me how can i add image in kendo grid coloumn from database. Actually i am tring from morning but not succeed.

@(Html.Kendo().Grid<TelerikMvcAppCombo.Models.ImageModel>()
.Name("grdImageModel")
.Columns(columns =>
{
    //columns.Bound(c => c.IMAGESIZE_ID).ClientTemplate("<input type='checkbox' value =#IMAGESIZE_ID#  />").Width(50);
    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/normal_234.png)");
    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")
          ))

)

try something like **columns.Template(e => { }).ClientTemplate("").Width(140).Title("Image");** — jbutler483, Jan 02 '15 at 10:35
[See this](http://stackoverflow.com/questions/25014428/kendo-grid-image-column) — jbutler483, Jan 02 '15 at 10:55
columns.Bound(c => c.IMAGESIZE_DESC).ClientTemplate(""); see my code — Durgpal Singh, Jan 02 '15 at 11:06

score 1 · Accepted Answer · answered Jan 02 '15 at 16:23

1

You can achieve it this way:

HTML

columns.Bound(u => u.Image).ClientTemplate("#=GetImage(data.Image)#").HtmlAttributes(new { style = "text-align: center; width: 30%; min-width: 60px;" });

Javascript

function GetImage(image) {
    var returnString = '<img src="~/Images/normal_234.png" title=\"image\" height=\"24\" alt=\"image\"/>';   
    return returnString;
}

answered Jan 02 '15 at 16:23

chiapa

4,362
11
66
106

can you tell me how get image at runtime – Durgpal Singh Jan 03 '15 at 05:37
What do you mean @DurgpalSingh? – chiapa Jan 05 '15 at 09:05
I am using kendogrid popup and i want to edit my template then how can i do that? – Durgpal Singh Jan 05 '15 at 10:09
If you're using the kendo edit popup, you think you can't. You must create your own template and place a `` tag with the `src` you want. What template are you using? Post your code – chiapa Jan 05 '15 at 14:14
@DurgpalSingh, I have noticed in your profile that you have several questions asked but never marked any as accepted, even though you refer in comments that some answers worked for you: **you should mark all answers that work as answered** by clicking on the tick under the voting arrows. This way you reward the people who answered correctly with some reputation points and gain yourself 2 reputation points, only by marking the answer as accepted. See [this](http://stackoverflow.com/help/someone-answers) – chiapa Jan 06 '15 at 14:41
@DurgpalSingh, you are confusing upvoting and marking as accepted: you **upvoted** the answer. When you click the up arrow, you upvote it; when you click the transparent checkmark (under the voting arrows), it becomes green and that means you mark the answer as correct -> this is what you should do for answers that you see as correct for your question – chiapa Jan 07 '15 at 09:08
my question is right then you also marked as right question – Durgpal Singh Jan 13 '15 at 10:46
I understand you asking for an upvote. Again, upvote and marking as right are two different things! Questions can't be marked as right, only answers can! Your question can be upvoted if the users that see it find it deserves upvoting (well built, helpful, clever) – chiapa Jan 13 '15 at 12:03

how to add image in kendo grid in mvc?

1 Answers1