MVC models to populate multiselect - preloading selected items

[Trevor]

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

[Daniel]

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

 

 

[Trevor]

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?

[Daniel]

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