Updating individual Items/Rows inside complex Data controls

2 posts, 0 answers
  1. Javier
    Javier avatar
    5 posts
    Member since:
    Oct 2006

    Posted 19 Oct 2006 Link to this post


    r.a.d.controls version

    r.a.d.ajax 1.x
    .NET version

    Visual Studio version

    2005 / Express
    programming language

    browser support

    all browsers supported by r.a.d.controls

    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.

  2. Vladimir Milev
    Vladimir Milev avatar
    1061 posts

    Posted 23 Oct 2006 Link to this post

    Hello Javier,

    Thanks for your submission. We will publish your project shortly after a review of the code.

    Kind regards,
    Vladimir Milev
    the telerik team
Back to Top