Programmer Dflying | Sorting Your List Using ASP.NET Atlas SortBehavior

Sorting Your List Using ASP.NET Atlas SortBehavior

Dflying | 19 April, 2006 00:18

I want to introduce some of the more advanced Atlas Sys.UI.Data controls in this series, including:

Sys.UI.Data.ListView: Display Listible Data Using ASP.NET Atlas ListView Control
Sys.UI.Data.ItemView: Display One Item in a Collection using ASP.NET Atlas ItemView Control
Sys.UI.Data.DataNavigator: Paging Your List Using ASP.NET Atlas PageNavigator Control
Sys.UI.Data.SortBehavior: Sorting Your List Using ASP.NET Atlas SortBehavior
Sys.UI.Data.XSLTView: Apply XSLT to XML Using ASP.NET Atlas XSLTView Control

This is the fourth post: Sorting Your List Using ASP.NET Atlas SortBehavior

Add sorting feature to you list is pretty cool, and some of the ASP.NET server controls have already had this feature built in, such as the DataGrid and GridView. Atlas also let you do so on client side by providing the Sys.UI.Data.SortBehavior behavior.

SortBehavior behavior works with a DataView control (see: Introduction to Atlas Controls in Namespace Sys.Data – DataView and DataFilter) and implements the sorting by changing the sortDirection property of DataView.

SortBehavior object has following properties:

dataView: A reference of DataView object that this SortBehavior will apply the sorting to. You should always set this property.
sortColumn: The name of the DataView column which this SortBehavior will sort by. You should always set this property.
sortAscendingCssClass: The CSS class of the control that triggers the sorting when sort direction is Ascending.
sortDescendingCssClass: The CSS class of the control that triggers the sorting when sort direction is Descending.

Let's try to sort a list now. First step is to expose a Web Service to Atlas page. The Web Service simply returns introductions to some famous people (except me).

using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Web;
using System.Web.Caching;
using System.Web.Services;
using System.Web.Services.Protocols;
using Microsoft.Web.Services;
 
//
// For simplicity this example demonstraes storing and  manipulating 
// the data objects in memory. A database can also be used.
//
    
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class SampleDataService : DataService
{
    static List<Entry> _data;
    static int _nextId;
    static object _dataLock = new object();
 
    private static List<Entry> Data
    {
        get
        {
            if (_data == null)
            {
                lock (_dataLock)
                {
                    if (_data == null)
                    {
                        _data = new List<Entry>();
                        _data.Add(new Entry(0, "Dflying Chen", "A small piece of cake"));
                        _data.Add(new Entry(1, "Bill Gates", "Chairman & Chief Software Architect"));
                        _data.Add(new Entry(2, "Scott Guthrie", "General Manager"));
                        _data.Add(new Entry(3, "Ray Ozzie", "CTO"));
                        _data.Add(new Entry(4, "Steve Ballmer", "CEO"));
                        _nextId = 3;
                    }
                }
            }
            return _data;
        }
    }
 
    [DataObjectMethod(DataObjectMethodType.Delete)]
    public void DeleteRow(int id)
    {
        foreach (Entry row in _data)
        {
            if (row.Id == id)
            {
                lock (_dataLock)
                {
                    _data.Remove(row);
                }
                break;
            }
        }
    }
 
    [DataObjectMethod(DataObjectMethodType.Select)]
    public Entry[] SelectRows()
    {
        return SampleDataService.Data.ToArray();
    }
 
    [DataObjectMethod(DataObjectMethodType.Insert)]
    public Entry InsertRow(string name, string description)
    {
        Entry newRow;
        lock (_dataLock)
        {
            newRow = new Entry(_nextId++, name, description);
            _data.Add(newRow);
        }
        return newRow;
    }
 
    [DataObjectMethod(DataObjectMethodType.Update)]
    public void UpdateRow(Entry updateRow)
    {
        foreach (Entry row in _data)
        {
            if (row.Id == updateRow.Id)
            {
                row.Name = updateRow.Name;
                row.Title = updateRow.Title;
                break;
            }
        }
    }
}
 
public class Entry
{
    private string _name;
    private string _title;
    private int _id;
 
    [DataObjectField(true, true)]
    public int Id
    {
        get { return _id; }
        set { _id = value; }
    }
 
    [DataObjectField(false)]
    [DefaultValue("New row")]
    public string Name
    {
        get { return _name; }
        set { _name = value; }
    }
 
    [DataObjectField(false)]
    [DefaultValue("")]
    public string Title
    {
        get { return _title; }
        set { _title = value; }
    }
 
    public Entry()
    {
        _id = -1;
    }
 
    public Entry(int id, string name, string description)
    {
        _id = id;
        _name = name;
        _title = description;
    }
}

Then the ASPX page, there are three sections in the ASPX page you need to consider:

A ScriptManager control, which is required in every Atlas page.
The place holder div (<div> with id dataContents), where Atlas will place the rendered paged list in.
A hidden <div>, which is used to define the templates.

Here’s the code, for more details about the ListView template, please refer to: Display Listible Data Using ASP.NET Atlas ListView Control

<!-- ScriptManager -->
<atlas:ScriptManager runat="server" ID="scriptManager" />
 
<!-- Element for ListView (container) -->
<div id="dataContents">
</div>
 
<!-- Templates -->
<div style="visibility: hidden; display: none">
    <div id="masterTemplate">
        <table border="1" cellpadding="3" style="width:30em;">
            <thead>
                <tr>
                    <td><a href="#" id="sortId">ID</a></td>
                    <td><a href="#" id="sortName">Name</a></td>
                    <td><a href="#" id="sortTitle">Title</a></td>
                </tr>
            </thead>
            <tbody id="masterItemTemplateParent">
                <tr id="masterItemTemplate">
                    <td><span id="masterId"></span></td>
                    <td><span id="masterName"></span></td>
                    <td><span id="masterTitle"></span></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Time for the Atlas XML scripts. There are four sections of the script.

Section 1. Atlas client side control DataSource, used to retrieve data from server.

<dataSource id="dataSource" autoLoad="true" serviceURL="SampleDataService.asmx" />

Section 2. A DataView, used to paging the collection we get in Section 1.

<dataView id="view">
    <bindings>
        <binding dataContext="dataSource" dataPath="data" property="data"/>
    </bindings>
</dataView>

Section 3. A ListView control, used to display our list.

<listView id="dataContents" itemTemplateParentElementId="masterItemTemplateParent" >
    <bindings>
        <binding dataContext="view" dataPath="filteredData" property="data"/>
    </bindings>
    <layoutTemplate>
        <template layoutElement="masterTemplate"/>
    </layoutTemplate>
    <itemTemplate>
        <template layoutElement="masterItemTemplate">
            <label id="masterId">
                <bindings>
                    <binding dataPath="Id" property="text"/>
                </bindings>
            </label>
            <label id="masterName">
                <bindings>
                    <binding dataPath="Name" property="text"/>
                </bindings>
            </label>
            <label id="masterTitle">
                <bindings>
                    <binding dataPath="Title" property="text"/>
                </bindings>
            </label>
        </template>
    </itemTemplate>
</listView>

Section 4. Three Atlas controls with SortBehavior behavior, used to trigger the sorting.

<control id="sortId">
    <behaviors>
        <sortBehavior dataView="view" sortColumn="Id"/>
    </behaviors>
</control>
<control id="sortName">
    <behaviors>
        <sortBehavior dataView="view" sortColumn="Name"/>
    </behaviors>
</control>
<control id="sortTitle">
    <behaviors>
        <sortBehavior dataView="view" sortColumn="Title"/>
    </behaviors>
</control>