Change Template value for listview dynamically

3 posts, 0 answers
  1. Xavier
    Xavier avatar
    9 posts
    Member since:
    Feb 2014

    Posted 08 Oct Link to this post

    Hello, I have a Kendo Listview with a template defined as follows: 

     

    <script type="text/x-kendo-tmpl" id="template">
        <div class="product">
     
            <div class="product-title">
                <h3>#:Name#</h3>
            </div>
            <div class="product-img" id="area">
                <img src="@Url.Content("~/content/images/#:Image#")"  alt="#:Name# Image" />
                    <div id='tile_#:data.Id#' class="white" onclick="favClick('#:Id#')">
                    </div>
             </div>
         </div>
    </script>

     

    The object in the Listview is the following: 

    public class TileDto
    {
        public string AppId { get; set; }
        public int Id { get; set; }
        public string Name { get; set; }
        public string Url { get; set; }
        public string Image { get; set; }
        public bool IsFavorite { get; set; }
        public string CssClass { get; set; }
    }

     

    I would like for the "IsFavorite" property of the item to determine the value of the class property for the div (white if false, yellow if true): 

    <div id='tile_#:data.Id#' class="white" onclick="favClick('#:Id#')">
    </div>

     

    Can this be done within the template? Or, is there an event off of the Listview or its datasource where this can be done? 

    Thanks for any assistance here. 

    --- x

  2. Xavier
    Xavier avatar
    9 posts
    Member since:
    Feb 2014

    Posted 08 Oct in reply to Xavier Link to this post

    I was able to resolve this.  Here is the solution: 

    <script type="text/x-kendo-tmpl" id="template">
        <div class="product">
     
            <div class="product-title">
                <h3>#:Name#</h3>
            </div>
            <div class="product-img" id="area">
                <img src="@Url.Content("~/content/images/#:Image#")"  alt="#:Name# Image" />
                    #if (IsFavorite == true) { #
                        <div id='tile_#:data.Id#' class="yellow" onclick="favClick('#:Id#')" />
                    # } else { #
                            <div id='tile_#:data.Id#' class="white" onclick="favClick('#:Id#')" />
                    #  } #
             </div>
         </div>
    </script>
  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2372 posts

    Posted 10 Oct Link to this post

    Hi Xavier,

     

    Thank you for sharing the approach you went for with the community. This can help someone looking to implement similar functionality. 

     

    Regards,
    Viktor Tachev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top