Accessing to Checkbox Selection Model Header

  1. #1

    Accessing to Checkbox Selection Model Header

    Hi all,
    I need to access to Checkbox Selection Model Header in code behind, to know if it checked or not, how to? See code

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        
        public class User
        {
            public int ID { get; set; }
            public String UserName { get; set; }
            public String FirstName { get; set; }
            public String LastName { get; set; }
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                List<User> l_UsersList = new List<User>();
                l_UsersList.Add(new User { ID = 0, UserName = "UserName 00", FirstName = "First Name 00", LastName = "Last Name 00" });
                l_UsersList.Add(new User { ID = 1, UserName = "UserName 01", FirstName = "First Name 01", LastName = "Last Name 01" });
                l_UsersList.Add(new User { ID = 2, UserName = "UserName 02", FirstName = "First Name 02", LastName = "Last Name 02" });
                l_UsersList.Add(new User { ID = 3, UserName = "UserName 03", FirstName = "First Name 03", LastName = "Last Name 03" });
                l_UsersList.Add(new User { ID = 4, UserName = "UserName 04", FirstName = "First Name 04", LastName = "Last Name 04" });
                l_UsersList.Add(new User { ID = 5, UserName = "UserName 05", FirstName = "First Name 05", LastName = "Last Name 05" });
                l_UsersList.Add(new User { ID = 6, UserName = "UserName 06", FirstName = "First Name 06", LastName = "Last Name 06" });
                l_UsersList.Add(new User { ID = 7, UserName = "UserName 07", FirstName = "First Name 07", LastName = "Last Name 07" });
                l_UsersList.Add(new User { ID = 8, UserName = "UserName 08", FirstName = "First Name 08", LastName = "Last Name 08" });
                l_UsersList.Add(new User { ID = 9, UserName = "UserName 09", FirstName = "First Name 09", LastName = "Last Name 09" });
    
                m_Store.DataSource = l_UsersList;
                m_Store.DataBind();
            }
        }
    
        [DirectMethod(Namespace = "GridPanelExample")]
        public void m_CommandColumn_Command(String p_Command, String p_RecordData)
        {
            Dictionary<String, String> l_DataDictionary = JSON.Deserialize<Dictionary<String, String>>(p_RecordData);
    
            // DO SOMETHING
        }
    
        protected void m_CheckboxSelectionModel_SelectionChange(object sender, DirectEventArgs e)
        {
            // How to accessing to Checkbox Selection Model Header here ?
    
        }   
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
        <title>GridPanel Example</title>
    </head>
    
    <body>
        <form runat="server">
    
            <ext:ResourceManager ID="m_ResourceManager" runat="server" />
    
            <ext:Store ID="m_Store" runat="server" PageSize="25">
                <Model>
                    <ext:Model ID="m_Model" runat="server" IDProperty="ID">
                        <Fields>
                            <ext:ModelField Name="ID" />
                            <ext:ModelField Name="UserName" />
                            <ext:ModelField Name="FirstName" />
                            <ext:ModelField Name="LastName" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
    
            <ext:GridPanel ID="m_GridPanel" runat="server" Title="GridPanelExample" StoreID="m_Store">
                <ColumnModel>
                    <Columns>
                        <ext:CommandColumn ID="m_CommandColumn" runat="server" Width="25">
                            <Commands>
                                <ext:GridCommand CommandName="DoSomething" Icon="Cog" StandOut="true" ToolTip-Text="Do Something" />
                            </Commands>
                            <Listeners>
                                <Command Handler="GridPanelExample.m_CommandColumn_Command(command, record.data);" />
                            </Listeners>
                        </ext:CommandColumn>
    
                        <ext:Column ID="m_ColumnUserName" runat="server" DataIndex="UserName" Text="UserName" Width="150" />
                        <ext:Column ID="m_ColumnFirstName" runat="server" DataIndex="FirstName" Text="First Name" Width="150" />
                        <ext:Column ID="m_ColumnLastName" runat="server" DataIndex="LastName" Text="Last Name" Width="150" />
                    </Columns>
                </ColumnModel>
    
                <SelectionModel>
                    <ext:CheckboxSelectionModel ID="m_CheckboxSelectionModel" runat="server" Mode="Multi">
                        <DirectEvents>
                            <SelectionChange OnEvent="m_CheckboxSelectionModel_SelectionChange" />
                        </DirectEvents>
                    </ext:CheckboxSelectionModel>
                </SelectionModel>
    
                <BottomBar>
                    <ext:PagingToolbar ID="m_PagingToolbar" runat="server">
                        <Items>
                            <ext:ToolbarSeparator />
                            <ext:ToolbarSpacer />
                            <ext:Label ID="m_lblPagingToolbar" runat="server" Text="Righe visualizzate:" />
                            <ext:ComboBox ID="m_cmbPagingToolbar" runat="server" Editable="false" Width="55">
                                <Items>
                                    <ext:ListItem Text="1" />
                                    <ext:ListItem Text="5" />
                                    <ext:ListItem Text="10" />
                                    <ext:ListItem Text="25" />
                                    <ext:ListItem Text="50" />
                                    <ext:ListItem Text="75" />
                                    <ext:ListItem Text="100" />
                                    <ext:ListItem Text="250" />
                                    <ext:ListItem Text="500" />
                                </Items>
                                <SelectedItems>
                                    <ext:ListItem Value="25" />
                                </SelectedItems>
                                <Listeners>
                                    <Select Handler="#{m_GridPanel}.store.pageSize = parseInt(this.getValue(), 10); #{m_GridPanel}.store.reload();" />
                                </Listeners>
                            </ext:ComboBox>
                        </Items>
                    </ext:PagingToolbar>
                </BottomBar>
    
                <Features>
                    <ext:GridFilters ID="m_GridFilters" Local="true">
                        <Filters>
                            <ext:StringFilter DataIndex="UserName" />
                            <ext:StringFilter DataIndex="FirstName" />
                            <ext:StringFilter DataIndex="LastName" />
                        </Filters>
                    </ext:GridFilters>
                </Features>
            </ext:GridPanel>
        </form>
    </body>
    
    </html>
  2. #2
    Hi @thece,

    The only way - determine it on client side in JavaScript and send to server as a DirectEvent's extra parameter.

    This is a piece of JavaScript to determine the checkbox header is checked or not:
    App.m_GridPanel.headerCt.child("[isCheckerHd]").el.hasCls('x-grid-hd-checker-on');
  3. #3
    Hi Daniil,

    thanks a lot
  4. #4
    Another question: I added / modified this code, but ...

    <script type="text/javascript">
    
        var m_CheckboxSelectionModel_SelectionChange_JS = function (obj, selected, eOpts ) {
    
            var headerIsChecked = App.m_GridPanel.headerCt.child("[isCheckerHd]").el.hasCls('x-grid-hd-checker-on');
        };
    
    </script>
    
    ...
    
                <SelectionModel>
                    <ext:CheckboxSelectionModel ID="m_CheckboxSelectionModel" runat="server" Mode="Multi">
                        <Listeners>
                            <SelectionChange Fn="m_CheckboxSelectionModel_SelectionChange_JS" />
                        </Listeners>
                    </ext:CheckboxSelectionModel>
                </SelectionModel>
    ... SelectionChange event is fired either when header checkbox is clicked or line checkbox is clicked. How I can distinguish between these events?
  5. #5
    Unfortunately, there is no a dedicated error on that.

    You can override a CheckboxSelectionModel's onHeaderClick method.
    http://docs.sencha.com/extjs/4.2.1/#...-onHeaderClick

Similar Threads

  1. Replies: 1
    Last Post: Apr 30, 2014, 8:03 PM
  2. Replies: 2
    Last Post: Apr 21, 2014, 8:24 AM
  3. Replies: 1
    Last Post: Dec 04, 2013, 10:53 AM
  4. Replies: 10
    Last Post: Apr 19, 2013, 3:16 PM
  5. Replies: 4
    Last Post: Oct 06, 2010, 9:08 AM

Posting Permissions