Premium forums

Grid cell template for image with JavaScript selector? Cancel

• hermann

  
  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)

  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

  
  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:
  

  //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

  Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
• Mona

  
  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,
  
  @(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