Scheduler complex event templates

7 posts, 0 answers
  1. Roy
    Roy avatar
    30 posts
    Member since:
    Oct 2007

    Posted 29 Jul 2014 Link to this post

    I am having an issue creating a template for the Scheduler. What I am trying to do is set the event style class to one of four classes depending on the value of a given eventstate value from the model.  here is what I have for my whole kendo mvc schelduer with template. Can someone help show me how to write the template so it can do this and be in a valid state.

                    @(Html.Kendo().Scheduler<SBAS_Web.Models.AppointmentModel>()
                          .Name("scheduler")
                          .Date(new DateTime(startdate.Year, startdate.Month, startdate.Day))
                          .StartTime(new DateTime(startdate.Year, startdate.Month, startdate.Day, 8, 00, 00))
                          .ShowWorkHours(true)
                          .Views(views => views.DayView(day => day.Selected(true)))
                          .Editable(false)
                          .AllDaySlot(false)
                          .EventTemplate(
                          "<div class='appointment-template  # if(AppointmentState == 'Default'){# DefaultColor #}#  if(AppointmentState == 'Completed'){# CompletedColor #}#  if(AppointmentState == 'ReadyForInvoicing'){# ReadyForInvoicingColor #}#  if(AppointmentState == 'Invoiced'){# InvoicedColor #}#'>" +
                            "<p>" +
                                "#= kendo.toString(start, 'hh:mm') # - #= kendo.toString(end, 'hh:mm') #" +
                            "</p>" +
                            "<p>#= title #</p>" +
                         "</div>")
                          .Timezone("Etc/UTC")
                          .DataSource(d => d
                              .Model(m =>
                              {
                                  m.Id(f => f.AppointmentId);
                                  m.Field(f => f.Title).DefaultValue("No title");
                                  m.RecurrenceId(f => f.RecurrenceID);
                              })
                              .Events(e => e.Error("error_handler"))
                              .Read("Appointments_Read", "Appointment")

                            //.Update("Appointments_Update", "Appointment")
                          )
                          .Group(grp => grp.Orientation(SchedulerGroupOrientation.Vertical))
                    )
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 31 Jul 2014 Link to this post

    Hello Roy,

    I believe the used template is invalid because kendo.template couldn't compile it. Modifying it a little bit does solve the problem. Here is a Dojo demo showing the applied modifications.

    Regards,
    Georgi Krustev
    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. Roy
    Roy avatar
    30 posts
    Member since:
    Oct 2007

    Posted 31 Jul 2014 in reply to Georgi Krustev Link to this post

    Thanks, that is great, but not sure how that would look if it was used in the MVC and not javascript? Do you have an example how that would look like.
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 31 Jul 2014 Link to this post

    Hello Roy,

    There should be no difference regarding this string concatenation between C# and JavaScript. Could you please copied and let me know if it still does not work?

    Regards,
    Georgi Krustev
    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.

     
  6. Roy
    Roy avatar
    30 posts
    Member since:
    Oct 2007

    Posted 31 Jul 2014 in reply to Georgi Krustev Link to this post

    Thank for your help, after a little reworking of your example I was able to get this to work here is what I ended up with.
        <script id="event-template" type="text/x-kendo-template">
            <div class="appointment-template # if(AppointmentState == 'default') {#DefaultColor#} else if(AppointmentState == 'Completed') {#CompletedColor#} else if(AppointmentState == 'ReadyForInvoicing') {#ReadyForInvoicingColor#} else if(AppointmentState == 'Invoiced') {#InvoicedColor#}#">
                 <p> #= kendo.toString(start, 'hh:mm') # - #= kendo.toString(end, 'hh:mm') #
                </p>
                <p>#= title #</p>
            </div>
        </script>
  7. Roy
    Roy avatar
    30 posts
    Member since:
    Oct 2007

    Posted 31 Jul 2014 in reply to Roy Link to this post

    If you respond back I will mark this closed.
  8. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 01 Aug 2014 Link to this post

    Hello Roy,

    I am glad that you were able to find the correct template configuration. If you have any additional questions about the same issue, please do not hesitate to re-open the thread.

    Regards,
    Georgi Krustev
    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready