Using Multiselect dropdown with scheduler can't update on edit

[Andrew]

I'm using a MultiSelect  as input into my scheduler widget. Works great for the input piece but when I go to edit the event the Multiselect widget won't update with multiple selection it will however update if only a single selection was picked (originally). I'm passing it a coma delimited string via the Model. Do I need to pass it a json string or object? See my code snipet below.

@(Html.Kendo().Scheduler<Mvc45CRApp.Areas.Reports.ViewModels.TaskViewModel>()
    .Name("scheduler")
    .Date(new DateTime(DateTime.Now.Ticks))
    .StartTime(new DateTime(DateTime.Now.Ticks))
    .Height(600)
    .Views(views =>
    {
        views.DayView(dailyView=>dailyView.AllDaySlot(false));
        views.WeekView(weekView => weekView.AllDaySlot(false));
        views.MonthView(monthView => monthView.Selected(true));
    })
    .Timezone("Etc/UTC")
    .Resources(resource =>
         {
            resource.Add(m => m.ReportID)
                .Title("Report Name")
                .Multiple(true)
                .DataTextField("ReportName")
                .DataValueField("ReportID")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetReports", "Schedule", new { area = "Reports" });
                    }); 
                });
            resource.Add(m => m.ContactID)
                .Title("Contacts")
                .Multiple(true)
                .DataTextField("ContactName")
                .DataValueField("ContactID")
                .DataSource(source => {
                    source.Read(read => 
                    {
                        read.Action("GetContacts", "DropdownMenus", new { area = "Shared" });
                    }); 
                });
         })
        //.Editable(e => e.TemplateId("editor"))
        .DataSource(d => d
        .Model(m =>
        {
   
            m.Id(f => f.TaskID);
            m.Field(f => f.Title).DefaultValue("No title");
            m.Field(f => f.OwnerID).DefaultValue(1);
            m.Field(f => f.Title).DefaultValue("No title");
        })
        .Read("Read", "Schedule")
        .Create("Create", "Schedule")
        .Destroy("Destroy", "Schedule")
        .Update("Update", "Schedule")
    )
)
 IQueryable<TaskViewModel> tasks = _db.SCHEDULED_EVENT.ToList().Select(task => new TaskViewModel()
            {
                TaskID = task.SCHEDULED_EVENT_ID,
                Title = task.NAME,
                //Specify the DateTimeKind to be UTC
                Start = DateTime.SpecifyKind(task.DTSTART, DateTimeKind.Utc),
                End = DateTime.SpecifyKind(task.DTSTART, DateTimeKind.Utc),
                Description = task.DESCRIPTION,
                RecurrenceRule = task.RRULE,
                ReportID = "1,2",  // this won't update the multiselect widget
                ContactID = "2",  // passing single item updates the widget (works great)
                //RecurrenceException = task.RecurrenceException,
                //RecurrenceID = task.RecurrenceID,
                OwnerID = task.USER_ID
            }).AsQueryable();


            return Json(tasks.ToDataSourceResult(request));

[Andrew]

I'll just open a ticket on this!

[Georgi Krustev]

Hi,

I answered in the support thread opened on the same subject. Here is a quote of the answer:

The MultiSelect widget accepts a single string value or an Array of string values. A comma delimited value will be considered a single one and the widget will try to find such an item to select it. Because there isn't any, the widget will render empty. I will suggest you persist the values of the MultiSelect widget as an array. 

I will ask you to continue our discussion in the support thread in order to avoid any duplication. Thank you for the understanding.

Regards,
Georgi Krustev
Telerik

 

 

[Andrew]

Yes I tired that... Didn't work! 
I have added ReportID and ContactID to the TaskViewModel as strings.
They hold the Values for the MultiSelect. I'm inserting the Values into the model in an MVC controller.
I've tried the following:
"[\"1\",\"2\"]"  -hard coded string
"[{\"1\"},{\"2\"}]"  -hard coded string
JsonConvert.SerializeObject(string[])
JsonConvert.SerializeObject(list<string>)

I have used the multiselect widget by itself many times haven't had this problem.
an example would be nice!

[jwize]

Your are right the control is completely broken ike a lot of other Telerik/Progress stuff. There is no documentation on how to update from the scheduler resources and the moderator is right you can update the items once it has changed.  For example if you add a function public ActionResult Update(DatasourceType data, Int32[] array mulitselectValues){ ..} you can get information to populate the multiselectValues list (as long as the parameter name matches). However, it is still broken since the correct behavior would be to fill up the list with the objects in the model class as you said works only if it has been unchanged so you can collect the data back into your original model. 

