Telerik grid ClientTemplate

birdus picture birdus · Jul 30, 2012 · Viewed 11.8k times · Source

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

Answer

Daniel picture Daniel · Jul 30, 2012

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>