Introduction to IE Data Binding - DHTML Lab | 11

Sorting and Filtering Data

To add sorting and filtering to our example we need to access the properties and methods of the DSO, as this is responsible for our locally cached data. The DSO exposes two properties for sorting and three properties for filtering. As we don't necessarily want changes to properties to be applied immediately, it also exposes one method to apply the changes to the properties.

The SortColumn property can be set to the name of the column to be used for sorting. The SortAscending property can be set to make the sort order ascending when true or descending when false.

The FilterValue property is the value to compare with the column specified with the FilterColumn property using the FilterCriterion comparison property. This will become clearer in the code fragment below.

Remember the data in the DSO is not affected by changing these properties. The DSO does not apply the changes to the properties until the Reset() method is called.

For our example we now need to introduce two functions to do apply the filtering and sorting:

<SCRIPT LANGUAGE=JavaScript>
function selectChange()
{
    // Check for special case of "All" and clear filter
    var filt = cboDept.options[cboDept.selectedIndex].text;
    if (filt == 'All')
    {
        tdcStaff.FilterColumn = '';
        tdcStaff.FilterValue = '';
        tdcStaff.FilterCriterion = '';
    }
    else
    {
        tdcStaff.FilterColumn = 'Dept';
        tdcStaff.FilterCriterion = '=';
        tdcStaff.FilterValue = filt;
    }

    //Reset the DSO, this will in turn refresh any bound elements
    tdcStaff.Reset();
}
function colSort(varColumn)
{
    //Check to see if we are sorting on the same column
    //If so assume user simply wishes to invert sort order
    if (varColumn == tdcStaff.SortColumn)
    {
        //Invert order
        tdcStaff.SortAscending = !tdcStaff.SortAscending;
    }
    else
    {
        //Use current sort order for new column sort
        tdcStaff.SortColumn = varColumn;
    }
    //Reset the DSO, this will in turn refresh any bound elements
    tdcStaff.Reset();
}
</SCRIPT>

The properties of the DSO can also be set directly by adding an extra <PARAM>, for example:

<PARAM NAME=SortColumn VALUE="LastName">

This completes our introduction to Data Binding, but this is just the tip of the iceberg (so to speak). Areas such Data Updating and Remote Data Services will provide the ability to create true client/server applications using DHTML.

Produced by Ian McArdle and Paul Thomas and

URL: https://www.webreference.com/dhtml/column39/9.html