MultiSelect in Grid Popup Editor not binding values on initial load.

[Jelly Master]

So I have a grid as per: 

01.Html.Kendo().Grid<ProvisionMapModel>()
02.
03.                        .Name("ProvisionMapGrid")
04.                        .ToolBar(toolbar => toolbar.Create())
05.                        .Columns(
06.                            columns =>
07.                            {
08.                                columns.Bound(c => c.ID).Visible(false);
09.                                columns.Command(c => c.Edit()).Width(100).Lockable(false).Locked(true);
10.                                columns.Bound(c => c.Name).Width(200).Locked(true);
11.                                columns.Bound(c => c.CohortNumber).Width(50);
12.                                columns.Bound(c => c.Details).Width(50);
13.                                columns.Bound(c => c.GroupSize).Width(50);
14.                                columns.Bound(c => c.Wave).Width(50);
15.                                columns.Bound(c => c.LengthOfSession).Format("{0:HH:mm}").Width(50);
16.                                columns.Bound(c => c.HourlyRate).Visible(false);
17.
18.                                columns.Bound(c => c.NumberOfSessions).Width(50);
19.
20.
21.
22.                                columns.Bound(c => c.StartDate).Format("{0:dd MMM yy}").Width(150);
23.                                columns.Bound(c => c.StartTerm).Title("Term").Width(100);
24.                                columns.Bound(c => c.EndDate).Format("{0:dd MMM yy}").Width(150);
25.                                columns.Bound(c => c.EndTerm).Title("Term").Width(100);
26.                                columns.Bound(c => c.StudentList).ClientTemplate("<span class=\"badge\">#=StudentList.length#").Width(50);
27.
28.                                @*columns.Template(@<text></text>).ClientTemplate("<a class='btn btn-sm btn-primary' href='" + @Url.Action("Details", "Reports", new { area="ProvisionMap", id="#=ID#" }) + "'><span class=\"glyphicon glyphicon-user\"></span> Details</a>");*@
29.
30.                            }
31.                        )
32.                .Editable(edit =>
33.                edit.TemplateName("ProvisionMapEditor").Mode(GridEditMode.PopUp)
34.                     .Window(window =>
35.                               {
36.                                   window.HtmlAttributes(new { @class = "kendo-popup-editor" });
37.                               })
38.
39.                )
40.                        .DataSource(ds =>
41.                            ds.Ajax().ServerOperation(true)
42.                    .Read(read => read.Action("ReadProvisionMap", "Home", new { area = "ProvisionMap" }))
43.            .Create(create => create.Action("CreateProvisionMap", "Home", new { area = "ProvisionMap" }).Data("sendAntiForgery"))
44.            .Update(update => update.Action("UpdateProvisionMap", "Home", new { area = "ProvisionMap" }).Data("sendAntiForgery"))
45..Events(events => events.Error("NewError_Handler"))
46.                            .Model(model =>
47.                        {
48.                            model.Id(m => m.ID);
49.                            model.Field(m => m.ID).DefaultValue(Guid.NewGuid());
50.
51.                            model.Field(m => m.Details);
52.                            model.Field(m => m.GroupSize);
53.                            model.Field(m => m.Wave);
54.                            model.Field(m => m.LengthOfSession);
55.                            model.Field(m => m.HourlyRate);
56.
57.                            model.Field(m => m.NumberOfSessions);
58.                            model.Field(m => m.Name);
59.
60.                            model.Field(m => m.StartDate);
61.                            model.Field(m => m.StartTerm);
62.
63.                            model.Field(m => m.EndDate);
64.                            model.Field(m => m.EndTerm);
65.                            model.Field(m => m.StudentList).DefaultValue(new List<BasicStudentProvisionMapModel>());
66.
67.
68.                        })
69.
70.
71.        ).Sortable()
72.        .Pageable(page => page.PageSizes(new int[] { 10, 20, 50, 100, 250, 1000 }).Refresh(true))
73.        .Groupable()
74.        .Resizable(resize => resize.Columns(true))
75.        .Filterable()
76.        .HtmlAttributes(new { style = "min-height:300px;" })
77.        .Scrollable()
78.
79.        .ColumnMenu()
80.      .Events(events =>
81.        {
82.            events.Edit("PopUpEditorRefresh");
83.        })

