Scheduler event template id within templates

5 posts, 0 answers
  1. Thomas
    Thomas avatar
    8 posts
    Member since:
    May 2020

    Posted 02 Oct Link to this post

    Hi,

     

    I currently have a scheduler setup that is loaded within a template.
    The problem is if I try to add a EventTemplateId to the scheduler within the template with the fluent interface, it will break because the prefixed hash is not escaped. Normally this is not a problem but it's my understanding that within templates if using Ids for selectors the hash needs to be escaped
    I've attached a screenshot of the error I receive in the console that should hopefully make things clearer.

     

    Please let me know if i can help any further

     

    Thanks 

    Thomas 

     

    Here is how my scheduler is configured

    01.@(Html.Kendo().Scheduler<TelerikScheduleViewModel>()
    02.      .Name("staffAvailability")
    03.      .Height(300)
    04.      .HtmlAttributes(new { data_bind = "bindDate:start, filterBy:Staff, visible:Staff.length" })
    05.      .Timezone("Europe/London")
    06.      .Mobile(MobileMode.Auto)
    07.      .MajorTick(120)
    08.      .Editable(false)
    09.      .ShowWorkHours(true)
    10.      .Footer(false)
    11.      .AutoBind(false)
    12.      .Views(views =>
    13.      {
    14.          views.TimelineView(timeline =>
    15.          {
    16.              timeline.Footer(false);
    17.              timeline.Groups(group => group.Resources("StaffResources").Orientation(SchedulerGroupOrientation.Vertical));
    18.              timeline.EventTemplateId("some-event-template");
    19.          });
    20. 
    21.      })
    22.      .DataSource(dataSource => dataSource
    23.                      .ServerOperation(false)
    24.                      .Events(e => e.Change("staffOnChange").RequestStart("staffRequestStart"))
    25.                      .Read(read => read.Action("ListStaffSessions", "Calendar").Data("getStaffAttendance"))
    26.      ).Events(e => e.DataBound("dataBoundAttendanceControl").DataBinding("dataBindingAttendanceControl"))
    27.    )
  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1221 posts

    Posted 06 Oct Link to this post

    Hello Thomas,

    As you have correctly observed, using the EventTemplateId() configuration method when the Scheduler is placed within a Kendo template would not work as expected. As the Scheduler HTML helper does not provide any means that would allow you to escape the hashtag for the ID of the template, you will have to use the EventTemplate() configuration method instead:

    timeline.EventTemplate("<div>This is template</div>");

    Do not forget to call the ToClientTemplate() at the end of the Scheduler HTML helper definition:

    .DataSource(dataSource => dataSource
        .ServerOperation(false)
        .Events(e => e.Change("staffOnChange").RequestStart("staffRequestStart"))
        .Read(read => read.Action("ListStaffSessions", "Calendar").Data("getStaffAttendance"))
    )
    .Events(e => e
        .DataBound("dataBoundAttendanceControl")
        .DataBinding("dataBindingAttendanceControl")
    )
    .ToClientTemplate()

    Regards,
    Veselin Tsvetanov
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

  3. Thomas
    Thomas avatar
    8 posts
    Member since:
    May 2020

    Posted 08 Oct in reply to Veselin Tsvetanov Link to this post

    Hi,

    I've tried your suggestion and it seems to be only rendering data statically e.g. I have two events but both events seem to display the title of the last one of the two.

    here is my code:

    @(Html.Kendo().Scheduler<TelerikScheduleViewModel>()
          .Name("staffAvailability")
          .AutoBind(false)
          .Views(views =>
                 {
                     views.TimelineView(timeline =>
                                        {
                                            timeline.EventTemplate("#: title #");
                                        });
                 })
          .DataSource(dataSource => dataSource
                          .ServerOperation(false)
                          .Read(read => read.Action("ListStaffSessions", "Calendar").Data("teamnet.scheduler.staffAttendance.getAttendance"))
          )
          .ToClientTemplate()
        )

    If possible can you provide a dojo example that shows how we can make the data dynamic based on the event it's been given?

    Thanks

  4. Thomas
    Thomas avatar
    8 posts
    Member since:
    May 2020

    Posted 08 Oct Link to this post

    HI,

    I've also tried implementing this based of the example given here: using client templates

    <script id="tom" type="text/x-kendo-template">
        @(Html.Kendo().Scheduler<TelerikScheduleViewModel>()
              .Name("staffAvailability")
              .AutoBind(false)
              .Views(views =>
              {
                  views.TimelineView(timeline =>
                  {
                      timeline.EventTemplate("#: title #");
                  });
              })
              .DataSource(dataSource => dataSource
                              .ServerOperation(false)
                              .Read(read => read.Action("ListStaffSessions", "Calendar").Data("teamnet.scheduler.staffAttendance.getAttendance"))
              )
              .ToClientTemplate()
            )
    </script>
     
    <script>
        $(function () {
            var template = kendo.template($("#tom").html());
            $("#cat").append(template({}));
        })
    </script>

    This way of doing things seems to not even render, throwing an error claiming invalid template, could you advise?

    Thanks

  5. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1221 posts

    Posted 09 Oct Link to this post

    Hello Thomas,

    When having nested Kendo templates, the inner template calls should be escaped, so that they get executed with the proper data context. In the discussed case the EventTemplate string should be altered to:

    timeline.EventTemplate("<div>This is template: \\#:title\\# </div>");

    Attached you will find a .Net MVC project implementing the above suggestion. Note that you will need to include a reference to the Kendo.Mvc.dll in order to properly run that sample.

    Regards,
    Veselin Tsvetanov
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top