Passing Data To Custom Editor In Scheduler

5 posts, 0 answers
  1. Graham
    Graham avatar
    4 posts
    Member since:
    May 2016

    Posted 20 Sep Link to this post

    I have a Scheduler which I am using the vertical orientation to load custom resources. I have the date and time across the top with a list of room resources down the left hand side. These populate fine but I am using a custom editor when someone clicks on a cell to load the entity. My scheduler looks like this:

     

    @(Html.Kendo().Scheduler<EventViewModel>()
        .Name("scheduler")
        .Date(DateTime.Now.AddDays(1))
        .StartTime(new DateTime(2016, 9, 6, 9, 00, 00))
        .EndTime(new DateTime(2016, 9, 6, 17, 00, 00))
        .MajorTick(60)
        .Views(views =>
        {
            views.TimelineView(timeline => {
                timeline.MajorTick(60);
                timeline.EventHeight(25);
            });
            views.TimelineWeekView(timeline =>
            {
                timeline.EventHeight(25);
            });
            views.TimelineWorkWeekView(timeline =>
            {
                timeline.EventHeight(25);
            });
            views.TimelineMonthView(timeline =>
            {
                timeline.EventHeight(25);
            });
     
        })
        .Editable(editable =>
        {
            editable.TemplateName("CustomEditorTemplate");
        })
    .Events(e =>
    {
        //    e.Save("onSave");
        e.Edit("onEdit");
        e.Add("onAdd");
    })
    .Timezone("Etc/UTC")
    .Group(group => group.Resources("Rooms").Orientation(SchedulerGroupOrientation.Vertical))
    .Resources(resource =>
    {
        resource.Add(m => m.RoomID)
            .Title("Room")
            .Name("Rooms")
            .DataTextField("Text")
            .DataValueField("Value")
            .DataSource(s => s.Read(read =>
            {
                read.Action("GetRooms", "Schedules");
            }));
    })
    .DataSource(dataSource => dataSource
        .SignalR()
        .Events(events => events.Push("onPush"))
        .Transport(tr => tr
            .Promise("hubStart")
            .Hub("courseEventHub")
            .Client(c => c
                .Read("read")
                .Create("create")
                .Update("update")
                .Destroy("destroy"))
            .Server(s => s
                .Read("read")
                .Create("create")
                .Update("update")
                .Destroy("destroy")))
        .Schema(schema => schema
            .Model(model =>
            {
                model.Id(m => m.ID);
                model.Field(m => m.ID).Editable(false);
     
            })
        )
        )
    )

    In the custom editor I can retrieve the RoomID from the resource but I also want to get the Room Name, which is the Text of the resource.

     

     

    @model HSSTraining.Models.EventViewModel
     
    @{
        //required in order to render validation attributes
        ViewContext.FormContext = new FormContext();
    }
     
    @functions{
        public Dictionary<string, object> generateDatePickerAttributes(
               string elementId,
               string fieldName,
               string dataBindAttribute,
               Dictionary<string, object> additionalAttributes = null)
        {
     
            Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();
     
            datePickerAttributes["id"] = elementId;
            datePickerAttributes["name"] = fieldName;
            datePickerAttributes["data-bind"] = dataBindAttribute;
            datePickerAttributes["required"] = "required";
            datePickerAttributes["style"] = "z-index: inherit;";
     
            return datePickerAttributes;
        }
    }
     
    <div class="k-edit-label">
        Course
    </div>
     
    <div data-container-for="Courses" class="k-edit-field">
        @(Html.Kendo().AutoComplete()
              .Name("courses")
              .Filter("contains")
              .Placeholder("Find Course...")
              .DataTextField("CourseName")
              //.BindTo(Model.SelectedCourse)
              .DataSource(s =>
                    {
                        s.Read(read =>
                        {
                            read.Action("GetCourses", "Schedules");
                        })
                        .ServerFiltering(false);
                    })
                .Events(t => t.Select("changedMe"))
        )
    </div>
     
    <div class="k-edit-label">
        @(Html.LabelFor(model => model.Start))
    </div>
     
    <div data-container-for="start" class="k-edit-field">
        @(Html.Kendo().DateTimePickerFor(model => model.Start)
            .HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay")))
        @(Html.Kendo().DatePickerFor(model => model.Start)
            .HtmlAttributes(generateDatePickerAttributes("startDate", "start", "value:start,visible:isAllDay")))
        <span data-bind="text: startTimezone"></span>
        <span data-for="start" class="k-invalid-msg"></span>
    </div>
     
    <div class="k-edit-label">
        @(Html.LabelFor(model => model.End))
    </div>
     
    <div data-container-for="courseEndDate" class="k-edit-field">
        @Html.EditorFor(model => model.End, new { @class="courseEndDate" })
        @*<input id="courseEndDate" type="text" readonly="readonly" class="form-control" />*@
    </div>
     
    <div class="k-edit-label">
        <label>Room</label>
    </div>
    <div data-container-for="courseRoomName" class="k-edit-field">
        <input type="text" class="form-control" id="courseRoomName"  />
    </div>
     
     
        <div id="hiddenFields">
            @Html.HiddenFor(model => model.RoomID)
            @Html.HiddenFor(model => model.CourseID)
        </div>
     
     
        @{
            ViewContext.FormContext = null;
        }

     

    I have tried to bind the text to the model but I have been unable to do so. Instead I am now trying to do this via javascript like this:

     

    function onAdd(e) {
        console.log(e);
     
        var scheduler = $("#scheduler").data("kendoScheduler");
        var array = scheduler.resources[0].dataSource._data;
     
        var test = $.grep(array, function (item) { return item.Value == e.event.RoomID; });
        console.log(test[0]);
     
        $('#courseRoomName').val(test[0]);
    }

    Whatever I seem to do I seem to be unable to pass the text name of the resource through to the custom editor model/page

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 22 Sep Link to this post

    Hello Graham,

    The editor context is the edited/newly created Scheduler event. That being said, you have access only to the properties of the particular event. I noticed that you have already get the current scheduler resources in the onAdd callback. From here you will need either to manually populate the particular input element or to modify the SchedulerEvent instance, adding additional RoomName field. Thus you will be able to bind the editor form using MVVM.

    I would strongly suggest you peruse the "Editing functionality" help article which explains in details how the editing works in Kendo UI:

    http://docs.telerik.com/kendo-ui/intro/widget-basics/editing

    This documentation will shed more light on Kendo MVVM and how it is used in the editing forms. I hope this will help you find the proper solution to implement your business logic.

    Regards,
    Georgi Krustev
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Graham
    Graham avatar
    4 posts
    Member since:
    May 2016

    Posted 22 Sep in reply to Georgi Krustev Link to this post

    Thanks for the link. I have tried implementing the way you want but it still doesn't work.

     

    I have a kendo AutoComplete in the custom editor template.

     

    <div data-container-for="Courses" class="k-edit-field">
            @(Html.Kendo().AutoComplete()
                    .Name("courses")
                    .Filter("contains")
                    .Placeholder("Find Course...")
                    .DataTextField("CourseName")
                    //.BindTo(Model.SelectedCourse)
                    .DataSource(s =>
                    {
                        s.Read(read =>
                        {
                            read.Action("GetCourses", "Schedules");
                        })
                        .ServerFiltering(false);
                    })
                    .Events(t => t.Select("selectCourse"))
            )
    </div>

     

    which calls a js function in the calling page to update the model with the selected item:

    function selectCourse(e) {
      var dataItem = this.dataItem(e.item.index());
      var sch = $("#scheduler").data("kendoScheduler");
      var model = sch.data()[0];
      var test = new kendo.data.ObservableObject(model);
      console.log(dataItem.CourseNo);  //logs the correct course number to the console
      var blah = test.get('CourseID'); 
      console.log(blah);  //shows that it is currently unset
      test.set('CourseID', dataItem.CourseNo);
      var blah2 = test.get('CourseID'); 
      console.log(blah2);  //shows the course number has been set

    but when the model is sent back to the controller the value is never set.

     

     

  5. Graham
    Graham avatar
    4 posts
    Member since:
    May 2016

    Posted 22 Sep in reply to Graham Link to this post

    this is how the property is defined in the custom editor

     

    @Html.HiddenFor(model => model.CourseID, new { @class = "k-textbox", data_bind = "value:CourseID" })

  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 26 Sep Link to this post

    Hello Graham,

    The event is not updated, because you are updating new instance of the ObservableObject. The reference to the original event is lost after this line:
    var test = new kendo.data.ObservableObject(model);

    Is there any particular reason to do that? If you would like to update the event, remove that line and modify the original event directly.

    Regards,
    Georgi Krustev
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready