[CLOSED] Problem with a relations with 2 (or more) Gridpanels according to their elements

**opendat2000** · Apr 25, 2016, 1:18 PM

hi guys,

The problem is when I have 2 Gridpanel with diferents data (generate with same "PK", the name) and I select one row (cell) in Grid 1, the system show me a window with the Grid 2, displayed me the data in this grid, but with wrong page.

I dont want to use a filter, I want to when I select one Row in Grid 1, this show me my selection in Grid 2 with the new Data.(the system have to generate all the data).

a little sequence:

Click image for larger version.

Name: Example2_SelectionGrid1_desc.jpg
Views: 49
Size: 40.5 KB
ID: 24576

Click image for larger version.

Name: Example2_SelectionGrid2_desc.jpg
Views: 61
Size: 66.5 KB
ID: 24577

the correct sequence how the system should work:

Click image for larger version.

Name: Example2_SelectionGrid2_descCorrect.JPG
Views: 41
Size: 55.2 KB
ID: 24578

Can I manipulate the page or find the elements with a tool of gridpanel?

I am a rookie in this Ext.Net World, so is possible that is a very simple issue but I really need a help.

thanks a lot.

code:

<%@ 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[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" }
            };

            this.Store3.DataSource = new object[]
            {
                new object[] { "3m Co","yes"},
                new object[] { "Alcoa Inc", "no"},
                new object[] { "Altria Group Inc", "no"},
                new object[] { "American Express Company", "yes" },
                new object[] { "American International Group, Inc.", "no" },
                new object[] { "AT&T Inc.", "no"},
                new object[] { "Boeing Co.", "yes"},
                new object[] { "Caterpillar Inc.", "yes" },
                new object[] { "Citigroup, Inc.", "yes" },
                new object[] { "E.I. du Pont de Nemours and Company", "no" }
            };
            this.Store1.DataBind();
            this.Store3.DataBind();
        }
    }
    protected void RowSelectionModel_Select(object sender, DirectEventArgs e)
    {
        Window1.Show();
    }
    
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Connection 2 grid</title>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="Begin... choose one except the first page..."
            Width="600"
            Height="200"
            Region="Center">
            <Store>
                <ext:Store ID="Store1" runat="server" PageSize="2">
                    
                    <Model>
                        <ext:Model ID="Model1" runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>

                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ID="Column1" runat="server"
                        Text="Company"
                        Width="160"
                        DataIndex="company"
                        Flex="1" />
                    <ext:Column ID="Column2" runat="server"
                        Text="Price"
                        Width="75"
                        DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column ID="Column3" runat="server"
                        Text="Change"
                        Width="75"
                        DataIndex="change" />
                    <ext:Column ID="Column4" runat="server"
                        Text="Change"
                        Width="75"
                        DataIndex="pctChange" />
                    <ext:DateColumn ID="DateColumn1" runat="server" 
                        Text="Last Updated" 
                        Width="85" 
                        DataIndex="lastChange" />

                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CellSelectionModel ID="CellSelectionModel_cell" runat="server">
                    <DirectEvents>
                        <Select OnEvent="RowSelectionModel_Select" StopEvent="true">
                            <EventMask ShowMask="True" Msg="Redireccionando ..." MinDelay="100" />
                        </Select>
                    </DirectEvents>
                </ext:CellSelectionModel>
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolbar ID="PagingToolbar1"
                    runat="server"
                    DisplayInfo="true"
                    DisplayMsg="Displaying Companies {0} - {1} of {2}"
                    EmptyMsg="No companies to display"
                    />
            </BottomBar>
        </ext:GridPanel>

        <ext:Store ID="Store2" runat="server" PageSize="2">
         <Model>
            <ext:Model ID="Model2" runat="server">
                <Fields>
                    <ext:ModelField Name="company2" />
                </Fields>
            </ext:Model>
          </Model>
        </ext:Store>


        <ext:Window ID="Window1" runat="server"
            Title="This is the problem.."
            Icon="Table"
            Modal="true"
            Width="400"
            Height="300"
            Hidden="true"
            Collapsible="true"
            Layout="Fit" Closable="false">
            <Items>
                <ext:GridPanel
                    ID="GridPanel2"
                    runat="server"
                    Title="how focus the selected row in grid 1 but in this grid..."
                    Width="800"
                    Height="300"
                    SelectionMemory="true">
                    <Store>
                        <ext:Store ID="Store3" runat="server" PageSize="2">
                            <Model>
                                <ext:Model ID="Model3" runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
                    <ColumnModel ID="ColumnModel2" runat="server">
                <Columns>
                    <ext:Column ID="Column5" runat="server"
                        Text="Company"
                        Width="160"
                        DataIndex="company"
                        Flex="1" />
                    
                    <ext:Column ID="Column6" runat="server"
                        Text="Yes/No"
                        Width="75"
                        DataIndex="price" />
                    <ext:DateColumn ID="DateColumn2" runat="server" 
                        Text="Last Updated" 
                        Width="85" 
                        DataIndex="lastChange" />    
                    
                </Columns>
            </ColumnModel>
                    <BottomBar>
                <ext:PagingToolbar ID="PagingToolbar2"
                    runat="server"
                    DisplayInfo="true"
                    DisplayMsg="Displaying Companies {0} - {1} of {2}"
                    EmptyMsg="No companies to display"
                    />
            </BottomBar> 
                </ext:GridPanel>
            </Items>
            <Tools>
                    <ext:Tool ToolTip="Cerrar" CustomType="my-close" Handler="owner.ownerCt.close();" Width="19" Height="19" />
            </Tools>
            
        </ext:Window>
    </form>
