[Solved] GridClientSelectColumn header not firing event

[Mustafa Hussain]

I have a grid with some transactions bound to it. I have the grid working as intended except for when the header checkbox for the grid client select column is selected.

Page/Grid Markup:

        <telerik:RadAjaxManager ID="_pastManager" runat="server" EnableAJAX="true">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="_pastItemsGrid">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="_pastItemsGrid" />
                        <telerik:AjaxUpdatedControl ControlID="_selectedAmount" />
                        <telerik:AjaxUpdatedControl ControlID="_selectedValue" />
                        <telerik:AjaxUpdatedControl ControlID="_continueBtn" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <%--Grid containing the results--%>
        <div style="margin: 15px 5px 15px 5px;">
            <telerik:RadGrid ID="_pastItemsGrid" runat="server" AllowMultiRowSelection="true"
                ShowFooter="false" AutoGenerateColumns="false" AllowSorting="true" Skin="Web20">
                <HeaderStyle Font-Bold="true" HorizontalAlign="Left" />
                <PagerStyle Mode="NextPrevAndNumeric" Position="TopAndBottom" />
                <ClientSettings EnablePostBackOnRowClick="true">
                    <Selecting AllowRowSelect="true" />
                </ClientSettings>
                <MasterTableView DataKeyNames="TranID">
                    <Columns>
                        <telerik:GridBoundColumn HeaderText="Date" DataField="Date" />
                        <telerik:GridBoundColumn HeaderText="Description" DataField="Description" />
                        <telerik:GridBoundColumn HeaderText="Amount" DataField="Amount" UniqueName="Amount" />
                        <telerik:GridTemplateColumn HeaderText="Reward Value" UniqueName="Value">
                            <ItemTemplate>
                                <div style="color: #0DAE4B;">
                                    <asp:Label ID="_milesLabel" runat="server" Text='<%# GetCurrency(Eval("Miles")) %>' />
                                </div>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridClientSelectColumn HeaderText="Select" UniqueName="checkSelect" CommandName="RowClick" />
                    </Columns>
                    <NoRecordsTemplate>
                        <div>
                            There were no records found.</div>
                    </NoRecordsTemplate>
                </MasterTableView>
            </telerik:RadGrid>
            <div style="padding-top: 5px;">
                <div style="float: left; font-size: 14px; font-weight: bold; width: 370px; text-align: right;
                    padding-right: 10px;">
                    Total Purchase Credit Amount:
                </div>
                <div style="font-weight: bold; font-size: 12px; float: left; width: 119px;">
                    <asp:Label ID="_selectedAmount" runat="server" Text="$0.00" />
                </div>
                <div style="color: #0DAE4B; font-weight: bold; font-size: 12px; float: left;">
                    <asp:Label ID="_selectedValue" runat="server" Text="0" />
                </div>
                <div style="float: right;">
                    <asp:Button ID="_continueBtn" runat="server" Text="Credit" />
                </div>
                <div class="clear">
                </div>
            </div>
            <div class="clear">
            </div>
        </div>

Code Behind:

    Protected Sub _pastItemsGrid_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles _pastItemsGrid.NeedDataSource
        Dim ds As New DataSet
        ds.ReadXml(Server.MapPath("../Transactions.xml"))
        _pastItemsGrid.DataSource = ds
    End Sub


    Protected Sub _pastItemsGrid_ItemCommand(ByVal sender As Object, ByVal e As GridCommandEventArgs) Handles _pastItemsGrid.ItemCommand
        Dim amountTotal As New Decimal
        Dim rewardTotal As Integer = 0

        If e.CommandName = "RowClick" Then
            For Each dataItem As GridDataItem In _pastItemsGrid.MasterTableView.Items
                If dataItem.Selected Then
                    '' Get the label control which has the value.
                    Dim toChange As Label = CType(dataItem.Item("Value").FindControl("_milesLabel"), Label)
                    '' Seperate out the value from the currency wording.
                    Dim splitValue As Array = toChange.Text.Split(" ")
                    '' Replace any commas in the value so that it can be converted.
                    Dim test As String = splitValue(0).ToString.Replace(",", "")
                    '' Convert the value and add to total.
                    rewardTotal += CInt(test)
                    '' Conver the amount and add to total.
                    amountTotal += CDec(dataItem.Item("Amount").Text)
                End If

            Next
        End If
        '' Update both amount and currency value for user.
        _selectedAmount.Text = String.Format("{0:C2}", amountTotal)
        _selectedValue.Text = String.Format("{0:#,##}", rewardTotal)
    End Sub

The ItemCommand event fires and all the appropriate controls are updated when i click the row or select the specific row checkbox. But when the checkbox in the header is clicked the ItemCommand event is not fired. Can you guys point me to what im missing. Thanks

