DevExpress Legacy ASPxGridView：如何让列 header CheckBox 全部选中或全部清除；也有单独的行 CheckBoxes 影响 header CheckBox？

Question

请原谅这个看似重复的问题，但经过两个小时并仔细研究了几个代码示例后，我还没有看到一个真正适合我的问题。

我有一个正在为之工作的客户，它具有经典的 UI 需求，需要一个第一列为复选框的网格...带有一个复选框 header，单击后可以select 每个数据行中的所有（或清除所有）其他复选框。如果选中单个行的复选框，他们希望该状态反映在 header 复选框中；即 header 复选框只有在所有其他可见行都被选中时才会被选中。我也希望能够（当然）根据服务器端的 checked/selected 行执行一些操作。

我只能使用他们的 currently-licensed 版本的 DevExpress 控件，即 12.2.5，而且我当然使用 ASPxGridView，因为这是一个 Web 应用程序。正如我已经说过的，在查看了几个代码示例后，我似乎无法使它正常工作。我粘贴了我正在处理的代码的简化版本，希望我能在这里得到一些指导。（注意：请不要提出 "upgrade to the latest version" 之类的建议，我这里没有可用的选项！）在此先感谢您的帮助。

巴里·坎普

代码如下：

ASPX 页面

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestPage.aspx.vb" Inherits="TestApp.TestPage" %>

<%@ Register assembly="DevExpress.Web.v12.2, Version=12.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxGridView" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.v12.2, Version=12.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dx" %>

<!doctype html />

<html>
<head>

  <script type="text/javascript">
    function checkAllCheckBox_OnCheckedChanged(sender, e) {
      var checked = sender.GetChecked();
      // Loop to set all checkboxes to column header checkbox state...?
    }
  </script>

</head>

<body>
  <dx:ASPxGridView ID="SomeInformationGridView" runat="server" KeyFieldName="ID" ClientInstanceName="grid" AutoGenerateColumns="False" SettingsPager-Mode="ShowPager" SettingsPager-PageSize="50" style="width: 95%;">
    <SettingsBehavior AllowGroup="false" AllowDragDrop="false" />

    <Columns>

      <dx:GridViewCommandColumn ShowSelectCheckbox="true" VisibleIndex="0" Width="32px" CellStyle-HorizontalAlign="Center">
        <HeaderTemplate>
          <dx:ASPxCheckBox ID="CheckAllCheckBox" runat="server" AutoPostBack="false" clientinstancename="checkAllCheckBox" OnInit="CheckAllCheckBox_Init">
            <ClientSideEvents CheckedChanged="checkAllCheckBox_OnCheckedChanged" />
          </dx:ASPxCheckBox>
        </HeaderTemplate>
        <HeaderStyle HorizontalAlign="Center" />
      </dx:GridViewCommandColumn>

      <dx:GridViewDataTextColumn FieldName="ID" VisibleIndex="1" Visible="false" ReadOnly="true" CellStyle-HorizontalAlign="Center">
        <HeaderStyle HorizontalAlign="Center" />
      </dx:GridViewDataTextColumn>
      <dx:GridViewDataTextColumn FieldName="SomeOtherData" VisibleIndex="2" Visible="true" ReadOnly="true" CellStyle-HorizontalAlign="Center">
        <HeaderStyle HorizontalAlign="Center" />
      </dx:GridViewDataTextColumn>

      <--! Other Columns Here -->

    </Columns>
  </dx:ASPxGridView>

</body>
</html>

VB Code-Behind

Imports System
Imports System.Web.UI
Imports DevExpress.Web.ASPxEditors
Imports DevExpress.Web.ASPxGridView

Partial Public Class TestPage
    Inherits Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
        Dim gridView As ASPxGridView = CType(Me.FindControl("SomeInformationGridView"), ASPxGridView)
        gridView.DataSource = GetMyInformation()
        gridView.DataBind()
    End Sub

    Protected Sub CheckAllCheckBox_Init(sender As Object, e As EventArgs)
        Dim checkBox As ASPxCheckBox = sender
        Dim grid As ASPxGridView = SomeInformationGridView ' CType(Me.FindControl("SomeInformationGridView"), ASPxGridView)
        checkBox.Checked = (grid.Selection.Count = grid.VisibleRowCount)
    End Sub

    Private Function GetMyInformation()
      ' Reads the data to be bound to the grid.
    End Function
End Class

Answer 1

尝试在 gridheader 模板中添加以下 js 和 html 调用：

       //javascript function 
     function CheckAll(chkBx, gvID)
    {
        var gv = document.getElementById(gvID);
        for (i = 1; i < gv.rows.length; i++) {
            if (gv.rows[i].style.display != 'none') {
                gv.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = chkBx.checked;
            }
        };
    };

   //add this to your grid header template
   <HeaderTemplate>
        <asp:CheckBox ID="chkAllAvail"  ToolTip="Select all" runat="server"   onclick="CheckAll(this, 'SomeInformationGridView');"    Visible="true" />
         </HeaderTemplate>

Answer 2

I am constrained to using their currently-licensed version of the DevExpress controls which is 12.2.5

是的，如果您使用的是这样的旧版本，则有必要使用一堆代码来模拟此功能。

查看 OBSOLETE - ASPxGridView - How to implement SelectRows and SelectAllRowsOnPage CheckBox features 说明以了解如何完成此操作。

DevExpress Legacy ASPxGridView：如何让列 header CheckBox 全部选中或全部清除；也有单独的行 CheckBoxes 影响 header CheckBox？

DevExpress Legacy ASPxGridView: How to have column header CheckBox check all or clear all; also have individual row CheckBoxes affect header CheckBox?

asp.net

vb.net

checkbox

devexpress

aspxgridview