New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Context Menu

Next database reset in 1 hours, 29 minutes, 24 seconds
OrderIDShipNameOrderDateShippedDateShipCountry
Ship city Show context menu
ShipPostalCodeFreight
       Sum : 64942.69
Page size:
 830 items in 56 pages
10488Frankenversand3/27/1997Wednesday, April 2, 1997Germany München 808054.93
10489Piccolo und mehr3/28/1997Wednesday, April 9, 1997Austria Salzburg 50205.29
10490HILARION-Abastos3/31/1997Thursday, April 3, 1997Venezuela San Cristóbal 5022210.19
10491Furia Bacalhau e Frutos do Mar3/31/1997Tuesday, April 8, 1997Portugal Lisboa 167516.96
10492Bottom-Dollar Markets4/1/1997Friday, April 11, 1997Canada Tsawassen T2F 8M462.89
10493La maison d'Asie4/2/1997Thursday, April 10, 1997France Toulouse 3100010.64
10494Comércio Mineiro4/2/1997Wednesday, April 9, 1997Brazil Sao Paulo 05432-04365.99
10495Laughing Bacchus Wine Cellars4/3/1997Friday, April 11, 1997Canada Vancouver V3F 2K14.65
10496Tradiçao Hipermercados4/4/1997Monday, April 7, 1997Brazil Sao Paulo 05634-03046.77
10497Lehmanns Marktstand4/4/1997Monday, April 7, 1997Germany Frankfurt a.M. 6052836.21
10498HILARION-Abastos4/7/1997Friday, April 11, 1997Venezuela San Cristóbal 502229.75
10499LILA-Supermercado4/8/1997Wednesday, April 16, 1997Venezuela Barquisimeto 3508102.02
10500La maison d'Asie4/9/1997Thursday, April 17, 1997France Toulouse 3100042.68
10501Blauer See Delikatessen4/9/1997Wednesday, April 16, 1997Germany Mannheim 683068.85
10502Pericles Comidas clásicas4/10/1997Tuesday, April 29, 1997Mexico México D.F. 0503369.32
  • NoFilter
  • Contains
  • DoesNotContain
  • StartsWith
  • EndsWith
  • EqualTo
  • NotEqualTo
  • GreaterThan
  • LessThan
  • GreaterThanOrEqualTo
  • LessThanOrEqualTo
  • Between
  • NotBetween
  • IsEmpty
  • NotIsEmpty
  • IsNull
  • NotIsNull
  • Custom
  • Sort Ascending
  • Sort Descending
  • Clear Sorting
  • Group By
  • Ungroup
  • Columns
  • Filter
  • Add
  • Edit
  • Delete

This example demonstrates RadGrid's header context filter menu which is a sub-part or RadGrid's header context menu and can be switched on/off using RadGrid.EnableHeaderContextFilterMenu or GridTableView.EnableHeaderContextFilterMenu properties. In addition, there are two indispensable prerequisites for the new filtering feature to be available:

  • the column filtering has to be switched on through AllowColumnFiltering = true.
  • the header context menu must be enabled through EnableHeaderContextMenu = true.

The new filter menu offers the power for filtering the grid's data on two conditions related with a logical AND operator. Two additional properties have been introduced into the GridColumn type in order to support the second filter condition data:

  • AndCurrentFilterFunction.
  • AndCurrentFilterValue.

When a filter command is triggered from the header context filter menu, RadGrid will fire the RadGrid.HeaderContextMenuFilterCommand, raise the ItemCommand event and send into the event handlers the filter data through the event arguments object.

Additionally, in numerous cases you may want to display a context menu when right-clicking an arbitrary row in RadGrid. Through a command from that context menu you may want to change the state for the grid row (for example edit/delete/add record). Furthermore, you may prefer the operation with asynchronous request instead of postback.

The seamless integration between RadContextMenu, RadAjax and RadGrid makes this task very easy to be accomplished. Our grid control exposes OnRowContextMenu client event which can be handled to select the right-clicked record in the grid to mark it as active for the current action. In order to determine the index of the clicked row on the server, use a hidden field on the page to store its value client side and then operate with it on form submit (in the ItemClick event handler of RadMenu). Inside the handler perform the corresponding task chosen by the user to modify the item state.