[Princy]

Hello Mustafa,

The rowclick command of the grid is triggered only for the data rows in the grid and not for the header row. So it would be wise to use a GridTemplateColumn with a checkbox in its headertemplate rather than using a GridClientSelectColumn and then update the necessary controls in the CheckedChanged event of the header checkbox. Here's a code library submission which explains how to use GridTemplateColumn to select items in the grid:
Check/Uncheck all checkboxes in template column and selecting rows with checkbox

Thanks
Princy.

[Mustafa Hussain]

Thanks Princy,
The example was in VS2003 and I was unable to load the solution but I did get some good direction out of it.
Here is how the grid is now being handled for any other person that might be looking for the answer.

GRID:

        <%--Rad Ajax Manager--%>
        <telerik:RadAjaxManager ID="_pastManager" runat="server" EnableAJAX="true">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="_pastItemsGrid">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="_pastItemsGrid" />
                        <telerik:AjaxUpdatedControl ControlID="_selectedAmount" />
                        <telerik:AjaxUpdatedControl ControlID="_selectedValue" />
                        <telerik:AjaxUpdatedControl ControlID="_continueBtn" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <%--Grid containing the results--%>
        <div style="margin: 15px 5px 15px 5px;">
            <telerik:RadGrid ID="_pastItemsGrid" runat="server" AllowMultiRowSelection="true"
                ShowFooter="false" AutoGenerateColumns="false" AllowSorting="true" Skin="Web20">
                <HeaderStyle Font-Bold="true" HorizontalAlign="Left" />
                <PagerStyle Mode="NextPrevAndNumeric" Position="TopAndBottom" />
                <ClientSettings EnablePostBackOnRowClick="true">
                </ClientSettings>
                <MasterTableView DataKeyNames="TranID">
                    <Columns>
                        <telerik:GridBoundColumn HeaderText="Date" DataField="Date" />
                        <telerik:GridBoundColumn HeaderText="Description" DataField="Description" />
                        <telerik:GridBoundColumn HeaderText="Amount" DataField="Amount" UniqueName="Amount" />
                        <telerik:GridTemplateColumn HeaderText="Reward Value" UniqueName="Value">
                            <ItemTemplate>
                                <div style="color: #0DAE4B;">
                                    <asp:Label ID="_milesLabel" runat="server" Text='<%# GetCurrency(Eval("Miles")) %>' />
                                </div>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="checkSelect">
                            <HeaderTemplate>
                                <asp:CheckBox ID="_allCheck" runat="server" AutoPostBack="true" OnCheckedChanged="ToggleAll" />
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:CheckBox ID="_rowCheck" runat="server" AutoPostBack="true" OnCheckedChanged="ToggleCheck" />
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                    <NoRecordsTemplate>
                        <div>
                            There were no records found.</div>
                    </NoRecordsTemplate>
                </MasterTableView>
            </telerik:RadGrid>
            <div style="padding-top: 5px;">
                <div style="float: left; font-size: 14px; font-weight: bold; width: 370px; text-align: right;
                    padding-right: 10px;">
                    Total Purchase Credit Amount:
                </div>
                <div style="font-weight: bold; font-size: 12px; float: left; width: 119px;">
                    <asp:Label ID="_selectedAmount" runat="server" Text="$0.00" />
                </div>
                <div style="color: #0DAE4B; font-weight: bold; font-size: 12px; float: left;">
                    <asp:Label ID="_selectedValue" runat="server" Text="0" />
                </div>
                <div style="float: right;">
                    <asp:Button ID="_continueBtn" runat="server" Text="Credit" />
                </div>
                <div class="clear">
                </div>
            </div>
            <div class="clear">
            </div>
        </div>

Code Behind:

    Protected Sub _pastItemsGrid_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles _pastItemsGrid.NeedDataSource
        Dim ds As New DataSet
        ds.ReadXml(Server.MapPath("../Transactions.xml"))
        _pastItemsGrid.DataSource = ds
    End Sub

    Protected Sub ToggleCheck(ByVal sender As Object, ByVal e As EventArgs)
        CType(CType(sender, CheckBox).Parent.Parent, GridItem).Selected = CType(sender, CheckBox).Checked
        CalculateTotals()
    End Sub

    Protected Sub ToggleAll(ByVal sender As Object, ByVal e As EventArgs)
        For Each dataItem As GridDataItem In _pastItemsGrid.MasterTableView.Items
            CType(dataItem.FindControl("_rowCheck"), CheckBox).Checked = CType(sender, CheckBox).Checked
            dataItem.Selected = CType(sender, CheckBox).Checked
        Next
        CalculateTotals()
    End Sub

The grid now works as required. The header checkbox toggles all checkboxes within the grid and also calculates the totals properly.