Move rows between grids

**fquintero** · Oct 31, 2008, 11:51 AM

Hi,

I'm and my company are very interesting in coolite library, and in this moment we are develop a custom control with two grids. In the fist grid appear the available items, and the second grid only appear the first grid selected elements.

Drag and Drop will work for my, but I need implement the same function with buttons (>,>>,<,<< ).

How I can move rows between grids in client side?

Thanks!

**Vladimir** · Oct 31, 2008, 6:49 PM

Hi,

I wrote a simple example which shows how to move rows between grids

<%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!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>Coolite Toolkit Example</title>
    
    <script type="text/javascript">
        function add(source, destination) {
            if (source.hasSelection()) {
                destination.store.add(source.selModel.getSelections());
                source.deleteSelected();
            }
        }

        function addAll(source, destination) {
            destination.store.add(source.store.getRange());
            source.store.removeAll();
        }

        function remove(source, destination) {
            add(destination, source);
        }

        function removeAll(source, destination) {
            addAll(destination, source);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        
         <asp:XmlDataSource 
            ID="XmlDataSource1" 
            runat="server" 
            DataFile="Countries.xml" 
            TransformFile="Countries.xsl"
         />
         
        <ext:Store runat="server" ID="Store1" DataSourceID="XmlDataSource1">
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="Name" />                        
                    </Fields>
                </ext:JsonReader>
            </Reader>
            <SortInfo Field="Name" Direction="ASC" />            
        </ext:Store>
        
        <ext:Store runat="server" ID="Store2">
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="Name" />                        
                    </Fields>
                </ext:JsonReader>
            </Reader>         
        </ext:Store>
        
        <ext:Window ID="Window1" runat="server" 
            Show&#111;nload="true"
            Resizable="false"
            Closable="false"
            Height="500"
            Width="700"
            Title="Countries"
        >
            <Body>
                <ext:ColumnLayout runat="server">
                    <ext:LayoutColumn ColumnWidth="0.5">
                       <ext:GridPanel 
                            runat="server" 
                            ID="SourceGrid" 
                            Height="469"
                            AutoExpandColumn="Country" 
                            Frame="true" 
                            StoreID="Store1"
                            >
                            <ColumnModel runat="server">
                                <Columns>
                                    <ext:Column ColumnID="Country" Header="Country Name" DataIndex="Name" Sortable="true" />                   
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                            </SelectionModel>  
                        </ext:GridPanel>
                    </ext:LayoutColumn>
                    
                    <ext:LayoutColumn>
                        <ext:Panel ID="Panel2" runat="server" Width="30" Height="469" BodyStyle="padding:0px 2px;background-color:transparent;">
                            <Body>
                                <ext:AnchorLayout runat="server">
                                    <ext:Anchor Vertical="40%"><ext:Panel runat="server" Border="false" BodyStyle="background-color:transparent;"/></ext:Anchor>
                                    
                                    <ext:Anchor>
                                        <ext:Panel ID="Panel1" runat="server" Border="false">
                                            <Body>
                                                <ext:Button runat="server" Icon="ResultsetNext">
                                                    <Listeners>
                                                        <Click Handler="add(#{SourceGrid}, #{DestinationGrid});" />
                                                    </Listeners>
                                                    <ToolTips>
                                                        <ext:ToolTip runat="server" Title="Add" Html="Add selected rows"/>
                                                    </ToolTips>
                                                </ext:Button>
                                                <ext:Button runat="server" Icon="ResultsetLast">
                                                    <Listeners>
                                                        <Click Handler="addAll(#{SourceGrid}, #{DestinationGrid});" />
                                                    </Listeners>
                                                    <ToolTips>
                                                        <ext:ToolTip runat="server" Title="Add all" Html="Add all rows"/>
                                                    </ToolTips>
                                                </ext:Button>
                                                <ext:Button runat="server" Icon="ResultsetPrevious">
                                                    <Listeners>
                                                        <Click Handler="remove(#{SourceGrid}, #{DestinationGrid});" />
                                                    </Listeners>
                                                    <ToolTips>
                                                        <ext:ToolTip runat="server" Title="Remove" Html="Remove selected rows"/>
                                                    </ToolTips>
                                                </ext:Button>
                                                <ext:Button runat="server" Icon="ResultsetFirst">
                                                    <Listeners>
                                                        <Click Handler="removeAll(#{SourceGrid}, #{DestinationGrid});" />
                                                    </Listeners>
                                                    <ToolTips>
                                                        <ext:ToolTip runat="server" Title="Remove all" Html="Remove all rows"/>
                                                    </ToolTips>
                                                </ext:Button>
                                            </Body>
                                        </ext:Panel>
                                    </ext:Anchor>

                                </ext:AnchorLayout>
                            </Body>
                        </ext:Panel>
                    </ext:LayoutColumn>
                    
                    <ext:LayoutColumn ColumnWidth="0.5">
                        <ext:GridPanel 
                            runat="server" 
                            ID="DestinationGrid" 
                            Height="469"
                            AutoExpandColumn="Country" 
                            Frame="true" 
                            StoreID="Store2"
                            >
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
                                    <ext:Column ColumnID="Country" Header="Country Name" DataIndex="Name" Sortable="true" />                   
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" />
                            </SelectionModel>  
                        </ext:GridPanel>
                    </ext:LayoutColumn>
                </ext:ColumnLayout>              
            </Body>        
        </ext:Window>
        
        
        
    </form>
</body>
</html>

**fquintero** · Nov 02, 2008, 1:47 AM

Thanks for your help!!!

**fquintero** · Nov 07, 2008, 12:24 AM

Hi.

Now I have other problems:
First: Auto Width doesn't work, when I resize the window, the columns doesn't ajust automatically. I put the gridpanel into window control, auto fit, and out of there and the result is the same.

second (very important): When I put the checkbox SelectionMode to ext:CheckboxSelectionModel, the rows doesn't appear, and the browser shows this error: "this.ds.fields.get(C) is undefined".

I use a json reader, and only this selectionMode doesn't Work.

Thanks for your replies!!!

**fquintero** · Nov 07, 2008, 2:38 AM

Hi,

I resolve the error, and the javascript provide for you is wrong.

This is the correct

        function add(source, destination) {
            if (source.selModel.hasSelection()) {
                destination.store.add(source.selModel.getSelections());
                source.selModel.each(function(sele){source.store.remove(sele)});
                //source.store.commitChanges();
                //destination.store.commitChanges();
            }
            
        }

        function addAll(source, destination) {
            destination.store.add(source.store.getRange());
            source.store.removeAll();
        }

        function remove(source, destination) {
            add(destination, source);
        }

        function removeAll(source, destination) {
            addAll(destination, source);
        }

It's works, but I need to obtain all elements in the destination grid in server-side.

After move the rows between grids, when I try to sort the destination grid, all elements are deleted.

I try with store.commitChanges() method, but doesn't work (this method restore the original elements in the source grid).

¿How implement the commitMethod with server-side action? Thanks!!!

**methode** · Nov 13, 2008, 2:53 PM

Hi Vlad,

me too, I was working with TwoGrids, and need to pass data (rows) of the DestinationGrid to the server side code.
I found a rough solution, is there a better way? My code below:

Every time 'add' function is call I also add values to an ext:Hidden field


//JS Code

function setHiddenValues()
        {
            HD_Field.value = '';
            var result = Store2.query("Name", name);

            for (var i = 0; i < result.items.length; i++)
            {
                HD_Field.value += result.items[i].get("Name") + ',';
            }

            //alert(HD_Field.value); //for test
        }

function add(source, destination) {
            if (source.hasSelection()) {
                destination.store.add(source.selModel.getSelections());
                source.deleteSelected();
            }

           setHiddenValues()
        }

...

<ext:Hidden ID="HD_Field" EnableViewState="true" runat="server"></ext:Hidden>

Ext Button with AjaxEvent


<ext:Button ID="BT_Show" runat="server" Text="Submit">
                                    <AjaxEvents>
                                        <Click OnEvent="BT_Show_Click">
                                            <ExtraParams>
                                                <ext:Parameter Name="listSelected" Value="={#{HD_Field}.value}" />
                                            </ExtraParams>
                                        </Click>
                                    </AjaxEvents>
                                </ext:Button>

// in codebehind

protected void BT_Show_Click(object sender, AjaxEventArgs e)
        {
            this.Label1.Text = e.ExtraParams["listSelected"];
            
            
        }

Thanx a lot

Matteo

**Vladimir** · Nov 13, 2008, 3:00 PM

Hi,

Just call save method for GridPanel and on server side handled OnBeforeStoreChanged event. In this even you can get changed data as Json, Xml or as Object (of have class on which you can mapped row json data)

Please the following example

https://examples1.ext.net/#/GridPane...reCustomLogic/

**fquintero** · Nov 19, 2008, 12:53 PM

Hi vladsh,

I try to implement the code, but I need some aclarations.

First, the OnBeforeStoreChanged approach have an defect: Need a server-side action with ever action (move rows), and generate an postback.

I use two datatables, each one is associated with an Store. In server-side, I move rows between datatables, and its works, but when I try to use the client-side grids, the state is not updated.
Then I set the store property RefreshAfterSaving="Always", and its load two times the page and show a "blink" in two grids.

I followed the example and I try to use an data-object in the StoreDataHandler.objectData method but it doesn't fill the object properties. It's works for me using a hashtable object.

My questions are:
- ¿How I can work in client-side mode, and read the moved elements only when I make a postback?
- ¿How I can update the state of the grids without refresh two times the page?
- ¿How implement an data-object in the objectData method?.

Thanks for your reply.

**fquintero** · Nov 20, 2008, 11:21 AM

Hi guys,

After hours and hours of hard work, I found a bug in coolite Ver 0.6.0.

The problem is when I set RemoteSort property to false, the generated extjs javascript say "remoteSort:true". To fix this bug, i had to use this tags into <ext:Store> tag:

            <CustomConfig>
            <ext:ConfigItem Name="remoteSort" Value="false" />
            </CustomConfig>

And now the client-side move rows works fine. (preserves the moved rows when apply sort, etc.).

I have other issue, How I can read in server-side, after a button postback, all destination rows?

Thanks for your reply!

**geoffrey.mcgill** · Nov 20, 2008, 11:29 AM

Hi all,

We're working on an update to this multi-grid sample. We will post the code here and will be uploading to the examples explorer.

Thread: Move rows between grids

Thread Tools

Search Thread

Display

Move rows between grids

RE: Move rows between grids

RE: Move rows between grids

RE: Move rows between grids

RE: Move rows between grids

RE: Move rows between grids

RE: Move rows between grids

RE: Move rows between grids

RE: Move rows between grids

RE: Move rows between grids

Similar Threads

[CLOSED] GridPanel.Rows.Changing Background Color of Rows

GridPanel move rows drag and drop

two grids rows

Grid rows move up and down + mvc

[CLOSED] Gridpanel Rows Move

Posting Permissions

Sitemap

Downloads

Resources

Thread: Move rows between grids

Move rows between grids

RE: Move rows between grids

RE: Move rows between grids

RE: Move rows between grids

RE: Move rows between grids

RE: Move rows between grids

RE: Move rows between grids

RE: Move rows between grids

RE: Move rows between grids

RE: Move rows between grids

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us