转:扩展GridView控件（下）

转:扩展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)

{

 // Use the RightClickedRow property which is a GridViewRow to know

 // which row was right-clicked

 int rowIndex = this.XGrid1.RightClickedRow.RowIndex;

 

 switch (e.CommandName)

 {

    case "Add":

      this.XGrid1.ChangeInsertMode(true);

      break;

    case "Edit":

      this.XGrid1.EditIndex = rowIndex;

      break;

    case "Delete":

      DeleteGridViewRow(rowIndex);

      break;

    default:

      break;

 }

}

 

当用户选择“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:wfdid="w1"> </ asp:LinkButton > &nbsp;&nbsp;

  < confirmControl:ConfirmLinkButton  id ="lnkDelete"

 runat ="server"  CommandArgument ='<%  Bind("CustomerID")

 % > ' CommandName="Delete" MessageText="Are you sure you want

 to delete this record?" Text="Delete"> </ confirmControl:ConfirmLinkButton >  

                    

</ itemtemplate >

                 </ asp:TemplateField ></ Columns >

 

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

Listing 8

 

private   void  PopulateContextMenu()

{

 XmlReaderSettings settings = new XmlReaderSettings();

 string contextmenuxml = Path.Combine(Request.PhysicalApplicationPath,

    "contextmenu.xml");

 

 NameTable nameTable = new NameTable();

 object contextMenuItem = nameTable.Add("contextmenuitem");

 

 settings.NameTable = nameTable;

 

 using(XmlReader reader = XmlReader.Create(contextmenuxml, settings))

 {

    while (reader.Read())

    {

      // Read a single ContextMenuItem

      if ((reader.NodeType == XmlNodeType.Element) && (contextMenuItem.Equals

        (reader.LocalName)))

      {

        XmlReader subTree = reader.ReadSubtree();

        ContextMenuItem menuItem = new ContextMenuItem();

 

        // Get contents of a single ContextMenuItem

        while (subTree.Read())

        {

          if ((subTree.NodeType == XmlNodeType.Element) &&

            (subTree.LocalName.Equals("text")))

            menuItem.Text = subTree.ReadString();

 

          if ((subTree.NodeType == XmlNodeType.Element) &&

            (subTree.LocalName.Equals("commandname")))

            menuItem.CommandName = subTree.ReadString();

 

          if ((subTree.NodeType == XmlNodeType.Element) &&

            (subTree.LocalName.Equals("tooltip")))

            menuItem.Tooltip = subTree.ReadString();

 

          if ((subTree.NodeType == XmlNodeType.Element) &&

            (subTree.LocalName.Equals("onclientclick")))

            menuItem.OnClientClick = subTree.ReadString();

        }

 

        // Add item to ContextMenu

        this.ContextMenu1.ContextMenuItems.Add(menuItem);

      }

    }

 }

}

 

 

该外部的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)

{

 if (!e.FilterExpression.Equals(""))

 {

    FilterBind(e.FilterExpression.ToString());

    //return;

 }

 

   // Serves both with/out filter

 this.XGrid1.DataBind();

}

 

 

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

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

这里有两个属性

AutoGenerateCheckBoxColumn和

CheckBoxColumnIndex

 

下图显示了运行结果

 

 

 

 

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

 

 

 

 

 

确认按钮

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

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

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

posted on 2007-02-07 09:23 猫咬狗 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/ttcre2/archive/2007/02/07/642878.html