Implement the right-click menu of the FineUI Grid control, fineuigrid

Implement the right-click menu of the FineUI Grid control, fineuigrid

The FineUI official Demo has never implemented the Grid right-click menu. In fact, from version 4.1.x, it is quite easy to add custom event listening (Listeners.

There are many types of ExtJs right-click menus. For the Grid Control, I will only briefly describe the two implementations here. That is, the menu that appears when you right-click the data row of the table, and the menu that appears when you right-click the blank position.

Time is limited. I don't want to talk about it anymore. Let's take a look at two. (Implement Environment FineUI4.1.6,. NET 4.0 because you need to specify the Control ID)

1. Right-click the data row menu

2. Right-click the blank area and choose menu

Implementation Method:

Step 1:Add the Grid control... Not much.

Step 2:Add two Menu controls behind the Grid Control, which correspond to the two shortcut menus to be implemented,Set ClientIDMode to Static and Hidden to true.

<F: Menu ID = "containerMenu" runat = "server" ClientIDMode = "Static" Hidden = "true"> <f: menuButton Icon = "Add" Text = "Add" OnClick = "OnAddClick"> </f: MenuButton> <f: MenuSeparator/> <f: menuButton Icon = "Reload" Text = "refresh"> </f: MenuButton> </f: Menu> <f: menu ID = "itemMenu" runat = "server" ClientIDMode = "Static" Hidden = "true"> <f: menuButton Icon = "penpencil" Text = "modify" OnClick = "OnEditClick"> </f: MenuButton> <f: menuButton Icon = "Delete" Text = "Delete"> </f: MenuButton> <f: MenuSeparator/> <f: menuButton Icon = "Reload" Text = "refresh"> </f: MenuButton> </f: Menu>

Step 3:Add "containercontextmenu" and "itemcontextmenu" Event Listeners to the Grid.

<F: Grid ID = "Grid1" runat = "server" Title = "FineUI Grid right-click menu Demo" CssStyle = "margin: 10px; "AllowPaging =" true "PageSize =" 20 "EnableHeaderMenu =" false "EnableColumnLines =" true "DataKeyNames =" ID "> <Columns> ..... omitted </Columns> <Listeners> <f: Listener Event = "containercontextmenu" Handler = "function (grid, e, eOpts) {e. stopEvent (); F ('Container '). showAt (e. getXY ();} "/> <f: Listener Event =" itemcontextmenu "Handler =" function (grid, record, item, index, e, eOpts) {e. stopEvent (); F ('itemmenu '). showAt (e. getXY ();} "/> </Listeners> </f: Grid>

The two events belong to the GridPanel control of ExtJs. The parameters are described as follows:

Containercontextmenu: grid: Table object, e: event object, eOpts: event object parameter;

Itemcontextmenu: grid: Table object, record: selected row object (you can use record. rawData attribute to obtain all the data of the selected row), item: html Element Object, index: Row index, e: event object, eOpts: event object parameter;

If you want to know other places, please go to the ExtJs Api doc http://docs.sencha.com/extjs/4.2.1! /Api/Ext. grid. Panel

Generally, it is okay to copy the above Code unless you have more requirements for event processing functions.

Step 4:Implement menu functions. Bind the menu button event according to the normal method. There is nothing to note.

In the code in step 2, we can see that the server-side OnClick event binding has been added for the ADD and modify buttons. The following describes the implementation of the background code.

Protected void OnAddClick (object sender, EventArgs e) {FineUI. Alert. Show ("Add Click! ", FineUI. messageBoxIcon. information);} protected void OnEditClick (object sender, EventArgs e) {var selectedrow = Grid1.Rows [Grid1.SelectedRowIndex]. dataKeys [0]. toString (); FineUI. alert. show (string. format ("records whose ID is changed to {0}", selectedrow), FineUI. messageBoxIcon. warning );}

Original article. For more information, see the source!