转:扩展GridView控件（下）

下面列出了将Context Menu绑定到GridView上的几个步骤：

1）在ASP.NET页面上放置ContextMenu控件

2） 在ContextMenu里添加菜单项目单击处理事件

3）加载带有ContextMenuItems的ContextMenu

配置带有ContextMenuID的菜单，可以从下面开始：

 

<ctMenu:ContextMenu ID="ContextMenu1"

 runat="server" BackColor="#99CCCC"

 ForeColor="Maroon" OnItemCommand="ContextMenu1_ItemCommand"

 RolloverColor="#009999" />

 

上面的代码使用了ID为ContextMenu1的ContextMenu控件并增加了OnItemCommand事件，该实现在用户单击右键菜单选择菜单项目时触发。

 下面代码显示了单击事件。

Listing 6

 

 

protected void ContextMenu1_ItemCommand(object sender, CommandEventArgs e)

 

当用户选择“Add a new Row”时，我们通过代码设置GridView进入插入模式，这是调用GridView内置的ChangeInsertMode方法实现的。该方法可以让GridView在插入模式和正常模式之间切换。

为了能够让用户插入数据，您可能需要在FooterTemplate放置一些控件，以便使用这些控件收集数据。

假如用户选择“Edit Row”，我们设置GridView的EditIndex属性，这样就可以使用当前行进入编辑模式

 

当用户选择“Delete Row”时，我们调用一个方法来删除当前行

正如前面介绍的，我们需要设置GridView的ContextMenuID属性，下面代码显示了他的使用

Listing 7

       

 <xGrid:xGrid ID="XGrid1"

 runat="server" AllowPaging="True"

 AutoGenerateColumns="False" DataKeyNames="CustomerID"

 ContextMenuID="ContextMenu1">

            <Columns>

                <asp:TemplateField HeaderText="Manage Row">

                    <edititemtemplate>

                        <asp:LinkButton

 text="Update" runat="server" id="lnkUpdate"

 CommandName="Update" CommandArgument='<%

 Bind("CustomerID") %>' />&nbsp;&nbsp;

                        <asp:LinkButton

 text="Cancel" runat="server" id="lnkCancel"

 CommandName="Cancel" />

                    

</edititemtemplate>

                    <footertemplate>

                        <confirmControl:ConfirmLinkButton ID="lnkAdd" runat="server"

 Text="Add" MessageText="Are you sure you want to add this

 record?" OnClick="btnAdd_Click" />

                        <asp:LinkButton

 id="lnkCancelAdd" runat="server" text="Cancel"

 OnClick="btnCancel_Click" />

                    

</footertemplate>

                    <itemtemplate>

                        <asp:LinkButton

 id="lnkEdit" runat="server" CommandArgument='<%

 Bind("CustomerID") %>' CommandName="Edit"

 text="Edit" __designer:wfd>

 

下面的代码显示了如何为ContextMenu从外部的XML文件加载数据

Listing 8

 

private void PopulateContextMenu()

 

 

该外部的XML文档代码如下

Listing 9

 

<?xml version="1.0" encoding="utf-8" ?>

<contextmenu>

 <contextmenuitem>

    <text>Add a new Row</text>

    <commandname>Add</commandname>

    <tooltip>Add a new Row</tooltip>

    <onclientclick />

 </contextmenuitem>

 <contextmenuitem>

    <text>Delete Row</text>

    <commandname>Delete</commandname>

    <tooltip>Delete Row</tooltip>

    <onclientclick>return

 __ConfirmMessage('Are you sure you want to delete this

 row?');</onclientclick>

 </contextmenuitem>

 <contextmenuitem>

    <text>Edit Row</text>

    <commandname>Edit</commandname>

    <tooltip>Edit Row</tooltip>

    <onclientclick />

 </contextmenuitem>

</contextmenu>

 

每一个ContextMenuItem 元素都包含下面的自动：

Text：在ContextMenu显示的上下文

CommandName：处理命令的名称，例如Edit，Delete，Add或者其他的名称

ToolTip：ContextMenuItem上的提示信息

OnClientClick：客户端处理事件

 

 

为GridView列标头添加图片

另外，还可以绑定到XML上为头元素的升序/降序添加图片

当配置GridView支持排序时，这个功能会在GridView的头标题添加一个生效、降序图片。当GridView初始化加载时，并没有图片显示，只有您单击列标头素时，才会显示一个图片，您可以通过该图片查看当前排序方式，下图显示了在一列排序的结果

 

相关的属性为：AscImage和DescImage：这两个属性设置升序/降序的图片

 

 

 

当行数目小于页面大小时修正GridView的高度

您是否注意到当GridView的行数目小于页面PageSize大小时，GridView的高度降会收缩？加入在第一页显示10条记录，当您进入到第2页面时，如果该页面只有5条记录，您会发现GridView会收缩到适应5条记录的高度，这很恼人，因为您更希望GridView总是保持同一高度。

在图6您会发现GridView显示了几条记录，您可能已经注意到几条空的记录，因为这个页面的记录数目小于GridView页面的大小，这个添加是自动添加的

注意：空的记录仅仅是为了维护GridView的高度。

本文介绍扩展的XGrid已经内置了这个功能

 

 

内置的文本过滤

   这是继ContextMenu后的第二个最有趣的特性。您可以在自定义GridView头标题里TextBox里输入任何文本。

当您在文本框里输入一些文本并单击回车时，将会触发FilterCommand事件，您可以使用该事件实现数据的过滤

 

相关的属性如下：

IsFilterd：该属性设置是否启用过滤功能，取值为true或者时false。

FilterStyle：这个属性允许您具体指定新加入到头标题的样式。

CSSFilterbox和SkinIDFilterbox

下图显示了一个自定义头标题，可以使用这个功能进行数据过滤

 

 

 

protected void XGrid1_FilterCommand(object sender, FilterCommandEventArgs e)

 

 

内置的每行的复选和全部的复选

 这个功能是在GridView的每一行添加一个CheckBox，这个功能同样参考Dino Esposito的文章

这里有两个属性

AutoGenerateCheckBoxColumn和

CheckBoxColumnIndex

 

下图显示了运行结果

 

 

 

 

值得一提的是，当EnableRowClick 或者EnableRowDoubleClick 任何一个被设置为true时，由于MouseOverColor会覆盖SelectRowStyle样式，所以选择一行并不会显示SelectRowStyle的样式

 

 

 

 

 

确认按钮

我们已经包含了三种不同的按钮： Confirm 按钮，Image按钮和Confirm Link按钮，这些按钮除了具有常规功能外，还额外添加了下面两个属性：

EnableConfirmMsg:该该属性的取值为true或者是false。当设置为false，该按钮和常规的按钮功能一样。当该属性设置为true时，当客户端向服务器提交信息之前，会出现确认对话框

当EnableConfirmMsg属性被设置为true时，MessageText属性设置弹出消息的具体内容