devexpress
Bedingte Auswahl von Rasterzeilen in DevExpress GridView implementieren
Suche…
Bemerkungen
Ich hoffe, die obige Beispielabbildung hilft jemandem, der wie ich Schwierigkeiten hat, Zeilen bedingt auszuwählen, da die Standardfunktion von DevExpress alle Zeilen auswählt, unabhängig davon, ob sie ein 'Kontrollkästchen' hat oder nicht (wenn Sie entweder ASPxGridView1.SelectAllRowsOnPage () oder ASPxGridView1.SelectRows ( ), weil die Spalte 'Checkbox' implementiert ist). Obwohl es verschiedene Beispiele auf der DevExpress-Support-Site gibt, konnte ich keine Arbeitsprobe oder ein Szenario finden, die diese Anforderung erklären.
Beispiel für die Verwendung von ASP.Net Web Forms
GridView-Definition auf der ASPX-Seite
Wie unten gezeigt, ist die erste Spalte des Rasters als Checkbox-Spalte definiert, die wie in den folgenden Beispielen gezeigt bedingt deaktiviert ist (das Ankreuzfeld für die Überschrift dient nur zum Aktivieren / Deaktivieren aller Zeilen auf der aktuellen Seite, kann jedoch für alle erweitert werden.) leicht in der Startaufstellung):
<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="True" ClientInstanceName="ASPxGridView1" KeyFieldName="CustomerID" Width="100%"
OnHtmlRowCreated="ASPxGridView1_HtmlRowCreated" OnCustomJSProperties="ASPxGridView1_CustomJSProperties">
<SettingsPager PageSize="30" />
<Settings VerticalScrollBarMode="Visible" VerticalScrollableHeight="350" />
<Paddings Padding="0px" />
<Border BorderWidth="0px" />
<BorderBottom BorderWidth="1px" />
<Columns>
<dx:GridViewDataTextColumn Caption="#" VisibleIndex="0">
<DataItemTemplate>
<dx:ASPxCheckBox ID="cbCheck" runat="server" AutoPostBack="false" CssClass="chkSelDgProdRow" OnLoad="ASPxGridView1_cbCheck_Load" />
</DataItemTemplate>
<HeaderTemplate>
<dx:ASPxCheckBox ID="cbPageSelectAll" runat="server" ToolTip="Select/Unselect all rows on the page" ClientInstanceName="cbPageSelectAll"
ClientSideEvents-CheckedChanged="function(s, e) { checkUncheckSelectableRowsOnPage(s.GetChecked()); }" OnLoad="ASPxGridView1_cbPageSelectAll_Load" />
</HeaderTemplate>
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="ContactName" VisibleIndex="2">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="CompanyName" VisibleIndex="1">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="ContactTitle" VisibleIndex="3">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="City" VisibleIndex="5">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Country" VisibleIndex="6">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Phone" VisibleIndex="9">
</dx:GridViewDataTextColumn>
</Columns>
<ClientSideEvents BeginCallback="OnGridCallBackBegin" />
</dx:ASPxGridView>
SQL-Tabellenstruktur
Die Daten werden aus der SQL-Tabelle 'Customers' geladen, deren Struktur sich unten befindet (beachten Sie, dass die Tabelle eine Standardstruktur aus der NorthWind-Datenbank ist, die überzählige 'IsRegistered'-Spalte enthält, um die Auswahlfunktion' bedingt 'zu demonstrieren):
CREATE TABLE [dbo].[Customers] (
[CustomerID] NCHAR (5) NOT NULL,
[CompanyName] NVARCHAR (40) NOT NULL,
[ContactName] NVARCHAR (30) NULL,
[ContactTitle] NVARCHAR (30) NULL,
[Address] NVARCHAR (60) NULL,
[City] NVARCHAR (15) NULL,
[Region] NVARCHAR (15) NULL,
[PostalCode] NVARCHAR (10) NULL,
[Country] NVARCHAR (15) NULL,
[Phone] NVARCHAR (24) NULL,
[Fax] NVARCHAR (24) NULL,
[IsRegistered] BIT NULL
);
Ereignis zum Laden der Seite (.CS-Seite)
Das Ereignis PageLoad () und den entsprechenden zugehörigen Code auf der Seite .CS. Bitte beachten Sie, dass die Custom JS-Eigenschaften für DevExpress ein Präfix "cp" haben müssen.
private const string _selectableRowsKey = "cp_SelectableRows";
private const string _selectedRowsCountKey = "cp_SelectedRowsCount";
protected void Page_Load(object sender, EventArgs e)
{
PopulateGrid();
}
private void PopulateGrid()
{
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["NWindConnectionString"].ConnectionString;
conn.Open();
using (SqlCommand cmd = new SqlCommand("SELECT * FROM [Customers]", conn))
{
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
ASPxGridView1.DataSource = dt;
ASPxGridView1.DataBind();
}
conn.Close();
}
}
HtmlRowCreated-Ereignis (CS-Seite)
Dieses Ereignis wird für jede Zeile aufgerufen, die bei der Datenbindung in GridView erstellt wird. Dies wird verwendet, um bedingt zu prüfen, ob 'IsRegistered' auf 'true' gesetzt ist, und das 'Kontrollkästchen' in der ersten Spalte ist deaktiviert. Dasselbe wird auch verwendet, um eine benutzerdefinierte JS-Eigenschaft für das Raster festzulegen, in der # eine Liste von Zeilen mit Zeilen enthalten ist, die für das Auswählen / Abwählen der Benutzeroberfläche zulässig sind.
protected void ASPxGridView1_HtmlRowCreated(object sender, ASPxGridViewTableRowEventArgs e)
{
if (e.RowType == GridViewRowType.Data)
{
if (e.GetValue("IsRegistered") != null)
{
if (e.GetValue("IsRegistered") != DBNull.Value && (bool)e.GetValue("IsRegistered"))
e.Row.Cells[0].Controls.Clear();
else
{
string selectableRows = string.Empty;
if (ASPxGridView1.JSProperties.ContainsKey(_selectableRowsKey))
selectableRows = (string)ASPxGridView1.JSProperties[_selectableRowsKey];
selectableRows += "#" + e.VisibleIndex.ToString();
ASPxGridView1.JSProperties[_selectableRowsKey] = selectableRows;
}
}
}
}
Ereignis-Checkbox-Ladeereignis (CS-Seite)
Dieses Ereignis wird für jedes Kontrollkästchen aufgerufen, wenn es auf der Benutzeroberfläche geladen wird. Dies wird verwendet, um den Status festzulegen und JavaScript-Code anzuhängen, um die Zeile des Kontrollkästchens auszuwählen bzw. die Auswahl aufzuheben.
protected void ASPxGridView1_cbCheck_Load(object sender, EventArgs e)
{
ASPxCheckBox cb = (ASPxCheckBox)sender;
GridViewDataItemTemplateContainer container = (GridViewDataItemTemplateContainer)cb.NamingContainer;
cb.ClientInstanceName = string.Format("cbCheck{0}", container.VisibleIndex);
cb.Checked = ASPxGridView1.Selection.IsRowSelected(container.VisibleIndex);
cb.ClientSideEvents.CheckedChanged = string.Format("function (s, e) {{ ASPxGridView1.SelectRowOnPage({0}, s.GetChecked()); updateSelectedKeys(s.GetChecked()); }}", container.VisibleIndex);
}
Aktivieren Sie das Kontrollkästchen "Alles auf Seite" beim Ereignis "Load" (.CS-Seite).
Dieses Ereignis wird verwendet, um das Kontrollkästchen "Alle auf Seite auswählen" auszuwählen bzw. die Auswahl aufzuheben, wenn Sie durch die Seiten navigieren, basierend auf ihrem Auswahlstatus.
protected void ASPxGridView1_cbPageSelectAll_Load(object sender, EventArgs e)
{
ASPxCheckBox cb = (ASPxCheckBox)sender;
ASPxGridView grid = (cb.NamingContainer as GridViewHeaderTemplateContainer).Grid;
bool cbChecked = true;
int start = grid.VisibleStartIndex;
int end = grid.VisibleStartIndex + grid.SettingsPager.PageSize;
end = (end > grid.VisibleRowCount ? grid.VisibleRowCount : end);
for (int i = start; i < end; i++)
{
DataRowView dr = (DataRowView)(grid.GetRow(i));
if (!grid.Selection.IsRowSelected(i))
{
if (dr["IsRegistered"] == DBNull.Value || !(bool)dr["IsRegistered"])
{
cbChecked = false;
break;
}
}
}
cb.Checked = cbChecked;
}
Einstellungsereignis für die CustomJS-Eigenschaften für das Raster (.CS-Seite)
Dieses Ereignis wird verwendet, um die 'Selected Rows Count' der aktuellen Seite von GridView festzulegen. Dies wird in JavaScript verwendet, um das Kontrollkästchen für die Kopfzeile automatisch auszuwählen.
protected void ASPxGridView1_CustomJSProperties(object sender, ASPxGridViewClientJSPropertiesEventArgs e)
{
ASPxGridView grid = sender as ASPxGridView;
int start = grid.VisibleStartIndex;
int end = grid.VisibleStartIndex + grid.SettingsPager.PageSize;
int selectNumbers = 0;
end = (end > grid.VisibleRowCount ? grid.VisibleRowCount : end);
for (int i = start; i < end; i++)
if (grid.Selection.IsRowSelected(i))
selectNumbers++;
e.Properties[_selectedRowsCountKey] = selectNumbers;
}
JavaScript-Code zum Verarbeiten von Clientereignissen und zugehörigen Funktionen
Diese JavaScript-Funktion wird während eines Checkbox-Änderungsereignisses aufgerufen, wie auf der ASPX-Seite definiert:
function checkUncheckSelectableRowsOnPage(isChecked) {
var selectableRowIndexes = ASPxGridView1.cp_SelectableRows;
var grdStartIndex = ASPxGridView1.visibleStartIndex;
var grdEndIndex = grdStartIndex + ASPxGridView1.pageRowCount;
if (selectableRowIndexes != null && selectableRowIndexes != '') {
var rowIdxes = selectableRowIndexes.split("#");
var selectedRowsCount = 0;
if (rowIdxes != null) {
try {
for (var i = 0; i < rowIdxes.length; i++) {
if (rowIdxes[i] != "") {
var rowIndex = parseInt(rowIdxes[i]);
if (rowIndex != NaN && rowIndex >= 0 && rowIndex >= grdStartIndex && rowIndex < grdEndIndex) {
if (ASPxClientControl.GetControlCollection().GetByName("cbCheck" + rowIdxes[i]) != null) {
if (isChecked) {
ASPxGridView1.SelectRowOnPage(rowIdxes[i]);
selectedRowsCount++;
}
else
ASPxGridView1.UnselectRowOnPage(rowIdxes[i]);
ASPxClientControl.GetControlCollection().GetByName("cbCheck" + rowIdxes[i]).SetChecked(isChecked);
}
}
}
}
//updateSelectedKeys(); // Can be used if the selected keys needs to be saved separately in a Hidden field
ASPxGridView1.cp_SelectedRowsCount = selectedRowsCount;
currentSelectedRowsCount = selectedRowsCount;
}
finally {
}
}
}
}
Dieser JavaScript-Code wird verwendet, um das Kontrollkästchen "Alle auf Seite auswählen" in der Kopfzeile auszuwählen, basierend auf den ausgewählten Zeilen auf der aktuellen Seite von GridView.
var currentSelectedRowsCount = 0;
function updateSelectedKeys(isChecked) {
var selKeys = ASPxGridView1.GetSelectedKeysOnPage();
if (selKeys != null) {
var cpIDsList = '';
try {
for (var i = 0; i < selKeys.length; i++) {
cpIDsList += selKeys[i] + ',';
}
}
finally {
}
//$("#hdnSelectedCatProdIDs").val(cpIDsList);
if (isChecked) {
currentSelectedRowsCount++;
cbPageSelectAll.SetChecked(selKeys.length == ASPxGridView1.cp_SelectedRowsCount);
}
else {
cbPageSelectAll.SetChecked(selKeys.length == currentSelectedRowsCount);
currentSelectedRowsCount--;
}
}
}
Dieser JavaScript-Clientereignishandler wird verwendet, um aktuell ausgewählte Zeilen festzulegen, die vom Server festgelegt werden.
function OnGridCallBackBegin(s, e) {
currentSelectedRowsCount = ASPxGridView1.cp_SelectedRowsCount;
}