MVC models to populate multiselect - preloading selected items

4 posts, 0 answers
  1. Trevor
    Trevor avatar
    9 posts
    Member since:
    Sep 2012

    Posted 20 May 2014 Link to this post

    I currently have the multiselect working the way I want it with one exception.  Preloading previously selected items.


    My view looks:

    <div class="editor-field">       
        @Html.LabelFor(model => model.UntaggedPersons)
        @Html.ListBoxFor(model => model.PeopleToTag, 
                 new SelectList(Model.CommitteeMembers, "PersonId", "FullName"))                
    </div>

    JS:

     $("#PeopleToTag").kendoMultiSelect({ "dataTextField": "FullName", "dataValueField": "PersonId", "placeholder": "Tag or Untag Persons to Action Item", "value": "taggedPersons" });


    PeopleToTag is an IEnumerable<int> that posts to the controller
    CommitteeMembers consists of a persons  First, Last, FullName, and PersonId

    This works perfectly, I can manipulate who is tagged in post to the controller.

    Now I want to add the functionality of preselecting those that are currently tagged.

    How do I add a preselected Value?  I have a model with:  model.TaggedPersons consists of a persons First, Last, Fullname, PersonId.   How do I wire up the javascript to display the model.TaggedPersons as the already selected value?

    I don't mind using the MVC wrapper approach if it is easier.

    I've tried something like:

       <div class="editor-field">       
                    @Html.LabelFor(model => model.TaggedPersons)
                    @(Html.Kendo().MultiSelect()
                        .Name("PeopleToTag")
                        .Placeholder("These people are Tagged")
                        .BindTo(new SelectList(Model.CommitteeMembers, "PersonId", "FullName"))
                        .Value(Model.TaggedPersons)  
                       )
      </div>

    However this isn't even rendering a kendo multiselect for me at present. I perhaps have a reference issue to work out there.  That's the general thought of how I want to approach it though.

    Any help is much appreciated!

    -Trevor







  2. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 22 May 2014 Link to this post

    Hello Trevor,

    The approach with the ListBoxFor helper should work, but you should remove the value configuration so that the selected values are determined from the select element:
    $("#PeopleToTag").kendoMultiSelect({
        "dataTextField": "FullName",
        "dataValueField": "PersonId",
        "placeholder": "Tag or Untag Persons to Action Item"
    });

    With the MultiSelect wrapper, it should be possible to use the same approach as with the ListBox:
    @(Html.Kendo().MultiSelectFor(model => model.PeopleToTag)   
        .Placeholder("These people are Tagged")
        .BindTo(new SelectList(Model.CommitteeMembers, "PersonId", "FullName"))   
    )
    If you wish to use the value method instead with the TaggedPersons collection then you should either pass directly the CommitteeMembers and set the DataValueField and the DataTextField:
    @(Html.Kendo().MultiSelect()
        .Name("PeopleToTag")
        .Placeholder("These people are Tagged")
        .DataTextField("FullName")
        .DataValueField("PersonId")
        .BindTo(Model.CommitteeMembers)
        .Value(Model.TaggedPersons) 
    )
    or convert the TaggedPersons to a SelectList. If the widget is not rendered when using the wrapper then please check if there are any JavaScript errors.


    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Trevor
    Trevor avatar
    9 posts
    Member since:
    Sep 2012

    Posted 22 May 2014 in reply to Daniel Link to this post

    Thanks for your help Daniel.

    Right now, I've got it worked out to:

    @Html.LabelFor(model => model.TaggedPersons)
                  @(Html.Kendo().MultiSelectFor(model => model.PeopleToTag)
                      .Name("PeopleToTag")
                      .Placeholder("These people are Tagged")
                      .DataTextField("FullName")
                      .DataValueField("PersonId")       
                      .BindTo(Model.CommitteeMembers)
                      .Value(Model.TaggedPersons)
                  
                   )


    So that's working out ok, I probably would have figured this out a LONG time ago, but I do have some sort of jquery problem.

    Kendo is outputting:

    jQuery(function () { jQuery("#PeopleToTag").kendoMultiSelect({ "dataSource": [{ "FullName": "Andrew M", "PersonId": 4396, "GemsID": "215" }, { "FullName": "Jason U", "PersonId": 3309, "GemsID": "0" }, { "FullName": "Ken H", "PersonId": 922, "GemsID": "5" }, { "FullName": "Patrick Cochran", "PersonId": 3609, "GemsID": "12" }], "dataTextField": "FullName", "dataValueField": "PersonId", "placeholder": "These people are Tagged", "value": [{ "FullName": "Pat C", "PersonId": 3609, "GemsID": "128" }] }); });

    Which works fine if I copy that out of Chrome Dev Tools and put it in my javascript file that is included at the end of the page.

    It doesn't work if I don't do that.  It just sits there uninvoked between the script tags.

    I'm so close!  What am I missing?
  5. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 26 May 2014 Link to this post

    Hello again Trevor,

    I am not sure what could be preventing the initialization code from being executed. How is the view with the multiselect loaded? Are other script tags in the same view evaluated? If yes, then could you provide a runnable sample that demonstrates the problem?

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready