Conditional statement in Kendo UI Template

While working I had a requirement to display a Total Seat of Venue in Kendo UI Mobile ListView. To display Venue Name and Number of Seats available, I created Kendo UI Template as following


<script type= "text/x-kendo-template" id="venueTemplate">
 <a href="\#toSomePage?vid=#= VenueID #" class="km-listview-link" data-role="listview-link">
 <h3>#= VenueName # </h3>
 <h5>Total Seats : <b> #=Capacity# </b> </h5>
 # }#
 </a>
 </script>

However on running the application I found that in some of the cases Capacity was retuning values as null.

image

Obviously displaying null was not a good idea. To display formatted information we can put condition in Kendo UI Template. Template can be modified with If-else statement as following


<script type= "text/x-kendo-template" id="venueTemplate">
 <a href="\#sessionsAtVenue?vid=#= VenueID #" class="km-listview-link" data-role="listview-link">

 <h3>#= VenueName # </h3>

 #if(Capacity ===null)
 {#
 <h5>Total Seats : <b> Not Available </b> </h5>

#}else{#
 <h5>Total Seats : <b> #=Capacity# </b> </h5>
 # }#
 </a>
 </script>

Now null value of capacity will get replaced by Not Available. On running output should be as following

image

We need to be bit cognizant for syntax. In below diagram you can see that line need to be executed as condition and keyword is enclosed in hash #.

image

In this way you can have if-else condition in KendoUI Template. I hope you find this post useful.

Advertisements

3 thoughts on “Conditional statement in Kendo UI Template

  1. Pingback: Top 5 Blog Posts of 2014 | telerik helper

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s