ComponentArt.web.ui中文帮助之Grid(六)
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 属性设定的菜单
<script type="text/javascript" language="javascript">
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"右键菜单的例子,包括类型,图片,回传数据库等