This project is read-only.

DualSelect Box for selecting and ordering items

This control needs reference to MVCControlToolkit.Controls.Core-x.x.x.js

dual select box example

With a dual select box items of a collection can be selected by transferring them from a ListBox to another through a series of buttons. There are buttons for :

  • Selecting one or more items
  • De-selecting one or more items
  • Selecting all Items
  • De-selecting all items
  • Changing the order of the selected items
  • Two optional search box to filter the item in each of the two boxes.

The two ListBoxes and the 6 buttons to handle the items can be placed separately wherever the user want. Moreover. Each Button is optional. it is possible to specify Html attributes for each of them. 

The DualSelect Box Buttons can be shaped either as normal buttons or as image or as link buttons. When the user types in one of the search textboxes the items of the associated box are reordered to keep on the top the items whose text have the "best match" with the charcters typed by the user.

Below an example of use(The DualSelectBoxt uses the same ChoiceList as the CheckBox list):

@{ var
                         RoleSelect = Html.DualSelectFor(m => m.Roles,
                            new ChoiceList<RoleInBlog, int, string>(
                                RegisterModel.AllRoles,
                                (t => t.Code),
                                (t => t.Name)));
          
                  }
                  <table>
                  <tr>
                      <td colspan="3" valign="middle" align="center">
                      @RoleSelect.ClearSelectionButton("Unselect All")
                      @RoleSelect.UnSelectButton("Move Left")
                      @RoleSelect.SelectButton("Move Right")
                      @RoleSelect.SelectAllButton("select All Roles")
                   </td>
                  </tr>
                  <tr>
                       <td  valign="middle" align="center">
                         Available Roles
                       </td>
                       <td  valign="middle" align="center">
                        Selected Roles
                       </td>
                       <td  valign="middle" align="center">
                        
                       </td>
                  </tr>
                  <tr>
                       <td  valign="middle" align="center">
                        @RoleSelect.AvailableItems(
                            new Dictionary<string, object>
                            {
                                {"style", "height:150px; width: 100px;"}
                            }
                         ) 
                       </td>
                       <td  valign="middle" align="center">
                       @RoleSelect.SelectedItems(
                            new Dictionary<string, object>
                            {
                                {"style", "height:150px; width: 100px;"}
                            }
                         ) 
                       </td>
                       <td  valign="middle" align="center">
                        <div>@RoleSelect.GoUpButton("Move Up")</div>
                        <div>@RoleSelect.GoDownButton("Move Down")</div>
                       </td>
                  </tr>
                  </table>

Last edited Jun 22, 2014 at 11:50 AM by frankabbruzzese, version 16

Comments

No comments yet.