What's New?

[CLOSED] Sync Row Selection Across 2 grids

  1. #1
    Jul 29, 2011, 6:17 PM

    [CLOSED] Sync Row Selection Across 2 grids

    Hi, I have 2 grid panels.
    When I select a row in 1, I would like to also select the row in the other grid.
    Vice-Versa.the problem naturally is that selecting 1 fires off the row select of the other...endless loop..how can I cancel the row select event after selecting a row?


    
function SyncSelections(dir) {  
if (dir=='l')
{
    Grid2.getSelectionModel().clearSelections();
    for (var x = 0; x <= Grid2.getStore().getTotalCount() - 1; x++) {
        if (Grid1.getSelectionModel().isSelected(x))
            Grid2.getSelectionModel().selectRow(x, true);
    }
}
else
    Grid1.getSelectionModel().clearSelections();
    for (var x = 0; x <= Grid1.getStore().getTotalCount() - 1; x++) {
        if (Grid2.getSelectionModel().isSelected(x))
            Grid1.getSelectionModel().selectRow(x, true);
    }


}
    The row selection model of each grid is as follows:

    Grid1
    
  <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" SingleSelect="true" > 
                  <Listeners>
                     <RowSelect Handler="SyncSelections('r')" />
                  </Listeners>
                </ext:RowSelectionModel>
            </SelectionModel>
    Grid2
    
  <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" SingleSelect="true" > 
                  <Listeners>
                     <RowSelect Handler="SyncSelections('l')" />
                  </Listeners>
                </ext:RowSelectionModel>
            </SelectionModel>
    Last edited by Daniil; Aug 02, 2011 at 2:02 PM. Reason: [CLOSED]
  2. #2
    Jul 29, 2011, 8:01 PM
    Hi,

    I'd implement this requirement this way.

    Example

    <%@ 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)
        {
            this.Store1.DataSource = new object[] 
            { 
                new object[] {"test11", "test12", "test13"},
                new object[] {"test21", "test22", "test23"},
                new object[] {"test31", "test32", "test33"},
            };
            this.Store1.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 runat="server">
    <title>Ext.Net Example</title>

    <script type="text/javascript">
        var onSelectionChange = function (sourceSm, destSm) {
            var r = sourceSm.getSelected();
            destSm.suspendEvents();
            if (r) {
                destSm.selectRow(destSm.grid.getStore().indexOf(r));
            } else {
                destSm.clearSelections();    
            }
            destSm.resumeEvents();
        }
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="test1" />
                        <ext:RecordField Name="test2" />
                        <ext:RecordField Name="test3" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" AutoHeight="true">
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" SingleSelect="true">
                    <Listeners>
                        <SelectionChange Handler="onSelectionChange(this, GridPanel2.getSelectionModel());" />
                    </Listeners>
                </ext:RowSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
        <ext:GridPanel ID="GridPanel2" runat="server" StoreID="Store1" AutoHeight="true">
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server">
                    <Listeners>
                        <SelectionChange Handler="onSelectionChange(this, GridPanel1.getSelectionModel());" />
                    </Listeners>
                </ext:RowSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
    </form>
</body>
</html>

Similar Threads

  1. [CLOSED] Sync grouping of 2 different grids
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 14, 2011, 3:58 PM
  2. [CLOSED] Sync Scroll 2 Grids
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 07, 2011, 4:16 PM
  3. [CLOSED] how to sync size textfield in Gridpanel
    By skyone in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jul 22, 2010, 4:23 PM
  4. sync callback
    By gisxiaowei in forum 1.x Help
    Replies: 0
    Last Post: Aug 20, 2009, 11:50 AM
  5. Examples - Community DLL in sync?
    By Tbaseflug in forum 1.x Help
    Replies: 0
    Last Post: Feb 17, 2009, 1:40 PM

Posting Permissions