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

AJAX-enabled ListView with Context Menu

Next database reset in 0 hours, 23 minutes, 55 seconds
Employees
Company: Bottom-Dollarhhh Markets
Name: Elizabeth Lincoln
Title: Accounting Manager
City: Tsawassen
Country: Canada
Phone: (604) 555-4729
Company: Centro comercial Moctezuma
Name: Francisco Chang
Title: Marketing Manager
City: México D.F.
Country: Mexico
Phone: (5) 555-3392
Company: Consolidated Holdings
Name: Elizabeth Brown
Title: Sales Representative
City: London
Country: UK
Phone: (171) 555-2282
Company: FISSA Fabrica Inter. Salchichas S.A.
Name: Diego Roel
Title: Accounting Manager
City: Madrid
Country: Spain
Phone: (91) 555 94 44
Company: Folk och fä HB
Name: Maria Larsson
Title: Owner
City: Bräcke
Country: Sweden
Phone: 0695-34 67 21
Company: Frankenversand
Name: Peter Franken
Title: Marketing Manager
City: München
Country: Germany
Phone: 089-0877310
  • Add
  • Edit
  • Delete

The purpose of the example is to demonstrate integration between RadListView, RadAjax and RadContextMenu in a Windows Explorer-like web application.

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

The seamless integration between RadContextMenu, RadAjax and RadListView makes this task very easy to be accomplished. To associate the context menu with the listview instance, intercept the oncontextmenu client event of the listview items wrapper (fieldset in this case), get reference to the context menu object client-side and invoke its show method (passing the browser's event argument as parameter).You also need to save the index of the right-clicked listview item on the client, pass it at a later stage inside the OnClientItemClicked event of the context menu, determine the item chosen by the end user and use the methods from RadListView's client API to perform edit, init insert or delete operation.

Finally, configure the ajax manager settings in order to refresh the listview in a codeless manner.

Instructions

Right-click an arbitrary RadListView item to display context menu with edit/insert/delete options

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" Inherits="Telerik.Web.Examples.Integration.ListViewWithContextMenu.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="All" EnableRoundedCorners="false" DecorationZoneID="demo-container" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            Sys.Application.add_load(function () {
                window.demo.listview = $find("<%=RadListView1.ClientID %>");
                window.demo.menu = $find("<%=RadMenu1.ClientID %>");
            });
        </script>
    </telerik:RadCodeBlock>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ListViewPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ListViewPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

    <div class="demo-container" id="demo-container">
        <asp:Panel ID="ListViewPanel1" runat="server">
            <telerik:RadListView ID="RadListView1" DataSourceID="SqlDataSource1" runat="server"
                ItemPlaceholderID="EmployeesContainer" OnItemCommand="RadListView1_ItemCommand"
                DataKeyNames="CustomerID">
                <LayoutTemplate>
                    <fieldset id="FieldSet1">
                        <legend>Employees</legend>
                        <asp:PlaceHolder ID="EmployeesContainer" runat="server"></asp:PlaceHolder>
                    </fieldset>
                </LayoutTemplate>
                <ItemTemplate>
                    <fieldset class="itemFieldset" oncontextmenu="ShowContextMenu('<%# ((RadListViewDataItem)(Container)).DisplayIndex %>', event);">
                        <legend>Company:
                            <%#Eval("CompanyName")%>
                        </legend>
                        <table class="itemTable">
                            <tr>
                                <td class="itemCellLabel">Name:
                                </td>
                                <td class="itemCellInfo">
                                    <%#Eval("ContactName")%>
                                </td>
                            </tr>
                            <tr>
                                <td>Title:
                                </td>
                                <td>
                                    <%#Eval("ContactTitle")%>
                                </td>
                            </tr>
                            <tr>
                                <td>City:
                                </td>
                                <td>
                                    <%# Eval("City")%>
                                </td>
                            </tr>
                            <tr>
                                <td>Country:
                                </td>
                                <td>
                                    <%# Eval("Country")%>
                                </td>
                            </tr>
                            <tr>
                                <td>Phone:
                                </td>
                                <td>
                                    <%#Eval("Phone")%>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </ItemTemplate>
                <EditItemTemplate>
                    <fieldset class="editFieldset">
                        <legend>Company:
                            <asp:TextBox ID="txtBoxCompany" runat="server" Text='<%#Bind("CompanyName")%>'></asp:TextBox>
                            <asp:RequiredFieldValidator ID="rvCompany" runat="server" ControlToValidate="txtBoxCompany"
                                ErrorMessage="Please enter company" Display="Dynamic"></asp:RequiredFieldValidator>
                        </legend>
                        <table cellpadding="1" cellspacing="0">
                            <tr>
                                <td class="editCellLabel">Name:
                                </td>
                                <td class="editCellInfo">
                                    <asp:TextBox ID="txtBoxName" runat="server" Text='<%#Bind("ContactName")%>'></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="rvName" runat="server" ControlToValidate="txtBoxName"
                                        ErrorMessage="Please enter name" Display="Dynamic"></asp:RequiredFieldValidator>
                                </td>
                                <td rowspan="5" class="editButtons">
                                    <asp:Button ID="btnUpdate" runat="server" Text="Update" CommandName="Update" Width="70px"></asp:Button>
                                    <asp:Button ID="BtnCancel" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false"
                                        Width="70px"></asp:Button>
                                </td>
                            </tr>
                            <tr>
                                <td>Title:
                                </td>
                                <td>
                                    <asp:TextBox ID="txtBoxTitle" runat="server" Text='<%#Bind("ContactTitle")%>'></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="rvTitle" runat="server" ControlToValidate="txtBoxTitle"
                                        ErrorMessage="Please enter title" Display="Dynamic"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>City:
                                </td>
                                <td>
                                    <asp:TextBox ID="txtBoxCity" runat="server" Text='<%#Bind("City")%>'></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="rvCity" runat="server" ControlToValidate="txtBoxCity"
                                        ErrorMessage="Please enter city" Display="Dynamic"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>Country:
                                </td>
                                <td>
                                    <asp:TextBox ID="txtBoxCountry" runat="server" Text='<%#Bind("Country")%>'></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="rvCountry" runat="server" ControlToValidate="txtBoxCountry"
                                        ErrorMessage="Please enter country" Display="Dynamic"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>Phone:
                                </td>
                                <td>
                                    <asp:TextBox ID="txtBoxPhone" runat="server" Text='<%#Bind("Phone")%>'></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="rvPhone" runat="server" ControlToValidate="txtBoxPhone"
                                        ErrorMessage="Please enter phone" Display="Dynamic"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </EditItemTemplate>
                <InsertItemTemplate>
                    <fieldset class="insertFieldset">
                        <legend>Company:
                            <asp:TextBox ID="txtBoxCompany" runat="server" Text='<%#Bind("CompanyName")%>'></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtBoxCompany"
                                ErrorMessage="Please enter company" Display="Dynamic"></asp:RequiredFieldValidator>
                        </legend>
                        <table cellpadding="1" cellspacing="0">
                            <tr>
                                <td class="editCellLabel">Name:
                                </td>
                                <td class="editCellInfo">
                                    <asp:TextBox ID="txtBoxName" runat="server" Text='<%#Bind("ContactName")%>'></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtBoxName"
                                        ErrorMessage="Please enter name" Display="Dynamic"></asp:RequiredFieldValidator>
                                </td>
                                <td class="editButtons" rowspan="5">
                                    <asp:Button ID="btnPerformInsert" runat="server" Text="Insert" CommandName="PerformInsert"
                                        Width="70px"></asp:Button>
                                    <asp:Button ID="BtnCancel" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false"
                                        Width="70px"></asp:Button>
                                </td>
                            </tr>
                            <tr>
                                <td>Title:
                                </td>
                                <td>
                                    <asp:TextBox ID="txtBoxTitle" runat="server" Text='<%#Bind("ContactTitle")%>'></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtBoxTitle"
                                        ErrorMessage="Please enter title" Display="Dynamic"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>City:
                                </td>
                                <td>
                                    <asp:TextBox ID="txtBoxCity" runat="server" Text='<%#Bind("City")%>'></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtBoxCity"
                                        ErrorMessage="Please enter city" Display="Dynamic"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>Country:
                                </td>
                                <td>
                                    <asp:TextBox ID="txtBoxCountry" runat="server" Text='<%#Bind("Country")%>'></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtBoxCountry"
                                        ErrorMessage="Please enter country" Display="Dynamic"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>Phone:
                                </td>
                                <td>
                                    <asp:TextBox ID="txtBoxPhone" runat="server" Text='<%#Bind("Phone")%>'></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txtBoxPhone"
                                        ErrorMessage="Please enter phone" Display="Dynamic"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </InsertItemTemplate>
            </telerik:RadListView>
        </asp:Panel>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT TOP 6 [CustomerID], [CompanyName], [ContactName], [ContactTitle], [City], [Country], [Phone] FROM [CustomerPhotos]"
        DeleteCommand="DELETE FROM [CustomerPhotos] WHERE [CustomerID] = @CustomerID"
        UpdateCommand="UPDATE [CustomerPhotos] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [ContactTitle] = @ContactTitle, [City] = @City, [Country] = @Country, [Phone] = @Phone WHERE [CustomerID] = @CustomerID"
        InsertCommand="INSERT INTO [CustomerPhotos] ([CustomerID],[CompanyName], [ContactName], [ContactTitle], [City], [Country], [Phone]) VALUES (@CustomerID, @CompanyName, @ContactName, @ContactTitle, @City, @Country, @Phone)"
        OnInserting="SqlDataSource1_Inserting">
        <DeleteParameters>
            <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
        </DeleteParameters>
        <UpdateParameters>
            <asp:Parameter Name="CompanyName" DbType="String"></asp:Parameter>
            <asp:Parameter Name="ContactName" DbType="String"></asp:Parameter>
            <asp:Parameter Name="ContactTitle" DbType="String"></asp:Parameter>
            <asp:Parameter Name="City" DbType="String"></asp:Parameter>
            <asp:Parameter Name="Country" DbType="String"></asp:Parameter>
            <asp:Parameter Name="Phone" DbType="String"></asp:Parameter>
        </UpdateParameters>
        <InsertParameters>
            <asp:Parameter Name="CustomerID" DbType="String"></asp:Parameter>
            <asp:Parameter Name="CompanyName" DbType="String"></asp:Parameter>
            <asp:Parameter Name="ContactName" DbType="String"></asp:Parameter>
            <asp:Parameter Name="ContactTitle" DbType="String"></asp:Parameter>
            <asp:Parameter Name="City" DbType="String"></asp:Parameter>
            <asp:Parameter Name="Country" DbType="String"></asp:Parameter>
            <asp:Parameter Name="Phone" DbType="String"></asp:Parameter>
        </InsertParameters>
    </asp:SqlDataSource>
    <telerik:RadContextMenu ID="RadMenu1" runat="server" OnClientItemClicked="MenuItemClicked"
        EnableRoundedCorners="true" EnableShadows="true">
        <Items>
            <telerik:RadMenuItem Text="Add" ImageUrl="images/add.gif">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Edit" ImageUrl="images/edit.gif">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Delete" ImageUrl="images/delete.gif">
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadContextMenu>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance