MonthTemplateID Property With DatePicker Not Functioning Correctly

[Jarrod]

Hi,

I'm having an issue getting the MonthTemplateID property to function correctly when used with a Kendo DatePicker control. For some reason, the code within the template seems to execute, but the results are different than when I execute the same code from within the .MonthTemplate property. 

The model has as a property a serialized string with shortDateTime strings in it that I use to determine whether or not to highlight a date This is the action that returns the partial view:

[HttpGet]
public PartialViewResult GetSearchPartialView(string projectName)
{
    RawrSearchAreaModel model = new RawrSearchAreaModel();

    // get a list of all window dates from DB
    List<DateTime> RunDates;

    using (RAWREntities dbcontext = new RAWREntities())
    {
        RunDates = dbcontext.Messages.Where(m => m.ProjectName == projectName).Select(x => x.RunDateTime).Distinct().ToList();
    }
    JavaScriptSerializer jss = new JavaScriptSerializer();
    model.ScheduledDatesJson = jss.Serialize(RunDates.Select(x => x.ToShortDateString()).ToArray());

    return PartialView("_rawrSearchArea", model);
}

And here is a working example of a DatePicker that correctly highlights the appropriate dates:

@(Html.Kendo().DatePicker()
    .Name("startDatePicker")
    .Events(events =>
    {
        events.Change("startDateChanged");
    }
    )
    .MonthTemplate("#if ( $.inArray(kendo.toString(new Date(+data.date), 'M/d/yyyy'), " + @Model.ScheduledDatesJson + ") != -1) {#" +
                     "<div class='dateHasWindows'>" +
                    "#}else {#" +
                    "<div>" +
                    "#}#" +
                    "#= data.value #" +
                    "</div>"
    )
 )

However, I have multiple calendar-like controls on the page that need the same date highlighting functionality. Rather than include the same MonthTemplate for each of them, I wanted to create one template and then call it from each of the controls.

Here is how I am attempting to utilize the separate template:

@(Html.Kendo().DatePicker()
    .Name("startDatePicker")
    .Events(events =>
    {
        events.Change("startDateChanged");
    }
    )
    .MonthTemplateId("calendarTemplate")
 )

And here is how I attempted to create the template:

<script id="calendarTemplate" type="text/x-kendo-template">
    #if ( $.inArray(kendo.toString(new Date(+data.date), 'M/d/yyyy'), " + @Model.ScheduledDatesJson + ") != -1) {#
          <div class='dateHasWindows'>
    #}else {#
          <div>
    #}#
    #= data.value #
    </div>
</script>

I inserted an alert into the template to ensure that it was being called and executed, but the formatting is never applied when the template is called this way. For some reason, the inArray function is always returning -1, even when I can see that the date string is in the string that is being compared against (I output the stringified date value, the compare result, and the string array in my alert to verify this).

Am I doing something incorrectly in the template definition that prevents things from executing correctly?
Any help would be appreciated.

Thanks!

[Daniel]

Hi,

The template will not be rendered as a string in this case and so a concatenation should not be used. Also, you should use the Raw helper to prevent the outputted string from being encoded:

#if ( $.inArray(kendo.toString(new Date(+data.date), 'M/d/yyyy'), @Html.Raw(Model.ScheduledDatesJson))) != -1) {#

Regards,
Daniel
Telerik

 

 

[Jarrod]

Hi Daniel,

Thanks for the information and quick reply. I updated my statement in the if-block as you showed in your example and things started evaluating correctly.

Since I verified that both objects were strings when they were being compared, I didn't realize it was encoding the string that contained the array.

The template is working as expected now. Thanks for your help!