HoverMenuExtender Control With ListView in ASP.NET

Davin Martyn
Feb 13, 2012

19.5k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique used for interactive websites. With AJAX help we can develop web applications and retrieve small amounts of data from a web server. AJAX consists of a different type of technology.

JavaScript.
XML.
Asynchronous Call to the server.

HoverMenuExtender control

The HoverMenuExtender associates the ASP.NET control with a panel that is popped up to display additional content, whenever the user moves the mouse cursor over the ASP.NET control.

Properties

TargetControlID
PopupControlID
Popupdelay
OffSetx
OffSety

ListView

The ListView control provides the display of a set of data items in different layouts or views. For example, a user may want to display data items in a table and also to sort its columns. The ListView control supports the following Template.

Template

AlternatingItemTemplate
EditItemTemplate
EmptyDataTemplate
GroupTemplate
GroupTemplate

Step 1 : Open Visual Studio 2010.

Go to File->New->WebSite
Select ASP.NET WebSite

Step 2 : Go to Solution Explorer and right-click.

Select Add->New Item
Select WebForm
Default.aspx page open

Step 3 : Open Default.aspx page and click in [Design option].

Drag and drop ListView Control

Define SqlServerDataBase

Step 4 : Go to Solution Explorer and right-click and select SqlServerDataBase for Table.

Select AddNewItem
Select SqlServerDatabase

Define Table

Step 5 : Go to Server Explorer and right-click.

Select Table->Add New Table
Define following data field

DataBind

Step 6 : Now go to Default.aspx page and select Design option.

Click on the ListView Control
Choose New DataSource

Step 7 : Now we select SqlDatabase and define "SqlDatabase1".

M...2.gif

Connection String

Step 8 : Define database and after than select connection string option and choose database.

m...9.gif

Step 9 : Now in the Default.aspx[Source] the following ConnectionString code show.

Code :

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [.....A]">
</asp:SqlDataSource>

Step 10 : To display data, we will declare the <ItemTemplate>. We will also create the HoverMenuExtender in the <ItemTemplate> to associate each row of the ListView with a popup.

Go to Toolbox option and select HoverMenuExtender control and define all properties.

Code

<ItemTemplate>
<TR>
<td>
    <asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="Label1" PopupControlID="Panel1" PopDelay="20" OffsetX="-100" OffsetY="-5">
    </asp:HoverMenuExtender>
<asp:Panel ID="Panel1" runat="server">
                <table>
                    <tr>
                        <td>
                            <asp:Button ID="Button1" runat="server" CommandName="Edit" Text="Edit" />
                        </td>
                        <td>
                             <asp:Button ID="Button2" runat="server" CommandName="Delete" Text="Delete" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
         </td>
         <td>
             <asp:Label ID="Label1" runat="server" Text='<%# Eval("ID") %>' />
          </td>
          <td>
             <asp:Label ID="Label2" runat="server" Text='<%# Eval("NAME") %>' />
          </td>
          <td>
             <asp:Label ID="Label3" runat="server" Text='<%# Eval("ClASS") %>' />
          </td>
    </tr>
</ItemTemplate>

Step 11 : We have created the functionality to display data in the ListView, as well as a pop-up the panel when the user hovers over 'ProductName' column using the HoverMenuExtender.

Code

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="ID" InsertItemPosition="LastItem">
        <LayoutTemplate>
    <table>
        <tr>
            <td>
                <table border="1" style="border-width:1; border-color:Black">
                    <tr>
                        <th></th>

                        <th style="width:100px">ID</th>
                        <th>NAME</th>
                        <th>CLASS</th>
                    </tr>
                        <tr runat="server" ID="itemPlaceholder">
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <asp:DataPager runat="server" ID="listViewPager" PageSize="4">
                 <Fields>
                      <asp:NumericPagerField ButtonCount="1"
                       PreviousPageText="<--" NextPageText="-->" />
                 </Fields>
                </asp:DataPager>
            </td>
        </tr>
    </table>
</LayoutTemplate>

Step 12 : Create the markup for the EditTemplate and InsertTemplate as shown below.

Code

