Grid cell template for image with JavaScript selector?

[hermann]

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)

property.

Column definitions in the grid look like:
columns:[
   {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,
Hermann

[Alexander Valchev]

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:

//columns
{title: "template field", template: "#= myFunc(data) #"}

//function definition
function myFunc(model) {
  if(model.isValid) {
    return "<span style='color: green'>Foo::" + model.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.

Regards,
Alexander Valchev
the Telerik team

[Mona]

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,

@(Html.Kendo().Grid<MessageMind.Bridgit.MainWeb.ViewModels.ConsolidatedContacts.AddressBookModel>()
    .Name("ConsolidatedContactGrid")
    .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>)
                 .Width(50)
                 .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);
    })


        .ClientDetailTemplateId("contactTemplate")
        .HtmlAttributes(new { style = "height: 400px; width:1300px;" })
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .Navigatable()
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
        .DataSource(dataSource => dataSource
            .Ajax()
            .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"))
            .PageSize(15)
        )
        .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">
     @(Html.Kendo().Grid<MessageMind.Bridgit.MainWeb.ViewModels.ConsolidatedContacts.AddressBookSourceModel>()
                        .Name("sourcegrid_#=AddressID#")
                        .Columns(columns =>
                        {
                         

  columns.Template(@<text></text>).ClientTemplate("#=myFunc(data)#").Width(100);;

// 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
                                                    .Ajax()
                                                    .Read(read => read.Action("AjaxBinding_ReadDetail", "MyNetwork", new { email = "#=EmailAddress#", userId = "#=UserID#" }))
                                                )
                                                .ToClientTemplate())


 function myFunc(model) {
       console.log(model);
    }

</script>

Thanks!!!!
Mona