Scheduler event template id within templates

[Thomas]

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.    )

[Veselin Tsvetanov]

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

[Thomas]

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

[Thomas]

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

[Veselin Tsvetanov]

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