codefree popup Master Detail with AJAX

The top most issue in web applications is to present a huge amount of data. For my sample  I had to display the schedule of .net development courses. A classic master detail scenario. If you place that on a webform the complete place is not used. A popup will solve that. The goal is to solve that without JScript only using AJAX features. After investigating I figured out three possibility's

  • HoverExtender
  • HoverMenuExtender static
  • HoverMenuExtender with callback for each row

I have solved it in all three ways and the hovermenuextener static is the best. The solution is without code.

1.) create a repeater ( or whatever)

2.) the Table row must have a server attribute and a ID (reihe)

3.) place a panel in a cell of that row

4.) put a hidden field in it to use it as control source for the detail grid

5.) put a repeater and sqldatasource into the panel with a controlparamter pointing to the hidden field

6.) extend the table row with a hovermenuextender which is placed otside the row of the Master grid but inside the itemtemplate

 

<ItemTemplate>

<tr runat="server" id="reihe">

<td ><a href=<%#eval("url") %>><%#eval("title") %></a></td>

<td align=right><%#Replace(Eval("dauer"), "Tage", "")%></td>

<td align=right><%#Eval("preis", "{0:c}")%></td>

<td></td>

<td>

<asp:Panel ID="pnlTermine" runat="server" Width="250px"

CssClass="popupPanel" GroupingText="Termine">

<asp:HiddenField ID="HiddenField1" runat="server" Value=<%#eval("seid") %> />

<asp:Repeater ID="rptDetails" EnableViewState=false runat=server DataSourceID="DSKursTermine">

<ItemTemplate>

<b><%# switch(eval("ort")) %></b>

<%#eval("termin","{0:dd}") %>.<%#eval("termin","{0:MMM}") %>

</ItemTemplate>

</asp:Repeater>

   ....

<ajaxToolkit:HoverMenuExtender runat=server ID="popup1"

PopupControlID="pnlTermine" TargetControlID="reihe"

PopupPosition=Right OffsetX=-100 HoverCssClass="popupHover"

PopDelay=25

>

</ajaxToolkit:HoverMenuExtender>

</ItemTemplate>

.... 

Published Thursday, February 08, 2007 8:27 AM by preishuber
Filed under:

Comments

# re: codefree popup Master Detail with AJAX

Thursday, February 08, 2007 8:07 AM by Khuzema

This type of information not only show the use of technology but the way of problem solving (or atleast for me).

regards from Kuwait

Khuzema

# re: codefree popup Master Detail with AJAX

Monday, December 03, 2007 12:09 PM by fatman

Hi preishuber,

do you mind showing me the entire source code of this? from you creating the gridview or detailview till how you pull the different data from different rows using hoverMenuExtender? I'm curretnly doing pretty much the same thing, but I think I lost on your idea at 3) "place a panel in a cell of that row"

ty~

# re: codefree popup Master Detail with AJAX

Monday, December 03, 2007 12:18 PM by fatman

alright, after looking the codes for the second time, sorry about the previous post. I saw your that your table was created using

<td ><a href=<%#eval("url") %>><%#eval("title") %></a></td>

<td align=right><%#Replace(Eval("dauer"), "Tage", "")%></td>

<td align=right><%#Eval("preis", "{0:c}")%></td>

etc etc. Do you have any idea doing it using gridview? Thanks

Leave a Comment

(required) 
(required) 
(optional)
(required)