check all gridclientselectcolumn checkboxes on load

[Steve LaForge]

I am using a radgrid with a gridclientselectcolumn as an input tool to get a list of cost centers to be included in a report.

<telerik:RadGrid ID="gridEntitiesAndCCs" runat="server" AllowSorting="True" AllowMultiRowSelection="true"
  AutoGenerateColumns="False" GridLines="None" Width="100%">
  <MasterTableView DataKeyNames="FacilityID,CostCtr" AllowMultiColumnSorting="true">
    <SortExpressions>
      <telerik:GridSortExpression FieldName="ShortName" SortOrder="Ascending" />
      <telerik:GridSortExpression FieldName="DeptName" SortOrder="Ascending" />
    </SortExpressions>
    <Columns>
      <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderTooltip="Select all">
        <HeaderStyle Width="25" />
        <ItemStyle Width="25" />
      </telerik:GridClientSelectColumn>
      <telerik:GridBoundColumn DataField="ShortName" HeaderText="Entity"
        SortExpression="ShortName" UniqueName="ShortName">
        <HeaderStyle Width="150" />
        <ItemStyle Width="150" />
      </telerik:GridBoundColumn>
      <telerik:GridBoundColumn DataField="CostCtr" HeaderText="Cost Center"
        SortExpression="CostCtr" UniqueName="CostCtr">
        <HeaderStyle Width="100" />
        <ItemStyle Width="100" />
      </telerik:GridBoundColumn>
      <telerik:GridBoundColumn DataField="DeptName" HeaderText="Dept Name"
        SortExpression="DeptName" UniqueName="DeptName">
      </telerik:GridBoundColumn>
    </Columns>
  </MasterTableView>
  <ClientSettings EnablePostBackOnRowClick="false">
    <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="150" />
    <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
  </ClientSettings>
</telerik:RadGrid>

How can I update the grid so that all of the checkboxes in the gridclientselectcolumn and in that column's header are checked when it is initially loaded?  In other words, I want the default to be that all rows are selected.

Thank you!

[Princy]

Hello Steve,

Try the following code snippet in 'OnGridCreated' client event to select all the items in grid when it is initially loaded. If you want to select the header CheckBox, save the CliendID of Header CheckBox in a HiddenField and in 'OnGridCreated' event handler set its 'checked' propery as true. Check out the following code snippet.

ASPX:

<telerik:RadGrid>
   . . . . . . . . . . . . . . . . . .
    <ClientSettings EnablePostBackOnRowClick="false">
        <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
        <ClientEvents OnGridCreated="GridCreated" />
    </ClientSettings>
       . . . . . . . . . . . . . . . . . . .
 </telerik:RadGrid>

<asp:HiddenField ID="HiddenField1" runat="server" />

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridHeaderItem)
       {
           GridHeaderItem headerItem = (GridHeaderItem)e.Item;
           CheckBox chk = (CheckBox)headerItem["ClientSelectColumn"].Controls[0];
           HiddenField1.Value = chk.ClientID;
       }
   }

Java Script:

<script type="text/javascript">
    function GridCreated(sender, args) {
        var grid = sender;
        var masterTable = sender.get_masterTableView();
        masterTable.selectAllItems(true);//selecting all the items in grid
        var headerCheckbox = document.getElementById(document.getElementById('HiddenField1').value);//accessing Header CheckBox usig HiddenField value
        headerCheckbox.checked = true; // selecting CheckBox in header
    }
 </script>

Thanks,
Princy.

[Steve LaForge]

Thanks for the info.  I didn't get exactly what you sent me to work because my grid is in a user control so I ran into an issue trying to reference the hidden field from the javascript code.  However, I was able to get it to work without the code:

in my user control, I now have:

<script type="text/javascript">
  function gridCreated(sender, args) {
    var grid = sender;
    var masterTable = sender.get_masterTableView();
    masterTable.selectAllItems(true);   // selecting all the items in the grid
  }
</script>

I no longer have the hidden field.  I also don't have the "<ClientEvents OnGridCreated="gridCreated" />" hard-coded in my grid.  Instead, I added the following to my user control code-behind file:

Public WriteOnly Property selectAll() As Boolean
  Set(ByVal value As Boolean)
    If value = True Then
      gridEntitiesAndCCs.ClientSettings.ClientEvents.OnGridCreated = "gridCreated"
    Else
      gridEntitiesAndCCs.ClientSettings.ClientEvents.OnGridCreated = ""
    End If
  End Set
End Property

So now whereever I use my user control (which is named getDepts), if I want all of the items selected by default, I simply add:

    getDepts1.selectAll = true

