This is a migrated thread and some comments may be shown as answers.

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

3 Answers 519 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Jelly Master
Top achievements
Rank 1
Jelly Master asked on 19 Jun 2014, 11:31 PM
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. 
003.@Html.HiddenFor(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. 
147.@Html.Partial("_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. 



3 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 23 Jun 2014, 04:12 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Jelly Master
Top achievements
Rank 1
answered on 24 Jun 2014, 08:22 AM
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.
0
Jelly Master
Top achievements
Rank 1
answered on 24 Jun 2014, 09:43 PM
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)


Tags
MultiSelect
Asked by
Jelly Master
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Jelly Master
Top achievements
Rank 1
Share this question
or