Hi folks,|
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:
The Requirement:
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!
The Problem:
In Edit mode, I have to enable my page' controls, change the values in them and save them to database. But when I change values and click 'Save', in the pageload, all my controls are rebuilt and the changes I made are lost. The accordion is not able to restore the values after postback. I googled a lot for this problem and found few approaches like this one, but in vain (though it worked for some people). I tried to access my controls' value using client side javascript, store them in hidden variables and get back after postback. But inactive accordion panes do not render the controls. So I cannot access all controls. I posted my problem in ASP.NET forums but couldn't get any solution as of then.
jQuery's Soluton:
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.