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

Grid cell template for image with JavaScript selector?

2 Answers 1379 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
hermann asked on 13 Jul 2012, 01:41 PM
Dear KendoUI team,
my grid displays data delivered from a JSONP webservice.
Rather than extending the webservice model
I would like to tweak a column on the client side to show an <img> depending on the value of another property in the model.

So, how can I show an <img> which' src depends on the value of another property in the model?
For instance:
the service model has a
  • Name (string)
  • IsValid (boolean)
  • Count (number)


Column definitions in the grid look like:
   {field:"Name", title:"Product"},
   {field:"IsValid", title: "State"}

What I actually want is a column that should behave like:
   {field:"IsValid", title: "State"
     , template: {
         function(model) {
           if(model.IsValid && model.Count > 0)
              return "<img src ='images/good.png'/>";
           else return "<img src ='images/bad.png''/>";
According to the - much better - documentation, "template" property expects a string, but is it possible to add some JavaScript code to the template string as well, something like

var imgTemplate = kendo.template(
"#if (model.IsValid && model.Count > 0){#<img src='icons/A.png'/>#}#else {#
<img src='icons/B.png'/>#}#"); 
and in the columns definition

template: imgTemplate(model)

Thank you in advance,

2 Answers, 1 is accepted

Sort by
Alexander Valchev
Telerik team
answered on 18 Jul 2012, 09:17 AM
Hi Hermann,

Kendo templates allow you to execute JavaScript code inside the template definition or to call a JavaScript function. In your case I would recommend executing a function that checks the conditions and returns the html mark up. For example:
{title: "template field", template: "#= myFunc(data) #"}
//function definition
function myFunc(model) {
  if(model.isValid) {
    return "<span style='color: green'>Foo::" + + " is valid! </span>"
  } else {
    return "not valid"

All the fields of the current records (foo, bar, isValid, etc.) are accessible through the model parameter. For convenience I created a small example using this approach in action. I hope this helps.

Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Top achievements
Rank 1
answered on 07 Oct 2012, 06:14 PM
Hi Alexander,

This is working fine for the grid, but mine problem is like, i am using detail template and in that detail template i have another nested grid, and i want to call myFunc from the nested grid , but now when i am passing data as parameter to myFunc function, then data is of the parent grid, not from the nested grid(detail template grid), so i am not able to get viewmodel properties to that function.

Please guide me if i am doing any thing wrong into this transaction. Please find my below code,

    .Columns(columns =>
        columns.Template(@<text></text>).ClientTemplate("<input id=\"chk_#=AddressID#\" type=\"checkbox\" title=\"Select Contact\" value=\"1\" />")
                 .HeaderTemplate(@<text><input id="selectAllContacts" type="checkbox" title="select all" /></text>)
                 .HtmlAttributes(new { style = "text-align:center" })
                 .HeaderHtmlAttributes(new { style = "text-align:center" });


        columns.Bound(p => p.DisplayName).Width(150);
        columns.Bound(p => p.EmailAddress).Width(180);
        columns.Bound(p => p.JobTitle).Width(100);
        columns.Bound(p => p.BusinessPhone).Width(130);
        columns.Bound(p => p.MobilePhone).Width(130);
        columns.Bound(p => p.Company).Width(100);
        columns.Bound(p => p.BusinessAddress).Width(200);
        columns.Bound(p => p.LastUpdated).Format("{0:d}").Width(150);
        columns.Command(command => { command.Edit(); }).Width(100);

        .HtmlAttributes(new { style = "height: 400px; width:1300px;" })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
        .DataSource(dataSource => dataSource
            .Group(groups => groups.Add(p => p.Company))
            .Read(read => read.Action("AjaxBinding_Read", "MyNetwork"))
            .Model(model =>
                model.Id(p => p.AddressID);
                model.Field(p => p.EmailAddress).Editable(false);
                model.Field(p => p.AddressID).Editable(false);

            .Update(update => update.Action("AjaxBinding_ReadUpdate", "MyNetwork"))
        .Events(e => e.Change("dgChange"))
        .Events(e => e.DataBound("dataBound"))

<div style="height:10px; width:1302px;">&nbsp;</div>
<div id="ContactDetailGrid" style="width:1302px;"></div>
<script id="contactTemplate" type="text/kendo-tmpl">
                        .Columns(columns =>
// but when i am try to find that data in function at that time this data is from parent grid
                            columns.Bound(o => o.DisplayNameSource).Width(15).Title("Type");
                            columns.Bound(o => o.DisplayName).Width(70);
                            columns.Bound(o => o.EmailAddress).Width(70);
                            columns.Bound(o => o.JobTitle).Width(65);
                            columns.Bound(o => o.BusinessPhone).Width(65);
                            columns.Bound(o => o.MobilePhone).Width(70);
                            columns.Bound(o => o.Company).Width(65);
                            columns.Bound(o => o.BusinessAddress).Width(70);
                                                .DataSource(dataSource => dataSource
                                                    .Read(read => read.Action("AjaxBinding_ReadDetail", "MyNetwork", new { email = "#=EmailAddress#", userId = "#=UserID#" }))

 function myFunc(model) {



Asked by
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Top achievements
Rank 1
Share this question