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)

    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

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2253 posts
    Member since:
    Sep 2012

    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:

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

  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,

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






Back to Top