We help IT Professionals succeed at work.

ASP.NET AJAX popup/mouseover datagrid

6,923 Views
Last Modified: 2013-11-26
I am displaying records in a datagrid and I'd like to have a popup window appear when you mouse over the name field and display information for that record (photo, id, description, etc...).  I've seen this on other sites and I like to do this with AJAX.

My code:
code behind:
Try
objconn.Open()
objCmd = New ODBCCommand("SELECT * FROM staff;", objconn)
objRdr = objCmd.ExecuteReader()
dgResults.DataSource = objRdr
dgResults.DataBind()
Catch ex as Exception
lblError.Text = "An error has occured/"
lblError.Text+= ex.Message
Finally
objRdr.Close()
objconn.Close()
End Try

datagrid:
<asp:DataGrid ID="dgResults" ....>
<ItemStyle CssClass="itemstyle" />    
<HeaderStyle CssClass="headerStyle" />  
<AlternatingItemStyle CssClass="alternatingItemStyle" />  
<Columns>
<asp:ButtonColumn Text="Edit" CommandName="Select"></asp:buttoncolumn>
<asp:TemplateColumn>
<HeaderTemplate> </HeaderTemplate>
<ItemTemplate>
<%# Container.DataItem("name") %>"
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
Comment
Watch Question

Commented:
Look at http://www.obout.com/flyout/flyout.aspx.  I use this quite a bit.  They have lots of examples of use with Ajax (and its free).  

Author

Commented:
smcdrc, this is very nice.  I tried putting the flyout into a datagrid and am getting this error:

Unknown server tag 'obout:Flyout'.

I have imported OboutInc.Flyout2 and it's in my bin directory so I'm not sure why it's not recognizing it.  Ideas?

Commented:
You need to register the tag at thetop of your aspx file.  This is an example of a Flyout when using a click event in the datagrid (obout grid control).
top of page
<%@ Register Assembly="obout_Flyout2_NET" Namespace="OboutInc.Flyout2" TagPrefix="cc1" %>
inline:
<cc1:Flyout ID="Flyout3" runat="server"   Align="LEFT" Position="ABSOLUTE" CloseEvent="NONE" Opacity="90" OnClientClose="closeFlyout_3();" OpenEvent="NONE" DelayTime="500">
      <table class="rowEditTable">
                <tr>
                    <td valign="top">
                            ''''''Contents
                    </td>
                 </tr>
             </table>      
       
    </cc1:Flyout>

Author

Commented:
ok, got that part to work and it will now work with the datagrid.  However, when the grid loads and I mouse over the first row, it shows me the second row's info.  the second row does not popup.  Ideas?

Also,  I generally use <%# Container.DataItem("vendors") %>, but the flyout was giving me an error that container.dataitem does not exist.  So i changed it to <%#Eval("vendors")%> and this works.  

Commented:
I do not know why it is selecting the next row.  I use the templates from obout to create grids.

Also, grid indexs are based on zero based.  So you may need to subtract 1 from what ever you get back.

Author

Commented:
I only had two records in my sample so it was only showing the second rows info.  I added more data andnow when ou mouse over the first one it shows the correct information for the first one but is not showing the popu on any other row.  Would you mind showing me how you would set this up using your grid?

<asp:DataGrid ID="dgComputers" AlternatingItemStyle-VerticalAlign="top" AutoGenerateColumns="false" CssClass="datagrid" CellPadding="4" DataKeyField="id" EditItemStyle-VerticalAlign="top" GridLines="None" ItemStyle-VerticalAlign="top" runat="server" SelectedItemStyle-VerticalAlign="top" ShowHeader="true" OnSelectedIndexChanged="dg_selectedComputers">
<ItemStyle CssClass="itemstyle" />    
<HeaderStyle CssClass="headerStyle" />  
<AlternatingItemStyle CssClass="alternatingItemStyle" />  
<Columns>
<asp:ButtonColumn Text="Edit" CommandName="Select"></asp:buttoncolumn>
<asp:TemplateColumn>
<HeaderTemplate> vendors </HeaderTemplate>
<ItemTemplate> <%# Container.DataItem("vendors") %></ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<HeaderTemplate> Model </HeaderTemplate>
<ItemTemplate><a id="modelfly" href="#"><%#Eval("pkmodel")%></a>
<bfo:Flyout runat="server" ID="window_lyout" AttachTo="modelfly" Position="ABSOLUTE" RelativeLeft="130" RelativeTop="-186" >
            <div style="width:330px;height:290px;">
                <div style="position:absolute;top:50px;left:30px;width:330px;height:290px;background-image:url(images/origin_downloadcombox.png);"></div>
                <div style="position:absolute;top:50px;left:30px;width:330px;height:290px;">
                    <table style="width:100%">
                        <tr>
                            <td style="width:60px"></td>
                            <td class="tdText"></td>
                            <td style="width:20px"></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td class="tdText"> <img src="images/<%#Eval("image")%>" width=200px /></td>
                            <td></td>
                        </tr>  
                        <tr>
                            <td></td>
                            <td class="tdText">Serial: <%#Eval("serial")%></td>
                            <td></td>
                        </tr>  
                        <tr>
                            <td></td>
                            <td class="tdText">Purchase Date: <%#Eval("purchasedate")%></td>
                            <td></td>
                        </tr>                  
                    </table>                
                </div>
            </div>
        </bfo:Flyout>    
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<HeaderTemplate> Serial # </HeaderTemplate>
<ItemTemplate> <%# Container.DataItem("serial") %></ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<HeaderTemplate> Asset # </HeaderTemplate>
<ItemTemplate> <%# Container.DataItem("assetnum") %></ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.