CheckAll GridTemplateColumn persisting correct value

2 posts, 0 answers
  1. David
    David avatar
    13 posts
    Member since:
    Apr 2013

    Posted 13 Oct 2017 Link to this post

    I have a grid that has a gridtemplatecolumn for a checkbox. In the header I have a checkbox to select/unselect all.The grid allows pagination and filtering. I run an OnCheckedChanged function on the checkbox in the header. I disable paging, rebind, loop through the records to update my record(s) in the database, enable paging and rebind again. The saving and selecting of each row on the pages works. The problem is that when I enable paging and rebind the grid, the checkbox in the header goes to unselected. The grid/check box no longer knows that the user checked the check box and that all visible rows in the grid are selected so the checkbox should be selected still. This would give the user the option to unselected the header checkbox to unselect all the rows.

    My question is how to tell the checkbox in the header, that all the rows that are visible in the grid (due to filtering applied, or pagination on) are selected so select the checkbox in the header to allow the user to unselect. At this point, my grid can show 10 records at a time, the user can filter to the rows they want while still having pagination on. They can select the header checkbox to select all of the rows but have no option to use the header to unselect all the rows.

    Below are snippets of the aspx gridtemplate column and the aspx.vb OnCheckedChanged function.

    <telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn" HeaderText="Selected" AllowFiltering="false">
         <ItemStyle Width="45px" Wrap="false" />  
         <HeaderStyle Width="45px" Wrap="false" />
         <ItemTemplate>
                    <asp:CheckBox ID="cbSelectedSearchResults" runat="server" Checked='<%# GetBooleanValue(Eval("Selected")) %>'                               OnCheckedChanged="ToggleRowSelectionSearchResults" AutoPostBack="True" />
          </ItemTemplate>
           <HeaderTemplate>
                    <asp:CheckBox Text="" ID="headerChkboxSearchResults" runat="server" OnCheckedChanged="ToggleSelectedStateSearchResults" AutoPostBack="True" />
           </HeaderTemplate>

    </telerik:GridTemplateColumn>

     

        Protected Sub ToggleSelectedStateSearchResults(ByVal sender As Object, ByVal e As EventArgs)
            Dim headerCheckBox As CheckBox = TryCast(sender, CheckBox)
            selectAll = headerCheckBox.Checked
            Dim strSQL As String = ""
            Dim selected As Integer = 0
            Dim ID As Integer = 0
            rgSelections.MasterTableView.AllowPaging = False
            rgSelections.Rebind()

            For Each dataItem As GridDataItem In rgSelections.MasterTableView.Items
                TryCast(dataItem.FindControl("cbSelectedSearchResults"), CheckBox).Checked = headerCheckBox.Checked
                dataItem.Selected = headerCheckBox.Checked

                ID = dataItem.GetDataKeyValue("ID")

                If headerCheckBox.Checked Then
                    selected = 1
                End If

                Try
                    strSQL = "update bridge.dbo.Tmp_BridgeJobOptions" & ucHeader1.SessionId & " set selected = " & selected & " where id = " & ID
                    mobjBridgeDatabase.subExecuteNonQuery(strSQL)
                Catch ex As SqlException
                    Throw New Exception(ex.Message & ", SQL: " & strSQL & ",frmBridgeLineCreation.ToggleSelectedStateSearchResults")
                End Try

            Next
            rgSelections.MasterTableView.AllowPaging = True
            rgSelections.Rebind()


            For Each dataItem As GridDataItem In rgSelections.MasterTableView.Items
                TryCast(dataItem.FindControl("cbSelectedSearchResults"), CheckBox).Checked = headerCheckBox.Checked
                dataItem.Selected = headerCheckBox.Checked
            Next

        End Sub

    Attached is a picture of my grid right after I checked the checkbox in the header. You can see all my rows are selected, but the header is back to unselected.

     

     

     

  2. Attila Antal
    Admin
    Attila Antal avatar
    376 posts

    Posted 23 Oct 2017 Link to this post

    Hi David,

    Since this scenario is using data values from database to distinguish selectable rows, you can simplify the code by making the grid rows selected using ItemDataBound event and selecting header checkbox using PreRender event of RadGrid. While updating the database can be done using the same method as before (inside the events of the checkboxes).

    Attached you can find a working sample of that.

    You may as well take a look at this Code Library Get selected items through all pages, similar to this scenario except that is using GridClientSelectColumns.

    Please try out the sample and see if that works for you.

    Kind Regards,
    Attila Antal
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top