</body>
</html>

**fabricio.murta** · Apr 26, 2016, 3:27 AM

Hello @OpenDat2000!

Please consider this Ext.NET example: Local data Paging

It shows you how you can select an entry on a grid panel with paging regardless of the page the entry is. It is also more useful than just switching to the corresponding page because other things like sorting may leave two same entries in different page (if the sorted column in the grids are not the same).

I hope this helps!

If you feel "rookie" on Ext.NET, take your time to give a good surf on the Examples Explorer. You may find examples that you don't need now, but once you need something, you'll remember that you found that specific behavior covered on a sample in the Examples Explorer and it could make your life much easier. :)

**opendat2000** · Apr 26, 2016, 7:08 PM

thanks for the reply fabricio.

Using the JS function "selectRecord", in the Ext.Net example, finally I could fix my problem, but when I choose one row in grid 1, the system show me all the windows in relation with the selection in gridpanels.

let me show you the sequence:

Click image for larger version.

Name: ExampleSelectionGrid1_desc.jpg
Views: 38
Size: 50.6 KB
ID: 24582

Click image for larger version.

Name: example3_SelectionOnGrid3_desc.jpg
Views: 44
Size: 83.0 KB
ID: 24583

I do not understand how can I "stop" in the grid 2.

any thoughts?

New code (only changes in line: 57-68 script, 202-209 cell selection in grid 2, 224-229 window 2):

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Data" %>


<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" }
            };

            this.Store1.DataBind();
        }
    }
    protected void RowSelectionModel_Select(object sender, DirectEventArgs e)
    {
        DataTable tb = new DataTable();
        tb.Columns.Add("company", typeof(string));
        tb.Columns.Add("price", typeof(string));
        tb.Rows.Add("3m Co", "yes");
        tb.Rows.Add("Alcoa Inc", "no");
        tb.Rows.Add("Altria Group Inc", "no");
        tb.Rows.Add("American Express Company", "yes");
        tb.Rows.Add("American International Group, Inc.", "no");
        tb.Rows.Add("AT&T Inc.", "no");
        tb.Rows.Add("Boeing Co.", "yes");
        tb.Rows.Add("Caterpillar Inc.", "yes");
        tb.Rows.Add("Citigroup, Inc.", "yes");
        tb.Rows.Add("E.I. du Pont de Nemours and Company", "no");
        this.Store3.DataSource = tb;
        Store3.DataBind();
        string id = CellSelectionModel_cell.SelectedCell.RecordID.ToString();
        X.Js.Call("selectRecord", id); //llamado a script a la funcion 'selectRecord'
        Window1.Show();

    }
    protected void DisplayAlert(object sender, DirectEventArgs e)
    {
        Window2.Show();
    }

