Academic Students Projects | Software School Projects | Free Source Codes

The price of the projects include source code, abstract, report and support for development and deployment. Please use our contact us form or send email to Support@srishtis.com

ListView Control with DropDownExtender and Menu.

This tutorial describes how to display the Context Menu on each row of the ListView Control using DropDownExtender and Menu control

Adding Menu and DropDownExtender

By using following code in one of the cell while populating the Listview control, you will get the menucontrol onclick of the cell.

<asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel"
Style="display:none;visibility: hidden;">
<asp:Menu runat="server" ID="PortfolioMenu" DataSourceID="MenuSource"
CssClass="ContextMenu" OnMenuItemClick="ContextMenuItemClick">
<StaticMenuItemStyle CssClass="ContextMenuItem" />
<StaticHoverStyle CssClass="ContextMenuItem" />
<DynamicMenuItemStyle CssClass="ContextMenuItem" />
<DynamicHoverStyle CssClass="ContextMenuItem" />
<DynamicMenuStyle CssClass="ContextMenu" />
<DataBindings>
<asp:MenuItemBinding DataMember="siteMapNode" NavigateUrlField="url"
TextField="title" ToolTipField="description" ValueField="Index" Value="Index" />
</DataBindings>
</asp:Menu>
</asp:Panel>
<asp:Label runat="server" ID="lblTitle" Text='<%# Eval("Title")%>' Width="100%">
</asp:Label>
<ajaxToolkit:DropDownExtender runat="server" ID="DDE" TargetControlID="lblTitle" DropDownControlID="DropPanel"
EnableViewState="false" CacheDynamicResults="false" />

we have used the xmlDatasource to populate the menucontrol (like a context menu) and filtered using xpath and selected value from the dropdownlist..

Menu XML File

Sample Nodes from xml file

Here is the code to retrieve the specific set of nodes from xml file based on the function selected by the user.

MenuSource.XPath = "/*/*[@Name='" + ddlGenre.SelectedItem.Text + "']/*"

We can disable menuitem or change the display of the menuitem on MenuItemDatabound event. Once the user selected the menu following code can be used to manipulate based on the index.

Protected Sub ContextMenuItemClick(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.MenuEventArgs)
Dim lstViewDataItem As ListViewDataItem
Dim lblSelectedItem As Label
lstViewDataItem = DirectCast(DirectCast(sender, Menu).NamingContainer,
ListViewDataItem)
If Not lstViewDataItem Is Nothing Then
lblSelectedItem = DirectCast(lstViewDataItem.FindControl("lblSelectedMenu"),
Label)
lblSelectedItem.Text = "Selected Row Index " +
lstViewDataItem.DataItemIndex.ToString + " and Selected MenuItem Index " +
e.Item.Value.ToString
Dim DataRow As HtmlTableRow =
DirectCast(lstViewDataItem.FindControl("StatusRow"), HtmlTableRow)
DataRow.Attributes.Add("class", "SelectedRow")
DataRow.Visible = True
End If
End Sub

