Make a column of checkboxes for selecting the rows inside a DevExpress ASPxGridView control with a checkbox for selecting all items at the column's header!

<dx:GridViewCommandColumn ShowSelectCheckbox="true" Name="CheckAll"
      Width="5%" AllowDragDrop="False" VisibleIndex="0">
   <HeaderTemplate>
      <dx:ASPxCheckBox ID="CheckAllBox" type="checkbox" runat="server"
            ToolTip="Select/Unselect all" ClientInstanceName="CheckAllBox">
         <ClientSideEvents CheckedChanged="DoSomethingInJavaScript">
         </ClientSideEvents>
      </dx:ASPxCheckBox>
   </HeaderTemplate>
   <HeaderStyle HorizontalAlign="Center" />
   <CellStyle HorizontalAlign="Center" />
   <ClearFilterButton Visible="true" />
</dx:GridViewCommandColumn>

 
 

Adding the column above will have an effect like so:

 
 

The JavaScript side is seen here. Note that Foo is the name of our ASPxGridView and MyCallBackPanel_BeginCallback is the callback event for a ASPxCallbackPanel wrapping the ASPxGridView.

function DoSomethingInJavaScript(s, e) {
   if (Foo.GetVisibleRowsOnPage() == 0)
      return;
   if (!s.GetChecked())
      Foo.UnselectAllRowsOnPage();
   else {
      var topIndex = Foo.GetTopVisibleIndex();
      var bottomIndex = (topIndex + Foo.GetVisibleRowsOnPage());
      for (var i = topIndex; i < bottomIndex ; i++) {
         if (!Foo.IsCheckBoxDisabled(Foo.GetDataRowSelBtn(i)))
            Foo.SelectRowOnPage(i);
      }
   }
   MyCallBackPanel_BeginCallback(null, "refresh");
}