Telerik grid ClientTemplate

Question

I'm trying to use C# to apply a bit of logic when displaying a DateTime in a telerik grid in my MVC application, but am having some trouble getting it working. My first problem is that I don't understand exactly how the ClientTemplate call works. I wasn't able to find documentation explaining how it works, either. So, an explanation of how that works would be helpful, and then maybe specifically what's wrong with my example:

columns.Bound(p => p.SetupDate).ClientTemplate("<#= SetupDate == DateTime.Min || SetupDate == null ? string.empty : SetupDate #>")

UPDATE:

I went with Daniel's suggestion. I just call this function from ClientTemplate(). Here is the final code:

// Setup a minDate to mimic C#'s Date.MinDate constant.
var minDate = new Date();
minDate.setFullYear(1, 0, 1);
minDate.setHours(0, 0, 0, 0);

function checkDateWithFormat(d, f)
{
    if (d.getTime() == minDate.getTime())
    {
        return "";
    }
    else
    {
        return d.toString(f);
    }
}

Solution 1

First you might want to make sure SetupDate works by itself. If it does, you can try adding parentheses.

columns.Bound(p => p.SetupDate).ClientTemplate("<#= ((SetupDate == DateTime.Min) || (SetupDate == null)) ? string.Empty : SetupDate #>")

Or you can try using an if statement.

columns.Bound(p => p.SetupDate).ClientTemplate("<# if ((SetupDate != DateTime.Min) && (SetupDate != null)) { #><#= SetupDate #><# } #>")

Update The answer by NullReference is right where it says that you cannot use c# in the ClientTemplate. So you cannot use DateTime.Min or string.Empty.

One way to achieve the same thing is to use a javascript function. Define the column like this:

columns.Bound(p => p.SetupDate).ClientTemplate("<#= checkDate(SetupDate) #>")

Then add the javascript function, checkDate(). (There may be a better way to find min value, but getMilliseconds should be 0 if it is a min value.)

<script>
  function checkDate(setupDate) {
    if ((setupDate.getMilliseconds() === 0) || (setupDate === null))
      return '';
    else
      return setupDate;
  }
</script>

Solution 2

Client side templates are executed on the client in javascript, so you can't use C#. Anything surrounded by the "<# #>" correspond to properties on your model. I've found the best place to find this stuff out is to look at Telerik's demo pages here.

Comments

[Joshua]

string.empty should be string.Empty (I can't edit because its only a 1 char edit)

[birdus]

Doesn't that mean that anything surrounded by "<# #>" is executed on the server? Otherwise, it doesn't know about my model, right?

[birdus]

I thought about doing it this way, too, but if you return a string (instead of DateTime), the grid won't sort on that column properly.

[NullReference]

@birdus "<# #>" doesn't mean it's executed on the server. That was the way with asp.net but this is purely client side binding.

[Rustam]

I think you mistaken about sorting issue. ClientTemplate is used to display data only. On column definition you bind it to some property (here it is .BindTo(m => m.SetupDate) ), and this property is used to sort a table. More over, the sorting happens on server side (an Ajax request is issued, and the table gets refreshed with new data).

[birdus]

Although I didn't use your exact code, I did use your idea. I'll post the final code above in the question. Thanks!

[Daniel]

@birdus That looks like a good way to do it. I like how you put the format for the date in the function.