Home > AJAX, ASP.Net > AJAX HoverMenu Control to Display Details for Gridview Row

AJAX HoverMenu Control to Display Details for Gridview Row


Hi

try this example to use AJAX HoverMenu Control to Display Details for Gridview Row

Step1 :- Open MS SQL Server and create new database and add new Table called “Album” with the following fields

– Id —> int (Auto Increment) and Primary Key

– Name —> nvarchar(50)

– Pic —> nvarchar(50)

where i will save image name in database and upload it in folder in my website called “Picture”

Step2 :- Open VS2005 and create a new website and add new web page

Step3 :- From ToolBox drag ScriptManager , GridView and AJAX HoverMenuExtender and bind your Gridview using SqlDataSource control so your page will be like this



        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
        CellPadding="4" ForeColor="#333333" BorderColor="#628BD7"
        BorderStyle="Solid" BorderWidth="2px" DataSourceID="SqlDataSource1" >
            <RowStyle BackColor="#EFF3FB" />
            <Columns>
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                <asp:TemplateField HeaderText="Pic" SortExpression="Pic">
                    <ItemTemplate>
                        <asp:Image ID="thumbnailImage" runat="server" Height="71px"
                            ImageUrl='<%# Eval("Pic", "~/Pic/{0}") %>' Width="115px" />
                        <cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server"
                             PopupControlID="popupImage"
                             TargetControlID="thumbnailImage"
                             OffsetX="10" OffsetY="5"
                             PopupPosition="Right"
                             PopDelay="100" HoverDelay="100">
                      </cc1:HoverMenuExtender>
                      <asp:Panel runat="server" ID="popupImage" BorderColor="#628BD7"
                         BorderStyle="Solid" BorderWidth="7px">                
                         <asp:Image runat="server" ID="mainImage"
                            ImageUrl='<%# Eval("Pic", "~/Picture/{0}") %>'  />              
                      </asp:Panel>   
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#2461BF" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>

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

after that rum your website

Hope this helps

Good Luck.

Advertisements
Categories: AJAX, ASP.Net
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: