mercredi 9 octobre 2019

How to have Column Header checkbox check all or clear all; individual row checkboxes affect header checkbox?

Forgive the seemingly repeated question but after two hours and poring over several code samples, I've not seen one that actually works for me.

I have a client I am doing work for which has the classic UI need of wanting a grid with the first column being checkboxes... with a checkbox header, which when clicked can select all (or clear all) of the other checkboxes in each data row. If an individual row's checkbox is checked, they want that status reflected in the header checkbox; i.e. the header checkbox is only checked if all other visible rows are also checked. I also want to be able to (of course) perform some action based on checked/selected rows on the server side.

I am constrained to using their currently-licensed version of the DevExpress controls which is 12.2.5, and I am of course using the ASPxGridView as this is a web application. As I've already stated, after looking at several code examples I cannot seem to make this work properly. I've pasted in a simplified version of the code I am working on, in the hopes I can get some guidance here. Thanks much in advance for your assistance.

Barry L. Camp

Code follows:

ASPX Page

<%@ 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



Aucun commentaire:

Enregistrer un commentaire