We can all agree that these controls are broken and largely unsupported. I would be easier though for the code to be fixed and updated. 

In the meantime can the moderator please tell me which events would make it easy to build the model backup and post it correctly so that the changed values can be used as complex objects posted back into the original collection?

[jwize]

You could bind to a list in your model if you like and hack a little.

           public class Model : ISchedulerEvent {

              public List<Report> Reports { get; set; } =

                    new List<Report>() { new Report() { ReportId = 1; };

           }

           // Scheduler

        var field = r.Add(x => x.Report);

        field.DataSource(datasource =>

        {

            datasource.Read("GetReportList", "Report");

        });

        field.Title("Reports");

        field.DataTextField("ReportName");

        field.DataValueField("ReportId");

        field.Multiple(true);

 

Then in your scheduler update:

source.Update( a=> a.Action("Update", "Report").Data("updating"));

 

    <script type="javascript">
        function updating(data) {
            var scheduler = $("#scheduler").data("kendoScheduler");
            scheduler.resources.forEach(function (resource) {
                if (typeof(data[resource.field][0]) == "object") return;
                data[resource.field].forEach(function (employeeId, index) {
                    var employee = resource.dataSource.data().filter(function(e) {

                       return e.Id == employeeId; })[0];


                    data[resource.field + '[' + index + '].Id'] = employee.Id;
                    data[resource.field + '[' + index + '].LastNameFirstName']

                        = employee.LastNameFirstName;
                })
                delete data[resource.field];
            });
        }
    </script>

 

Of course you would have to adjust the javascript for multiple types for your needs. 

   public ActionResult Update(Model model) { 

   // The reports Model.Reports list would be populated with the properties from the script.

}

[Ianko]

Hi Jaime,

With the built-in MultiSelect in the resource editor only array of primitive values is supported to be sent over to the server. However, there is always the option to entirely customize the editor template of the scheuduler and have a more complex MultiSelect integrated that would send a list of complex model to the action method. 

For further clarity, I am pasting here the original answer my colleague Georgi Krustev have provided in the support ticket: 

"The demo (https://demos.telerik.com/aspnet-mvc/scheduler/resources-grouping-horizontal) is the exactly one you need as it shows how to use a MultiSelect widget to edit resources and save the changes of the event on the server. Let me shed more light on how it is for resources editing:

Grouping_Horizontal_Read Action method returns a list of MeetingViewModel events.

Every MeetingViewModel has an Attendees field of IEnumerable<int> type. For instance, the "Acquisition discussion" event has an Attendees field set to new int[] { 2, 3}. This field is serialized to:

Attendees: [ 2, 3 ]

This value then is passed to the MultiSelect widget using its value method. This is done by the MVVM value binding, created by the editing form of the Scheduler.

The end user changes the Attendees and save the event. The MultiSelect's value is set to the model's Attendees fields, which then is sent to the server. You can find more information about List model binding here.

If you would like to modify the editor template and control the MultiSelect widget, then check this code library."

 

I hope that clarifies further the original case discussed here. 

Regards,

Ianko

Telerik

 

 

[jwize]

Well, it sounds like there is no support for a viewmodel that has a list of objects and that causes an issue with the way the scheduler works. So, you use an enumerable property of key value and then the datasource gets the objects matching the keys that were in the enumerable viewmodel's listThe initial values if objects create a weird situation where you have an object instead of an array item. Personally, I think that both object and native types should be supported out of the box. 

I see the template and it should be the best solution for flexibility.

By the way, It is really hard to not throw throw Telerik under the bus when we can not even edit or delete our posts in this forum. Also the split screen makes it nearly impossible to cross-reference other posts while writing a question. This is one of the biggest problems for community communication.  

[jwize]

Also, is there a way to add a required field to the select list single DropDownList type in the schedule resources?

[Ianko]

Hello Jaime,

You can add validation to  the fields of the data by using the dataSource.schema.model options.

As for the feedback regarding our community forum, I will forward it to the team managing the forums.

Regards,
Ianko
Progress Telerik

[jwize]

This is not available in the MVC UI extensions

[Ianko]

Hi Jaime,

In MVC you should be able to accomplish the same by using the Required attribute on the model's field.

As the conversation is going towards different topic and is regarding different suite it would be best the case to be handled in a different forum thread or support case. If you have further questions on the matter please open a new support thread. 

Regards,
Ianko
Progress Telerik