devexpress
Implementazione della selezione condizionale delle righe della griglia in DevExpress GridView
Ricerca…
Osservazioni
Spero che l'illustrazione di esempio sopra aiuti qualcuno che ha difficoltà come me a fare in modo che le righe selezionino, in quanto la funzionalità predefinita di DevExpress seleziona tutte le righe indipendentemente dal fatto che abbia una "casella di controllo" o meno (quando si utilizza ASPxGridView1.SelectAllRowsOnPage () o ASPxGridView1.SelectRows ( ), a causa del modo in cui la colonna "Checkbox" è implementata). Sebbene ci siano vari esempi sul sito di supporto DevExpress, non sono riuscito a individuare un campione o uno scenario funzionante che spieghi questo requisito.
Esempio di illustrazione utilizzando Web Form ASP.Net
GridView definizione sulla pagina ASPX
Come mostrato di seguito, la prima colonna della griglia è definita come una colonna di caselle di controllo, che viene cancellata condizionatamente come mostrato negli esempi seguenti (la casella di controllo dell'intestazione serve solo a selezionare / deselezionare tutte le righe sulla pagina corrente, ma può essere estesa per tutti sulla griglia facilmente):
<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>
Struttura tabella SQL
I dati vengono caricati dalla tabella SQL "Clienti" la cui struttura è inferiore (si noti che la tabella è una struttura standard del database NorthWind, con la colonna "IsRegistered" in eccesso per dimostrare la funzionalità di selezione "condizionale"):
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
);
Evento caricamento pagina (pagina .CS)
L'evento Page_Load () e il relativo codice correlato nella pagina .CS. Si noti che le proprietà Custom JS per DevExpress devono avere un prefisso '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();
}
}
Evento HtmlRowCreated (pagina .CS)
Questo evento è invocato per ogni Riga creata su GridView al momento dell'associazione dati. Questo è usato per controllare condizionatamente se 'IsRegistered' è impostato su 'true', la 'checkbox' sulla prima colonna viene cancellata. Inoltre, lo stesso è usato per impostare una proprietà JS personalizzata per la griglia che avrà l'elenco # separato di righe che sono permesse per selezionare / non selezionare sull'interfaccia utente.
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;
}
}
}
}
Grid Checkbox Load Event (.CS Page)
Questo evento viene invocato per ogni checkbox quando è "Load" sull'interfaccia utente. Viene utilizzato per impostare lo stato e per allegare il codice JavaScript per selezionare / deselezionare la riga della casella di controllo.
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);
}
Seleziona tutto nella casella di controllo Pagina su Carica evento (pagina .CS)
Questo evento viene utilizzato per selezionare / deselezionare la casella di controllo "Seleziona tutto nella pagina" durante la navigazione delle pagine, in base al loro stato di selezione.
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;
}
Evento di configurazione delle proprietà CustomJS griglia (pagina .CS)
Questo evento viene utilizzato per impostare "Conteggio righe selezionate" della pagina corrente di GridView. Questo è usato in JavaScript per selezionare automaticamente la casella di controllo dell'intestazione.
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;
}
Codice JavaScript per gestire gli eventi del client e le relative funzionalità
Questa funzione JavaScript è invocata durante l'evento di modifica spuntato 'checkbox', come definito nella pagina 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 {
}
}
}
}
Questo codice JavaScript viene utilizzato per selezionare l'opzione "Seleziona tutto nella pagina" nell'intestazione, in base alle righe selezionate nella pagina corrente di 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--;
}
}
}
Questo gestore di eventi del client JavaScript viene utilizzato per impostare le righe attualmente selezionate impostate dal server.
function OnGridCallBackBegin(s, e) {
currentSelectedRowsCount = ASPxGridView1.cp_SelectedRowsCount;
}