Wednesday, July 6, 2016

Understanding the Telerik Kendo UI Grid ClientTemplate attribute

I was recently working on a project using Telerik Kendo UI controls when I came across this code example: http://demos.telerik.com/aspnet-mvc/grid/editing-custom

Unfortunately, the code sample left a lot gaps in understanding the code!  Particularly perplexing and confusing was the use of the ClientTemplate attribute!  What exactly did that mean and how was it to be used?

After several hours of wrestling with the code sample and reviewing the demo code installed on my machine, I was able to finally understand how the ClientTemplate worked!


  1. First of all, the ClientTemplate attribute in this case refers to a binding expression.  In this instance, #=Category.CategoryName# refers to the Category field available on the ProductViewModel.cs class file.  The CategoryName field is the DataValueField on the Category field.  
  2. Next up, the ClientTemplate that is chosen to be used with the Category field is designated through the UIHint attribute as follows: [UIHint("ClientCategory")].  This specifically refers to an Editor Template called ClientCategory.cshtml.
  3. Then, you also have another field int? CategoryID.  This field maps to the CategoryID child field from the Category property on the ProductViewModel class.  This field is always necessary whenever you are doing databinding to a SelectList/DropDownList in ASP.NET MVC. 
  4. Now in the ClientTemplate Razor View, you have this property: .BindTo((System.Collections.IEnumerable)ViewData["categories"]).  This refers to a list/collection of the Categories that are needed to display the elements in the SelectList or DropDownList.
  5. Finally, to put everything together, you need to make sure you are returning or mapping back to the ProductViewModel class such that you populate BOTH the CategoryID as well as the Category property (which refers to CategoryViewModel) in order for the binding to work correctly.
There are a lot of parts to fit together in this design, but once you have all those pieces and parts working together, your Kendo UI Grid should work correctly!!

No comments:

Post a Comment