Showing posts with label accordion. Show all posts
Showing posts with label accordion. Show all posts

Wednesday, March 28, 2012

Linkbutton inside accordionPane header

Hello.

I have an accordion with some panes. In panes header I have a text and a linkbutton. I want to open a pane when user clicks on text, but I don't want to open (or close) the pane when user clicks on linkbutton. When user clicks linkbutton the pane must not move.

Anyone knows how can I do it?

Thanks!!! and sorry for my english (greetings from Spain! :D)


I would also like to know. Looking at the source code I cant seem to find anything short of re-writing in javascript a number of functions.

Rather disappointed with the level of support for these kind of things this control has.


Please someone can help us? :-(


Hi,

The reason and solution has been discussed in this post: http://forums.asp.net/p/1133424/1809338.aspx

Please try it.


I searched before but i didn't find it.

THAT WORKS!!!


THANK YOU A LOT!Cool

linkbuttons in accordionpane header

I am using an accordion that is created dynamically for a menu and have it working as I want - with one exception. When the user clicks on a dynamically created link button on the header, I want to redirect to another page WITHOUT triggering the default action of the accordionpane (expanding or collapsing). Is there any way to accomplish this? Currently, it triggers the default action of the accordionpane (expands or collapses it) then redirects.

Hi,

The expand/collapse action is fired by the <div> element that the header is wrapped in.

When you click in anywhere in the header, it's fired.

When you click on an element in the header, the element's click will be bubbled up to its parent( the header div ) , thus default action is fired too.

So, you can use javascript to prevent the LinkButton to bubble up the event to prevent this from happening.

The following code snippets help to illustrate my idea.

<script type="text/javascript">
function doSomething(e)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}

</script>

<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server" HeaderCssClass="myclass">
<Header>
<a href="http://links.10026.com/?link=">1. Accordion</a><asp:LinkButton ID="LinkButton2" runat="server">LinkButton</asp:LinkButton>
</Header>

protected void Page_Load(object sender, EventArgs e)
{
LinkButton2.Attributes.Add("onclick", "doSomething();");

}

Hope this helps.

Saturday, March 24, 2012

Load on Demand Feature for Accordion Panes

I'm attempting to set up an Ajax Accordion as an alternative to another Treeview. However, due to the sheer amount of data I may have to deal with, I need the data to only load into the Panes when the pane is selected to decrease the initial page load. Can anyone provide and suggestions or advice?

the AccordionBehavior exposes methods like add_selectedIndexChanging, add_selectedIndexChanged and some others that might be useful. Open up the AcccordionBehavior.js file from the toolkit download, it's incredibly well documented. Anyway, just add a function of your own design during pageLoad() which calls a pagemethod or web service to populate the data and your cooking with gas.

Paul


Thanks Paul, but just so we are clear on this, my objective is to prevent all of the data from loading at the pageload but have it load when the Pane is opened. Thanks for the input.


Right, and I understood. You wire to the event during pageLoad, so that when the event fires (selectedIndexChanging, for example), you get the data you need.


Hi Paul, I was reviewing this thread and trying to make sense of how delegates and event wireups are implemented in ASP.NET AJAX to achieve exactly what the original poster was trying to achieve, but with a deeper twist--I'm developing a nested accordion user control.

What is the syntax to wiring to the event (click) during pageLoad and if this is a user control, how do I go about accessing the pageLoad event from the control? In reviewing the AccordionBehavior.js file and trying to interpret what I'm looking at, the _headerClickHandler is created as a delegate for the _onHeaderClick method and wired up to the header click event via $addHandler. Does asp.net ajax client side scripting support multicast delegates? In other words, how can I go about having one click event execute two methods without having either method reference the other?

I hope I'm being clear in this explanation. I ultimately would like to extend the behavior outside of the script file so as to not modify the original control.



There's pretty detailed coverage of what you're asking here: http://www.asp.net/AJAX/Documentation/Live/overview/AJAXClientEvents.aspx but to give you my spin / synopsis, here you go:

Accessing pageLoad event from user control: There's a few different ways to skin this cat. What I like to do is use a ScriptManagerProxy to load a javascript file that has all your client logic for the control in it. IN that you have a function that you want to call as the control's load function, and then the line: Sys.Application.add_load(yourfunction); You also have to finish with the usual call to Sys.Application.notifyScriptLoaded();. Now, the downside to this is that (I think) you'll end up overwriting each of these functions on each control instance (if you have more than one per page, I mean). This is what makes custom script controls better than user controls, they handle that deconfliction for you. To avoid what I'm talking about, your best bet is still to use the usercontrol's javascript file to define a clientside class, and then define each class instance in the page's pageLoad handler.

Multicast deleages. In short, yes. $addHandler does just what it says, it adds a handler to a list of functions to fire when the event occurs. The Function.createDelegate call is not *quite* what a delegate is in .Net terms, what it does is fix some scopign problems that otherwise can occur in javascript. Typically when you use the keyword 'this' inside an event handler, 'this' refers to the event sender, not necessarily the function's parent object (which is often what you want).

Also, for what its worth you might just create a class that extends their js accordion class. They've set up inheritance features for just that purpose. http://www.asp.net/AJAX/Documentation/Live/tutorials/EnhancingJavaScriptTutorial.aspx

Wednesday, March 21, 2012

loading content in Accordion Pane Dynamically

Is it possible to dynamically fetch the content when a user clicks on a header of the accordion pane?

The content for the accodion panes in my solution is rather large and I would only like to show it for the selected panes.I would like to show the headers and all of the panes collapsed initially. But when a user clicks on the header, I would like to dynamically fetch the content and show it just for that pane.

An example or tips on how to do this would be much appreciated.

Thansk,

jsidhu

Hi Jsidhu,

Please refer to this thread: http://forums.asp.net/p/1129397/1792511.aspx

It implements a similar function on ModalPopupExtender, you can easily apply it to Accordion.