To associate the context menu with the grid instance, attach the OnRowContextMenu client event of RadGrid, get reference to the context menu object client-side and invoke its show method (passing the browser's event argument as parameter).

Finally, configure the ajax manager settings in order to refresh the grid and the menu in a codeless manner.
  • RadGrid's header context menu can be shown either:
    • on mouse right-click over a header cell
    • or by left-clicking on an element that fires a client-side method of RadGrid's, showing the context menu (see the ShipCity template column)
  • RadGrid's row context menu can be shown by right clicking on each data row.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
<%@ Page Language="vb"  CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Integration.GridAndMenu.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
       <script type="text/javascript" src="scripts.js"></script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdateInitiatorPanelsOnly="true">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <div class="demo-container no-bg">
    <telerik:RadGrid RenderMode="Lightweight" AutoGenerateColumns="false" ID="RadGrid1" DataSourceID="SqlDataSource1" Width="100%"
        AllowFilteringByColumn="True" AllowSorting="True" PageSize="15" ShowFooter="True"
        AllowPaging="True" runat="server" GridLines="None" EnableLinqExpressions="false"
        EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true" OnPreRender="RadGrid1_PreRender">
        <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
        <GroupingSettings CaseSensitive="false"></GroupingSettings>
        <MasterTableView AutoGenerateColumns="false" IsFilterItemExpanded="false" EditMode="InPlace" DataKeyNames="OrderID"
            AllowFilteringByColumn="True" ShowFooter="True" TableLayout="Auto" AllowAutomaticDeletes="true" AllowAutomaticInserts="true" AllowAutomaticUpdates="true">
            <Columns>
                <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" Visible="false"></telerik:GridEditCommandColumn>
                <telerik:GridNumericColumn DataField="OrderID" HeaderText="OrderID" SortExpression="OrderID"
                    UniqueName="OrderID" ReadOnly="true">
                </telerik:GridNumericColumn>
                <telerik:GridBoundColumn DataField="ShipName" HeaderText="ShipName" SortExpression="ShipName"
                    UniqueName="ShipName">
                </telerik:GridBoundColumn>
                <telerik:GridDateTimeColumn DataField="OrderDate" HeaderText="OrderDate" SortExpression="OrderDate"
                    UniqueName="OrderDate" PickerType="None" DataFormatString="{0:d}">
                </telerik:GridDateTimeColumn>
                <telerik:GridDateTimeColumn DataField="ShippedDate" HeaderText="ShippedDate" SortExpression="ShippedDate"
                    UniqueName="ShippedDate" PickerType="DatePicker" DataFormatString="{0:D}">
                    <HeaderStyle Width="160px"></HeaderStyle>
                </telerik:GridDateTimeColumn>
                <telerik:GridBoundColumn DataField="ShipCountry" HeaderText="ShipCountry" SortExpression="ShipCountry"
                    UniqueName="ShipCountry">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn DataField="ShipCity" GroupByExpression="ShipCity Group by ShipCity"
                    UniqueName="ShipCity" InitializeTemplatesFirst="false" HeaderStyle-Width="100"
                    HeaderText="Ship city">
                    <HeaderTemplate>
                        <table>
                            <tr>
                                <td>
                                    <asp:LinkButton ID="lnkSort" runat="server" CommandArgument="ShipCity" CommandName="Sort"
                                        Text="Ship city"></asp:LinkButton>
                                </td>
                                <td>
                                    <img src="Img/Menu.png" style="margin-top: 5px; margin-left: 5px; cursor: pointer"
                                        onclick='demo.ShowColumnHeaderMenu(event,"ShipCity")' alt="Show context menu" />
                                </td>
                            </tr>
                        </table>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblCity" runat="server" Text='<%#Eval("ShipCity") %>'></asp:Label>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridMaskedColumn DataField="ShipPostalCode" HeaderText="ShipPostalCode"
                    SortExpression="ShipPostalCode" UniqueName="ShipPostalCode" Mask="#####">
                    <FooterStyle Font-Bold="true"></FooterStyle>
                </telerik:GridMaskedColumn>
                <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal" HeaderText="Freight"
                    SortExpression="Freight" UniqueName="Freight" Aggregate="Sum">
                    <FooterStyle Font-Bold="true"></FooterStyle>
                </telerik:GridNumericColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <ClientEvents OnRowContextMenu="demo.RowContextMenu" />
            <Selecting AllowRowSelect="true" />
            <Scrolling AllowScroll="false"></Scrolling>
        </ClientSettings>
    </telerik:RadGrid>
        </div>
    <input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" />
    <telerik:RadContextMenu ID="RadMenu1" runat="server" OnItemClick="RadMenu1_ItemClick"
        EnableRoundedCorners="true" EnableShadows="true">
        <Items>
            <telerik:RadMenuItem Text="Add">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Edit">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Delete">
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadContextMenu>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT * FROM [Orders]" runat="server" DeleteCommand="DELETE FROM [Orders] WHERE [OrderID] = @OrderID" InsertCommand="INSERT INTO [Orders] ([CustomerID], [EmployeeID], [OrderDate], [RequiredDate], [ShippedDate], [ShipVia], [Freight], [ShipName], [ShipAddress], [ShipCity], [ShipRegion], [ShipPostalCode], [ShipCountry]) VALUES (@CustomerID, @EmployeeID, @OrderDate, @RequiredDate, @ShippedDate, @ShipVia, @Freight, @ShipName, @ShipAddress, @ShipCity, @ShipRegion, @ShipPostalCode, @ShipCountry)" UpdateCommand="UPDATE [Orders] SET [CustomerID] = @CustomerID, [EmployeeID] = @EmployeeID, [OrderDate] = @OrderDate, [RequiredDate] = @RequiredDate, [ShippedDate] = @ShippedDate, [ShipVia] = @ShipVia, [Freight] = @Freight, [ShipName] = @ShipName, [ShipAddress] = @ShipAddress, [ShipCity] = @ShipCity, [ShipRegion] = @ShipRegion, [ShipPostalCode] = @ShipPostalCode, [ShipCountry] = @ShipCountry WHERE [OrderID] = @OrderID">
        <DeleteParameters>
            <asp:Parameter Name="OrderID" Type="Int32" />
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="CustomerID" Type="String" />
            <asp:Parameter Name="EmployeeID" Type="Int32" />
            <asp:Parameter Name="OrderDate" Type="DateTime" />
            <asp:Parameter Name="RequiredDate" Type="DateTime" />
            <asp:Parameter Name="ShippedDate" Type="DateTime" />
            <asp:Parameter Name="ShipVia" Type="Int32" />
            <asp:Parameter Name="Freight" Type="Decimal" />
            <asp:Parameter Name="ShipName" Type="String" />
            <asp:Parameter Name="ShipAddress" Type="String" />
            <asp:Parameter Name="ShipCity" Type="String" />
            <asp:Parameter Name="ShipRegion" Type="String" />
            <asp:Parameter Name="ShipPostalCode" Type="String" />
            <asp:Parameter Name="ShipCountry" Type="String" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="CustomerID" Type="String" />
            <asp:Parameter Name="EmployeeID" Type="Int32" />
            <asp:Parameter Name="OrderDate" Type="DateTime" />
            <asp:Parameter Name="RequiredDate" Type="DateTime" />
            <asp:Parameter Name="ShippedDate" Type="DateTime" />
            <asp:Parameter Name="ShipVia" Type="Int32" />
            <asp:Parameter Name="Freight" Type="Decimal" />
            <asp:Parameter Name="ShipName" Type="String" />
            <asp:Parameter Name="ShipAddress" Type="String" />
            <asp:Parameter Name="ShipCity" Type="String" />
            <asp:Parameter Name="ShipRegion" Type="String" />
            <asp:Parameter Name="ShipPostalCode" Type="String" />
            <asp:Parameter Name="ShipCountry" Type="String" />
            <asp:Parameter Name="OrderID" Type="Int32" />
        </UpdateParameters>
    </asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance