Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I don't have the points to comment and ask you questions. Sorry. <b>:(</b><br> My questions are in regard to how you plan to create and populate the Accordion.</p> <p>Will you create panes by hand using markup in the IDE or will you bind the Accordion to a DataSource that will dynamically create the panes you need?</p> <p>Will you have 3 separate DataSources or a different combination of the following:<br> &nbsp;&nbsp;&nbsp;&nbsp;1.) DataSource to initialize the number of panels and populate only the panel's Header information.<br> &nbsp;&nbsp;&nbsp;&nbsp;2.) DataSource to populate the Static Content of all panels on first load.<br> &nbsp;&nbsp;&nbsp;&nbsp;3.) DataSource to populate the Lazy-Loaded Content of a single panel the user clicks to expand.</p> <p>With your answers I hope to update this answer with a real one. Thanks.</p> <p><b>Update: This <i>is</i> achievable with the Ajax Control Toolkit's Accordion.</b><br> I have some <i>very</i> basic code below as proof of concept. It could be smoother, but I'll leave it up to you to add a "Loading" image using the UpdatingProgress control if you find it necessary.</p> <p><b>The Accordion in the Aspx markup:</b><br> (Notice the UpdatePanels - you can replace them with callbacks if you want, I just wanted to keep the answer simple)</p> <pre><code>&lt;asp:Accordion ID="acc_Accordion" runat="server" RequireOpenedPane="false" SelectedIndex="-1" onitemcommand="acc_Accordion_ItemCommand" &gt; &lt;HeaderTemplate&gt; &lt;asp:UpdatePanel ID="up_UpdateHeader" runat="server"&gt; &lt;ContentTemplate&gt; &lt;%--When using "Eval" inside strings for Asp.net controls, you MUST wrap them in apostrophes ('), otherwise with (") you will get parser errors!--%&gt; &lt;asp:LinkButton ID="btn_Header" runat="server" Text='&lt;%# Eval("HeaderText") %&gt;' CommandName="UpdatePane" CommandArgument='&lt;%# Eval("ItemID") %&gt;' Font-Underline="false" ForeColor="Black" style="width:100%; height:100%; cursor:pointer;"/&gt; &lt;%--Use Cursor:Pointer to keep a consistent interface after disabling the button.--%&gt; &lt;/ContentTemplate&gt; &lt;/asp:UpdatePanel&gt; &lt;/HeaderTemplate&gt; &lt;ContentTemplate&gt; &lt;asp:UpdatePanel ID="up_UpdateContent" runat="server" UpdateMode="Conditional"&gt; &lt;ContentTemplate&gt; &lt;%# Eval("ContentText")%&gt; &lt;asp:Label ID="lbl_Content" runat="server" Text="&lt;%# DateTime.Now.ToLongTimeString() %&gt;"&gt;&lt;/asp:Label&gt; &lt;/ContentTemplate&gt; &lt;/asp:UpdatePanel&gt; &lt;/ContentTemplate&gt; &lt;/asp:Accordion&gt; </code></pre> <p><br><br> <b>The Page_Load()</b> - Prep our "dummy" data:</p> <pre><code>protected void Page_Load(object sender, EventArgs e) { if (IsPostBack == false) { DataTable dt = new DataTable(); dt.Columns.Add("ItemID"); dt.Columns.Add("HeaderText"); dt.Columns.Add("ContentText"); dt.Rows.Add(new object[] { 123456, "Header 1", "Content A." }); dt.Rows.Add(new object[] { 654321, "Header 2", "Content B." }); acc_Accordion.DataSource = new System.Data.DataTableReader(dt); acc_Accordion.DataBind(); } } </code></pre> <p><br><br> <b>The ItemCommand()</b> - This captures button-clicks inside the Accordion:</p> <pre><code>protected void acc_Accordion_ItemCommand(object sender, CommandEventArgs e) { if (e.CommandName == "UpdatePane") { AjaxControlToolkit.AccordionContentPanel acp = (e as AjaxControlToolkit.AccordionCommandEventArgs).Container; UpdatePanel upHeader = acc_Accordion.Panes[acp.DisplayIndex].HeaderContainer .Controls.OfType&lt;Control&gt;() .Single(c =&gt; c is UpdatePanel) as UpdatePanel; LinkButton btn = upHeader.ContentTemplateContainer .Controls.OfType&lt;Control&gt;() .Single(b =&gt; b is LinkButton) as LinkButton; UpdatePanel upContent = acc_Accordion.Panes[acp.DisplayIndex].ContentContainer .Controls.OfType&lt;Control&gt;() .Single(c =&gt; c is UpdatePanel) as UpdatePanel; Label lbl = upContent.ContentTemplateContainer .Controls.OfType&lt;Control&gt;() .Single(c =&gt; c is Label) as Label; lbl.Text = " ID: " + e.CommandArgument + " and Time: " + DateTime.Now.ToLongTimeString(); //You can use the ID from e.CommandArgument to query the database // for data to update your Repeaters with. btn.Enabled = false;//Disabling the button for our Header // will prevent Asyncronous Postbacks to update the content again. //Only disable this if you don't need to update the content // when the user clicks to view the pane again. upContent.Update();//Set UpdateMode="Conditional". } } </code></pre> <p><br><br> I know this looks like a lot, but it's only a few lines of code (before wrapping and commenting).</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload