What's New?

[CLOSED] CheckboxSelectionModel Check All

  1. #1
    Sep 15, 2009, 6:14 PM

    [CLOSED] CheckboxSelectionModel Check All

    Hi
    I have CheckboxSelectionModel on page
    When I click on top checkbox all checkboxes are selected on current page

    Is there way to check all records on all pages by clicking on top check box?

    Vlad
  2. #2
    Sep 16, 2009, 7:04 AM

    RE: [CLOSED] CheckboxSelectionModel Check All

    Hi,

    Please see the following sample (please note that it will work if you don't use any proxy) 

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

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    private object[] TestData
    {
        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&amp;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},
                new object[] {"Honeywell Intl Inc", 38.77, 0.05, 0.13, now},
                new object[] {"Intel Corporation", 19.88, 0.31, 1.58, now},
                new object[] {"International Business Machines", 81.41, 0.44, 0.54, now},
                new object[] {"Johnson &amp; Johnson", 64.72, 0.06, 0.09, now},
                new object[] {"JP Morgan &amp; Chase &amp; Co", 45.73, 0.07, 0.15, now},
                new object[] {"McDonald\"s Corporation", 36.76, 0.86, 2.40, now},
                new object[] {"Merck &amp; Co., Inc.", 40.96, 0.41, 1.01, now},
                new object[] {"Microsoft Corporation", 25.84, 0.14, 0.54, now},
                new object[] {"Pfizer Inc", 27.96, 0.4, 1.45, now},
                new object[] {"The Coca-Cola Company", 45.07, 0.26, 0.58, now},
                new object[] {"The Home Depot, Inc.", 34.64, 0.35, 1.02, now},
                new object[] {"The Procter &amp; Gamble Company", 61.91, 0.01, 0.02, now},
                new object[] {"United Technologies Corporation", 63.26, 0.55, 0.88, now},
                new object[] {"Verizon Communications", 35.57, 0.39, 1.11, now},
                new object[] {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now}
            };
        }
    }
    
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!Ext.IsAjaxRequest)
        {
            this.Store1.DataSource = this.TestData;
            this.Store1.DataBind(); 
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    
    <script type="text/javascript">
        var onHdMouseDown = function(e, t){            
            if(t.className == 'x-grid3-hd-checker'){
                e.stopEvent();
                var hd = Ext.fly(t.parentNode);
                var isChecked = hd.hasClass('x-grid3-hd-checker-on');
                if(isChecked){
                    Ext.each(this.store.getAllRange(), function(record, index){
                        this.onMemorySelectId(null, index, this.getRecId(record));
                    }, this);
                    this.updateSelectedRows();
                }
                else{
                    this.clearMemory();
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
     
        <ext:Store ID="Store1" runat="server">
            <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="Y-m-dTh:i:s" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        
        <ext:GridPanel 
            runat="server" 
            StoreID="Store1" 
            StripeRows="true"
            Title="Array Grid" 
            Width="600" 
            Height="290"
            AutoExpandColumn="Company">
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ColumnID="Company" Header="Company" Width="160" Sortable="true" DataIndex="company" />
                    <ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="change"/>
                    <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="pctChange"/>
                    <ext:Column Header="Last Updated" Width="85" Sortable="true" DataIndex="lastChange">
                        <Renderer Fn="Ext.util.Format.dateRenderer('G:i:s')" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server" />
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolBar runat="server" PageSize="10" />
            </BottomBar>
            <Listeners>
                <Render Handler="Ext.fly(this.view.innerHd).on('mousedown', onHdMouseDown, this);" Delay="10" />
            </Listeners>
        </ext:GridPanel>
    </form>
</body>
</html>
  3. #3
    Sep 16, 2009, 11:21 PM

    RE: [CLOSED] CheckboxSelectionModel Check All

    unfortunately this doesn't work.
    Because store contains only current page:
    List<object> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
this.Store2.DataSource = rangeData;
  4. #4
    Sep 17, 2009, 1:18 AM

    RE: [CLOSED] CheckboxSelectionModel Check All

    Hi,

    If there is one page only on client side then it is impossible because toolkit doesn't know all of your data (it knows the binded data only)
  5. #5
    Apr 27, 2010, 8:13 PM

    RE: [CLOSED] CheckboxSelectionModel Check All

    Hi,

    I tried this example and have discovered that it doesn't function as expected in IE 8. When selecting all records, only 1 page is selected. I've also tried this with Firefox and IE 7 and all functions as expected. Any pointers on how to get this to work in IE8 would be greatly appreciated.

    Phil Lloyd
  6. #6
    Apr 29, 2010, 8:22 PM

    RE: [CLOSED] CheckboxSelectionModel Check All

    Yes I agree, this does not work in IE8. I might log a separate issue because this one is already marked as solved.
    Cheers.
  7. #7
    Apr 30, 2010, 2:00 PM

    RE: [CLOSED] CheckboxSelectionModel Check All

    Hi,

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

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    private object[] TestData
    {
        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&amp;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},
                new object[] {"Honeywell Intl Inc", 38.77, 0.05, 0.13, now},
                new object[] {"Intel Corporation", 19.88, 0.31, 1.58, now},
                new object[] {"International Business Machines", 81.41, 0.44, 0.54, now},
                new object[] {"Johnson &amp; Johnson", 64.72, 0.06, 0.09, now},
                new object[] {"JP Morgan &amp; Chase &amp; Co", 45.73, 0.07, 0.15, now},
                new object[] {"McDonald\"s Corporation", 36.76, 0.86, 2.40, now},
                new object[] {"Merck &amp; Co., Inc.", 40.96, 0.41, 1.01, now},
                new object[] {"Microsoft Corporation", 25.84, 0.14, 0.54, now},
                new object[] {"Pfizer Inc", 27.96, 0.4, 1.45, now},
                new object[] {"The Coca-Cola Company", 45.07, 0.26, 0.58, now},
                new object[] {"The Home Depot, Inc.", 34.64, 0.35, 1.02, now},
                new object[] {"The Procter &amp; Gamble Company", 61.91, 0.01, 0.02, now},
                new object[] {"United Technologies Corporation", 63.26, 0.55, 0.88, now},
                new object[] {"Verizon Communications", 35.57, 0.39, 1.11, now},
                new object[] {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now}
            };
        }
    }
    
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!Ext.IsAjaxRequest)
        {
            this.Store1.DataSource = this.TestData;
            this.Store1.DataBind(); 
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    
    <script type="text/javascript">
        var onHdMouseDown = function(e, t){            
            if(t.className == 'x-grid3-hd-checker'){
                //e.stopEvent();
                var hd = Ext.fly(t.parentNode);
                var isChecked = hd.hasClass('x-grid3-hd-checker-on');
                if(isChecked){
                    Ext.each(this.store.getAllRange(), function(record, index){
                        this.onMemorySelectId(null, index, this.getRecId(record));
                    }, this);
                    this.updateSelectedRows();
                }
                else{
                    this.clearMemory();
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
     
        <ext:Store ID="Store1" runat="server">
            <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="Y-m-dTh:i:s" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        
        <ext:GridPanel 
            runat="server" 
            StoreID="Store1" 
            StripeRows="true"
            Title="Array Grid" 
            Width="600" 
            Height="290"
            AutoExpandColumn="Company">
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column ColumnID="Company" Header="Company" Width="160" Sortable="true" DataIndex="company" />
                    <ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="change"/>
                    <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="pctChange"/>
                    <ext:Column Header="Last Updated" Width="85" Sortable="true" DataIndex="lastChange">
                        <Renderer Fn="Ext.util.Format.dateRenderer('G:i:s')" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server" />
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolBar runat="server" PageSize="10" />
            </BottomBar>
            <Listeners>
                <Render Handler="Ext.fly(this.view.innerHd).on('mousedown', onHdMouseDown, this, {delay:1});" Delay="10" />
            </Listeners>
        </ext:GridPanel>
    </form>
</body>
</html>
  8. #8
    May 04, 2010, 5:22 PM

    RE: [CLOSED] CheckboxSelectionModel Check All

    Thanks Vlad, it works a treat.

    Phil Lloyd

Similar Threads

  1. [CLOSED] dynamic grid with CheckBoxSelectionModel not showing check column
    By GLD in forum 1.x Legacy Premium Help
    Replies: 23
    Last Post: Nov 04, 2011, 5:19 PM
  2. CheckboxSelectionModel Check All on all pages - IE8
    By nootn in forum Bugs
    Replies: 0
    Last Post: Apr 29, 2010, 8:27 PM
  3. [CLOSED] [1.0] check box selection model check column appears in header menu
    By brettmas in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 21, 2010, 1:18 PM
  4. Performance issues with SelectAll check box in CheckboxSelectionModel and making Editor control visible all the time.
    By VipulTyagi in forum 1.x Help
    Replies: 1
    Last Post: Sep 04, 2009, 9:14 AM
  5. [CLOSED] CheckBoxSelectionModel
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 27, 2009, 5:12 PM

Posting Permissions