[OPEN] [#1424] [4.2.0] Selection issue on Childgrid in rowExpander

  1. #1

    [OPEN] [#1424] [4.2.0] Selection issue on Childgrid in rowExpander

    Hi Guys

    I have grid and a nested childgrid with CheckboxSelectionModel in both parent and childgrid , when i select parent grid row all the child grid row gets selected as well . This selection is not shown in selectionmodel() of the childgrid . So when i try to clear i cant clear them

    What i need is prevent selection of childgrid items on selecting parent grid row

    My Grid Code is below

    <%@ page language="C#" autoeventwireup="true" codefile="Default.aspx.cs" inherits="_Default" %>
    
    <%@ register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    
    
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
    
                <ext:resourcemanager id="ResourceManager1" runat="server" cleanresourceurl="true" directmethodnamespace="DM" namespace="app">
                </ext:resourcemanager>
    
                <ext:viewport runat="server">
                    <Items>
    
    
                        <ext:GridPanel
                            ID="GridPanel1"
                            runat="server"
                            Title="Array Grid"
                            Width="700" AutoHeight="true">
                            <Store>
                                <ext:Store ID="Store1" runat="server" OnReadData="MyData_Refresh" PageSize="10">
                                    <Reader>
                                        <ext:ArrayReader>
                                            <Fields>
                                                <ext:RecordField Name="company" />
                                                <ext:RecordField Name="price" Type="Float" />
                                                <ext:RecordField Name="change" Type="Float" />
                                                <ext:RecordField Name="pctChange" Type="Float" />
                                                <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                            </Fields>
                                        </ext:ArrayReader>
                                    </Reader>
    
                                </ext:Store>
                            </Store>
    
    
                            <columnmodel runat="server">
                            <Columns>
                            <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                            <ext:Column Header="Price" DataIndex="price">                  
                            <Renderer Format="UsMoney" />
                            </ext:Column>
                            <ext:Column ColumnID="Change" Header="Change" DataIndex="change">
                            <Renderer Fn="change" />
                            </ext:Column>
                            <ext:Column Header="Change" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                            </ext:Column>
                            <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
                            </Columns>
                            </columnmodel>
    
                            <SelectionModel>
                                <ext:CheckboxSelectionModel runat="server"></ext:CheckboxSelectionModel>
                            </SelectionModel>
    
                            <View>
                                <ext:GridView runat="server" StripeRows="true" />
                            </View>
    
                            <plugins>
    
    <ext:RowExpander ID="gridResultsExpander" Visible="true" runat="server" ExpandOnDblClick="false">
    
    <Component>
    
    <ext:GridPanel
    ID="gridChild1"
    runat="server"
                            
    Width="500" AutoHeight="true" EnableColumnHide="false">
    <Store>
    <ext:Store ID="Store2" runat="server" OnReadData="MyChildData_Refresh" PageSize="10">
    <Reader>
    <ext:ArrayReader>
    <Fields>
    <ext:RecordField Name="company" />
    <ext:RecordField Name="price" Type="Float" />
    </Fields>
    </ext:ArrayReader>
    </Reader>
    
    
    </ext:Store>
    </Store>
    
    <columnmodel runat="server">
    <Columns>
    <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
    <ext:Column Header="Price" DataIndex="price">                  
    <Renderer Format="UsMoney" />
    </ext:Column>
    </Columns>
    </columnmodel>
    
    <SelectionModel>
    <ext:CheckboxSelectionModel runat="server"  XCheckOnly="true" PruneRemoved="false" ShowHeaderCheckbox="false" CheckOnly="true"
    ></ext:CheckboxSelectionModel>
    </SelectionModel>
    
    
    </ext:GridPanel>
                                            
    </Component>
    </ext:RowExpander>
    
    </plugins>
                        </ext:GridPanel>
    
                    </Items>
    
                </ext:viewport>
    
    
            </div>
        </form>
    </body>
    </html>

    c# code below

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    public partial class _Default : System.Web.UI.Page{
    
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
    
    
    
                this.Store2.DataSource = this.Data2;
                this.Store2.DataBind();
            }
        }
    
        protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
        {
            this.BindData();
        }
    
        protected void MyChildData_Refresh(object sender, StoreRefreshDataEventArgs e)
        {
            this.BindChildData();
        }
    
        private void BindData()
        {
            Store store = this.GridPanel1.GetStore();
    
            store.DataSource = this.Data;     
            store.DataBind();
        }
    
        private void BindChildData()
        {
            Store store = this.gridChild1.GetStore();
    
            store.DataSource = this.Data2;
            store.DataBind();
        }
    
    
        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now }
                };
            }
        }
    
    
        private object[] Data2
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "Wipro", 71.72,now },
                    new object[] { "Infosys", 29.01,  1.47, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45,  now }
                };
            }
        }
    
    
    
    }
    Thanks
    Amit
    Last edited by fabricio.murta; Jan 27, 2017 at 5:57 PM.
  2. #2
  3. #3
    Hello @amitpareek!

    It seems that the example above was written for Ext.NET 2, right? :)

    As mentioned on the thread you provided, there's still no solution down the road to Ext.NET version 4.2.0 (just released!).

    Well, what I can think as a workaround for this is making the interior grids really independent from the outer grids. That is, using a panel with a component loader for the inner grid inside another page. I didn't try this with user controls, but in potential, it has more chances to fail as well.

    Here's what I can suggest to overcome this situation:

    "Outer" page: 61719-nestedGridPanels.aspx
    <%@ page language="C#" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
        protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
        {
            this.BindData();
        }
    
        private void BindData()
        {
            Store store = this.GridPanel1.GetStore();
    
            store.DataSource = this.Data;
            store.DataBind();
        }
    
        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now }
                };
            }
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ext:resourcemanager id="ResourceManager1" runat="server" cleanresourceurl="true" directmethodnamespace="DM" namespace="app" ScriptMode="Debug" SourceFormatting="true" />
    
                <ext:viewport runat="server">
                    <Items>
                        <ext:GridPanel
                            ID="GridPanel1"
                            runat="server"
                            Title="Array Grid"
                            Width="700" AutoHeight="true">
                            <Store>
                                <ext:Store ID="Store1" runat="server" OnReadData="MyData_Refresh" PageSize="10">
                                   <Model>
                                        <ext:Model 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" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <columnmodel runat="server">
                                <Columns>
                                    <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                                    <ext:Column runat="server" Text="Price" DataIndex="price">                  
                                        <Renderer Format="UsMoney" />
                                    </ext:Column>
                                    <ext:Column runat="server" Text="Change" DataIndex="change">
                                        <Renderer Fn="change" />
                                    </ext:Column>
                                    <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                                        <Renderer Fn="pctChange" />
                                    </ext:Column>
                                    <ext:DateColumn runat="server" Text="Last Update" DataIndex="lastChange" />
                                </Columns>
                            </columnmodel>
    
                            <SelectionModel>
                                <ext:CheckboxSelectionModel runat="server"></ext:CheckboxSelectionModel>
                            </SelectionModel>
    
                            <View>
                                <ext:GridView runat="server" StripeRows="true" />
                            </View>
    
                            <plugins>
                                <ext:RowExpander ID="gridResultsExpander" Visible="true" runat="server" ExpandOnDblClick="false">
                                    <Component>
                                        <ext:Container runat="server">
                                            <Loader runat="server" Mode="Frame" Url="61175-nestedInnerGrid.aspx">
                                                <Params>
                                                    <ext:Parameter Name="record" Value="function() { return this.record.data.company; }" Mode="Raw" />
                                                </Params>
                                            </Loader>
                                        </ext:Container>
                                    </Component>
                                </ext:RowExpander>
                            </plugins>
                        </ext:GridPanel>
                    </Items>
                </ext:viewport>
            </div>
        </form>
    </body>
    </html>
    "Inner" page: 61719-nestedInnerGrid.aspx
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store2.DataSource = applyRecord(Request.QueryString["record"], this.Data2);
                this.Store2.DataBind();
            }
        }
    
        private object[] applyRecord(string record, object[] data)
        {
            var retVal = new object[data.Count()];
    
            if (string.IsNullOrWhiteSpace(record))
            {
                record = "Unknown";
            }
            
            var i = 0;
            foreach (object[] rec in data)
            {
                retVal[i++] = new object[] { record + "'s " + rec[0], rec[1], rec[2] };
            }
    
            return retVal;
        }
        protected void MyChildData_Refresh(object sender, StoreReadDataEventArgs e)
        {
            this.BindChildData();
        }
    
        private void BindChildData()
        {
            Store store = this.gridChild1.GetStore();
    
            store.DataSource = this.Data2;
            store.DataBind();
        }
    
        private object[] Data2
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "Wipro", 71.72,now },
                    new object[] { "Infosys", 29.01,  1.47, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45,  now }
                };
            }
        }
    </script>
    
    <html>
    <head runat="server">
        <title></title>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <form runat="server" id="fm1">
        <div>
            <ext:ResourceManager runat="server" />
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:GridPanel
                        ID="gridChild1"
                        runat="server"
                        Width="500"
                        AutoHeight="true"
                        EnableColumnHide="false">
                        <Store>
                            <ext:Store ID="Store2" runat="server" OnReadData="MyChildData_Refresh" PageSize="10">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="company" />
                                            <ext:ModelField Name="price" Type="Float" />
                                            <ext:ModelField Name="lastChange" Type="Date" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <columnmodel runat="server">
                            <Columns>
                                <ext:Column runat="server" Header="Company" DataIndex="company" Flex="1" />
                                <ext:Column runat="server" Header="Price" DataIndex="price">                  
                                    <Renderer Format="UsMoney" />
                                </ext:Column>
                            </Columns>
                        </columnmodel>
                        <SelectionModel>
                            <ext:CheckboxSelectionModel runat="server"  XCheckOnly="true" PruneRemoved="false" ShowHeaderCheckbox="false" CheckOnly="true" />
                        </SelectionModel>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
    I'd suggest you to rely on RowExpander's SingleExpand="true" to alleviate the burden on the client-side browser by just moving the inner panel with frame around, instead of creating several components and overloading the page.

    You can still interact inner page with outer page using the dom's parent property, as illustrated in this example: Panel - IFrame communication.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Thank you for the update.

    We will try to fix the bug once again ourselves. If it does not work then we will just add a checkbox column on grid and create our own selection model there. I hope checkbox column wont get selected on parent select.
  5. #5
    Hello @amitpareek!

    If you have a fix that works for you and want us to help you port it to Ext.NET 4, feel free to share, but you'll be releasing the fix "in the open" here in forums before we can integrate it to Ext.NET or provide you advice with it. To integrate with the whole package we need to ensure it is reasonable also for other use cases or easily excludable for cases it shouldn't be applied.

    Anyway, we have just logged this issue under #1424 on GitHub so we can track the issue and eventually find a definitive solution for this (that wouldn't involve using webpage separation with iframes, for example).
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Nested childgrid autoselection issue
    By amitpareek in forum 2.x Premium Help
    Replies: 18
    Last Post: Jan 25, 2017, 1:50 PM
  2. [CLOSED] Not able to reference childgrid inside main grid
    By amitpareek in forum 4.x Premium Help
    Replies: 5
    Last Post: Jul 13, 2016, 6:36 PM
  3. Prevent select all On Childgrid
    By asifsolkar in forum 2.x Help
    Replies: 0
    Last Post: May 20, 2016, 10:46 AM
  4. Replies: 7
    Last Post: Oct 20, 2010, 2:30 PM
  5. RowExpander and Checkbox Selection Rendering Issue
    By amitpareek in forum 1.x Premium Help
    Replies: 2
    Last Post: Jun 22, 2010, 4:48 AM

Tags for this Thread

Posting Permissions