devexpress
Implementación de la selección condicional de filas de la cuadrícula en DevExpress GridView
Buscar..
Observaciones
Espero que la ilustración de muestra anterior ayude a alguien que luchó como yo a hacer que las filas se seleccionen condicionalmente, ya que la funcionalidad predeterminada de DevExpress selecciona todas las filas independientemente de si tiene una "casilla de verificación" o no (cuando usa ASPxGridView1.SelectAllRowsOnPage () o ASPxGridView1.SelectRows ( ), debido a la forma en que se implementa la columna 'Checkbox'). Aunque hay varios ejemplos en el sitio de soporte de DevExpress, no pude detectar una muestra o escenario que explique este requisito.
Ejemplo de ilustración utilizando formularios web de ASP.Net
Definición de GridView en la página ASPX
Como se muestra a continuación, la primera columna de la cuadrícula se define como una columna de casilla de verificación, que se borra condicionalmente como se muestra en los siguientes ejemplos (la casilla de verificación del encabezado es solo para seleccionar / deseleccionar todas las filas en la página actual, pero la misma puede extenderse para todas las filas). en la rejilla fácilmente):
<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>
Estructura de la tabla SQL
Los datos se cargan desde la tabla de SQL 'Clientes' cuya estructura se encuentra a continuación (tenga en cuenta que la tabla es una estructura estándar de la base de datos de NorthWind, que tiene un exceso de columna 'IsRegistered' para demostrar la funcionalidad de selección 'condicional'):
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 de carga de página (página .CS)
El evento Page_Load () y el código relacionado correspondiente en la página .CS. Tenga en cuenta que las propiedades de JS personalizadas para DevExpress deben tener un prefijo de '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();
}
}
HtmlRowCreated evento (página .CS)
Este evento se invoca para cada fila creada en GridView en el enlace de datos. Esto se usa para verificar condicionalmente si 'IsRegistered' está establecido en 'true', la 'casilla de verificación' en la primera columna está desactivada. Además, lo mismo se usa para establecer una propiedad JS personalizada para la cuadrícula que tendrá una lista separada por # de filas permitidas para seleccionar / deseleccionar en la interfaz de usuario.
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 (Página .CS)
Este evento se invoca para cada casilla de verificación cuando se carga en la IU. Esto se usa para establecer su estado, así como para adjuntar código JavaScript para seleccionar / deseleccionar la fila de la casilla de verificación.
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);
}
Seleccionar todo en la casilla de verificación de página en el evento de carga (página .CS)
Este evento se utiliza para seleccionar / deseleccionar la casilla de verificación "Seleccionar todo en la página" al navegar por las páginas, en función de su estado de selección.
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 de configuración de propiedades de Grid CustomJS (página .CS)
Este evento se usa para establecer el 'Recuento de filas seleccionadas' de la página actual de GridView. Esto se usa en JavaScript para seleccionar automáticamente la casilla de verificación del encabezado.
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;
}
Código JavaScript para manejar eventos de clientes y funcionalidad relacionada
Esta función de JavaScript se invoca durante el evento de cambio marcado en 'casilla de verificación', como se define en la página 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 {
}
}
}
}
Este código JavaScript se usa para la casilla de verificación "Seleccionar todo en la página" en el encabezado, en función de las filas seleccionadas en la página actual de 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--;
}
}
}
Este controlador de eventos del cliente JavaScript se utiliza para establecer las filas seleccionadas actualmente que se configuran desde el servidor.
function OnGridCallBackBegin(s, e) {
currentSelectedRowsCount = ASPxGridView1.cp_SelectedRowsCount;
}