Code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb"
Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC" -//W3C//DTDXHTML1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Styles/SiteStyleSheet.css" rel="Stylesheet" type="text/css" />
</head>
<script runat="server">
Protected Sub ContextMenuItemClick(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.MenuEventArgs)
Dim lstViewDataItem As ListViewDataItem
Dim lblSelectedItem As Label
lstViewDataItem = DirectCast(DirectCast(sender, Menu).NamingContainer,
ListViewDataItem)
If Not lstViewDataItem Is Nothing Then
lblSelectedItem = DirectCast(lstViewDataItem.FindControl("lblSelectedMenu"),
Label)
lblSelectedItem.Text = "Selected Row Index " +
lstViewDataItem.DataItemIndex.ToString + " and Selected MenuItem Index " +
e.Item.Value.ToString
Dim DataRow As HtmlTableRow =
DirectCast(lstViewDataItem.FindControl("StatusRow"), HtmlTableRow)
DataRow.Attributes.Add("class", "SelectedRow")
DataRow.Visible = True
End If
End Sub
Protected Sub ddlGenre_SelectedIndexChanged(ByVal sender As Object,ByVal e As
System.EventArgs) Handles ddlGenre.SelectedIndexChanged
BookSource.XPath = "/catalog/*[@name='" + ddlGenre.SelectedItem.Text + "']/*"
MenuSource.XPath = "/*/*[@Name='" + ddlGenre.SelectedItem.Text + "']/*"
End Sub
Protected Sub Page_Load(ByVal sender As Object,ByVal e As System.EventArgs) Handles
Me.Load
If Not IsPostBack Then
BookSource.XPath = "/catalog/*[@name='Business']/*"
MenuSource.XPath = "/*/*[@Name='Business']/*"
End If
End Sub
</script>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="scriptmgr">
</asp:ScriptManager>
<center>
<table width="80%">
<tr>
<td>
<asp:UpdatePanel runat="server" ID="updGridPanel">
<ContentTemplate>
<b>Select Genre</b>
<asp:DropDownList runat="server" ID="ddlGenre" AutoPostBack="true">
<asp:ListItem Text="Business" Value="Business" Selected="True"></asp:ListItem>
<asp:ListItem Text="Computer" Value="Computer"></asp:ListItem>
</asp:DropDownList><br /><br /><br />
<asp:ListView ID="lstView" runat="server" DataSourceID="BookSource">
<LayoutTemplate>
<table id="Details" cellpadding="0" cellspacing="0" width="100%" rules="all"
border="1">
<tr class="panelheader Arial10B" align="left">
<th>Title</Tite>
<th>Author</th>
<th>Code</th>
<th>Price</th> </tr>
<tr id="itemPlaceholder" runat="server" />
</table>
<ItemTemplate>
<tr id="DataRow" runat="server" align="left" class="Arial9" style="border-width:1px;border-style: solid;">
<td>
<asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Style="display:none;
visibility: hidden;">
<asp:Menu runat="server" ID="PortfolioMenu" DataSourceID="MenuSource"
CssClass="ContextMenu"
OnMenuItemClick="ContextMenuItemClick">
<StaticMenuItemStyle CssClass="ContextMenuItem" />
<StaticHoverStyle CssClass="ContextMenuItem" />
<DynamicMenuItemStyle CssClass="ContextMenuItem" />
<DynamicHoverStyle CssClass="ContextMenuItem" />
<DynamicMenuStyle CssClass="ContextMenu" />
<DataBindings>
<asp:MenuItemBinding DataMember="siteMapNode" NavigateUrlField="url" TextField="title"
ToolTipField="description" ValueField="Index" Value="Index" />
</DataBindings>
</asp:Menu>
</asp:Panel>
<asp:Label runat="server" ID="lblTitle" Text='<%# Eval("Title")%>' Width="100%">
</asp:Label>
<ajaxToolkit:DropDownExtender runat="server" ID="DDE" TargetControlID="lblTitle"
DropDownControlID="DropPanel" EnableViewState="false" CacheDynamicResults="false" />
</td>
<td>
<%#Eval("author")%>
</td>
<td>
<%#Eval("ISBN")%>
</td>
<td width="50%">
<%#Eval("Price")%>
</td>
</tr>
<tr id="StatusRow" runat="server" visible="false" align="left">
<td colspan="6">
<asp:Label runat="server" ID="lblSelectedMenu"></asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:XmlDataSource DataFile="~/App_code/BookDetails.xml" ID="MenuSource"
runat="server">
</asp:XmlDataSource>
<asp:XmlDataSource DataFile="~/App_Code/Books.xml" ID="BookSource" runat="server">
</asp:XmlDataSource>
</td>
</tr>
</table>
</center>
</form>
</body>
</html>