The grid model and the BasicStudentProvisionMapModel are these classes: 

01.public class ProvisionMapModel : BaseModel
02.   {
03.
04.
05.
06.       public int CohortNumber { get; set; }
07.
08.       [AllowHtml]
09.       public string Details { get; set; }
10.
11.       public DateTime EndDate { get; set; }
12.
13.       public int EndTerm { get; set; }
14.
15.       public int GroupSize { get; set; }
16.
17.       public double HourlyRate { get; set; }
18.
19.       public DateTime LengthOfSession { get; set; }
20.
21.       public string Name { get; set; }
22.
23.       public int NumberOfSessions { get; set; }
24.
25.       public DateTime StartDate { get; set; }
26.
27.       public int StartTerm { get; set; }
28.
29.       public int Wave { get; set; }
30.
31.
32.
33.       public List<BasicStudentProvisionMapModel> StudentList { get; set; }
34.
35.   }
36.
37.
38. public class BasicStudentProvisionMapModel
39.   {
40.
41.       public string ID { get; set; }
42.
43.       public string Text
44.       {
45.           get;
46.           set;
47.       }
48.
49.
50.   }

So everything binds correctly to the grid and I can see that the studentlist is populated but when I load up my editor and try to bind the studentlist to the multiselect as per this: 

001.@model ProvisionMapModel
002.
[e-mail](m => m.ID)
004.
005.<div role="form" class="kendo-popup-editor-inner" style="padding:10px;">
006.
007.
008.
009.    <div class="form-group">
010.        @Html.LabelFor(m => m.Name)
011.
012.        @Html.TextBoxFor(m => m.Name, new { @class = "form-control", @Placeholder = "Name of the session" })
013.
014.
015.
016.
017.
018.    </div>
019.
020.
021.
022.    <div class="form-group">
023.        @Html.LabelFor(m => m.Details)
024.
025.        @Html.Kendo().EditorFor(m => m.Details).HtmlAttributes(new { style = "min-width:100%;" }).Encode(false)
026.
027.
028.
029.
030.
031.    </div>
032.
033.
034.
035.
036.
037.    <div class="form-group">
038.        @Html.LabelFor(m => m.GroupSize)
039.
040.        @Html.Kendo().IntegerTextBoxFor(m => m.GroupSize).HtmlAttributes(new { style = "min-width:100%;" })
041.    </div>
042.
043.
044.    <div class="form-group">
045.        @Html.LabelFor(m => m.Wave)
046.
047.        @(Html.Kendo().IntegerTextBoxFor(m => m.Wave).HtmlAttributes(new {style="min-width:100%;" }).Min(1).Max(3))
048.    </div>
049.
050.    <div class="form-group">
051.        @Html.LabelFor(m => m.LengthOfSession)
052.
053.        @(Html.Kendo().TimePickerFor(m => m.LengthOfSession).HtmlAttributes(new { style = "min-width:100%;" }))
054.
055.    </div>
056.
057.    <div class="form-group">
058.        @Html.LabelFor(m => m.HourlyRate)
059.
060.        @Html.Kendo().NumericTextBoxFor(m => m.HourlyRate).Decimals(2).HtmlAttributes(new { style = "min-width:100%;" })
061.    </div>
062.
063.
064.
065.
066.
067.
068.    <div class="form-group">
069.        @Html.LabelFor(m => m.NumberOfSessions)
070.
071.        @Html.Kendo().IntegerTextBoxFor(m => m.NumberOfSessions).HtmlAttributes(new { style = "min-width:100%;" })
072.    </div>
073.
074.
075.
076.
077.
078.
079.
080.
081.
082.    <div class="form-group">
083.        @Html.LabelFor(m => m.StartDate)
084.
085.        @Html.Kendo().DatePickerFor(m => m.StartDate).HtmlAttributes(new { style = "min-width:100%;" })
086.    </div>
087.
088.
089.    <div class="form-group">
090.        @Html.LabelFor(m => m.StartTerm)
091.
092.        @Html.Kendo().IntegerTextBoxFor(m => m.StartTerm).Decimals(2).HtmlAttributes(new { style = "min-width:100%;" }).Min(1).Max(6)
093.    </div>
094.
095.
096.
097.
098.
099.    <div class="form-group">
100.        @Html.LabelFor(m => m.EndDate)
101.
102.        @Html.Kendo().DatePickerFor(m => m.EndDate).HtmlAttributes(new { style = "min-width:100%;" })
103.    </div>
104.
105.
106.    <div class="form-group">
107.        @Html.LabelFor(m => m.EndTerm)
108.
109.        @Html.Kendo().NumericTextBoxFor(m => m.EndTerm).Decimals(2).HtmlAttributes(new { style = "min-width:100%;" }).Min(1).Max(6)
110.    </div>
111.
112.    <div class="form-group">
113.        @Html.LabelFor(m => m.StudentList)
114.
115.        @(Html.Kendo().MultiSelectFor(m => m.StudentList)
116.                .Name("StudentList")
117.                .DataTextField("Text")
118.        .DataValueField("ID")
119.                .Value(new SelectList(Model.StudentList, "ID", "Text"))
120.        .IgnoreCase(true)
121.        .AutoBind(false)
122.                        .DataSource(datasource =>
123.                        {
124.                            datasource.ServerFiltering(true);
125.
126.                            datasource.Read(read => read.Action("ReadStudents", "Home", new { area = "ProvisionMap" }).Data("FilterMe"));
127.
128.
129.                        }).Filter(FilterType.Contains)
130.                        )
131.
132.    </div>
133.    <div class="jumbotron">
134.        @Model.StudentList.Count.ToString()
135.
136.        @foreach (var item in Model.StudentList)
137.        {
138.            <p>hello</p>
139.            <p>@item.ID</p>
140.            <p>@item.Text</p>
141.        }
142.    </div>
143.</div>
144.
145.
146.
[e-mail]("_ErrorPanel")

