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, 38 minutes, 35 seconds
Employees
Company: Franchi S.p.A.
Name: Paolo Accorti
Title: Sales Representative
City: Torino
Country: Italy
Phone: 011-4988260
Company: Galería del gastrónomo
Name: Eduardo Saavedra
Title: Marketing Manager
City: Barcelona
Country: Spain
Phone: (93) 203 4560
Company: Gourmet Lanchonetes
Name: André Fonseca
Title: Sales Associate
City: Campinas
Country: Brazil
Phone: (11) 555-9482
Company: Great Lakes Food Market
Name: Howard Snyder
Title: Marketing Manager
City: Eugene
Country: USA
Phone: (503) 555-7555
Company: GROSELLA-Restaurante
Name: Manuel Pereira
Title: Owner
City: Caracas
Country: Venezuela
Phone: (2) 283-2951
Company: Hanari Carnes
Name: Mario Pontes
Title: Accounting Manager
City: Rio de Janeiro
Country: Brazil
Phone: (21) 555-0091
  • 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