Apparently the call to masterTable.selectAllItems(true) in gridCreated now takes care of setting the checkbox in the header row as well.

While this is now pretty simple, I think it would be a great enhancement to add to the radgrid control itself.  Perhaps something like <MasterTableView ClientSelectColumnSelectAll="true"...?

Thanks again!
Steve

[Veli]

Hello Steve,

If you have a server property for toggling the selection of all items, you do not actually need client script. You can use the PreRender event of the control or the page:

Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As EventArgs) Handles Me.PreRender
    For Each item As GridDataItem In gridEntitiesAndCCs.MasterTableView.Items
        item.Selected = selectAll
    Next
End Sub

The above code will select all the grid items if selectAll=True.

Veli
the Telerik team

[Sameers]

Of course! you need to make sure you are not doing it on Page postback. Otherwise, none of the selection change will affect on postback.

So wrap it on Page.IsPostback.

Private Sub Product_NotFillable_AddToPOMultiVendor_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
        If Not Page.IsPostBack Then
            For Each item As GridDataItem In grdMain.MasterTableView.Items
                item.Selected = True
            Next
        End If
    End Sub

[Dylan]

Hi,

I have a grid with checkbox (gridclientselectcolumn) on item and header with 2 combobox with templatecolumn. I'm able to unabled the checkbox header and ALL items in the grid but unable to check the header or items checkbox. When I debug I saw that the checkbox status is checked but it doesn't display as checked. Please help, thanks in advance.

ASPX

 

<telerik:RadGrid ID="dtgDetail" runat="server" AllowMultiRowSelection="True"

AllowPaging="True" AutoGenerateColumns="False" CellSpacing="0" GridLines="None">
<ClientSettings> <Selecting AllowRowSelect="True" /> </ClientSettings>
<MasterTableView>
<CommandItemSettings ExportToPdfText="Export to PDF" />

 <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

</RowIndicatorColumn>

 <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True" Created="True">

</ExpandCollapseColumn> <Columns>

<telerik:GridClientSelectColumn FilterControlAltText="Filter column1 column" UniqueName="checkbox">

<HeaderStyle Width="20px" />

</telerik:GridClientSelectColumn>

<telerik:GridBoundColumn DataField="RESOURCE_CODE" FilterControlAltText="Filter column column" HeaderText="Project ID" UniqueName="column"> </telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="RESOURCE_DESC" FilterControlAltText="Filter column7 column" HeaderText="Project Name" UniqueName="column7">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn column" HeaderText="On/Offshore Access" UniqueName="TemplateColumn">

<ItemTemplate>

<telerik:RadComboBox ID="cboProjOnOff" Runat="server" Width="120px">

<Items>

<telerik:RadComboBoxItem runat="server" Owner="cboProjOnOff" />

<telerik:RadComboBoxItem runat="server" Text="ON/SHORE" Value="ONOFF" Owner="cboProjOnOff" />

<telerik:RadComboBoxItem runat="server" Text="ONSHORE" Value="ON" Owner="cboProjOnOff" />

<telerik:RadComboBoxItem runat="server" Text="OFFSHORE" Value="OFF" Owner="cboProjOnOff" />

</Items>

</telerik:RadComboBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"

HeaderText="Discipline Access" UniqueName="TemplateColumn1">

<ItemTemplate>

<telerik:RadComboBox ID="cboProjDisc" Runat="server" Width="120px">

<Items>

<telerik:RadComboBoxItem runat="server" />

<telerik:RadComboBoxItem runat="server" Text="ALL" Value="ALL" />

<telerik:RadComboBoxItem runat="server" Text="AS OF USER PROFILE" Value="DEFAULT" />

</Items>

</telerik:RadComboBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

<PagerStyle PageSizeControlType="RadComboBox" />

</MasterTableView>

<PagerStyle PageSizeControlType="RadComboBox" />

<FilterMenu EnableImageSprites="False">

</FilterMenu>

</telerik:RadGrid>

Code Behind

For Each dgItem As GridDataItem In dtgDetail.Items

chkBox = CType(dgItem("checkbox").Controls(0), CheckBox)

chkBox.Checked = True

chkBox.Enabled = False

Next

For Each headeritem As GridHeaderItem In dtgDetail.MasterTableView.GetItems(GridItemType.Header)

chkBox = DirectCast(headeritem("checkbox").Controls(0), CheckBox)

chkBox.Checked = True

chkBox.Enabled = False

Next

 

[Dylan]

Hi,

I solved my problem already, thanks.