MonthTemplateID Property With DatePicker Not Functioning Correctly

3 posts, 1 answers
  1. Jarrod
    Jarrod avatar
    4 posts
    Member since:
    Jun 2013

    Posted 13 May 2014 Link to this post

    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. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 15 May 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jarrod
    Jarrod avatar
    4 posts
    Member since:
    Jun 2013

    Posted 15 May 2014 in reply to Daniel Link to this post

    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!
Back to Top