Ajax bound Telerik MVC UI Grid not using DisplayTemplate

Question

How does one get an Ajax Bound Telerik MVC UI Grid to display format or anything else from a display template?

Looking at their example here, I see that the grid shows the "Unit Price" column with a currency symbol. Looking at the Razor code below I see that the grid is ajax bound. Unfortunately we cannot see the ViewModel, but the "Unit Price" property could not be an already formatted string, since clicking the edit button shows a numeric TextBox. I have created EditorTemplates and DisplayTemplates and somehow only the editor templates are working.

My ViewModel looks something like this:

[UIHint("MoneyTemplate")]
public decimal ItemPrice { get; set; }

Where MoneyTemplate is the name of the Display and Editor templates Views/Shared/DisplayTemplates/MoneyTemplate.cshtml and Views/Shared/EditorTemplates/MoneyTemplate.cshtml respectively

When the grid shows up, the Display template is not picked up but the Editor template is?!? Look like this

How did they get the currency symbol to show without a client side template? Why does my display template not get picked up?

Answer 1

After reading through this documentation I discovered that the answer is to use the DisplayFormat attribute:

[UIHint("MoneyTemplate")]
[DisplayFormat(DataFormatString = "{0:C}")]
public decimal ItemPrice { get; set; }

This will result in the grid displaying the decimal as currency, and using the "MoneyTemplate" editor template for editing.