[CLOSED] MultiSelect moving items programmatically

  1. #1

    [CLOSED] MultiSelect moving items programmatically

    Hi,

    Please provide a code sample or link to an example demonstrating how to move selected items from one MultiSelect control to another. I'm working with the example at https://examples1.ext.net/#/Form/MultiSelect/Overview/. What I need on top of this is 4 buttons in the middle that will perform selected item(s) left/right move and bulk left/right move by selecting all the items on the list and moving them over to the right or left.

    Edit in: Please also suggest how to get the selected items with their DataIndexes from the MultiSelect control on the client. I've tried http://forums.ext.net/showthread.php...-a-MultiSelect but there's no such method. Could it be conditionally defined depending on the MultiSelect configuration? There's the selectedIds property, which I'm not sure about. The closest match I've found so far is the getValue() method but it doesn't give me the DataIndex property to get a hold of the Store record.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
    
        
        private void ShowSelection(MultiSelect ctrl)
        {
            StringBuilder sb = new StringBuilder(256);
            sb.Append("Ext.Msg.alert('Selection', '");
    
            foreach (SelectedListItem item in ctrl.SelectedItems)
            {
                sb.AppendFormat("Value={0}, Index={1}, Text={2} <br/>", item.Value, item.Index, item.Text);
            }
    
            sb.Append("');");
    
            ctrl.AddScript(sb.ToString());
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Overview of MultiSelect - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            .label
            {
                font: bold 11px tahoma,arial,sans-serif;
                width: 300px;
                height: 15px;
                padding: 5px 0;
                border: 1px dotted #99bbe8;
                color: #15428b;
                cursor: default;
                margin: 10px;
                background: #dfe8f6;
                text-align: center;
                margin-left: 0px;
            }
        </style>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:TabPanel ID="TabPanel1" runat="server" Plain="true" Height="400" LayoutOnTabChange="true">
            <Items>
                <ext:Panel ID="Panel13" runat="server" Title="Drag/Drop (Insert Mode)" Padding="10">
                    <Items>
                        <ext:TableLayout ID="TableLayout5" runat="server" Columns="2">
                            <Cells>
                                <ext:Cell>
                                    <ext:Label ID="Label9" runat="server" Html="<div class='label'>Available Items</div>" />
                                </ext:Cell>
                                <ext:Cell>
                                    <ext:Label ID="Label10" runat="server" Html="<div class='label'>Selected Items</div>" />
                                </ext:Cell>
                                <ext:Cell>
                                    <ext:Panel ID="Panel14" runat="server" Border="false" BodyStyle="height: 260px;">
                                        <Items>
                                            <ext:MultiSelect ID="MultiSelect9" runat="server" DragGroup="grp1" DropGroup="grp2,grp1"
                                                Width="300" Height="250" KeepSelectionOnClick="WithCtrlKey">
                                                <Items>
                                                    <ext:ListItem Text="Item 1" Value="1" />
                                                    <ext:ListItem Text="Item 2" Value="2" />
                                                    <ext:ListItem Text="Item 3" Value="3" />
                                                    <ext:ListItem Text="Item 4" Value="4" />
                                                    <ext:ListItem Text="Item 5" Value="5" />
                                                    <ext:ListItem Text="Item 20" Value="20" />
                                                    <ext:ListItem Text="Item 30" Value="30" />
                                                    <ext:ListItem Text="Item 40" Value="40" />
                                                    <ext:ListItem Text="Item 50" Value="50" />
                                                    <ext:ListItem Text="Item 100" Value="100" />
                                                    <ext:ListItem Text="Item 200" Value="200" />
                                                    <ext:ListItem Text="Item 300" Value="300" />
                                                    <ext:ListItem Text="Item 400" Value="400" />
                                                    <ext:ListItem Text="Item 500" Value="500" />
                                                    <ext:ListItem Text="Item 1000" Value="1000" />
                                                    <ext:ListItem Text="Item 2000" Value="2000" />
                                                    <ext:ListItem Text="Item 3000" Value="3000" />
                                                    <ext:ListItem Text="Item 4000" Value="4000" />
                                                    <ext:ListItem Text="Item 5000" Value="5000" />
                                                    <ext:ListItem Text="Item 10000" Value="10000" />
                                                    <ext:ListItem Text="Item 20000" Value="20000" />
                                                    <ext:ListItem Text="Item 30000" Value="30000" />
                                                    <ext:ListItem Text="Item 40000" Value="40000" />
                                                    <ext:ListItem Text="Item 50000" Value="50000" />
                                                </Items>
                                            </ext:MultiSelect>
                                        </Items>
                                    </ext:Panel>
                                </ext:Cell>
                                <ext:Cell>
                                    <ext:Panel ID="Panel15" runat="server" Border="false" BodyStyle="height: 260px;">
                                        <Items>
                                            <ext:MultiSelect ID="MultiSelect10" runat="server" DragGroup="grp2" DropGroup="grp1,grp2"
                                                Width="300" Height="250" KeepSelectionOnClick="WithCtrlKey">
                                                <Items>
                                                    <ext:ListItem Text="Item 6" Value="6" />
                                                    <ext:ListItem Text="Item 7" Value="7" />
                                                    <ext:ListItem Text="Item 8" Value="8" />
                                                    <ext:ListItem Text="Item 9" Value="9" />
                                                    <ext:ListItem Text="Item 10" Value="10" />
                                                </Items>
                                            </ext:MultiSelect>
                                        </Items>
                                    </ext:Panel>
                                </ext:Cell>
                            </Cells>
                        </ext:TableLayout>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:TabPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Nov 06, 2012 at 1:55 PM. Reason: [CLOSED]
  2. #2
    Hello!

    Thank you for good example of your problem.

    Try following example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
     
         
        private void ShowSelection(MultiSelect ctrl)
        {
            StringBuilder sb = new StringBuilder(256);
            sb.Append("Ext.Msg.alert('Selection', '");
     
            foreach (SelectedListItem item in ctrl.SelectedItems)
            {
                sb.AppendFormat("Value={0}, Index={1}, Text={2} <br/>", item.Value, item.Index, item.Text);
            }
     
            sb.Append("');");
     
            ctrl.AddScript(sb.ToString());
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Overview of MultiSelect - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            .label
            {
                font: bold 11px tahoma,arial,sans-serif;
                width: 300px;
                height: 15px;
                padding: 5px 0;
                border: 1px dotted #99bbe8;
                color: #15428b;
                cursor: default;
                margin: 10px;
                background: #dfe8f6;
                text-align: center;
                margin-left: 0px;
            }
        </style>
        <ext:XScript runat="server">
            <script type="text/javascript">
                var fromLeftToRight = function () {
                    fromTo(#{LeftMultiSelect}, #{RightMultiSelect});
                }
                
                var fromRightToLeft = function () {
                    fromTo(#{RightMultiSelect}, #{LeftMultiSelect});
                }
                
                var allFromLeftToRight = function () {
                    #{LeftMultiSelect}.selectAll();
                    fromTo(#{LeftMultiSelect}, #{RightMultiSelect});
                }
    
                var allFromRightToLeft = function () {
                    #{RightMultiSelect}.selectAll();
                    fromTo(#{RightMultiSelect}, #{LeftMultiSelect});
                }
                
                var fromTo = function (fromMultiS, toMultiS) {
                    if (toMultiS.disabled) return;
                    var selectionsArray = fromMultiS.view.getSelectedIndexes();
                    var records = [];
                    var record;
                    if (selectionsArray.length > 0) {
                        for (var i = 0; i < selectionsArray.length; i++) {
                            record = fromMultiS.view.store.getAt(selectionsArray[i]);
                            records.push(record);
                        }
                        if (!toMultiS.allowDup) selectionsArray = [];
                        for (var i = 0; i < records.length; i++) {
                            record = records[i];
    
                            if (toMultiS.allowDup) {
                                var x = new Ext.data.Record();
                                record.id = x.id;
                                delete x;
                                toMultiS.view.store.add(record);
                            } else {
                                fromMultiS.view.store.remove(record);
                                toMultiS.view.store.add(record);
                                selectionsArray.push((toMultiS.view.store.getCount() - 1));
                            }
                        }
                    }
                    toMultiS.view.refresh();
                    fromMultiS.view.refresh();
                    if (toMultiS.toSortField) toMultiS.store.sort(toMultiS.toSortField, toMultiS.toSortDir);
                    if (toMultiS.allowDup) fromMultiS.view.select(selectionsArray);
                    else toMultiS.view.select(selectionsArray);
                }
            </script>
        </ext:XScript>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:TabPanel ID="TabPanel1" runat="server" Plain="true" Height="400" LayoutOnTabChange="true">
            <Items>
                <ext:Panel ID="Panel13" runat="server" Title="Drag/Drop (Insert Mode)" Padding="10">
                    <Items>
                        <ext:TableLayout ID="TableLayout5" runat="server" Columns="3">
                            <Cells>
                                <ext:Cell>
                                    <ext:Label runat="server" Html="<div class='label'>Available Items</div>" />
                                </ext:Cell>
                                <ext:Cell>
                                    <ext:Label runat="server" Html="<div class='label' style='width: 80px;'>Actions</div>" />
                                </ext:Cell>
                                <ext:Cell>
                                    <ext:Label runat="server" Html="<div class='label'>Selected Items</div>" />
                                </ext:Cell>
                                <ext:Cell>
                                    <ext:Panel runat="server" Border="false" BodyStyle="height: 260px;">
                                        <Items>
                                            <ext:MultiSelect ID="LeftMultiSelect" runat="server" DragGroup="grp1" DropGroup="grp2,grp1"
                                                Width="300" Height="250" KeepSelectionOnClick="WithCtrlKey">
                                                <Items>
                                                    <ext:ListItem Text="Item 1" Value="1" />
                                                    <ext:ListItem Text="Item 2" Value="2" />
                                                    <ext:ListItem Text="Item 3" Value="3" />
                                                    <ext:ListItem Text="Item 4" Value="4" />
                                                    <ext:ListItem Text="Item 5" Value="5" />
                                                    <ext:ListItem Text="Item 20" Value="20" />
                                                    <ext:ListItem Text="Item 30" Value="30" />
                                                    <ext:ListItem Text="Item 40" Value="40" />
                                                    <ext:ListItem Text="Item 50" Value="50" />
                                                    <ext:ListItem Text="Item 100" Value="100" />
                                                    <ext:ListItem Text="Item 200" Value="200" />
                                                    <ext:ListItem Text="Item 300" Value="300" />
                                                    <ext:ListItem Text="Item 400" Value="400" />
                                                    <ext:ListItem Text="Item 500" Value="500" />
                                                    <ext:ListItem Text="Item 1000" Value="1000" />
                                                    <ext:ListItem Text="Item 2000" Value="2000" />
                                                    <ext:ListItem Text="Item 3000" Value="3000" />
                                                    <ext:ListItem Text="Item 4000" Value="4000" />
                                                    <ext:ListItem Text="Item 5000" Value="5000" />
                                                    <ext:ListItem Text="Item 10000" Value="10000" />
                                                    <ext:ListItem Text="Item 20000" Value="20000" />
                                                    <ext:ListItem Text="Item 30000" Value="30000" />
                                                    <ext:ListItem Text="Item 40000" Value="40000" />
                                                    <ext:ListItem Text="Item 50000" Value="50000" />
                                                </Items>
                                            </ext:MultiSelect>
                                        </Items>
                                    </ext:Panel>
                                </ext:Cell>
                                <ext:Cell runat="server">
                                    <ext:Panel runat="server" Width="80" Layout="VBoxLayout" BodyStyle="height: 250px;">
                                        <Defaults>
                                            <ext:Parameter Name="margins" Value="0 0 5 0" Mode="Value" />
                                        </Defaults>
                                        <LayoutConfig>
                                            <ext:VBoxLayoutConfig Padding="5" Align="Center" />
                                        </LayoutConfig>
                                        <Items>
                                            <ext:Button runat="server" Text="->">
                                                <Listeners>
                                                    <Click Fn="fromLeftToRight"></Click>
                                                </Listeners>
                                            </ext:Button>
                                            <ext:Button runat="server" Text="<-">
                                                <Listeners>
                                                    <Click Fn="fromRightToLeft"></Click>
                                                </Listeners>
                                            </ext:Button>
                                            <ext:Button runat="server" Text=">>">
                                                <Listeners>
                                                    <Click Fn="allFromLeftToRight"></Click>
                                                </Listeners>
                                            </ext:Button>
                                            <ext:Button runat="server" Text="<<">
                                                <Listeners>
                                                    <Click Fn="allFromRightToLeft"></Click>
                                                </Listeners>
                                            </ext:Button>
                                        </Items>
                                    </ext:Panel>
                                </ext:Cell>
                                <ext:Cell>
                                    <ext:Panel runat="server" Border="false" BodyStyle="height: 260px;">
                                        <Items>
                                            <ext:MultiSelect ID="RightMultiSelect" runat="server" DragGroup="grp2" DropGroup="grp1,grp2"
                                                Width="300" Height="250" KeepSelectionOnClick="WithCtrlKey">
                                                <Items>
                                                    <ext:ListItem Text="Item 6" Value="6" />
                                                    <ext:ListItem Text="Item 7" Value="7" />
                                                    <ext:ListItem Text="Item 8" Value="8" />
                                                    <ext:ListItem Text="Item 9" Value="9" />
                                                    <ext:ListItem Text="Item 10" Value="10" />
                                                </Items>
                                            </ext:MultiSelect>
                                        </Items>
                                    </ext:Panel>
                                </ext:Cell>
                            </Cells>
                        </ext:TableLayout>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:TabPanel>
        </form>
    </body>
    </html>
  3. #3
    Hi Baidaly!

    Thanks a lot for your help and a well structured code sample! It seems like a fine working pattern handling adequately moves of several items. In my case, there's a possibility of having hundreds of items in either MultiSelect so performance of the move operations is important. Would it be possible to improve upon the looping logic efficiency? Please refer to the refined code sample below. I'm running my tests under IE9. Try the moving all button to observe performance degradation.
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.Store1;
                object[] obj = new object[1000];
    
                for (int i = 0; i < 1000; i++)
                {
                    obj[i] = new object[] { i + 1, "Item " + (i + 1).ToString() };
                }
    
                store.DataSource = obj;
                store.DataBind();
            }
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Overview of MultiSelect - Ext.NET Examples</title>
        <style type="text/css">
            .label
            {
                font: bold 11px tahoma,arial,sans-serif;
                width: 298px;
                height: 15px;
                padding: 5px 0;
                border: 1px dotted #99bbe8;
                color: #15428b;
                cursor: default;
                margin: 10px;
                background: #dfe8f6;
                text-align: center;
                margin-left: 0px;
            }
        </style>
        <ext:XScript ID="XScript1" runat="server">
        <script type="text/javascript" language="javascript">            
            var fromLeftToRight = function () {
                fromTo(#{LeftMultiSelect}, #{RightMultiSelect});
            };
                 
            var fromRightToLeft = function () {
                fromTo(#{RightMultiSelect}, #{LeftMultiSelect});
            };
                 
            var allFromLeftToRight = function () {
                #{LeftMultiSelect}.selectAll();
                fromTo(#{LeftMultiSelect}, #{RightMultiSelect});
                #{RightMultiSelect}.deselectAll();
            };
     
            var allFromRightToLeft = function () {
                #{RightMultiSelect}.selectAll();
                fromTo(#{RightMultiSelect}, #{LeftMultiSelect});
                #{LeftMultiSelect}.deselectAll();
            };
                 
            var fromTo = function (fromMultiS, toMultiS) {
                if (toMultiS.disabled) return;
                var selectionsArray = fromMultiS.view.getSelectedIndexes();
                var records = [];
                var record;
                if (selectionsArray.length > 0) {
                    for (var i = 0; i < selectionsArray.length; i++) {
                        record = fromMultiS.view.store.getAt(selectionsArray[i]);
                        records.push(record);
                    }
                    if (!toMultiS.allowDup) selectionsArray = [];
                    for (var i = 0; i < records.length; i++) {
                        record = records[i];
     
                        if (toMultiS.allowDup) {
                            var x = new Ext.data.Record();
                            record.id = x.id;
                            delete x;
                            toMultiS.view.store.add(record);
                        } else {
                            fromMultiS.view.store.remove(record);
                            toMultiS.view.store.add(record);
                            selectionsArray.push((toMultiS.view.store.getCount() - 1));
                        }
                    }
                }
                toMultiS.view.refresh();
                fromMultiS.view.refresh();
                if (toMultiS.toSortField) toMultiS.store.sort(toMultiS.toSortField, toMultiS.toSortDir);
                if (toMultiS.allowDup) fromMultiS.view.select(selectionsArray);
                else toMultiS.view.select(selectionsArray);
            };
        </script>
        </ext:XScript>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader IDProperty="id">
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="value" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:Store ID="Store2" runat="server">
            <Reader>
                <ext:ArrayReader IDProperty="id">
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="value" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:Panel ID="Panel13" runat="server" Title="Drag/Drop (Insert Mode)" Padding="10">
            <Items>
                <ext:TableLayout ID="TableLayout5" runat="server" Columns="3">
                    <Cells>
                        <ext:Cell ColSpan="2">
                            <ext:Label ID="Label9" runat="server" Html="<div class='label'>Available Items</div>" />
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Label ID="Label10" runat="server" Html="<div class='label'>Selected Items</div>" />
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Panel ID="Panel14" runat="server" Border="false" BodyStyle="height: 260px;">
                                <Items>
                                    <ext:MultiSelect ID="LeftMultiSelect" runat="server" StoreID="Store1" DragGroup="grp1"
                                        DropGroup="grp2,grp1" DataIndex="id" DisplayField="value" Width="300" Height="250"
                                        KeepSelectionOnClick="WithCtrlKey">
                                        <Items>
                                        </Items>
                                    </ext:MultiSelect>
                                </Items>
                            </ext:Panel>
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Panel runat="server" Border="false" Layout="VBoxLayout" BodyStyle="height: 260px;">
                                <Defaults>
                                    <ext:Parameter Name="margins" Value="0 0 5 0" Mode="Value" />
                                </Defaults>
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Padding="5" Align="Center" Pack="Center" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Button ID="ButtonOneRight" runat="server" Icon="ResultsetNext" Width="30" ToolTip="Select item">
                                        <Listeners>
                                            <Click Handler="fromLeftToRight()" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonAllRight" runat="server" Icon="ForwardBlue" Width="30" ToolTip="Select all items">
                                        <Listeners>
                                            <Click Handler="allFromLeftToRight()" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonOneLeft" runat="server" Icon="ResultsetPrevious" Width="30"
                                        ToolTip="Deselect item">
                                        <Listeners>
                                            <Click Handler="fromRightToLeft()" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonAllLeft" runat="server" Icon="RewindBlue" Width="30" ToolTip="Deselect all items">
                                        <Listeners>
                                            <Click Handler="allFromRightToLeft()" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Panel>
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Panel ID="Panel15" runat="server" Border="false" BodyStyle="height: 260px;">
                                <Items>
                                    <ext:MultiSelect ID="RightMultiSelect" runat="server" StoreID="Store2" DragGroup="grp2"
                                        DropGroup="grp1,grp2" Width="300" Height="250" KeepSelectionOnClick="WithCtrlKey"
                                        DataIndex="id" DisplayField="value">
                                        <Items>
                                        </Items>
                                    </ext:MultiSelect>
                                </Items>
                            </ext:Panel>
                        </ext:Cell>
                    </Cells>
                </ext:TableLayout>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
  4. #4
    Try this one, I checked it on my computer takes about second:

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.Store1;
                object[] obj = new object[1000];
     
                for (int i = 0; i < 1000; i++)
                {
                    obj[i] = new object[] { i + 1, "Item " + (i + 1).ToString() };
                }
     
                store.DataSource = obj;
                store.DataBind();
            }
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Overview of MultiSelect - Ext.NET Examples</title>
        <style type="text/css">
            .label
            {
                font: bold 11px tahoma,arial,sans-serif;
                width: 298px;
                height: 15px;
                padding: 5px 0;
                border: 1px dotted #99bbe8;
                color: #15428b;
                cursor: default;
                margin: 10px;
                background: #dfe8f6;
                text-align: center;
                margin-left: 0px;
            }
        </style>
        <ext:XScript ID="XScript1" runat="server">
        <script type="text/javascript" language="javascript">           
            var fromLeftToRight = function () {
                fromTo(#{LeftMultiSelect}, #{RightMultiSelect});
            };
                  
            var fromRightToLeft = function () {
                fromTo(#{RightMultiSelect}, #{LeftMultiSelect});
            };
                  
            var allFromLeftToRight = function () {
                moveAll(#{LeftMultiSelect}, #{RightMultiSelect});
                #{RightMultiSelect}.deselectAll();
            };
    
            var allFromRightToLeft = function () {
                moveAll(#{RightMultiSelect}, #{LeftMultiSelect});
                #{LeftMultiSelect}.deselectAll();
            };
    
            var moveAll = function (fromMultiS, toMultiS) {
                if (toMultiS.disabled) return;
                var selectionsArray = fromMultiS.view.getSelectedIndexes();
                var records = fromMultiS.store.getAllRange();
                for (var i = 0; i < records.length; i++) {
                    record = records[i];
                    if (toMultiS.allowDup) {
                        var x = new Ext.data.Record();
                        record.id = x.id;
                        delete x;
                        toMultiS.view.store.add(record);
                    } else {
                        fromMultiS.view.store.remove(record);
                        toMultiS.view.store.add(record);
                        selectionsArray.push((toMultiS.view.store.getCount() - 1));
                    }
                }
                toMultiS.view.refresh();
                fromMultiS.view.refresh();
                if (toMultiS.toSortField) toMultiS.store.sort(toMultiS.toSortField, toMultiS.toSortDir);
                if (toMultiS.allowDup) fromMultiS.view.select(selectionsArray);
                else toMultiS.view.select(selectionsArray);
            }
                  
            var fromTo = function (fromMultiS, toMultiS) {
                if (toMultiS.disabled) return;
                var selectionsArray = fromMultiS.view.getSelectedIndexes();
                var records = [];
                var record;
                if (selectionsArray.length > 0) {
                    for (var i = 0; i < selectionsArray.length; i++) {
                        record = fromMultiS.view.store.getAt(selectionsArray[i]);
                        records.push(record);
                    }
                    if (!toMultiS.allowDup) selectionsArray = [];
                    for (var i = 0; i < records.length; i++) {
                        record = records[i];
      
                        if (toMultiS.allowDup) {
                            var x = new Ext.data.Record();
                            record.id = x.id;
                            delete x;
                            toMultiS.view.store.add(record);
                        } else {
                            fromMultiS.view.store.remove(record);
                            toMultiS.view.store.add(record);
                            selectionsArray.push((toMultiS.view.store.getCount() - 1));
                        }
                    }
                }
                toMultiS.view.refresh();
                fromMultiS.view.refresh();
                if (toMultiS.toSortField) toMultiS.store.sort(toMultiS.toSortField, toMultiS.toSortDir);
                if (toMultiS.allowDup) fromMultiS.view.select(selectionsArray);
                else toMultiS.view.select(selectionsArray);
            };
        </script>
        </ext:XScript>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader IDProperty="id">
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="value" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:Store ID="Store2" runat="server">
            <Reader>
                <ext:ArrayReader IDProperty="id">
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="value" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:Panel ID="Panel13" runat="server" Title="Drag/Drop (Insert Mode)" Padding="10">
            <Items>
                <ext:TableLayout ID="TableLayout5" runat="server" Columns="3">
                    <Cells>
                        <ext:Cell ColSpan="2">
                            <ext:Label ID="Label9" runat="server" Html="<div class='label'>Available Items</div>" />
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Label ID="Label10" runat="server" Html="<div class='label'>Selected Items</div>" />
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Panel ID="Panel14" runat="server" Border="false" BodyStyle="height: 260px;">
                                <Items>
                                    <ext:MultiSelect ID="LeftMultiSelect" runat="server" StoreID="Store1" DragGroup="grp1"
                                        DropGroup="grp2,grp1" DataIndex="id" DisplayField="value" Width="300" Height="250"
                                        KeepSelectionOnClick="WithCtrlKey">
                                        <Items>
                                        </Items>
                                    </ext:MultiSelect>
                                </Items>
                            </ext:Panel>
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Panel runat="server" Border="false" Layout="VBoxLayout" BodyStyle="height: 260px;">
                                <Defaults>
                                    <ext:Parameter Name="margins" Value="0 0 5 0" Mode="Value" />
                                </Defaults>
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Padding="5" Align="Center" Pack="Center" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Button ID="ButtonOneRight" runat="server" Icon="ResultsetNext" Width="30" ToolTip="Select item">
                                        <Listeners>
                                            <Click Handler="fromLeftToRight()" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonAllRight" runat="server" Icon="ForwardBlue" Width="30" ToolTip="Select all items">
                                        <Listeners>
                                            <Click Handler="allFromLeftToRight()" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonOneLeft" runat="server" Icon="ResultsetPrevious" Width="30"
                                        ToolTip="Deselect item">
                                        <Listeners>
                                            <Click Handler="fromRightToLeft()" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonAllLeft" runat="server" Icon="RewindBlue" Width="30" ToolTip="Deselect all items">
                                        <Listeners>
                                            <Click Handler="allFromRightToLeft()" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Panel>
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Panel ID="Panel15" runat="server" Border="false" BodyStyle="height: 260px;">
                                <Items>
                                    <ext:MultiSelect ID="RightMultiSelect" runat="server" StoreID="Store2" DragGroup="grp2"
                                        DropGroup="grp1,grp2" Width="300" Height="250" KeepSelectionOnClick="WithCtrlKey"
                                        DataIndex="id" DisplayField="value">
                                        <Items>
                                        </Items>
                                    </ext:MultiSelect>
                                </Items>
                            </ext:Panel>
                        </ext:Cell>
                    </Cells>
                </ext:TableLayout>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
  5. #5
    Thanks! Indeed, moveAll() now performs much faster. Can we apply the same logic to fromTo() function because it's now lagging behind?
  6. #6
    I can try to improve this function, but I don't know now will it work or no. However, I will write you.
  7. #7
    Quote Originally Posted by Baidaly View Post
    I can try to improve this function, but I don't know now will it work or no. However, I will write you.
    I'm also not clear on the store sorting functionality. I've modified the example to have SortFields defined in the MultiSelects. However, this doesn't seem to work with button listeners. It works fine with item double-click and drag-and-drop though. What's missing there? Thanks for the help again Baidaly.
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.Store1;
                object[] obj = new object[1000];
    
                for (int i = 0; i < 1000; i++)
                {
                    obj[i] = new object[] { i + 1, "Item " + (i + 1).ToString() };
                }
    
                store.DataSource = obj;
                store.DataBind();
            }
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Overview of MultiSelect - Ext.NET Examples</title>
        <style type="text/css">
            .label
            {
                font: bold 11px tahoma,arial,sans-serif;
                width: 298px;
                height: 15px;
                padding: 5px 0;
                border: 1px dotted #99bbe8;
                color: #15428b;
                cursor: default;
                margin: 10px;
                background: #dfe8f6;
                text-align: center;
                margin-left: 0px;
            }
        </style>
        <ext:XScript ID="XScript1" runat="server">
        <script type="text/javascript" language="javascript">          
            var fromLeftToRight = function () {
                fromTo(#{LeftMultiSelect}, #{RightMultiSelect});
            };
                   
            var fromRightToLeft = function () {
                fromTo(#{RightMultiSelect}, #{LeftMultiSelect});
            };
                   
            var allFromLeftToRight = function () {
                moveAll(#{LeftMultiSelect}, #{RightMultiSelect});
                #{RightMultiSelect}.deselectAll();
            };
     
            var allFromRightToLeft = function () {
                moveAll(#{RightMultiSelect}, #{LeftMultiSelect});
                #{LeftMultiSelect}.deselectAll();
            };
     
            var moveAll = function (fromMultiS, toMultiS) {
                if (toMultiS.disabled) return;
                var selectionsArray = fromMultiS.view.getSelectedIndexes();
                var records = fromMultiS.store.getAllRange();
                for (var i = 0; i < records.length; i++) {
                    record = records[i];
                    if (toMultiS.allowDup) {
                        var x = new Ext.data.Record();
                        record.id = x.id;
                        delete x;
                        toMultiS.view.store.add(record);
                    } else {
                        fromMultiS.view.store.remove(record);
                        toMultiS.view.store.add(record);
                        selectionsArray.push((toMultiS.view.store.getCount() - 1));
                    }
                }
                toMultiS.view.refresh();
                fromMultiS.view.refresh();
                if (toMultiS.toSortField) toMultiS.store.sort(toMultiS.toSortField, toMultiS.toSortDir);
                if (toMultiS.allowDup) fromMultiS.view.select(selectionsArray);
                else toMultiS.view.select(selectionsArray);
            }
                   
            var fromTo = function (fromMultiS, toMultiS) {
                if (toMultiS.disabled) return;
                var selectionsArray = fromMultiS.view.getSelectedIndexes();
                var records = [];
                var record;
                if (selectionsArray.length > 0) {
                    for (var i = 0; i < selectionsArray.length; i++) {
                        record = fromMultiS.view.store.getAt(selectionsArray[i]);
                        records.push(record);
                    }
                    if (!toMultiS.allowDup) selectionsArray = [];
                    for (var i = 0; i < records.length; i++) {
                        record = records[i];
       
                        if (toMultiS.allowDup) {
                            var x = new Ext.data.Record();
                            record.id = x.id;
                            delete x;
                            toMultiS.view.store.add(record);
                        } else {
                            fromMultiS.view.store.remove(record);
                            toMultiS.view.store.add(record);
                            selectionsArray.push((toMultiS.view.store.getCount() - 1));
                        }
                    }
                }
                
                toMultiS.view.refresh();
                fromMultiS.view.refresh();
    
                if (fromMultiS.toSortField) 
                    fromMultiS.store.sort(fromMultiS.toSortField, fromMultiS.toSortDir);
                if (toMultiS.toSortField) 
                    toMultiS.store.sort(toMultiS.toSortField, toMultiS.toSortDir);
                
                if (toMultiS.allowDup)
                    fromMultiS.view.select(selectionsArray);
                else
                    toMultiS.view.select(selectionsArray);
            };
        </script>
        </ext:XScript>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader IDProperty="id">
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="value" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:Store ID="Store2" runat="server">
            <Reader>
                <ext:ArrayReader IDProperty="id">
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="value" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:Panel ID="Panel13" runat="server" Title="Drag/Drop (Insert Mode)" Padding="10">
            <Items>
                <ext:TableLayout ID="TableLayout5" runat="server" Columns="3">
                    <Cells>
                        <ext:Cell ColSpan="2">
                            <ext:Label ID="Label9" runat="server" Html="<div class='label'>Available Items</div>" />
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Label ID="Label10" runat="server" Html="<div class='label'>Selected Items</div>" />
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Panel ID="Panel14" runat="server" Border="false" BodyStyle="height: 260px;">
                                <Items>
                                    <ext:MultiSelect ID="LeftMultiSelect" runat="server" StoreID="Store1" DragGroup="grp1"
                                        DropGroup="grp2,grp1" DataIndex="id" DisplayField="value" Width="300" Height="250"
                                        KeepSelectionOnClick="WithCtrlKey" SortField="id">
                                        <Items>
                                        </Items>
                                    </ext:MultiSelect>
                                </Items>
                            </ext:Panel>
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Panel ID="Panel1" runat="server" Border="false" Layout="VBoxLayout" BodyStyle="height: 260px;">
                                <Defaults>
                                    <ext:Parameter Name="margins" Value="0 0 5 0" Mode="Value" />
                                </Defaults>
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Padding="5" Align="Center" Pack="Center" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Button ID="ButtonOneRight" runat="server" Icon="ResultsetNext" Width="30" ToolTip="Select item">
                                        <Listeners>
                                            <Click Handler="fromLeftToRight()" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonAllRight" runat="server" Icon="ForwardBlue" Width="30" ToolTip="Select all items">
                                        <Listeners>
                                            <Click Handler="allFromLeftToRight()" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonOneLeft" runat="server" Icon="ResultsetPrevious" Width="30"
                                        ToolTip="Deselect item">
                                        <Listeners>
                                            <Click Handler="fromRightToLeft()" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonAllLeft" runat="server" Icon="RewindBlue" Width="30" ToolTip="Deselect all items">
                                        <Listeners>
                                            <Click Handler="allFromRightToLeft()" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Panel>
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Panel ID="Panel15" runat="server" Border="false" BodyStyle="height: 260px;">
                                <Items>
                                    <ext:MultiSelect ID="RightMultiSelect" runat="server" StoreID="Store2" DragGroup="grp2"
                                        DropGroup="grp1,grp2" Width="300" Height="250" KeepSelectionOnClick="WithCtrlKey"
                                        DataIndex="id" DisplayField="value" SortField="id">
                                        <Items>
                                        </Items>
                                    </ext:MultiSelect>
                                </Items>
                            </ext:Panel>
                        </ext:Cell>
                    </Cells>
                </ext:TableLayout>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
  8. #8
    Try this one:

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.Store1;
                object[] obj = new object[1000];
      
                for (int i = 0; i < 1000; i++)
                {
                    obj[i] = new object[] { i + 1, "Item " + (i + 1).ToString() };
                }
      
                store.DataSource = obj;
                store.DataBind();
            }
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Overview of MultiSelect - Ext.NET Examples</title>
        <style type="text/css">
            .label
            {
                font: bold 11px tahoma,arial,sans-serif;
                width: 298px;
                height: 15px;
                padding: 5px 0;
                border: 1px dotted #99bbe8;
                color: #15428b;
                cursor: default;
                margin: 10px;
                background: #dfe8f6;
                text-align: center;
                margin-left: 0px;
            }
        </style>
        <ext:XScript ID="XScript1" runat="server">
        <script type="text/javascript" language="javascript">         
            var fromLeftToRight = function () {
                fromTo(#{LeftMultiSelect}, #{RightMultiSelect});
            };
                    
            var fromRightToLeft = function () {
                fromTo(#{RightMultiSelect}, #{LeftMultiSelect});
            };
                    
            var allFromLeftToRight = function () {
                moveAll(#{LeftMultiSelect}, #{RightMultiSelect});
                #{RightMultiSelect}.deselectAll();
            };
      
            var allFromRightToLeft = function () {
                moveAll(#{RightMultiSelect}, #{LeftMultiSelect});
                #{LeftMultiSelect}.deselectAll();
            };
      
            var moveAll = function (fromMultiS, toMultiS) {
                if (toMultiS.disabled) return;
                var records = fromMultiS.store.getAllRange();
                 
                fromMultiS.view.store.suspendEvents(true);
                toMultiS.view.store.suspendEvents(true);
                 
                fromMultiS.view.store.remove(records);
                toMultiS.view.store.add(records);
                 
                fromMultiS.view.store.resumeEvents();
                toMultiS.view.store.resumeEvents();
                 
                toMultiS.view.refresh();
                fromMultiS.view.refresh();
                if (toMultiS.toSortField) toMultiS.store.sort(toMultiS.toSortField, toMultiS.toSortDir);
                if (toMultiS.allowDup) fromMultiS.view.select(selectionsArray);
                else toMultiS.view.select(selectionsArray);
            }
                    
            var fromTo = function (fromMultiS, toMultiS) {
                if (toMultiS.disabled) return;
    
                var storeFrom = fromMultiS.view.store,
                    storeTo = toMultiS.view.store,
                    records = fromMultiS.view.getSelectedRecords();
    
                storeFrom.suspendEvents(true);
                storeFrom.remove(records);
                storeFrom.resumeEvents();
    
                storeTo.suspendEvents(true);
                storeTo.add(records);
                storeTo.resumeEvents();
            };
        </script>
        </ext:XScript>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader IDProperty="id">
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="value" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:Store ID="Store2" runat="server">
            <Reader>
                <ext:ArrayReader IDProperty="id">
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="value" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:Panel ID="Panel13" runat="server" Title="Drag/Drop (Insert Mode)" Padding="10">
            <Items>
                <ext:TableLayout ID="TableLayout5" runat="server" Columns="3">
                    <Cells>
                        <ext:Cell ColSpan="2">
                            <ext:Label ID="Label9" runat="server" Html="<div class='label'>Available Items</div>" />
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Label ID="Label10" runat="server" Html="<div class='label'>Selected Items</div>" />
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Panel ID="Panel14" runat="server" Border="false" BodyStyle="height: 260px;">
                                <Items>
                                    <ext:MultiSelect ID="LeftMultiSelect" runat="server" StoreID="Store1" DragGroup="grp1"
                                        DropGroup="grp2,grp1" DataIndex="id" DisplayField="value" Width="300" Height="250"
                                        KeepSelectionOnClick="WithCtrlKey">
                                        <Items>
                                        </Items>
                                    </ext:MultiSelect>
                                </Items>
                            </ext:Panel>
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Panel runat="server" Border="false" Layout="VBoxLayout" BodyStyle="height: 260px;">
                                <Defaults>
                                    <ext:Parameter Name="margins" Value="0 0 5 0" Mode="Value" />
                                </Defaults>
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Padding="5" Align="Center" Pack="Center" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Button ID="ButtonOneRight" runat="server" Icon="ResultsetNext" Width="30" ToolTip="Select item">
                                        <Listeners>
                                            <Click Handler="fromLeftToRight()" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonAllRight" runat="server" Icon="ForwardBlue" Width="30" ToolTip="Select all items">
                                        <Listeners>
                                            <Click Handler="allFromLeftToRight()" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonOneLeft" runat="server" Icon="ResultsetPrevious" Width="30"
                                        ToolTip="Deselect item">
                                        <Listeners>
                                            <Click Handler="fromRightToLeft()" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonAllLeft" runat="server" Icon="RewindBlue" Width="30" ToolTip="Deselect all items">
                                        <Listeners>
                                            <Click Handler="allFromRightToLeft()" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Panel>
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Panel ID="Panel15" runat="server" Border="false" BodyStyle="height: 260px;">
                                <Items>
                                    <ext:MultiSelect ID="RightMultiSelect" runat="server" StoreID="Store2" DragGroup="grp2"
                                        DropGroup="grp1,grp2" Width="300" Height="250" KeepSelectionOnClick="WithCtrlKey"
                                        DataIndex="id" DisplayField="value">
                                        <Items>
                                        </Items>
                                    </ext:MultiSelect>
                                </Items>
                            </ext:Panel>
                        </ext:Cell>
                    </Cells>
                </ext:TableLayout>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by Baidaly; Nov 06, 2012 at 5:33 AM.
  9. #9
    Hi all,

    Also you can replace this:
    for (var i = 0; i < selectionsArray.length; i++) {
         record = fromMultiS.view.store.getAt(selectionsArray[i]);
        records.push(record);
    }
    with
    records = fromMultiS.view.getSelectedRecords()
    Last edited by Daniil; Nov 06, 2012 at 1:52 PM.
  10. #10
    Thanks guys!

    I've modified the latest code sample posted as there was an omission of selectionsArray variable declaration. It seems to be working faster and correctly except for the store sorting functionality. For some reason, toMultiS.toSortField is undefined so the store is never sorted in manual move mode.

    Edit in: Ahh, that should be sortField and sortDir instead of toSortField and toSortDir. Now it's working. The sample below is updated.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.Store1;
                object[] obj = new object[1000];
    
                for (int i = 0; i < 1000; i++)
                {
                    obj[i] = new object[] { i + 1, "Item " + (i + 1).ToString() };
                }
    
                store.DataSource = obj;
                store.DataBind();
            }
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Overview of MultiSelect - Ext.NET Examples</title>
        <style type="text/css">
            .label
            {
                font: bold 11px tahoma,arial,sans-serif;
                width: 298px;
                height: 15px;
                padding: 5px 0;
                border: 1px dotted #99bbe8;
                color: #15428b;
                cursor: default;
                margin: 10px;
                background: #dfe8f6;
                text-align: center;
                margin-left: 0px;
            }
        </style>
        <ext:XScript ID="XScript1" runat="server">
        <script type="text/javascript" language="javascript">          
            var fromLeftToRight = function () {
                fromTo(#{LeftMultiSelect}, #{RightMultiSelect});
            };
                   
            var fromRightToLeft = function () {
                fromTo(#{RightMultiSelect}, #{LeftMultiSelect});
            };
                   
            var allFromLeftToRight = function () {
                moveAll(#{LeftMultiSelect}, #{RightMultiSelect});
                #{RightMultiSelect}.deselectAll();
            };
     
            var allFromRightToLeft = function () {
                moveAll(#{RightMultiSelect}, #{LeftMultiSelect});
                #{LeftMultiSelect}.deselectAll();
            };
     
            var moveAll = function (fromMultiS, toMultiS) {
                if (toMultiS.disabled) return;
                var selectionsArray = fromMultiS.view.getSelectedIndexes();
                var records = fromMultiS.store.getAllRange();
                
                fromMultiS.view.store.suspendEvents(true);
                toMultiS.view.store.suspendEvents(true);
                  
                fromMultiS.view.store.remove(records);
                toMultiS.view.store.add(records);
                  
                fromMultiS.view.store.resumeEvents();
                toMultiS.view.store.resumeEvents();
                  
                toMultiS.view.refresh();
                fromMultiS.view.refresh();
                if (toMultiS.sortField) toMultiS.store.sort(toMultiS.sortField, toMultiS.sortDir);
                if (toMultiS.allowDup) fromMultiS.view.select(selectionsArray);
                else toMultiS.view.select(selectionsArray);
            }
                   
            var fromTo = function (fromMultiS, toMultiS) {
                if (toMultiS.disabled) return;
                var selectionsArray = fromMultiS.view.getSelectedIndexes();
     
                var storeFrom = fromMultiS.view.store,
                    storeTo = toMultiS.view.store,
                    records = fromMultiS.view.getSelectedRecords();
     
                storeFrom.suspendEvents(true);
                storeFrom.remove(records);
                storeFrom.resumeEvents();
     
                storeTo.suspendEvents(true);
                storeTo.add(records);
                storeTo.resumeEvents();
    
                if (toMultiS.sortField) toMultiS.store.sort(toMultiS.sortField, toMultiS.sortDir);
                if (toMultiS.allowDup) fromMultiS.view.select(selectionsArray);
            };
        </script>
        </ext:XScript>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader IDProperty="id">
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="value" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:Store ID="Store2" runat="server">
            <Reader>
                <ext:ArrayReader IDProperty="id">
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="value" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:Panel ID="Panel13" runat="server" Title="Drag/Drop (Insert Mode)" Padding="10">
            <Items>
                <ext:TableLayout ID="TableLayout5" runat="server" Columns="3">
                    <Cells>
                        <ext:Cell ColSpan="2">
                            <ext:Label ID="Label9" runat="server" Html="<div class='label'>Available Items</div>" />
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Label ID="Label10" runat="server" Html="<div class='label'>Selected Items</div>" />
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Panel ID="Panel14" runat="server" Border="false" BodyStyle="height: 260px;">
                                <Items>
                                    <ext:MultiSelect ID="LeftMultiSelect" runat="server" StoreID="Store1" DragGroup="grp1"
                                        DropGroup="grp2,grp1" DataIndex="id" DisplayField="value" Width="300" Height="250"
                                        KeepSelectionOnClick="WithCtrlKey" SortField="id">
                                        <Items>
                                        </Items>
                                    </ext:MultiSelect>
                                </Items>
                            </ext:Panel>
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Panel ID="Panel1" runat="server" Border="false" Layout="VBoxLayout" BodyStyle="height: 260px;">
                                <Defaults>
                                    <ext:Parameter Name="margins" Value="0 0 5 0" Mode="Value" />
                                </Defaults>
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Padding="5" Align="Center" Pack="Center" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Button ID="ButtonOneRight" runat="server" Icon="ResultsetNext" Width="30" ToolTip="Select item">
                                        <Listeners>
                                            <Click Handler="fromLeftToRight()" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonAllRight" runat="server" Icon="ForwardBlue" Width="30" ToolTip="Select all items">
                                        <Listeners>
                                            <Click Handler="allFromLeftToRight()" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonOneLeft" runat="server" Icon="ResultsetPrevious" Width="30"
                                        ToolTip="Deselect item">
                                        <Listeners>
                                            <Click Handler="fromRightToLeft()" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonAllLeft" runat="server" Icon="RewindBlue" Width="30" ToolTip="Deselect all items">
                                        <Listeners>
                                            <Click Handler="allFromRightToLeft()" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Panel>
                        </ext:Cell>
                        <ext:Cell>
                            <ext:Panel ID="Panel15" runat="server" Border="false" BodyStyle="height: 260px;">
                                <Items>
                                    <ext:MultiSelect ID="RightMultiSelect" runat="server" StoreID="Store2" DragGroup="grp2"
                                        DropGroup="grp1,grp2" Width="300" Height="250" KeepSelectionOnClick="WithCtrlKey"
                                        DataIndex="id" DisplayField="value" SortField="id">
                                        <Items>
                                        </Items>
                                    </ext:MultiSelect>
                                </Items>
                            </ext:Panel>
                        </ext:Cell>
                    </Cells>
                </ext:TableLayout>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by vadym.f; Nov 06, 2012 at 1:25 PM.

Similar Threads

  1. [CLOSED] Programmatically adding items to a SelectBox
    By marco.morreale in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 06, 2012, 9:37 AM
  2. Replies: 3
    Last Post: Oct 16, 2011, 5:46 PM
  3. [CLOSED] Moving items between Two Grids
    By jeremyl in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 07, 2010, 10:14 AM
  4. How to add items to a MultiSelect??
    By javito in forum 1.x Help
    Replies: 1
    Last Post: May 06, 2010, 5:57 PM
  5. Replies: 0
    Last Post: Jun 03, 2009, 5:30 PM

Tags for this Thread

Posting Permissions