ComponentArt.web.ui Grid

序:次系列文章为ComponentArt.web.ui 3.0文档的中文翻译(主要为grid,如有时间将继续)
ComponentArt Grid指南
概述:
为ASP.NET设计的ComponentArt Grid结合了我们的专利表现技术和AJAX技术，包括客户端，服务器端和回传运行模式
主要特征包括：分页，排序，分组，过滤，查找，列缩放和排序，分级显示和多重表格，客户端和服务器端模板，多种记录选择，记录编辑，条件格式化，右键菜单，键盘控制
实现客户端运行模式
客户端运行模式下的ComponentArt Grid(RunningMode="Client")能够提供更快的执行速度和更丰富的用户界面。在客户端运行模式下，分页，排序和过滤由客户端浏览器控制。不需要回到服务器来刷新数据和页面元素。然而，当存储在客户端的数据超过5000条记录时，执行效率会降低，如果你的查询返回数据超过5000条，可以考虑使用Callback模式来从服务器获得更多的数据，而且不需要强制回传整个网页
使用客户端运行模式实现一个Grid
1．新建项目grid_client.aspx
2．在设计视图，从工具箱拖拽ComponentArt Grid控件到页面，id=“Grid1”
3.在属性页设置Grid属性如下表

属性	值
ImagesBaseUrl	images
PagerImagesFolderUrl	images
PagerStyle	Slider
RunningMode	Client

