[CLOSED] GridPanel with Checkbox Selection Model

  1. #1

    [CLOSED] GridPanel with Checkbox Selection Model

    Hi, in a GridPanel how do I Filter by other columns. See the example below
    if (!X.IsAjaxRequest)
    {
                    this.Store1.DataSource = new List<Company> 
                { 
                    new Company(0, "3m Co", 71.72, 0.02, 0.03),
                    new Company(1, "Alcoa Inc", 29.01, 0.42, 1.47),
                    new Company(2, "Altria Group Inc", 83.81, 0.28, 0.34),
                    new Company(3, "American Express Company", 52.55, 0.01, 0.02),
                    new Company(4, "American International Group, Inc.", 64.13, 0.31, 0.49),
                    new Company(5, "AT&T Inc.", 31.61, -0.48, -1.54),
                    new Company(28, "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63)
                };
                //did not work
                sm.SelectedRows.Add(new SelectedRow("American Express Company"));
                //Is there a way to do this type
                 sm.SelectedRows.Add(new SelectedRow("American Express Company") and new SelectedRow(> 83.81));
    }
    Last edited by Daniil; Oct 23, 2011 at 6:17 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I can suggest the following solution, please see the ViewReady listener.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ 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 List<Company> 
                { 
                    new Company(0, "3m Co", 71.72, 0.02, 0.03),
                    new Company(1, "Alcoa Inc", 29.01, 0.42, 1.47),
                    new Company(2, "Altria Group Inc", 83.81, 0.28, 0.34),
                    new Company(3, "American Express Company", 52.55, 0.01, 0.02),
                    new Company(4, "American International Group, Inc.", 64.13, 0.31, 0.49),
                    new Company(5, "AT&T Inc.", 31.61, -0.48, -1.54),
                    new Company(6, "Boeing Co.", 75.43, 0.53, 0.71),
                    new Company(7, "Caterpillar Inc.", 67.27, 0.92, 1.39),
                    new Company(8, "Citigroup, Inc.", 49.37, 0.02, 0.04),
                    new Company(9, "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28),
                    new Company(10, "Exxon Mobil Corp", 68.1, -0.43, -0.64),
                    new Company(11, "General Electric Company", 34.14, -0.08, -0.23),
                    new Company(12, "General Motors Corporation", 30.27, 1.09, 3.74),
                    new Company(13, "Hewlett-Packard Co.", 36.53, -0.03, -0.08),
                    new Company(14, "Honeywell Intl Inc", 38.77, 0.05, 0.13),
                    new Company(15, "Intel Corporation", 19.88, 0.31, 1.58),
                    new Company(16, "International Business Machines", 81.41, 0.44, 0.54),
                    new Company(17, "Johnson & Johnson", 64.72, 0.06, 0.09),
                    new Company(18, "JP Morgan & Chase & Co", 45.73, 0.07, 0.15),
                    new Company(19, "McDonald\"s Corporation", 36.76, 0.86, 2.40),
                    new Company(20, "Merck & Co., Inc.", 40.96, 0.41, 1.01),
                    new Company(21, "Microsoft Corporation", 25.84, 0.14, 0.54),
                    new Company(22, "Pfizer Inc", 27.96, 0.4, 1.45),
                    new Company(23, "The Coca-Cola Company", 45.07, 0.26, 0.58),
                    new Company(24, "The Home Depot, Inc.", 34.64, 0.35, 1.02),
                    new Company(25, "The Procter & Gamble Company", 61.91, 0.01, 0.02),
                    new Company(26, "United Technologies Corporation", 63.26, 0.55, 0.88),
                    new Company(27, "Verizon Communications", 35.57, 0.39, 1.11),
                    new Company(28, "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63)
                };
    
                this.Store1.DataBind();
    
                if (!this.IsPostBack)
                {
                    this.GridPanel1.Listeners.ViewReady.Handler = string.Format("doSelection(this, {0})", 55);
                }
            }
        }
    
        public class Company
        {
            public Company(int id, string name, double price, double change, double pctChange)
            {
                this.ID = id;
                this.Name = name;
                this.Price = price;
                this.Change = change;
                this.PctChange = pctChange;
            }
    
            public int ID { get; set; }
            public string Name { get; set; }
            public double Price { get;set; }
            public double Change { get;set; }
            public double PctChange { get;set; }
        }
    </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 doSelection = function (grid, minValue) {
                var rows = [];
    
                grid.getStore().each(function (r, index) {
                    if (r.get("Price") > minValue) {
                        rows.push(index);
                    }   
                });
    
                grid.getSelectionModel().selectRows(rows);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                Title="Company List"
                Width="600"
                Height="350">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:JsonReader IDProperty="ID">
                                <Fields>
                                    <ext:RecordField Name="ID" />
                                    <ext:RecordField Name="Name" />
                                    <ext:RecordField Name="Price" />
                                    <ext:RecordField Name="Change" />
                                    <ext:RecordField Name="PctChange" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Company" Width="160" DataIndex="Name" />
                        <ext:Column Header="Price" Width="75" DataIndex="Price" />
                        <ext:Column Header="Change" Width="75" DataIndex="Change" />
                        <ext:Column Header="Change" Width="75" DataIndex="PctChange" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:CheckboxSelectionModel runat="server" />
                </SelectionModel>
            </ext:GridPanel>
        </form>
      </body>
    </html>
  3. #3
    Hi,I have an ext: Button with DirectEvents and would like by clicking on the button marked certain rows. Well, I made the code below
     this.GridPanel1.Listeners.ViewReady.Handler = string.Format("doSelection(this, {0})", 55);
    but did not mark the line. What should I do?
  4. #4
    Please use:
    X.JS.Call("doSelection",new JRawValue(GridPanel1.ClientID), 55);
  5. #5
    Hi, I put a BottomBar (see example below) but with the same method doSelection not select rows of the other pages. Is only selecting rows from the first page. What to do?

    <BottomBar>
                <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="5" DisplayInfo="true"
                    DisplayMsg="Displaying Jobs {0} - {1} of {2}" />
     </BottomBar>
  6. #6
    Please use:
    var doSelection = function (grid, minValue) {
        var rows = [];
     
        grid.getStore().allData.each(function (r, index) {
            if (r.get("Price") > minValue) {
                rows.push({
                    recordID : r.id
                });
            }   
        });
     
        grid.getSelectionModel().selectedData = rows;
        grid.doSelection();
    };
    Here is the full example.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Import Namespace="System.Collections.Generic" %>
     
    <%@ 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 List<Company> 
                { 
                    new Company(0, "3m Co", 71.72, 0.02, 0.03),
                    new Company(1, "Alcoa Inc", 29.01, 0.42, 1.47),
                    new Company(2, "Altria Group Inc", 83.81, 0.28, 0.34),
                    new Company(3, "American Express Company", 52.55, 0.01, 0.02),
                    new Company(4, "American International Group, Inc.", 64.13, 0.31, 0.49),
                    new Company(5, "AT&T Inc.", 31.61, -0.48, -1.54),
                    new Company(6, "Boeing Co.", 75.43, 0.53, 0.71),
                    new Company(7, "Caterpillar Inc.", 67.27, 0.92, 1.39),
                    new Company(8, "Citigroup, Inc.", 49.37, 0.02, 0.04),
                    new Company(9, "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28),
                    new Company(10, "Exxon Mobil Corp", 68.1, -0.43, -0.64),
                    new Company(11, "General Electric Company", 34.14, -0.08, -0.23),
                    new Company(12, "General Motors Corporation", 30.27, 1.09, 3.74),
                    new Company(13, "Hewlett-Packard Co.", 36.53, -0.03, -0.08),
                    new Company(14, "Honeywell Intl Inc", 38.77, 0.05, 0.13),
                    new Company(15, "Intel Corporation", 19.88, 0.31, 1.58),
                    new Company(16, "International Business Machines", 81.41, 0.44, 0.54),
                    new Company(17, "Johnson & Johnson", 64.72, 0.06, 0.09),
                    new Company(18, "JP Morgan & Chase & Co", 45.73, 0.07, 0.15),
                    new Company(19, "McDonald\"s Corporation", 36.76, 0.86, 2.40),
                    new Company(20, "Merck & Co., Inc.", 40.96, 0.41, 1.01),
                    new Company(21, "Microsoft Corporation", 25.84, 0.14, 0.54),
                    new Company(22, "Pfizer Inc", 27.96, 0.4, 1.45),
                    new Company(23, "The Coca-Cola Company", 45.07, 0.26, 0.58),
                    new Company(24, "The Home Depot, Inc.", 34.64, 0.35, 1.02),
                    new Company(25, "The Procter & Gamble Company", 61.91, 0.01, 0.02),
                    new Company(26, "United Technologies Corporation", 63.26, 0.55, 0.88),
                    new Company(27, "Verizon Communications", 35.57, 0.39, 1.11),
                    new Company(28, "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63)
                };
     
                this.Store1.DataBind();
     
                if (!this.IsPostBack)
                {
                    this.GridPanel1.Listeners.ViewReady.Handler = string.Format("doSelection(this, {0})", 55);
                }
            }
        }
     
        public class Company
        {
            public Company(int id, string name, double price, double change, double pctChange)
            {
                this.ID = id;
                this.Name = name;
                this.Price = price;
                this.Change = change;
                this.PctChange = pctChange;
            }
     
            public int ID { get; set; }
            public string Name { get; set; }
            public double Price { get;set; }
            public double Change { get;set; }
            public double PctChange { get;set; }
        }
    </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 doSelection = function (grid, minValue) {
                var rows = [];
     
                grid.getStore().allData.each(function (r, index) {
                    if (r.get("Price") > minValue) {
                        rows.push({
                            recordID : r.id
                        });
                    }   
                });
     
                grid.getSelectionModel().selectedData = rows;
                grid.doSelection();
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
             
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Company List"
                Width="600"
                Height="350">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:JsonReader IDProperty="ID">
                                <Fields>
                                    <ext:RecordField Name="ID" />
                                    <ext:RecordField Name="Name" />
                                    <ext:RecordField Name="Price" />
                                    <ext:RecordField Name="Change" />
                                    <ext:RecordField Name="PctChange" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Company" Width="160" DataIndex="Name" />
                        <ext:Column Header="Price" Width="75" DataIndex="Price" />
                        <ext:Column Header="Change" Width="75" DataIndex="Change" />
                        <ext:Column Header="Change" Width="75" DataIndex="PctChange" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:CheckboxSelectionModel runat="server" />
                </SelectionModel>
                <BottomBar>
                    <ext:PagingToolbar runat="server" PageSize="5" />
                </BottomBar>
            </ext:GridPanel>
        </form>
      </body>
    </html>
    It suites for local paging only, not for remote.

Similar Threads

  1. Replies: 8
    Last Post: Dec 18, 2014, 6:35 AM
  2. Question about Checkbox Selection Model in GridPanel
    By slonati_adv in forum 2.x Help
    Replies: 0
    Last Post: Jul 12, 2012, 2:19 PM
  3. Replies: 2
    Last Post: Dec 07, 2011, 7:00 PM
  4. Replies: 4
    Last Post: Oct 06, 2010, 9:08 AM
  5. [CLOSED] Checkbox Selection Model in GridPanel
    By egodoy in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 15, 2009, 10:07 AM

Posting Permissions