This project is read-only.

How do you Pre-populate a DualSelect box for a Edit Page in MVC4-Razor?

Mar 28, 2013 at 3:09 PM
Edited Mar 28, 2013 at 3:11 PM
I am trying to prepopulate the "Selected Items" box of the dual select box, the boxes are displaying ok and the "availableitems" is populated ok, but nothing is getting prepopulated on the "selectedItems". I put a breakpoint right after the var roleSelect = Html.DualSelectFor and check the
"Value" property of the roleselect and the items are there but they are not showing up on the page. Also, when i submit the page , i verify that in the Httppost , the selectedfunctions property is getting populated from the page when i make a selection. But still when i go to the page itself, nothing is showing up on the selecteditems box. Am i missing something???

Here is my razor code:
  Dual List Box<p></p>
        @{
            var roleSelect = Html.DualSelectFor(m => m.SelectedFunctions, ChoiceListHelper.Create(Model.AvailableFunctions, (t => t.ToString()), (t => t.ToString())));

         }
            <table>
              <tr>
                   <td  valign="middle" align="center">
                     Available Roles
                   </td>
                   <td  valign="middle" align="center">
                    Selected Roles
                   </td>
              </tr>
              <tr>
                  <td  valign="middle" align="center">
                      @roleSelect.AvailableItems(
                          new Dictionary<string, object>
                              {
                                  {"style", "height:150px; width: 300px;"}
                              }
                           ) 
                  </td>
                  <td  valign="middle" align="center">
                    <div> @roleSelect.UnSelectButton("Move Left") </div>
                    <div> @roleSelect.SelectButton("Move Right")  </div>
                   </td>
                   <td  valign="middle" align="center">
                   @roleSelect.SelectedItems(
                        new Dictionary<string, object>
                        {
                            {"style", "height:150px; width: 300px;"}
                        }
                        ) 
Here is my ViewModel:
public class RolesEditViewModel
{
    public Guid ID { get; set; }

    public string Name { get; set; }

    public List<Function> Functions { get; set; }

    public List<String> SelectedFunctions { get; set; }

    public List<Function> AvailableFunctions { get; set; }

}
Coordinator
Mar 28, 2013 at 7:47 PM
The simplest possibilities that come to my mind are:

1) You have not added the needed javascript files. (MVCControlToolkit.Controls.Core-x.x.x.min.js or MVCControlToolkit.Controls-x.x.x.min.js must be included, see here)

2) The elements in your SelectedFunctions are not contained also in the AvailableFunctions property. In fact the dual select workas like a Listbox: The list of all possible items must contain ALSO the selected items. If you remove the selected items from the lis of all availbale items you get exactly an empty selected items box......

The remainder of the code appears ok, ......if the ToString() operator applied to a Function actually produce a string that identifies univocally a Function.