Passing Data To Custom Editor In Scheduler

[Graham]

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

[Georgi Krustev]

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

 

 

[Graham]

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.

 

 

[Graham]

this is how the property is defined in the custom editor

 

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

[Georgi Krustev]

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