devexpress
Реализация условного выбора строк сетки в DevExpress GridView
Поиск…
замечания
Надеемся, что пример, приведенный выше, помогает кому-то, кто изо всех сил пытался сделать строки условно, поскольку функции по умолчанию DevExpress выбирает все строки независимо от того, имеет ли он флажок или нет (когда вы используете либо ASPxGridView1.SelectAllRowsOnPage (), либо ASPxGridView1.SelectRows ( ), из-за того, что используется столбец «Checkbox»). Хотя на сайте поддержки DevExpress есть различные примеры, я не мог определить рабочий образец или сценарий, объясняющий это требование.
Пример иллюстрации с использованием веб-форм ASP.Net
Определение GridView на странице ASPX
Как показано ниже, первый столбец сетки определяется как столбец флажка, который условно очищается, как показано в следующих примерах ниже (флажок заголовка предназначен только для выбора / отмены выбора всех строк на текущей странице, но тот же может быть расширен для всех на сетке легко):
<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
Данные загружаются из таблицы SQL «Клиенты», структура которой ниже (обратите внимание, что таблица является стандартной структурой из базы данных NorthWind, с избытком столбца «Исправлена», чтобы продемонстрировать функциональность выбора «условный»):
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
);
Загрузка страницы (страница с .CS)
Событие Page_Load () и соответствующий соответствующий код на странице .CS. Обратите внимание: свойства Custom JS для DevExpress должны иметь префикс «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 (страница .CS)
Это событие вызывается для каждой строки, созданной в GridView при привязке данных. Это используется, чтобы условно проверить, установлено ли значение «IsRegistered» равным «true», флажок «checkbox» в первом столбце очищается. Кроме того, то же самое используется для установки свойства Custom JS для сетки, в котором будет # разделенный список строк, которые разрешены для выбора / отмены выбора в пользовательском интерфейсе.
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;
}
}
}
}
Событие загрузки флажка сетки (страница .CS)
Это событие вызывается для каждого флажка, когда он загружается в пользовательский интерфейс. Это используется для установки его состояния, а также для добавления кода JavaScript для выбора / отмены выбора строки.
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);
}
Выделить все на странице в поле Загрузить событие (.CS Page)
Это событие используется для выбора / отмены выбора флажка «Выбрать все на странице» при навигации по страницам в зависимости от их статуса выбора.
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;
}
Событие настройки свойств Grid CustomJS (страница .CS)
Это событие используется для установки «Selected Rows Count» текущей страницы GridView. Это используется в JavaScript для автоматического выбора заголовка.
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 для обработки клиентских событий и связанных с ними функциональных возможностей
Эта функция JavaScript вызывается во время «checkbox» отмеченного события изменения, как определено на странице 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 {
}
}
}
}
Этот код JavaScript используется для флажка «Выбрать все на странице» в заголовке на основе выбранных строк на текущей странице 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--;
}
}
}
Этот обработчик события JavaScript JavaScript используется для установки выбранных в настоящее время строк, установленных на сервере.
function OnGridCallBackBegin(s, e) {
currentSelectedRowsCount = ASPxGridView1.cp_SelectedRowsCount;
}