This is a migrated thread and some comments may be shown as answers.

Change Template value for listview dynamically

2 Answers 345 Views

ListView

This is a migrated thread and some comments may be shown as answers.

Xavier asked on 08 Oct 2019, 04:18 PM

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>

</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 Answers, 1 is accepted

answered on 08 Oct 2019, 06:03 PM

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>

</script>