Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

ASP.NET AJAX popup/mouseover datagrid

Posted on 2007-10-02
8
Medium Priority
?
6,858 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>
0
Comment
Question by:azyet24
  • 4
  • 3
7 Comments
 
LVL 2

Expert Comment

by:smcdrc
ID: 20005643
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).  
0
 

Author Comment

by:azyet24
ID: 20008285
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?

0
 
LVL 2

Expert Comment

by:smcdrc
ID: 20008654
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>
0
Free Backup Tool for VMware and Hyper-V

Restore full virtual machine or individual guest files from 19 common file systems directly from the backup file. Schedule VM backups with PowerShell scripts. Set desired time, lean back and let the script to notify you via email upon completion.  

 

Author Comment

by:azyet24
ID: 20009432
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.  
0
 
LVL 2

Expert Comment

by:smcdrc
ID: 20009687
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.
0
 

Author Comment

by:azyet24
ID: 20010349
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>
0
 
LVL 2

Accepted Solution

by:
smcdrc earned 2000 total points
ID: 20013485
It looks like you are attaching the flyout to datagrid.  Every row must have its own unique ID.

For the item template, I use some like this:
<a href=""javascript: //"" id=""grid_link_" + oContainer.PageRecordIndex.ToString() + """ onclick=""attachFlyoutToLink(this)"" class=""ob_gAL"" >More info...</a>

And for the javascript to open the flyout, i use:
function attachFlyoutToLink(oLink) {      
                    try {      
                     
                       <%=Flyout3.getClientID()%>.AttachTo("FlyoutLocation");
                       populateEditControls(oLink.id.toString().replace("grid_link_", ""));      
                       <%=Flyout3.getClientID()%>.Open();
                       }
                } catch(ex){}
}

the populate EditControls actually uses javascript to pull the values from hidden columns in the oBout Grid (You may be able to do this with .net DataGrid).
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
In real business world data are crucial and sometimes data are shared among different information systems. Hence, an agreeable file transfer protocol need to be established.
In a question here at Experts Exchange (https://www.experts-exchange.com/questions/29062564/Adobe-acrobat-reader-DC.html), a member asked how to create a signature in Adobe Acrobat Reader DC (the free Reader product, not the paid, full Acrobat produ…
Enter Foreign and Special Characters Enter characters you can't find on a keyboard using its ASCII code ... and learn how to make a handy reference for yourself using Excel ~ Use these codes in any Windows application! ... whether it is a Micr…
Suggested Courses
Course of the Month13 days, 13 hours left to enroll

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question