4.拷贝表格需要的图片和滑块到你的项目的图片文件夹.你可以找到滑块图片在\live_examples\grid\features\client_sideRunningMode\images\pager.
5.在Page_Load事件添加以下代码 [ C# ]

if (!IsPostBack)
{ Grid1.DataSource = MakeDataTable();
Grid1.DataBind();
}

6.添加一个MakeDataTable()函数来填充和返回一个ADO.NET DataTable.下例代码产生了一个DataTable [ C# ]

public DataTable MakeDataTable()
{ DataTable dt = new DataTable();
dt.TableName = "DTable";
DataColumn dc = new DataColumn();
dc.DataType = Type.GetType("System.Int32");
dc.ColumnName = "ID";
dt.Columns.Add(dc);
dc = new DataColumn();
dc.DataType = Type.GetType("System.String");
dc.ColumnName = "Item";
dt.Columns.Add(dc);
dc = new DataColumn();
dc.DataType = Type.GetType("System.Double");
dc.ColumnName = "Tick";
dt.Columns.Add(dc);
int i = 0;
do
{
    DataRow dr = dt.NewRow();
    dr["id"] = i;
    dr["item"] = "Item " + i.ToString();
    dr["Tick"] = i;
    dt.Rows.Add(dr);
    i++;
}
while (i <= 4000);
dt.AcceptChanges();
return dt;
}

2.使用回调模式(AJAX)实现一个Grid

当你有大量数据—数百万条记录时，ComponentArt Grid在（RunningMode="Callback")回调运行模式能够提供最好的界面. 在这种模式下, ComponentArt Grid 使用回调来只刷新分页的数据.其他页面元素如图象不刷新，没有数据的表格区域保持原状态.对于很少的数据要得到好的界面效果，客户端运行模式是最好的选择

在回调

在Callback模式下当表格用最近数据重汇时一个微调按纽将出现. 这表明数据在回调中，延迟时间越长说明连接速度越慢或数据量越长

注意：Callback运行模式不支持服务器端模板，因为这种模式不能访问模板中的控件，服务器端模板在运行时产生一个无效的错误

实现一个在Callback运行模式下的表格

1．新建项目grid_client.aspx

2．在设计视图，从工具箱拖拽ComponentArt Grid控件到页面，id=“Grid1”

3.在属性页设置Grid属性如下表

属性	值
ImagesBaseUrl	images
PagerImagesFolderUrl	images
PagerStyle	Slider
RunningMode	Callback

4. 拷贝表格需要的图片和滑块到你的项目的图片文件夹.你可以找到滑块图片在\live_examples\grid\features\client_sideRunningMode\images\pager.

5.在Page_Load事件添加代码

[ C# ]

if (!Page.IsPostBack)

{

Grid1.DataSource = buildGridData();

Grid1.DataBind();

}

6.在页面初始化事件建立和指定服务器端事件委托给PageIndexChanged, SortCommand, NeedRebind, and NeedDataSource 事件

[ C# ]

protected void Page_Init(object sender, EventArgs e)

{

Grid1.PageIndexChanged +=

new ComponentArt.Web.UI.Grid.PageIndexChangedEventHandler

(OnPageIndexChanged);

Grid1.SortCommand +=

new ComponentArt.Web.UI.Grid.SortCommandEventHandler

(OnSortCommand);

Grid1.NeedRebind +=

new ComponentArt.Web.UI.Grid.NeedRebindEventHandler

(OnNeedRebind);

Grid1.NeedDataSource +=

new ComponentArt.Web.UI.Grid.NeedDataSourceEventHandler

(OnNeedDataSource);

}

7.添加处理程序给上述事件.根据表格的要求，这些函数设置新页的索引，获得新的排序语句，刷新从数据库得到的数据或者重绑定到现有数据

[ C# ]

public void OnPageIndexChanged(object sender,

ComponentArt.Web.UI.GridPageIndexChangedEventArgs args)

{

Grid1.CurrentPageIndex = args.NewIndex;

}

public void OnSortCommand(object sender,

ComponentArt.Web.UI.GridSortCommandEventArgs args)

{

Grid1.Sort = args.SortExpression;

}

public void OnNeedDataSource(object sender, EventArgs oArgs)

{

Grid1.DataSource = buildGridData();

}

public void OnNeedRebind(object sender, System.EventArgs oArgs)

{

Grid1.DataBind();

}

8.添加buildGridData()函数，填充和返回ADO.NET数据集.下面的例子使用简单的Access数据库在\live_examples\common\db\demo.mdb.拷贝demo.mdb到你的项目数据文件夹

[ C# ]

private System.Data.DataSet buildGridData()

{

string conStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=";

conStr += Server.MapPath("~/App_Data/demo.mdb");

System.Data.OleDb.OleDbConnection dbCon =

new System.Data.OleDb.OleDbConnection(conStr);

dbCon.Open();

string sql = "SELECT * FROM Posts ORDER BY LastPostDate DESC";

System.Data.OleDb.OleDbDataAdapter dbAdapter =

new System.Data.OleDb.OleDbDataAdapter(sql, dbCon);

System.Data.DataSet ds = new System.Data.DataSet();

dbAdapter.Fill(ds);

return ds;

}

9..编译浏览页面

3.使用服务器端运行模式实现一个Grid

当你需要访问模板时使用服务器端运行模式的ComponentArt Grid，这种模式实现回传的刷新、分页，排序和数据分组

实现服务器端运行模式的Grid

1.在设计视图，从工具箱拖拽ComponentArt Grid控件到页面，id=“Grid1”

2.在HTML视图，替换现有grid标记为下面的标记。这些设置了服务器端运行模式，含有一层，包含5列.每列绑定在DataSet中的DataTable的字段中

<ComponentArt:Grid ID="Grid1"

CssClass="Grid"

FooterCssClass="GridFooter"

RunningMode="Server"

PagerStyle="Slider"

PagerImagesFolderUrl="images"

PagerTextCssClass="PagerText"

PageSize="18"

ImagesBaseUrl="images"

Width="710" Height="390"

runat="server">

<ComponentArt:GridLevel DataKeyField="PostId">

<ComponentArt:GridColumn DataField="PostId" />

<ComponentArt:GridColumn DataField="Subject" />

<ComponentArt:GridColumn DataField="LastPostDate"

FormatString="MMM dd yyyy, hh:mm tt" />

<ComponentArt:GridColumn DataField="StartedBy" />

<ComponentArt:GridColumn DataField="TotalViews" />

</Columns>

</ComponentArt:GridLevel>

</Levels>

</ComponentArt:Grid>

3.在代码视图，在Load事件，在第一次页面调用时绑定到数据源

[ C# ]

if (!Page.IsPostBack)

{

Grid1.DataSource = buildGridData();

Grid1.DataBind();

}

[ VB.NET ]

If Not IsPostBack Then

Grid1.DataSource = buildGridData()

Grid1.DataBind()

End If

4.在Page_Init事件, 建立和指定服务器端事件委托给PageIndexChanged, SortCommand, NeedRebind, 和NeedDataSource 事件.

[ C# ]

protected void Page_Init(object sender, EventArgs e)

{

Grid1.PageIndexChanged +=

new ComponentArt.Web.UI.Grid.PageIndexChangedEventHandler

(OnPageIndexChanged);

Grid1.SortCommand +=

new ComponentArt.Web.UI.Grid.SortCommandEventHandler

(OnSortCommand);

Grid1.NeedRebind +=

new ComponentArt.Web.UI.Grid.NeedRebindEventHandler

(OnNeedRebind);

Grid1.NeedDataSource +=

new ComponentArt.Web.UI.Grid.NeedDataSourceEventHandler

(OnNeedDataSource);

}

5. 添加处理程序给上述事件.根据表格的要求，这些函数设置新页的索引，获得新的排序语句，刷新从数据库得到的数据或者重绑定到现有数据

[ C# ]

public void OnPageIndexChanged

(object sender, ComponentArt.Web.UI.GridPageIndexChangedEventArgs args)

{

Grid1.CurrentPageIndex = args.NewIndex;

}

public void OnSortCommand

(object sender, ComponentArt.Web.UI.GridSortCommandEventArgs args)

{

Grid1.Sort = args.SortExpression;

}

public void OnNeedDataSource(object sender, EventArgs oArgs)

{

Grid1.DataSource = buildGridData();

}

public void OnNeedRebind(object sender, System.EventArgs oArgs)

{

Grid1.DataBind();

}

6. 添加buildGridData()函数，填充和返回ADO.NET数据集.下面的例子使用简单的Access数据库在\live_examples\common\db\demo.mdb.拷贝demo.mdb到你的项目数据文件夹

[ C# ]

private System.Data.DataSet buildGridData()

{

string conStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=";

conStr += Server.MapPath("~/App_Data/demo.mdb");

System.Data.OleDb.OleDbConnection dbCon =

new System.Data.OleDb.OleDbConnection(conStr);

dbCon.Open();

string sql = "SELECT * FROM Posts ORDER BY LastPostDate DESC";

System.Data.OleDb.OleDbDataAdapter dbAdapter =

new System.Data.OleDb.OleDbDataAdapter(sql, dbCon);

System.Data.DataSet ds = new System.Data.DataSet();

dbAdapter.Fill(ds);

return ds;

}

使用ComponentArt Grid的服务器端模板

通过它的不同的用户个性化定制特征，ComponentArt Grid包括服务器控件对内部内容使用服务器模板的正常能力，这篇文章概述了表格使用服务器端模板的典型用法，同时也指出了开发者可以获得的这些功能支持的事件和方法

在选择使用服务器段模板之前，必须保证读过一遍Web.UI控件模板概述。可能客户端模板更适合你的程序

概述

ComponentArt Grid中的服务器端模板专门用于模板化数据元素。他们允许任何服务器端元素绑定到表格的数据。最主要的，它使表格元素能够包含服务器端控件的能力，能够产生服务器端事件，保持状态和执行其他服务器端逻辑

定义服务器端模板

在服务器端模板能够用于表格之前，我们必须在它的ServerTemplates块中定义

...

<ComponentArt:GridServerTemplate ID="LabelTemplate" />

<asp:Label runat="server" ID="myLabel" BorderWidth="2" Text="<%# Container.DataItem["FullName"] %>" />

</Template>

</ComponentArt:GridServerTemplate>

</ServerTemplates>

上例会在调用此模板的元素中呈现一个有两像素边框、包含fullname字段的标签

要连接定义的模板到表格列，只要简单的设定GridColumn的DataCellServerTemplateId到你要使用的服务器模板的ID：

<ComponentArt:GridColumn ... DataCellServerTemplateId="LabelTemplate" />

注意：数据绑定表达式的语法与你可能用过的语法有一些不同。不需要使用DataBinder.Eval来得到表达式。Container.DataItem总是指向模板绑定的GridItem (数据行)，你可以简单的使用GridItem的字符串索引来引用行内部的字段

使用ItemDataBound事件

ComponentArt Grid具有对被绑定在一个GridItem上的服务器模板起作用的能力.这个事件是 ItemDataBound事件,它的参数包括模板示例的内容和所包含在的GridItem ，这给了开发者一个机会来在页面被呈现前操纵内部

下面是一个典型的用在Grid中的ItemDataBound实例

1.为列设置服务器端模板

<ComponentArt:GridColumn ... DataCellServerTemplateId="myTemplate" />

定义你要用的模板

...

<ComponentArt:GridServerTemplate ID="myTemplate" />

Here is a button:<br>

<asp:Button ID="myButton" runat="server"

Text="<%# Container.DataItem["Name"] %>" />

</Template>

</ComponentArt:GridServerTemplate>

</ServerTemplates>

后置代码中的添加委托 :

private void InitializeComponent()

{

...

Grid1.ItemDataBound += new Grid.ItemDataBoundEventHandler(Grid1_ItemDataBound);

}

定义处理程序:

private void Grid1_ItemDataBound(object sender, GridItemDataBoundEventArgs args)

{

// We can modify the content...

args.Content.Controls.Add(new LiteralControl("Manipulated!"));

// reference individual control instances...

Button myButton = (Button)args.Content.FindControl("myButton");

// or perform other logic based on the instantiated content.

Response.Write("Instantiated " + myButton.UniqueID +

" for item " + args.Item["Name"];

}

使用ItemCommand事件

ComponentArt Grid能够响应植入在内部的服务器模板产生的事件,这个事件就是 ItemCommand, 它的参数包括引发事件的控件和模板所属的行(GridItem).

下面是一个典型的用在Grid中的ItemCommand实例

1.为列设置放置可以触发事件的控件的服务器端模板

<ComponentArt:GridColumn ... DataCellServerTemplateId="linkButtonTemplate" />

定义你要用的模板:

...

<ComponentArt:GridServerTemplate ID="linkButtonTemplate" />

<asp:LinkButton ID="lb" runat="server"

Text="ItemCommand" CommandName="MyCommand" />

</Template>

</ComponentArt:GridServerTemplate>

</ServerTemplates>

添加事件委托到后置代码

private void InitializeComponent()

{

...

Grid1.ItemCommand += new Grid.ItemCommandEventHandler(Grid1_ItemCommand);

}

定义事件处理程序:

public void Grid1_ItemCommand(object sender, GridItemCommandEventArgs args)

{

Response.Write("Command " + ((LinkButton)args.Control).CommandName +

" issued on item " + args.Item["ID"]);

}

获得模板实例内部控件的引用

为获得模板实例内部控件的引用,表格控件提供了一个对FindControl方法的重写. Grid.FindControl能够取得4个参数:层级编号(level index),列编号,行编号,和空间ID.这个调用能够通过给定的层级,行,列,元素ID找到控件

例如,下面的调用能够找到第一层第三列第七行的模板内的控件"myButton"

Button myButton = (Button)Grid.FindControl(0, 3, 7, "myButton");

为了更好的使用FindControl重写,我们可以使用GridColumnCollection和 GridItemCollection的IndexOf方法.这样,我们可以通过列的DataField和与行匹配的值找回行号和列号

int columnIndex = Grid.Levels[0].Columns.IndexOf("Summary");

int itemIndex = Grid.Items.IndexOf("UniqueID", 3984);

Button myButton = (Button)Grid.FindControl(0, columnIndex, itemIndex, "myButton");

使用ComponentArt Grid中的客户端模板

ComponentArt的表格控件具有最新的模板技术:客户端模板.通过ComponentArt的客户端渲染技术来实现,客户端模板扩充了模板技术到客户端,使用客户端脚本代替服务器端脚本可以允许数据绑定到客户浏览器,

对ComponentArt表格使用客户端模板前,必须浏览一遍Web.UI控件中的模板概述,根据你的需要,也许服务器端模板更适合你的程序

概述

客户端模板由HTML标记和客户端数据绑定表达式组成.这个表达式由JavaScript写成,每个表达式在客户端呈现时计算并由计算结果替换,因此,每个表达式将计算成一个字符串

下面是一个用于表格数据元素的客户端模板的例子

<ComponentArt:ClientTemplate ID="NameTemplate">

ClientTemplate for <b>## DataItem.GetMember("Name").Value ##</b> rendered at ## (new Date()) ##

</ComponentArt:ClientTemplate>

在定义之后，客户端模板有助于通过属性显示元素，我们应该通过设置属性DataCellClientTemplateId为"NameTemplate"来建立模板到表格列的联系

通过这种使用，客户端模板能够利用预定义的DataItem对象。当数据需要提供给客户端数据绑定，这个名称会通过客户端模板机制被预定义。在上例中，客户端模板被用于表格元素，所以数据行会被预设定到通常被绑定的表格行中。其他被利用的变量是双亲，指向控件（这里指ComponentArt_Grid对象）的主客户端对象

注意：服务器端绑定语句和服务器控件不能包含在客户端模板中。如果需要这种功能，客户端模板不能使用

有用的技术

再一对'##'定界符之间的语句是一些被认为是字符串的JavaScript代码。这样就允许客户端模板定义不受限制的复杂逻辑。下面是一些可能用到的有用技术：

客户端模板中的条件逻辑

通常，被客户端模板包含的内容依赖于被模板绑定的数据。一个普通的例子就是包含Update/Delete链接到表格的某些行，而不是其它（如用户的表达式），下面是个例子：

<ComponentArt:ClientTemplate ID="EditTemplate">

<div style="font-family:verdana;">## DataItem.GetMember('CanBeEdited').Value == false ?

"Can not edit" : "<a href=\\"javascript:editGrid('" + DataItem.ClientId + "');\\">Edit</a>" ##</div>

</ComponentArt:ClientTemplate>

这里我们使用条件操作来根据绑定的数据产生一个不同的模板内容。列可以编辑的Items (行)会简单的在使用了这个模板的元素中输出一个静态的，其他的会包含一个引发行编辑的链接

注意：由于嵌套引用和客户端模板在客户端被处理为JavaScript字符串，我们必须在语句中作一些更多的引用的转义。下面的文章显示了怎样避免这种转换和使你的客户端模板更清晰

从客户端模板调用外部函数

当多行的客户端模板语句开始变复杂时，我可以求助于外部函数来封装他们。在客户端模板语句中一个简单的函数调用使得模板更简单的读取和调试。随意的通过数据行及父容器是程序需要的主要内容，并且通过他可以作很多事情，只要他返回的是字符串。例如，我们可以使用能够返回需要的内容的函数重作前面的条件例子

function GetEditContent(item)

{

if(item.GetMember('CanBeEdited'))

{

return "<a href=\"javascript:editGrid('" + item.ClientId + "');\">Edit</a>";

}

else

{

return "Can not edit";

}

据此，我们客户端现在只需要调用产生函数的内容

<ComponentArt:ClientTemplate ID="EditTemplate">

<div style="font-family:verdana;">## GetEditContent(DataItem) ##</div>

</ComponentArt:ClientTemplate>

这样，客户端逻辑能够被用于增强ComponentArt Grid的客户端可用视觉元素的呈现效果

ComponentArt Grid检验栏列

介绍

就象大多数数据表格控件，ComponentArt Grid包括扩展的在表格列中操作检验栏的功能，

这种功能可以用于列属性设置为"CheckBox"的boolean列.这本质上是将列永久的设置为编辑模式，允许开发者响应列的变化，在checkboxes获得似乎更多的信息.注意，这些功能的一部分能够有选择的被服务器端模板执行

可选的数据绑定

Checkbox类型的表格列能够被绑定到使用通常GridColumn.DataField属性的数据源的字段。被绑定的字段应该是boolean类型。如果这样做，checkbox会预装字段中的数据

如果数据字段没有被指定，GridColumn中的值默认为false，但checkbox和支持的事件和方法同样使用

使用ItemCheckChanged事件

在服务器端响应checkbox改变的主要方法是ItemCheckChanged事件.一旦一个postback发生，这个事件就对每一个发生在客户端的改变回环到服务器激发。ItemCheckChanged就这样实现数据库与用户在checkbox列的操作同步

使用ItemCheckChanged，我们首先需要一个正确类型的列，例如：

<ComponentArt:Grid runat="server" ID="Grid1" ... >

<ComponentArt:GridLevel ... >

...

<ComponentArt:GridColumn DataField="Active" DataType="System.Boolean" ColumnType="CheckBox" ... />

</Columns>

</ComponentArt:GridLevel>

</Levels>

</ComponentArt:Grid>

上例定义了一个checkbox列，与数据字段（"Active"）关联。注意：这是可选择的，一个checkbox列可以是独立的，可以不明确的连接到数据源的字段

接下来，我们需要在服务器端定义事件委托：

private void Grid1_CheckChanged

(object sender, ComponentArt.Web.UI.GridItemCheckChangedEventArgs args)

{

Response.Write("Item " + args["Title"] + " checkbox set to " + args.Checked + " under column " + args.Column.DataField + "<br />\n");

}

最后，连接到事件处理

private void InitializeComponent()

{

...

Grid1.ItemCheckChanged += new ComponentArt.Web.UI.Grid.ItemCheckChangedEventHandler(Grid1_CheckChanged);

}

在这一点，我们的事件委托会被每一种checkbox变化模式调用。事件会在每一次回环成批量的调用。可选的，我们能够强迫表格在每次checkbox变化时进行回传，既设置表格的AutoPostBackOnCheckChanged属性为true.

使用GetCheckedItems方法

另外一个管理checkboxes的方法是使用服务器端的Grid.GetCheckedItems方法，这种方式将GridColumn作为单独的参数，返回一个在给定列是被选的的行集合。他可以随时调用，让开发者在事件委托之外自由的获得checkbox的信息

下面是使用GetCheckedItems的例子：

GridItemCollection activeItems = Grid1.GetCheckedItems(Grid1.Levels[0].Columns["Active"]);

foreach(GridItem activeItem in activeItems)

{

Response.Write("Item " + activeItem["ID"] + " is active.<br />\n");

}

有用的提示

没有和Grid整合的设想是为了更容易的使用表格强有力的服务器端和客户端接口来添加到表格控件中。下面是个例子：

客户端方法：

function GetCheckedItems(grid, columnNumber)

{

var checkedItems = new Array();

var gridItem;

var itemIndex = 0;

while(gridItem = grid.Table.GetRow(itemIndex))

{

if(gridItem.Cells[columnNumber].Value)

{

checkedItems[checkedItems.length] = gridItem;

}

itemIndex++;

}

return checkedItems;

}

客户端 CheckAll方法

使用客户端Grid编程接口，我们能够很容易的写代码来遍历表格每一行，设施每个checkbox列的元素的值为true,下面是可以重用的代码：

function CheckAllItems(grid, columnNumber)

{

var gridItem;

var itemIndex = 0;

while(gridItem = grid.Table.GetRow(itemIndex))

{

gridItem.SetValue(columnNumber, true);

itemIndex++;

}

grid.Render();

}

注意：如果我们改变true为false，相同的方法不会检查所有的列中的checkboxe。要找一个更通用的方法来做到这两种情况，我们必须通过附加的boolean类型的参数

ComponentArt Grid触发和处理服务器端事件

ComponentArt Grid的一个重要特征是它能够触发服务器端事件。为了充分发挥他的优势，适当的响应这些事件是至关重要的。这篇文章提供了服务器端事件的概述，同时也是一系列典型应用实例

下面是服务器事件的列表以及相应的类定义，版本3.0

事件	EventArgs	意义
ColumnReorder	GridColumnReorderEventArgs	一个列的位置在显示顺序中发生变化
DeleteCommand	GridItemEventArgs	行被删除
FilterCommand	GridFilterCommandEventArgs	产生一个服务器端过滤请求
GroupCommand	GridGroupCommandEventArgs	产生一个服务器端分组请求
InsertCommand	GridItemEventArgs	插入新行
ItemCheckChanged	GridItemCheckChangedEventArgs	Checkbox类型的列的选择状态变化
ItemCommand	GridItemCommandEventArgs	服务器模板中的控件导致的回传
ItemDataBound	GridItemDataBoundEventArgs	一个服务器模板被莫行示例化
NeedRebind	EventArgs	表格需要重新绑定到它的数据源
NeedDataSource	EventArgs	数据源需要更新
PageIndexChanged	GridPageIndexChangedEventArgs	一个新的页请求
Scroll	GridScrollEventArgs	一个卷轴滚动请求
SelectCommand	GridItemEventArgs	行被选择
SortCommand	GridSortCommandEventArgs	产生一个服务器端排序请求
UpdateCommand	GridItemEventArgs	行被编辑

新页（页改变）请求事件

解释服务器端事件的产生和处理，我们从最基本的例子开始：PageIndexChanged。这个事件表示使用表格分页系统的一个简单请求。除非手工分页请求（通过设置ManualPaging为true），只有必须的动作可以改变表格的CurrentPageIndex来匹配一个请求。下面是我们怎样定义事件处理

public void Grid1_PageIndexChanged

(object sender, ComponentArt.Web.UI.GridPageIndexChangedEventArgs args)

{

Grid1.CurrentPageIndex = args.NewIndex;

}

这样我们可以建立事件处理的委托

private void InitializeComponent()

{

...

Grid1.PageIndexChanged += new

ComponentArt.Web.UI.Grid.PageIndexChangedEventHandler(Grid1_PageIndexChanged);

}

选择事件

另一个常用例子是包含关联表行的事件：SelectCommand。这个事件在一个表格行被选时产生，一个回传产生。与事件关联的只有已经选择的行的数据

要想当一行被选中时产生这个事件，我们必须先设置表格控件的AutoPostBackOnSelect为true

<ComponentArt:Grid runat="server" ID="Grid1" AutoPostBackOnSelect="true" ...>

...

</ComponentArt:Grid>

然后，在后置代码中，我们定义SelectCommand事件委托和事件处理程序

private void Grid1_SelectCommand(object sender, ComponentArt.Web.UI.GridItemEventArgs args)

{

Response.Write("Selected item: " + args.Item["ID"] + "<br />\n");

}

private void InitializeComponent()

{

...

Grid1.SelectCommand +=

new ComponentArt.Web.UI.Grid.GridItemEventHandler(Grid1_SelectCommand);

}

给表格添加右键菜单

ComponentArt Grid提供与ComponentArt Menu的无缝结合来创建智能右键菜单。表格和菜单交换关于选定表格行和他的状态的信息。OnContextMenu 属性指定了产生客户端菜单的子程序.

如下图，菜单操作包括编辑、删除、插入行等。每一个菜单行调用客户端函数来设置表格属性和调用表格方法

添加右键菜单

1.添加ComponentArt Grid（Grid1）到页面，设置表格为客户端运行模式

2.在表格属性页，设置OnContextMenu属性为ShowContextMenu。ShowContextMenu是你添加在并发步骤中的客户端函数

3.添加ComponentArt Menu（Menu1）到页面。设置页面属性如下

Property Value

ContextMenu Custom

Orientation Vertical

4.在HTML视图，在</head>标签前，添加客户端JavaScript如下。ShowContextMenu函数在右键单击表格。这个程序选择右键点击的行，显示菜单，传递选定行的信息到ContextData 属性设定的菜单

function ShowContextMenu(item, column, evt)

{

Grid1.Select(item);

Menu1.ShowContextMenu(evt);

Menu1.ContextData = item;

return false;

}

</script>

5.在</ComponentArt:Menu>结束标记前，添加下面的标记添加行到菜单。

注意，每行包含ClientSideCommand属性值

前三行指出了由ComponentArt Grid自动产生的客户端函数。当表格打开菜单时，Edit 和Delete菜单行传回菜单得到的上下文信息。第四行（Exit）执行一行简单的JavaScript脚本来关闭右键菜单

<Items>

<ComponentArt:MenuItem Text="Edit Row"

ClientSideCommand="Grid1.Edit(GridContextMenu.ContextData);" />

<ComponentArt:MenuItem Text="Delete Row"

ClientSideCommand="Grid1.Delete(GridContextMenu.ContextData);" />

<ComponentArt:MenuItem Text="Insert New Row"

ClientSideCommand="Grid1.Table.AddRow()" />

<ComponentArt:MenuItem Text="Exit"

ClientSideCommand="function donthng(){return false;}" />

</Items>

6.编译执行页面，右键点击某行。右键菜单产生.当你点击一行时执行指派的客户端命令

注意：参考\live_examples\grid\features\grid_contextMenu\右键菜单的例子，包括类型，图片，回传数据库等

posted on 2006-06-13 11:57 Henry's SharePoint & DotNet Blog 阅读(3525) 评论(6) 收藏举报

刷新页面返回顶部

导航

ComponentArt.web.ui Grid

2.使用回调模式(AJAX)实现一个Grid

实现一个在Callback运行模式下的表格

3.使用服务器端运行模式实现一个Grid

实现服务器端运行模式的Grid

使用ComponentArt Grid的服务器端模板

概述

定义服务器端模板

使用ItemDataBound事件

使用ItemCommand事件

获得模板实例内部控件的引用

使用ComponentArt Grid中的客户端模板

概述

有用的技术

客户端模板中的条件逻辑

从客户端模板调用外部函数

ComponentArt Grid检验栏列

介绍

可选的数据绑定

使用ItemCheckChanged事件

使用GetCheckedItems方法

有用的提示

客户端方法：

客户端 CheckAll方法

ComponentArt Grid触发和处理服务器端事件

新页（页改变）请求事件

选择事件

给表格添加右键菜单

添加右键菜单