This is a migrated thread and some comments may be shown as answers.

CheckAll GridTemplateColumn persisting correct value

1 Answer 98 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 13 Oct 2017, 03:49 PM

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.

 

 

 

1 Answer, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 23 Oct 2017, 01:16 PM
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.
Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or