Grid cell template for image with JavaScript selector?

3 posts, 0 answers
  1. hermann
    hermann avatar
    43 posts
    Member since:
    Jun 2011

    Posted 13 Jul 2012 Link to this post

    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. Alexander Valchev
    Alexander Valchev avatar
    2697 posts

    Posted 18 Jul 2012 Link to this post

    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!
  3. Mona
    Mona avatar
    7 posts
    Member since:
    Apr 2009

    Posted 07 Oct 2012 Link to this post

    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) {



Back to Top