<EditItemTemplate>
   <tr>
      <td>
         <asp:Button ID="btnUpdate" runat="server"
          CommandName="Update" Text="Update" />
         <asp:Button ID="btnCancel" runat="server"
          CommandName="Cancel" Text="Cancel" />
      </td>
      <td>
         <asp:Label ID="lblProdIDReadOnly" runat="server"
          Text='<%# Bind("ID") %>' /></td>
       <td>
         <asp:TextBox ID="txtEditProdName" runat="server"
          Text='<%# Bind("NAME") %>' />
      </td>
   </tr>
</EditItemTemplate>

Step 13 : Go to the Default.aspx page and write a code.

Code

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div style="background-color: #BDC1C1">
        <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="ID" InsertItemPosition="LastItem">
        <LayoutTemplate>
    <table>
        <tr>
            <td>
                <table border="1" style="border-width:1; border-color:Black">
                    <tr>
                        <th></th>
                        <th style="width:100px">ID</th>
                        <th>NAME</th>
                        <th>CLASS</th>
                    </tr>
                        <tr runat="server" ID="itemPlaceholder">
                    </tr>
                </table>
            </td>
        </tr>

        <tr>
            <td>
                <asp:DataPager runat="server" ID="listViewPager" PageSize="4">
                 <Fields>
                      <asp:NumericPagerField ButtonCount="1"
                       PreviousPageText="<--" NextPageText="-->" />
                 </Fields>
                </asp:DataPager>
            </td>
        </tr>
    </table>
</LayoutTemplate>
<ItemTemplate>
<TR>
<td>
    <asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="Label1" PopupControlID="Panel1" PopDelay="20" OffsetX="-100" OffsetY="-5">
    </asp:HoverMenuExtender>
<asp:Panel ID="Panel1" runat="server">
                <table>
                    <tr>
                        <td>
                            <asp:Button ID="Button1" runat="server" CommandName="Edit" Text="Edit" />
                        </td>
                        <td>
                             <asp:Button ID="Button2" runat="server" CommandName="Delete" Text="Delete" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
         </td>
         <td>
             <asp:Label ID="Label1" runat="server" Text='<%# Eval("ID") %>' />
          </td>
          <td>
             <asp:Label ID="Label2" runat="server" Text='<%# Eval("NAME") %>' />
          </td>
          <td>
             <asp:Label ID="Label3" runat="server" Text='<%# Eval("ClASS") %>' />
          </td>
    </tr>
</ItemTemplate>
<EditItemTemplate>
   <tr>
      <td>
         <asp:Button ID="btnUpdate" runat="server"
          CommandName="Update" Text="Update" />
         <asp:Button ID="btnCancel" runat="server"
          CommandName="Cancel" Text="Cancel" />
      </td>
      <td>
         <asp:Label ID="lblProdIDReadOnly" runat="server"
          Text='<%# Bind("ID") %>' /></td>
       <td>
         <asp:TextBox ID="txtEditProdName" runat="server"
          Text='<%# Bind("NAME") %>' />
     </td>
|   </tr>
</EditItemTemplate>
<InsertItemTemplate>
   <tr>
      <td>
      </td>
      <td>|
         <asp:Button ID="btnInsert" runat="server" CommandName="Insert"
          Text="Insert" />
         <asp:Button ID="btnInsertCancel" runat="server" CommandName="Cancel"
          Text="Cancel" />
      </td>
      <td>
         <asp:TextBox ID="txtInsertProdName" runat="server"
          Text='<%# Bind("NAME") %>' />
      </td>
      <td>
         <asp:CheckBox ID="cbInsertDiscontinued" runat="server"
          Checked='<%# Bind("CLASS") %>' />
      </td>
   </tr>
</InsertItemTemplate>
        </asp:ListView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT * FROM [.....A]">
            <InsertParameters>
        <asp:Parameter Name="NAME" Type="String" />
        <asp:Parameter Name="CLASS" Type="Byte" />
     </InsertParameters>
    <UpdateParameters>
        <asp:Parameter Name="NAME" Type="String" />
        <asp:Parameter Name="ID" Type="Int32" />}
    </UpdateParameters>
    <DeleteParameters>
        <asp:Parameter Name="ID" Type="Int32" />
    </DeleteParameters>
            </asp:SqlDataSource>
    </div>
    </form>