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

  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 21, 2020 at 12:51 AM.
  2. #2
    Hi MidnightRiders. Thanks for the sample. This doesn't look like a straightforward task. It's going to take us more time to run some tests and try to come up with some options. We will post a follow-up soon.
    Geoffrey McGill
    Founder & CEO
  3. #3
    Hello @MidnightRiders!

    There may be missing bits from your question, but as far as I could understand, I can't see how this could be done.

    How is the interface supposed to guess which rows you want to move around if the current selection is not what you want?

    Anyway, this is not supported by the GridDragDrop plugin used in the example you provided.

    Thinking on possibilities, you may have some "heuristic" to base when allowing grid rows to be dragged; for instance, from the current selection, allow dragging only odd numbers for the "Qty" column.

    Alternatively, you may want a "second selection" to arbitrarily select which rows are to be dragged around without affecting the current grid selection. I see this one possible, for example, if you add a checkbox column to your grid, then base the drag-drop process on which ones are "checked". You may need to have an empty field in the grid's model (the list of fields it should get from server) to serve as placeholder for the current set of checked rows for that check column.

    No matter which scenario above is closer to your needs, the GridDragDrop plug in is still not able to arbitrarily mangle the selection. You may either extend the plug in to add code to check whether a row within grid's selection -- or based on check column values -- should be included or not in the drag process.

    So, while this is not impossible, it is still not supported by what Ext.NET has to offer without some code development, unfortunately. Well, that is, if I really could understand your needs. If you think the answer is a little off, let us know and add a little more detail so we could better understand you.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

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

Posting Permissions