DevExpress Legacy ASPxGridView: как сделать так, чтобы заголовок столбца CheckBox проверял все или снимал все;также есть отдельные строки CheckBoxes влияют на заголовок CheckBox? - PullRequest
Новая
       62

DevExpress Legacy ASPxGridView: как сделать так, чтобы заголовок столбца CheckBox проверял все или снимал все;также есть отдельные строки CheckBoxes влияют на заголовок CheckBox?

0 голосов
/ 09 октября 2019

Простите, казалось бы, повторяющийся вопрос, но после двух часов работы над несколькими примерами кода я не увидел ни одного, который действительно работал бы для меня.

У меня есть клиент, для которого я работаю, у которого есть классическийДля пользовательского интерфейса нужно, чтобы сетка с первым столбцом представляла собой флажки ... с заголовком флажка, который при нажатии может выбрать все (или снять все) другие флажки в каждой строке данных. Если флажок отдельной строки установлен, они хотят, чтобы этот статус отражался в флажке заголовка;т.е. флажок заголовка отмечен, только если все остальные видимые строки также проверены. Я также хочу иметь возможность (конечно) выполнять некоторые действия на основе проверенных / выбранных строк на стороне сервера.

Я вынужден использовать их лицензированную на данный момент версию элементов управления DevExpress, которая является 12.2.5. и я, конечно, использую ASPxGridView, так как это веб-приложение. Как я уже говорил, после просмотра нескольких примеров кода я не могу заставить эту работу работать должным образом. Я вставил упрощенную версию кода, над которым я работаю, в надежде получить здесь некоторые рекомендации. (ПРИМЕЧАНИЕ: Пожалуйста, НЕ предлагайте такие вещи, как «обновление до последней версии», у меня здесь нет этой опции!) Заранее большое спасибо за вашу помощь.

Барри Л. Кэмп

Код следует:

Страница 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

Ответы [ 2 ]

1 голос
/ 10 октября 2019

Я вынужден использовать их лицензированную на данный момент версию элементов управления DevExpress 12.2.5

Да, если вы используете более старую версию, необходимо эмулироватьэта функциональность использует кучу кода.

Ознакомьтесь с OBSOLETE - ASPxGridView - Как реализовать функции SelectRows и SelectAllRowsOnPage CheckBox , чтобы узнать, как этого добиться.

0 голосов
/ 09 октября 2019

Попробуйте добавить следующие вызовы js и html в шаблон gridheader: 

       //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>
...