This is a migrated thread and some comments may be shown as answers.

MonthTemplateID Property With DatePicker Not Functioning Correctly

2 Answers 83 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Jarrod
Top achievements
Rank 1
Jarrod asked on 13 May 2014, 02:12 PM
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!

2 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 15 May 2014, 11:24 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Jarrod
Top achievements
Rank 1
answered on 15 May 2014, 04:32 PM
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!
Tags
Date/Time Pickers
Asked by
Jarrod
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Jarrod
Top achievements
Rank 1
Share this question
or