使用 ASP.Net Web 窗体的示例说明
ASPX 页面上的 GridView 定义
如下所示，第一列网格被定义为一个复选框列，有条件地清除，如下面的进一步示例所示（标题复选框仅用于选择/取消选择当前页面上的所有行，但同样可以扩展到所有行在网格上）：
<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 表’Customers’加载，其结构如下（请注意该表是 NorthWind 数据库的标准结构，具有多余的’IsRegistered’列以演示’条件’选择功能）：
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 页面）
._L 页面上的 Page_Load() 事件和相应的相关代码。请注意，DevExpress 的 Custom JS 属性需要具有前缀’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，清除第一列上的复选框。此外，它也用于为网格设置 Custom JS 属性，该属性将具有允许在 UI 上选择/取消选择的#left 行列表。
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 页面）
在 UI 上加载时，会为每个复选框调用此事件。这用于设置它的状态以及附加 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 页面）上的所有页面复选框
此事件用于在导航页面时根据其选择状态选择/取消选中全选页面复选框。
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 页面）
此事件用于设置 GridView 当前页面的 Selected Rows Count。这在 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 函数，如 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 客户端事件处理程序用于设置从 Server 设置的当前选定行。
function OnGridCallBackBegin(s, e) {
currentSelectedRowsCount = ASPxGridView1.cp_SelectedRowsCount;
}