devexpress
Implementowanie warunkowego wyboru wierszy siatki w DevExpress GridView
Szukaj…
Uwagi
Mam nadzieję, że powyższa przykładowa pomoc pomoże komuś, kto zmagał się jak ja, aby warunkowo wybrać wiersze, ponieważ domyślna funkcjonalność DevExpress wybiera wszystkie wiersze niezależnie od tego, czy ma „pole wyboru”, czy nie (gdy używasz ASPxGridView1.SelectAllRowsOnPage () lub ASPxGridView1.SelectRows ( ), ze względu na sposób implementacji kolumny „Pole wyboru”). Chociaż istnieje wiele przykładów na stronie wsparcia DevExpress, nie mogłem znaleźć działającej próbki lub scenariusza, który wyjaśnia to wymaganie.
Przykładowa ilustracja przy użyciu formularzy internetowych ASP.Net
Definicja GridView na stronie ASPX
Jak pokazano poniżej, pierwsza kolumna siatki jest zdefiniowana jako kolumna pola wyboru, które jest warunkowo wyczyszczone, jak pokazano w dalszych przykładach poniżej (pole wyboru nagłówka służy tylko do zaznaczania / odznaczania wszystkich wierszy na bieżącej stronie, ale można to samo rozszerzyć dla wszystkich łatwo na siatce):
<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>
Struktura tabeli SQL
Dane są ładowane z tabeli SQL „Klienci”, której struktura znajduje się poniżej (proszę zauważyć, że tabela jest standardową strukturą z bazy danych NorthWind, z nadmiarem kolumny „IsRegistered” w celu wykazania funkcji selekcji „warunkowej”):
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
);
Zdarzenie ładowania strony (strona .CS)
Zdarzenie Page_Load () i odpowiedni powiązany kod na stronie .CS. Uwaga: Niestandardowe właściwości JS dla DevExpress muszą mieć prefiks „cp”.
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();
}
}
Zdarzenie HtmlRowCreated (strona .CS)
To zdarzenie jest wywoływane dla każdego wiersza utworzonego w GridView po powiązaniu danych. Służy do warunkowego sprawdzenia, czy „IsRegistered” jest ustawione na „true”, „pole wyboru” w pierwszej kolumnie jest wyczyszczone. To samo służy również do ustawienia niestandardowej właściwości JS dla siatki, która będzie miała # oddzieloną listę wierszy, które mogą wybierać / usuwać w interfejsie użytkownika.
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;
}
}
}
}
Siatka Checkbox Load Event (strona .CS)
To zdarzenie jest wywoływane dla każdego pola wyboru, gdy jest „Załadowane” w interfejsie użytkownika. Służy do ustawiania stanu oraz dołączania kodu JavaScript, aby zaznaczyć / odznaczyć wiersz pola wyboru.
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);
}
Zaznacz wszystko na stronie pole wyboru w Zdarzeniu ładowania (strona .CS)
To zdarzenie służy do zaznaczania / odznaczania pola wyboru „Zaznacz wszystko na stronie” podczas poruszania się po stronach na podstawie ich statusu wyboru.
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;
}
Zdarzenie konfiguracji właściwości CustomJS siatki (strona .CS)
To zdarzenie służy do ustawienia „Liczby wybranych wierszy” bieżącej strony GridView. Jest to używane w JavaScript do automatycznego zaznaczania pola wyboru nagłówka.
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;
}
Kod JavaScript do obsługi zdarzeń klienta i powiązanych funkcji
Ta funkcja JavaScript jest wywoływana podczas zdarzenia zmiany sprawdzonej „pole wyboru”, zgodnie z definicją na stronie ASPX:
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 {
}
}
}
}
Ten kod JavaScript służy do zaznaczania pola wyboru „Zaznacz wszystko na stronie” w nagłówku na podstawie wybranych wierszy na bieżącej stronie 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--;
}
}
}
Ten moduł obsługi zdarzeń klienta JavaScript służy do ustawiania aktualnie wybranych wierszy ustawianych z serwera.
function OnGridCallBackBegin(s, e) {
currentSelectedRowsCount = ASPxGridView1.cp_SelectedRowsCount;
}