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

No comments:

Post a Comment