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

4 posts, 0 answers
  1. Jelly Master
    Jelly Master avatar
    39 posts
    Member since:
    Oct 2010

    Posted 19 Jun 2014 Link to this post

    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. 



  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 23 Jun 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jelly Master
    Jelly Master avatar
    39 posts
    Member since:
    Oct 2010

    Posted 24 Jun 2014 in reply to Atanas Korchev Link to this post

    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.
  5. Jelly Master
    Jelly Master avatar
    39 posts
    Member since:
    Oct 2010

    Posted 24 Jun 2014 in reply to Atanas Korchev Link to this post

    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)


Back to Top
UI for ASP.NET MVC is VS 2017 Ready