No matter what I try to do the list of students is getting reset. Now is this due to the default value being set to a new instance of the list type or am I doing something really stupid. 

As I said I know the list is being populated as I have inspected the json being presented to the grid and it shows me with the appropriate data. 

So what am I over looking here. 

If required I can raise a support ticket for this and provide my project code if needed. 

[Atanas Korchev]

Hello David,

I tried to reproduce the problem, to no avail. Please check the attached screenshots - the StundentList was correctly posted and populated. I have also attached my test project. Does it work at your side? What is different in your configuration?

Regards,
Atanas Korchev
Telerik

 

 

[Jelly Master]

Thanks for the reply.

I will take a look at this later on today and see what is happening.

Also is there a way to see what information is being passed to the pop up editor when it loads up on the screen and is binding the values.

This I think would help me understand what is actually happening a little bit more.

[Jelly Master]

Well after spending a couple of days trying to figure out why this wasn't working I finally figured it out.

Turns out I was binding the wrong id's to the values passed to the list. Instead of binding the student id's I was binding the provision id so although all the text was being set correctly all the value fields were the same.

Also one thing I noticed with this and this is probably down to the MVVM/Knockout nature of the wrappers but if I serialize the model on the initial load of the editor it gives me a default object and then seems to apply all the values after the window has loaded which I guess it should be working. Is there some resource I can read to understand what is going on and understand how this is working?

Again thanks for the support and in the end it turns out it was my favourite phrase PICNIC (Problem In Chair Not In Computer)