I would like to share a bitter experience I faced for one long week and a beautiful solution I found today :) It goes like this:
There is a web page contains hundreds of checkboxes, textboxes and dropdowns. All these controls are dynamically built in code behind. On page load all the controls should be disabled and on clicking an "Edit" button, all the controls should be enabled so that user can change the values and save. I need to format the page so that it would be user friendly.
My Initial Approach:
Since the layout is cluttered because of hundreds of controls (number depends on records in database) , I decided to use ASP.NET AJAX Accordion control, grouping all my controls into different panes. Not a bad start I guess. So, on every page load, I created new controls, built my UI and databound them. Then I created new accordion panes and added these controls to them. As far as displaying data, the accordion was perfect!
As I was lacking time, I thought of using jQuery for my problem. I built dynamic HTML tables, which contain all my controls, in code behind. I wrapped these tables in divs and assigned classes to these divs. Then, using jQuery's slide effects, I was able to toggle my content (slide up and slide down). I wasted 4 long days with accordion (without result), but I could finish this task so easily with jQuery in just 1 hr.
I personally suggest budding developers to give a serious look at jQuery.