Customizing the scheduler editor

4 posts, 0 answers
  1. Michael
    Michael avatar
    1 posts
    Member since:
    Feb 2014

    Posted 05 Mar 2014 Link to this post

    Hi,I have a problem with data binding using a custom template for the editor for the Scheduler component.When double clicking an item in the scheduler my dialog is displayed, for for some reason, I am only able to databind against the properties of the ISchedulerEvent interface and not all the other properties of my ViewModel.ViewModel

    Example:
    public class MyViewModel : ISchedulerEvent
        {   
            buplic int MyId { get; set;}  
            public bool MyBool{ get; set;}
            public string MyString { get; set; }
            #region ISchedulerEvent
            public string Title { get; set; }
            public string Description { get; set; }
            public bool IsAllDay { get; set; }
            public DateTime Start {get;set;}
            public DateTime End { get; set; }
            public string StartTimezone { get; set; }
            public string EndTimezone { get; set; }
            public string RecurrenceRule { get; set; }
            public string RecurrenceException { get; set; }
            #endregion
    }
    -----------
    View Example:
    @(Html.Kendo().Scheduler<MyViewModel>()
          .Name("MyScheduler")
          .Date(DateTime.Today)
          .StartTime(DateTime.Today)
          .EndTime(DateTime.Today.AddYears(1))
          .Views(views =>
          {
              views.DayView();
              views.WeekView(weekView => weekView.Selected(true));
              views.MonthView();
          })
          .DataSource(d =>
          {
              d.Read(read => read.Url("/MyController/MyRead"));
              d.Update(update => update.Url("/MyController/MyUpdate"));
              d.Create(create => create.Url("/MyController/MyCreate"));
              d.Destroy(destroy => destroy.Url("/MyController/MyDelete"));
              d.Model(model =>
              {
                  model.Id(f => f.MyId);
              });
          })
          .BindTo(new [] {
                        new ServiceWindowViewModel{
                            MyId = 1,
          MyBool = true,
          MyString = "Yay this is my string",
          
          Title = "title not used",
                            Description = "description not used",
                            End = DateTime.Now.AddHours(2),
                            EndTimezone = null,
                            IsAllDay = false,
                            RecurrenceException = null,
                            RecurrenceRule = null,
                            Start = DateTime.Now,
                            StartTimezone = null
                        }
                    })     
          .Editable(editable => {
              editable.Confirmation(true);
              editable.Create(true);
              editable.Destroy(true);
              editable.Resize(true);
              editable.Update(true);
              editable.TemplateId("editor");
            })
        )<script id="editor" type="text/x-kendo-template">
    <div class="k-edit-label"><label for="title">Title</label></div>
    <div class="k-edit-field" data-container-for="title"><input type="text" class="k-input k-textbox" name="title" data-bind="value: title"></div>
    <BR>   
    <div class="k-edit-label"><label for="mystring">My String</label></div>
    <div class="k-edit-field" data-container-for="mystring"><input type="text" class="k-input k-textbox" name="mystring" data-bind="value: mystring"></div>
    </script>
    -----------
    Now My String editor box is displayed correctly... but the data is not displayed from the property of the view model... what am I doing wrong?Is there some other way to configure a custom edit popup for the Scheduler item? E.g. the editor for the grid seem to work better and is able to display all properties of my ViewModel correctly.Thanks,
    Michael
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1437 posts

    Posted 07 Mar 2014 Link to this post

    Hello Michael,

    Fields that do not come from the ISchedulerEvent interface preserve their exact names, so the template should be referring to the field using "MyString" instead of "mystring".

    Regards,
    Alexander Popov
    Telerik

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

  3. Scott
    Scott avatar
    4 posts
    Member since:
    Nov 2017

    Posted 08 Apr in reply to Alexander Popov Link to this post

    This for so frustrating!  I followed your sample application for a custom editor and added some new fields that were not in the ISchedulerEvent interface.  The new fields were not being bound to my view model and it was because I was using custom properties like "mystring" instead of "MyString", just like above.  So now this works, but can you point me to where in your examples or documentation this was stated?
  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    722 posts

    Posted 10 Apr Link to this post

    Hello Scott,

    The Kendo documentation does not explicitly state this limitation of the custom fields names, when used in a Scheduler HTML helper. Having that said, we will need include that in the Custom editors how-to article.

    I will try to explain a bit the reason behind the discussed limitation. The SchedulerAjaxDataSourceBuilder uses a predefined Schema for the data source, that translates all the fields from the ISchedulerEvent interface to the corresponding lower-case fields in the widget data. The Builder, however, does not allow configuration of the Schema for custom fields. Therefore, they would be used as they are defined in the implementation class of the ISchedulerEvent.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top