</script>
<script>
    var selectRecord = function (id) { //id: name of companies
        var grid = App.GridPanel2,
            record = grid.store.getById(id);

        grid.store.loadPage(grid.store.findPage(record), {
            callback: function () {
                grid.getSelectionModel().select(record);
            }
        });
    };
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Connection 2 grid</title>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />

        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="Begin... choose one except the first page..."
            Width="600"
            Height="200"
            Region="Center">
            <Store>
                <ext:Store ID="Store1" runat="server" PageSize="2">

                    <Model>
                        <ext:Model ID="Model1" runat="server" IDProperty="company">
                            <%--IDProperty: Nesesario para detectar ID al seleccionar una celda, se debe definir aqui y en el otro grid a donde mostrar la seleccion--%>
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>

                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ID="Column1" runat="server"
                        Text="Company"
                        Width="160"
                        DataIndex="company"
                        Flex="1" />
                    <ext:Column ID="Column2" runat="server"
                        Text="Price"
                        Width="75"
                        DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column ID="Column3" runat="server"
                        Text="Change"
                        Width="75"
                        DataIndex="change" />
                    <ext:Column ID="Column4" runat="server"
                        Text="Change"
                        Width="75"
                        DataIndex="pctChange" />
                    <ext:DateColumn ID="DateColumn1" runat="server"
                        Text="Last Updated"
                        Width="85"
                        DataIndex="lastChange" />

                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CellSelectionModel ID="CellSelectionModel_cell" runat="server">
                    <DirectEvents>
                        <Select OnEvent="RowSelectionModel_Select" StopEvent="true">
                            <EventMask ShowMask="True" Msg="Redireccionando ..." MinDelay="100" />
                        </Select>
                    </DirectEvents>
                </ext:CellSelectionModel>
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolbar ID="PagingToolbar1"
                    runat="server"
                    DisplayInfo="true"
                    DisplayMsg="Displaying Companies {0} - {1} of {2}"
                    EmptyMsg="No companies to display" />
            </BottomBar>
        </ext:GridPanel>

        <ext:Window ID="Window1" runat="server"
            Title="This is the problem.."
            Icon="Table"
            Modal="true"
            Width="400"
            Height="300"
            Hidden="true"
            Collapsible="true"
            Layout="Fit" Closable="false">
            <Items>
                <ext:GridPanel
                    ID="GridPanel2"
                    runat="server"
                    Title="how focus the selected row in grid 1 but in this grid..."
                    Width="800"
                    Height="300"
                    SelectionMemory="true">
                    <Store>
                        <ext:Store ID="Store3" runat="server" PageSize="2">
                            <Model>
                                <ext:Model ID="Model2" runat="server" IDProperty="company">
                                    <%--IDProperty nessesary to select record...--%>
                                    <Fields>
                                        <ext:ModelField Name="company" />
                                        <ext:ModelField Name="price" />
                                        <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel ID="ColumnModel2" runat="server">
                        <Columns>
                            <ext:Column ID="Column5" runat="server"
                                Text="Company"
                                Width="160"
                                DataIndex="company"
                                Flex="1" />

                            <ext:Column ID="Column6" runat="server"
                                Text="Yes/No"
                                Width="75"
                                DataIndex="price" />
                            <ext:DateColumn ID="DateColumn2" runat="server"
                                Text="Last Updated"
                                Width="85"
                                DataIndex="lastChange" />

                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:CellSelectionModel ID="CellSelectionModel1" runat="server">
                            <DirectEvents>
                                <Select OnEvent="DisplayAlert">
                                </Select>
                            </DirectEvents>
                        </ext:CellSelectionModel>
                    </SelectionModel>
                    <BottomBar>
                        <ext:PagingToolbar ID="PagingToolbar2"
                            runat="server"
                            DisplayInfo="true"
                            DisplayMsg="Displaying Companies {0} - {1} of {2}"
                            EmptyMsg="No companies to display" />
                    </BottomBar>
                </ext:GridPanel>
            </Items>
            <Tools>
                <ext:Tool ToolTip="Cerrar" CustomType="my-close" Handler="owner.ownerCt.close();" Width="19" Height="19" />
            </Tools>

        </ext:Window>
        <ext:Window ID="Window2" runat="server" Hidden="true">
            <Items>
                <ext:Button runat="server" Text="I should not open automatically...">
                </ext:Button>
            </Items>
        </ext:Window>
    </form>
</body>
</html>

**fabricio.murta** · Apr 26, 2016, 7:44 PM

Hello @OpenDat2000!

Nice examples showing your issues. The pictures also help a lot clarifying the issue!

I believe that all you have to change on your example is the callback. Problem is that you are selecting a row of the grid. You have an event that does something when a row is selected, so it is just natural to have it triggering that way.

But you can tell the selection model to ignore all events during your programmed selection and then resume the events handling after you leave the control to the user.

In other words, use this as your grid's callback (around line 65 on your code):

callback: function () {
    var sm = grid.getSelectionModel();
    sm.suspendEvents(false);
    sm.select(record);
    sm.resumeEvents();
}

I hope this helps!

**opendat2000** · Apr 27, 2016, 12:28 PM

Thanks Fabricio,

the solution now works fine, I add the "CellSelectionModel1.ClearSelection();" in the "DisplayAlert" funtion, now this function look like (line 51):

protected void DisplayAlert(object sender, DirectEventArgs e)
    {
        CellSelectionModel1.ClearSelection();
        Window2.Show();
    }

with this line I could fix a little issue when I want to open: grid1->window1->window2(in page X), when I closed the two windows and open selecting other element in the SAME PAGE(grid1 in page X), the system showed me again all the windows.

Thanks a lot. :)

**fabricio.murta** · Apr 27, 2016, 7:28 PM

Hello! Glad it helped you! Thanks also for sharing the edge case fix on your scenario, we really appreciate it!

Thread: [CLOSED] Problem with a relations with 2 (or more) Gridpanels according to their elements

Thread Tools

Search Thread

Display

[CLOSED] Problem with a relations with 2 (or more) Gridpanels according to their elements

Works but with issues

Similar Threads

Layout issue: Show Gridpanel in gridpanel with rowexpander

[CLOSED] Layout issue: Show Gridpanel in gridpanel with rowexpander

[CLOSED] Issue with Show Gridpanel in gridpanel with rowexpander

Bug on GridPanel.Show()

Show or hide gridpanel checkbox when some value in gridpanel equal 0 ?

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Problem with a relations with 2 (or more) Gridpanels according to their elements

[CLOSED] Problem with a relations with 2 (or more) Gridpanels according to their elements

Works but with issues

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us