Display conditional image in kendo grid

Question

I have a Kendo grid which displays some data. Now I want to add an image-column.

I tried it like this :

@(Html.Kendo().Grid<TegelCheckerModel>()
            .Name("Grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.IsTegelZichtbaar).ClientTemplate("#= getImage(data)#");
            })
            .AutoBind(true)
            .Pageable()
            .Sortable()
            .Filterable()
            .DataSource(dataSource => dataSource
            .Ajax() //Or .Server()
            .Read(read => read.Action("GetTegels", "TegelChecker")
            .Data("getAlvNummerAndVoorWie"))
            )
        )

and then in js I do the following :

function getImage(data) {
            var html;

            if (data.IsTegelZichtbaar) {
                html = "<img src='~/Images/valid.jpg' />";
            }
            else{
                html = "<img src='~/Images/notvalid.jpg' />";
            }
            return html;
        }

The images exist but they are not displayed. What am I missing? What am I not seeing?

did you try adding alerts() in your getImage function to make sure you're hitting the right spots? make sure you set the height and width also] — JamieD77, May 03 '16 at 14:16
@JamieD77: I am getting in the getImage-function, so that is not the problem — Bart Schelkens, May 04 '16 at 06:03
You may try this instead of calling a function: `columns.Bound(p => p.IsTegelZichtbaar).ClientTemplate("#if(IsTegelZichtbaar){# #}else{# #}#");` — Werner, May 04 '16 at 06:55
@Werner: i tried it, but it doesn't work either. My page-source now shows this : "template":"#if(IsTegelZichtbaar){# \u003cimg src=\u0027~/Images/valid.jpg\u0027 /\u003e #}else{# \u003cimg src=\u0027~/Images/notvalid.jpg\u0027 /\u003e #}#" — Bart Schelkens, May 04 '16 at 07:15
you try setting the url using `src='@Url.Content("~/Images/valid.jpg")'`? — JamieD77, May 04 '16 at 13:48

score 1 · Accepted Answer · answered May 09 '16 at 08:34

1

There was a problem with uploading the image. SO that is why it was not displaying. Stupid me for not checking that.

answered May 09 '16 at 08:34

Bart Schelkens

1,235
4
21
45

Display conditional image in kendo grid

1 Answers1