How to select one record out of 4 selected records and drag from one grid to sec grid (without un select of 3 records).

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1

    How to perform drag and drop of a subset of records from one grid to another while maintaining row selection

    Hi Team,

    Can you please help me and suggest me?

    While records 0, 1, 3, 4, 5, 6 are selected in the left grid, how can I drag and drop records 1, 4, 8, 9 to the right grid without affecting the selection in the left grid?

    We are already using the <SelectionModel> property to achieve selection in the left grid and do not want to change that.



    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            List<object> data = new List<object>();
    
            for (int i = 0; i < 10; i++)
            {
                data.Add(new
                {
                    Name = "Rec " + i,
                    Qty = i.ToString(),
                    Column2 = i.ToString()
                });
            }
    
            this.Store1.DataSource = data;
            this.Store1.DataBind();
    
            RowSelectionModel sm = this.GridPanel1.GetSelectionModel() as RowSelectionModel;
    
            for (int i = 0; i < 10; i++)
            {
                if (i != 2 && i != 7 && i != 8 && i != 9)
                    sm.SelectedRows.Add(new SelectedRow(i));
            }
            sm.UpdateSelection();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Drag and Drop from GridPanel to GridPanel - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
                var onLeftDeSelect = function (editor, e)
                {   
                    var GroupLeftQty = parseFloat(#{txtGroupLeftQty}.getValue()) - parseFloat(e.data.Qty);
                    GroupLeftQty = (parseFloat(GroupLeftQty).toFixed(2) <= 0.00) ? 0 : GroupLeftQty;
                    #{txtGroupLeftQty}.setValue(GroupLeftQty); 
                };
    
                var onLeftSelect = function (editor, e) 
                { 
                    var GroupLeftQty = parseFloat(#{txtGroupLeftQty}.getValue()) + parseFloat(e.data.Qty);                
                    #{txtGroupLeftQty}.setValue(GroupLeftQty); 
                };
                var onRightDeSelect = function (editor, e)
                {   
                    var GroupRightQty = parseFloat(#{txtGroupRightQty}.getValue()) - parseFloat(e.data.Qty);
                    GroupRightQty = (parseFloat(GroupRightQty).toFixed(2) <= 0.00) ? 0 : GroupRightQty;
                    #{txtGroupRightQty}.setValue(GroupRightQty); 
                };
    
                var onRightSelect = function (editor, e) 
                { 
                    var GroupRightQty = parseFloat(#{txtGroupRightQty}.getValue()) + parseFloat(e.data.Qty);                
                    #{txtGroupRightQty}.setValue(GroupRightQty); 
                };      
             </script>
        </ext:XScript>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>Drag and Drop from GridPanel to GridPanel</h1>
    
            <p>This example shows how to setup two way drag and drop from one GridPanel to another.</p>
    
            <ext:Panel runat="server" Width="650" Height="300">
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Align="Stretch" Padding="5" />
                </LayoutConfig>
                <Items>
                    <ext:GridPanel
                        ID="GridPanel1"
                        runat="server"
                        MultiSelect="true"
                        Flex="1"
                        Title="Left"
                        MarginSpec="0 2 0 0">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Qty" />
                                            <ext:ModelField Name="Column2" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                            <Columns>
                                <ext:Column runat="server" Text="Record Name" Width="160" DataIndex="Name" Flex="1" />
                                <ext:Column runat="server" Text="Qty" Width="60" DataIndex="Qty" />
                                <ext:Column runat="server" Text="Column 2" Width="60" DataIndex="Column2" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:CheckboxSelectionModel runat="server" Mode="Multi" CheckOnly="true">
                                <Listeners>
                                    <Deselect Fn="onLeftDeSelect" />
                                    <Select Fn="onLeftSelect" />
                                </Listeners>
                            </ext:CheckboxSelectionModel>
                        </SelectionModel>
                        <View>
                            <ext:GridView runat="server">
                                <Plugins>
                                    <ext:GridDragDrop runat="server" DragGroup="firstGridDDGroup" DropGroup="secondGridDDGroup" />
                                </Plugins>
                            </ext:GridView>
                        </View>
                    </ext:GridPanel>
                    <ext:GridPanel
                        ID="GridPanel2"
                        runat="server"
                        MultiSelect="true"
                        Title="Right"
                        Flex="1"
                        MarginSpec="0 0 0 3">
                        <Store>
                            <ext:Store ID="Store2" runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Qty" />
                                            <ext:ModelField Name="Column2" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                            <Columns>
                                <ext:Column runat="server" Text="Record Name" Width="160" DataIndex="Name" Flex="1" />
                                <ext:Column runat="server" Text="Qty" Width="60" DataIndex="Qty" />
                                <ext:Column runat="server" Text="Column 2" Width="60" DataIndex="Column2" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:CheckboxSelectionModel runat="server" Mode="Multi" CheckOnly="true">
                                <Listeners>
                                    <Deselect Fn="onRightDeSelect" />
                                    <Select Fn="onRightSelect" />
                                </Listeners>
                            </ext:CheckboxSelectionModel>
                        </SelectionModel>
                        <View>
                            <ext:GridView runat="server">
                                <Plugins>
                                    <ext:GridDragDrop runat="server" DragGroup="secondGridDDGroup" DropGroup="firstGridDDGroup" />
                                </Plugins>
                            </ext:GridView>
                        </View>
                    </ext:GridPanel>
                </Items>
                <BottomBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:ToolbarFill runat="server" />
                            <ext:Label ID="left" runat="server" Text="Left Qty" />
                            <ext:TextField ID="txtGroupLeftQty" runat="server" Width="175px" Text="0" ReadOnly="true" />
                            <ext:Label ID="right" runat="server" Text="Right Qty" />
                            <ext:TextField ID="txtGroupRightQty" runat="server" Width="175px" Text="0" ReadOnly="true" />
                            <ext:Button runat="server" Text="Reset both grids">
                                <Listeners>
                                    <Click Handler="#{Store1}.loadData(#{Store1}.proxy.data); #{Store2}.removeAll();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by geoffrey.mcgill; Jan 20, 2020 at 11:51 PM.

Similar Threads

  1. Replies: 11
    Last Post: Oct 11, 2018, 3:34 PM
  2. [CLOSED] GridPanel with CheckboxSelectionModel: select records
    By Leonid_Veriga in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 09, 2012, 11:41 AM
  3. [CLOSED] GridPanel with CheckboxSelectionModel: select and deselect records
    By Leonid_Veriga in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 09, 2012, 11:40 AM
  4. Replies: 3
    Last Post: Jun 29, 2010, 2:54 PM
  5. [CLOSED] Get selected records of grid in a iframe
    By Sharon in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 26, 2009, 2:27 PM

Posting Permissions