Dual ListBox

by litespeedtdf

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<select data-bind="options:availableTeamMembers, selectedOptions:availableSelectedMembers, optionsText:&#39;FullName&#39;" id="AvailableSelectedMembers" multiple="multiple" name="AvailableSelectedMembers" style="width: 200px; height: 200px"><option value="2">Jane Adams</option>
    <option value="3">Sam Spade</option>
    
    <option value="1">Jack Frost</option>
</select>
<table>
    <tr>
        <td>
            <input type="button" name="add" value=">>" data-bind="click: addRequested, enable:availableSelectedMembers().length > 0" /><br />
        </td>
        <td>     
            <input type="button" name="remove" value="<<" data-bind="click: removeRequested, enable:requestedTeamMembers().length > 0" />
        </td>
    </tr>
</table>
<select data-bind="options:requestedTeamMembers, selectedOptions:requestedSelectedMembers, optionsText:&#39;FullName&#39;" id="RequestedSelectedMembers" multiple="multiple" name="RequestedSelectedMembers" style="width: 200px; height: 200px"></select>

<table id="TableProjectTeam">
    
    <thead>
        <tr>
            <th>FirstName</th>
            <th>LastName</th>
            <th>FullName</th>
            <th>Role</th>
        </tr>
        
    </thead>
    <tbody data-bind='template: { name: "requestedTemplate", foreach: requestedTeamMembers, templateOptions: { roles: userRoles } }'>
        
    </tbody>                         
</table>


<script id="requestedTemplate" type="text/html">
    <tr>
        <td data-bind="text: FirstName"></td>
        <td data-bind="text: LastName"></td>
        <td data-bind="text: FullName"></td>
        <td><select data-bind="options: $item.roles,optionsCaption: 'Choose...', optionsText: 'Text', optionsValue: 'Value', value: RoleId"></select></td>
    </tr>
</script>

JavaScript

var viewModel = {
    availableTeamMembers: ko.observableArray([{
        "UserProfileId": 2,
        "TenantId": 1,
        "FirstName": "Jane",
        "LastName": "Adams",
        "FullName": "Jane Adams",
        "Title": "Secretary"},
    {
        "UserProfileId": 3,
        "TenantId": 1,
        "FirstName": "Sam",
        "LastName": "Spade",
        "FullName": "Sam Spade",
        "Title": "VP"},
    {
        "UserProfileId": 1,
        "TenantId": 1,
        "FirstName": "Jack",
        "LastName": "Frost",
        "FullName": "Jack Frost",
        "Title": "President"},
    {
        "UserProfileId": 4,
        "TenantId": 1,
        "FirstName": "Jane",
        "LastName": "Lewis",
        "FullName": "Jane Lewis",
        "Title": "student"}]),
    EditableProjectTeamMembers: ko.observableArray([{
        "RoleId": 2,
        "Name": "Sam  Spade",
        "FirstName": "Sam",
        "LastName": "Spade",
        "FullName": "Sam Spade"}]),
    availableSelectedMembers: ko.observableArray([]),
    requestedTeamMembers: ko.observableArray([]),
    requestedSelectedMembers: ko.observableArray([]),
    userRoles: ko.observableArray([{
        "Selected": false,
        "Text": "Administrator",
        "Value": "1"},
    {
        "Selected": false,
        "Text": "Manager",
        "Value": "2"},
    {
        "Selected": false,
        "Text": "Staff",
        "Value": "3"}]),

    loadProjectTeam: function() {

        $.each(viewModel.EditableProjectTeamMembers(), function(n, item) {
            viewModel.requestedTeamMembers.push(item);
            viewModel.availableTeamMembers.remove(ko.utils.arrayFirst(viewModel.availableTeamMembers(), function(member) {
                return member.FullName === item.FullName;
            }));
        });

    },


    addRequested: function() {
        var requested = this.requestedTeamMembers;
        $.each(viewModel.availableSelectedMembers(), function(n, item) {
            if (!item.RoleId) {
           ...