|
r.a.d.controls version
|
r.a.d.ajax 1.x
|
| .NET version |
1.1/2.0
|
| Visual Studio version |
2005 / Express
|
| programming language |
C#
|
| browser support |
all browsers supported by r.a.d.controls
|
PROJECT DESCRIPTION
In some cases the size of the HTML sent by the AJAX responses can slow down your applications to
a level that will make them look terribly programmed. A possible
solution for this, only in certain scenarios, will be ajaxifying individual
sections of the data controls. Each ItemTemplate inside a Repeater for example, so
every time an AJAX event is fired, only the HTML code of the target Item will be
transferred and updated, considerably reducing the size of the data transferred
back and from the server to the client.
Imagine a list of grouped tasks for example, this can be shown using two nested
Repeaters, one for the Lists, and inside each Row another Repeater loads the
Tasks for that List. Then you can ajaxify the Repeater events putting it inside
a Panel and adding the corresponding entry to the RadAjaxManager. Until here
everything is fine, but what will happen if the list grows huge, like a thousand
tasks? Every single event that is fired will reload the whole external Repeater,
which might not sound like a problem, but we will be talking about reload times
of minutes, totally unacceptable these days.
The RadAjaxManager control cannot ajaxify the items inside a Databound control
using the designer view, but you can easily do it dynamically, adding the AJAX
events to the AjaxSettings collection programmatically.
In this sample code application you can find an easy way to do this.
I will be using the example that i presented above, the grouped lists of tasks,
which can be edited in place and every list will be independently updated by the
AJAX events. I'll show a quick diagram to explain the structure of the data
here:
List A
Task A1
Task A2
Task A3
List B
Task B1
Task B2
List C
Task C1
Task C2
I created a basic SQL database with two tables, one for the Lists and another
for the Tasks, some Stored Procedures (getLists, getTasks, editTask,...), and the
Data Layer classes (oTask.cs, oList.cs and DataManager.cs). You can review the
methods in these classes to see how they get and save the data.
For simplicity I only implemented the 'edit task' method, but once you
read the
code you will easily understand how you can add new tasks or lists,
delete them
or edit the list titles. The key parts of the code will be the
ItemDataBound
events of both Repeaters, and the ItemCommand of the nested one. Notice
that you need to put the nested Tasks Repeater inside a Panel so
r.a.d.ajax can refresh the contents of each Row independently. This is
important, otherwise the RadAjaxManager won't know which controls to
update. The process to achieve the expected results will be this:
-
The Lists Repeater is databinded at the Page.Load event
-
The ItemDataBound event of the Lists Repeater load the Tasks of the current
List and databinds the nested Task Repeater
-
The ItemDataBound event of the Tasks Repeater tells the RadAjaxManager to
ajaxify the ItemCommand event fired by the 'Save Task' button of each Task
-
The ItemCommand event of the Tasks Repeater saves the text of the edited
Task to the database and refreshes only the current Tasks Repeater.
To test the code you will have to add your own r.a.d.ajax developer
or trial reference, and don't forget to check the path of the
ConnectionString at the Web.config file.