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);
    }
}

I don't think you can add logic like that in the client template. You'll want to put the logic in your model. — Forty-Two, Jul 30 '12 at 16:16
As I understand it, if I were to put that logic in the model (i.e., to return an empty string in some cases, in which case I'd be using a string type instead of a DateTime type in the grid), then sorting wouldn't work properly. That's really the whole problem I'm trying to solve here. Any suggestions are welcome. — birdus, Jul 30 '12 at 16:52
If sorting is the real issue, I'd probably make another property to sort by in the model, maybe an int, and use the SetUpDate to populate it. Then you could format your dates as strings for desired display and not lose the ability to keep the list sorted properly — Forty-Two, Jul 31 '12 at 14:37

Daniel · Accepted Answer · 2012-07-30T19:39:15.497

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>

string.empty should be string.Empty (I can't edit because its only a 1 char edit) — Joshua, Jul 30 '12 at 15:44
Although I didn't use your exact code, I did use your idea. I'll post the final code above in the question. Thanks! — birdus, Aug 01 '12 at 14:26
@birdus That looks like a good way to do it. I like how you put the format for the date in the function. — Daniel, Aug 01 '12 at 15:09

score 4 · Answer 2 · answered Jul 30 '12 at 15:33

4

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.

answered Jul 30 '12 at 15:33

NullReference

4,404
12
53
90

Doesn't that mean that anything surrounded by "<# #>" is executed on the server? Otherwise, it doesn't know about my model, right? – birdus Jul 30 '12 at 16:39
@birdus "<# #>" doesn't mean it's executed on the server. That was the way with asp.net but this is purely client side binding. – NullReference Jul 30 '12 at 21:09

score 0 · Answer 3 · answered Jul 30 '12 at 17:20

Client Template is javascript code that will be executed on client and result of it will be transformed to string and used on this place. So you can't use string.Empty in your ClientTemplate and should use '' instead of it.

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

score 0 · Answer 4 · answered Jul 30 '12 at 19:02

0

I would define another couple of properties on the Model to make the ClientTemplate cleaner:

public bool HasSetupDate {
  get {
    return this.SetupDate != DateTime.Min && this.SetupDate != null;
  }
}

public string SetupDate_Str {
  get{
    return this.SetupDate.ToString("MM/dd/yyyy");
  }
}

Then ClientTemplate looks like that: .ClientTemplate("<#=HasSetupDate ? SetupDate_Str : '' #>")

answered Jul 30 '12 at 19:02

Rustam

746
3
10

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. – birdus Jul 30 '12 at 20:09
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). – Rustam Jul 31 '12 at 04:31

Telerik grid ClientTemplate

4 Answers4