[CLOSED] Incorrect use of Checkbox Selection in GridPanel

  1. #1

    [CLOSED] Incorrect use of Checkbox Selection in GridPanel

    Hi Community !

    I have a problem using the Checkbox Selection in GridPanel, please check the code sample below:

    
    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { 1, "3m Co", "Blue"},
                    new object[] { 2, "Alcoa Inc", "Blue"},
                    new object[] { 3, "Altria Group Inc", "Red" },
                    new object[] { 4, "American Express Company", "Red"},
                    new object[] { 5, "American International Group, Inc.", "Red" },
                    new object[] { 6, "AT&T Inc.", "Yellow" },
                    new object[] { 7, "Boeing Co.", "Yellow" },
                    new object[] { 8, "Caterpillar Inc.", "Green" },
                    new object[] { 9, "Citigroup, Inc.", "Green" },
                    new object[] { 10, "E.I. du Pont de Nemours and Company",  "Green" }
                };
    
                this.Store1.DataBind();
    
                Ext.Net.Node theNode = new Ext.Net.Node();
                theNode.NodeID = "root";
                theNode.Expanded = true;
    
                TreePanel1.Root.Add(theNode);
    
                Ext.Net.Node theNodeBlue = new Node();
                theNodeBlue.Text = "Blue";
                theNodeBlue.NodeID = "B1";
                theNodeBlue.Icon = Icon.Page;
                theNodeBlue.Leaf = true;
    
                theNode.Children.Add(theNodeBlue);
    
                Ext.Net.Node theNodeRed = new Node();
                theNodeRed.Text = "Red";
                theNodeRed.NodeID = "R1";
                theNodeRed.Icon = Icon.Page;
                theNodeRed.Leaf = true;
    
                theNode.Children.Add(theNodeRed);
    
                Ext.Net.Node theNodeYellow = new Node();
                theNodeYellow.Text = "Yellow";
                theNodeYellow.NodeID = "Y1";
                theNodeYellow.Icon = Icon.Page;
                theNodeYellow.Leaf = true;
    
                theNode.Children.Add(theNodeYellow);
                                        
                Ext.Net.Node theNodeGreen = new Node();
                theNodeGreen.Text = "Green";
                theNodeGreen.NodeID = "G1";
                theNodeGreen.Icon = Icon.Page;
                theNodeGreen.Leaf = true;
                
                theNode.Children.Add(theNodeGreen);
            }
       }
    
        [DirectMethod]
        public void TreePanel1_ItemClick(string pstrId)
        {
            try
            {
                CheckboxSelectionModel1.ClearSelection();
                CheckboxSelectionModel1.DeselectAll();
                
                switch (pstrId)
                {
                    case "B1":
                        GridPanel1.GetSelectionModel().Select(0, true);
                        GridPanel1.GetSelectionModel().Select(1, true);
                        break;
    
                    case "R1":
                        GridPanel1.GetSelectionModel().Select(2, true);
                        GridPanel1.GetSelectionModel().Select(3, true);
                        GridPanel1.GetSelectionModel().Select(4, true);
                        break;
    
                    case "Y1":
                        GridPanel1.GetSelectionModel().Select(5, true);
                        GridPanel1.GetSelectionModel().Select(6, true);
                        break;
    
                    case "G1":
                        GridPanel1.GetSelectionModel().Select(7, true);
                        GridPanel1.GetSelectionModel().Select(8, true);
                        GridPanel1.GetSelectionModel().Select(9, true);
                        break;                                 
                }
            }
            catch (Exception)
            {
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    
    <head id="Head1" runat="server">
        <title>GridPanel with Checkbox Selection Model - Ext.NET Examples</title>
    </head>
    
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
            <h1>GridPanel with Checkbox Selection Model</h1>
    
                    <ext:FormPanel ID="FormPanelPerfil" runat="server" 
                            MarginSpec="0 0 5 5"
                            Width="300"
                            Region="West"
                            Split="true"
                            Collapsible="true"
                            Title="Colores">
                        <Items>
                            <ext:TreePanel ID="TreePanel1" runat="server"
                                    MarginSpec="0 0 0 0"
                                    AutoScroll="true"
                                    Height="449"
                                    Frame="true"
                                    Flex="1"
                                    RootVisible="true">
                                <Listeners>
                                    <ItemClick Handler="App.direct.TreePanel1_ItemClick(record.data.id)"></ItemClick>
                                </Listeners>
                            </ext:TreePanel>
                        </Items>
                    </ext:FormPanel>
                    
            <ext:GridPanel ID="GridPanel1" runat="server"
                    Title="Company List"
                    LockText="Bloquear"
                    UnlockText="Desbloquear"
                    MarginSpec="0 5 5 0"
                    SelectionMemory="false"
                    ForceFit="true"
                    Region="Center"
                    Border="False"
                    Frame="true"
                    EnableColumnHide="true">
                <Store>
                    <ext:Store ID="Store1" runat="server" PageSize="10">
                        <Model>
                            <ext:Model ID="Model1" runat="server" IDProperty="ID">
                                <Fields>
                                    <ext:ModelField Name="ID" />
                                    <ext:ModelField Name="Name" />
                                    <ext:ModelField Name="Colour" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server" Text="Company" Width="160" DataIndex="Name" Flex="1" />
    
                        <ext:Column ID="Column2" runat="server" Text="Colour" Width="160" DataIndex="Colour" Flex="1" />
                    </Columns>
                </ColumnModel>
    
                <SelectionModel>
                    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Multi" />
                </SelectionModel>
    
                <Plugins>
                    <ext:BufferedRenderer ID="BufferedRenderer1" runat="server" />
                </Plugins>
    
            </ext:GridPanel>
        </form>
      </body>
    </html>
    When a node is selected in the TreePanel, certain rows can be checked in the GridPanel control. This function works correctly but when the grid's
    order is changed, the values not longer correspond to the ones selected.

    I accept suggestions ideas or comments

    Regards.
    Last edited by fabricio.murta; Nov 16, 2017 at 12:54 PM.
  2. #2
    Hello @opendat2000!

    Thanks for the test case! But I'm a little confused with it, I think you may have changed something between your testbed and the code you shared here, because it does not run on my side at all.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio

    I've modified the code so you can run the tests.

    My problem is that when an element is selected in the TreePanel, the elements checked in the GridPanel should coincide.

    
    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { 1, "3m Co", "Blue"},
                    new object[] { 2, "Alcoa Inc", "Blue"},
                    new object[] { 3, "Altria Group Inc", "Red" },
                    new object[] { 4, "American Express Company", "Red"},
                    new object[] { 5, "American International Group, Inc.", "Red" },
                    new object[] { 6, "AT&T Inc.", "Yellow" },
                    new object[] { 7, "Boeing Co.", "Yellow" },
                    new object[] { 8, "Caterpillar Inc.", "Green" },
                    new object[] { 9, "Citigroup, Inc.", "Green" },
                    new object[] { 10, "E.I. du Pont de Nemours and Company",  "Green" }
                };
    
                this.Store1.DataBind();
    
                Ext.Net.Node theNode = new Ext.Net.Node();
                theNode.NodeID = "root";
                theNode.Expanded = true;
    
                TreePanel1.Root.Add(theNode);
    
                Ext.Net.Node theNodeBlue = new Node();
                theNodeBlue.Text = "Blue";
                theNodeBlue.NodeID = "B1";
                theNodeBlue.Icon = Icon.Page;
                theNodeBlue.Leaf = true;
    
                theNode.Children.Add(theNodeBlue);
    
                Ext.Net.Node theNodeRed = new Node();
                theNodeRed.Text = "Red";
                theNodeRed.NodeID = "R1";
                theNodeRed.Icon = Icon.Page;
                theNodeRed.Leaf = true;
    
                theNode.Children.Add(theNodeRed);
    
                Ext.Net.Node theNodeYellow = new Node();
                theNodeYellow.Text = "Yellow";
                theNodeYellow.NodeID = "Y1";
                theNodeYellow.Icon = Icon.Page;
                theNodeYellow.Leaf = true;
    
                theNode.Children.Add(theNodeYellow);
                                        
                Ext.Net.Node theNodeGreen = new Node();
                theNodeGreen.Text = "Green";
                theNodeGreen.NodeID = "G1";
                theNodeGreen.Icon = Icon.Page;
                theNodeGreen.Leaf = true;
                
                theNode.Children.Add(theNodeGreen);
            }
       }
    
        [DirectMethod]
        public void TreePanel1_ItemClick(string pstrId)
        {
            try
            {
                CheckboxSelectionModel1.ClearSelection();
                CheckboxSelectionModel1.DeselectAll();
                
                switch (pstrId)
                {
                    case "B1":
                        GridPanel1.GetSelectionModel().Select(0, true);
                        GridPanel1.GetSelectionModel().Select(1, true);
                        break;
    
                    case "R1":
                        GridPanel1.GetSelectionModel().Select(2, true);
                        GridPanel1.GetSelectionModel().Select(3, true);
                        GridPanel1.GetSelectionModel().Select(4, true);
                        break;
    
                    case "Y1":
                        GridPanel1.GetSelectionModel().Select(5, true);
                        GridPanel1.GetSelectionModel().Select(6, true);
                        break;
    
                    case "G1":
                        GridPanel1.GetSelectionModel().Select(7, true);
                        GridPanel1.GetSelectionModel().Select(8, true);
                        GridPanel1.GetSelectionModel().Select(9, true);
                        break;                                 
                }
            }
            catch (Exception)
            {
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    
    <head id="Head1" runat="server">
        <title>GridPanel with Checkbox Selection Model - Ext.NET Examples</title>
    </head>
    
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Viewport ID="ViewPort1" runat="server" Layout="BorderLayout">
                <Items>
    
                    <ext:FormPanel ID="FormPanel1" runat="server" 
                            MarginSpec="0 0 5 5"
                            Width="300"
                            Region="West"
                            Split="true"
                            Collapsible="true"
                            Title="Colores">
                        <Items>
                            <ext:TreePanel ID="TreePanel1" runat="server"
                                    MarginSpec="0 0 0 0"
                                    AutoScroll="true"
                                    Frame="true"
                                    Flex="1"
                                    RootVisible="true">
                                <Listeners>
                                    <ItemClick Handler="App.direct.TreePanel1_ItemClick(record.data.id)"></ItemClick>
                                </Listeners>
                            </ext:TreePanel>
                        </Items>
                    </ext:FormPanel>
                    
                    <ext:GridPanel ID="GridPanel1" runat="server"
                            Title="Company List"
                            LockText="Bloquear"
                            UnlockText="Desbloquear"
                            MarginSpec="0 5 5 0"
                            SelectionMemory="false"
                            ForceFit="true"
                            Region="Center"
                            Border="False"
                            Frame="true"
                            EnableColumnHide="true">
                        <Store>
                            <ext:Store ID="Store1" runat="server" PageSize="10">
                                <Model>
                                    <ext:Model ID="Model1" runat="server" IDProperty="ID">
                                        <Fields>
                                            <ext:ModelField Name="ID" />
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Colour" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column ID="Column1" runat="server" Text="Company" Width="160" DataIndex="Name" Flex="1" />
    
                                <ext:Column ID="Column2" runat="server" Text="Colour" Width="160" DataIndex="Colour" Flex="1" />
                            </Columns>
                        </ColumnModel>
    
                        <SelectionModel>
                            <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Multi" />
                        </SelectionModel>
    
                        <Plugins>
                            <ext:BufferedRenderer ID="BufferedRenderer1" runat="server" />
                        </Plugins>
    
                    </ext:GridPanel>
    
                </Items>
            </ext:Viewport>
        </form>
      </body>
    </html>
    Regards

    Saludos

    Mauricio
  4. #4
    Hello Mauricio!

    I can run it, I see you just always select by the index so, if you change the order and select the same index, it will select whatever has moved to that index.

    I believe you should do something more elaborate, and select by record. And for that you'd require client side code. Well, that would actually even be faster then making the server round-trip (although maybe in your case you require it to come from the server).

    If you require it from server, you'll have to estimate the index by knowing by which column(s) the grid is ordered.

    But if you're OK from client side, a very fast and smart way would be to chain the components' selection like in this example: Data Binding - Basic - Chaining Selection.

    If selecting several records is a problem, then you can just programatically do it by their color field.

    For example, you can just bind the select event on the tree grid and, pass the color of the selected index to a function like this:

    var selectByColour = function(colour) {
        App.GridPanel1.store.each(function(rec) {
            if (rec.data.Colour == colour) {
                App.GridPanel1.getSelectionModel().select(rec, true);
            };
        });
    }
    You may want to either:
    - call the grid panel selection model's deselectAll() to clear selection
    - just fill an array of indexes that should be selected and check against previous selected indexes. And then only clear and re-selects if the selection is different than last selection.

    Well, I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi FabrÃ*cio !

    Thanks a lot for your reply.

    Please close the thread.

    Saludos
    Mauricio.
  6. #6
    Hello, Mauricio!

    Glad it (hopefully) helped! Thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: Dec 01, 2017, 6:04 PM
  2. Replies: 1
    Last Post: Apr 30, 2014, 8:03 PM
  3. Replies: 1
    Last Post: Dec 04, 2013, 10:53 AM
  4. Replies: 4
    Last Post: Oct 06, 2010, 9:08 AM
  5. GridPanel Checkbox Selection
    By bkosscus in forum 1.x Help
    Replies: 0
    Last Post: Feb 07, 2009, 3:58 AM

Posting Permissions