ListView Control with DropDownExtender and Menu

Baruhari
Posted by in ASP.NET AJAX category on for Intermediate level | Views : 30339 red flag

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

Last week we were looking for a common grid like control which we need to show 4 columns across all the functionlities/pages and remaining columns will change according to the user selected function. I know it will be very hard to show/hide columns based on the function and play around each column.

So we thought of Interface like sharedportal site where onclick of a first cell in each row, a Context Menu will be popup with different options visible to the user. In such a manner we have same UI grid structure across all the functions/pages.

I thought of using ListView, DropDownExtender and MenuControl.

UI Prototype

These images will show what exactly we are looking.



All this can be achieve with less code and can be extended to show other grid in the child rows and all the major functionality will be in populating menu on each specific function.

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" />

I 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

<site>

<siteMap Name="Business">

<siteMapNode url="" title="Author Information" description="Author Information" Index="1" />

<siteMapNode url="" title="Order" description="Order" Index="3" />

</siteMap>

<siteMap Name="Computer">

<siteMapNode url="" title="Author Information" description="Author Information" Index="1" />

<siteMapNode url="" title="Sample Chapters" description="Sample Chapters" Index="2">

<siteMapNode url="" title="Chapter 1" description="Chapter 1" Index="2.1"/>

<siteMapNode url="" title="Chapter 2" description="Chapter 2" Index="2.2"/>

<siteMapNode url="" title="Chapter 3" description="Chapter 3" Index="2.3"/>

</siteMapNode>

<siteMapNode url="" title="Related Books" description="Related Books" Index="3" />

<siteMapNode url="" title="Order" description="Order" Index="4" />

</siteMap>

</site>

 

<asp:XmlDataSource DataFile="~/App_code/BookDetails.xml" ID="MenuSource" runat="server">

</asp:XmlDataSource> 

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

Remember all this can be done without postback of the page. Hope this gives an initative for other developers who are looking for these type of functionalities and would like to explore the things.

 

Code:

 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>ListViewDropDownExtender</title>

<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

</th>

<th>

Author

</th>

<th>

Code

</th>

<th>

Price

</th>

</tr>

<tr id="itemPlaceholder" runat="server" />

</table>

</LayoutTemplate>

<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>

 

Page copy protected against web site content infringement by Copyscape

About the Author

Baruhari
Full Name: hari baru
Member Level: Starter
Member Status: Member
Member Since: 9/2/2008 11:14:15 AM
Country:



Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)