24 January 2008

Remote ExtJS Grid Sorting in ASP.Net

Remote Grid sorting in ExtJS is relatively straightforward, but there is one "gotcha" to look out for.

Steps for Implementing Remote Sorting
The steps for implementing remote sorting are as follows:
  • Create your web service that returns a record set. Give it two parameters that define the field name and sort direction. The value passed back will be 'ASC' or 'DESC'. Just use that in your call to the database for implementing the order in your select statement.
  • In your store, add the 'remoteSort: true' to the constructor.
  • Call the setDefaultSort(field name, direction) on some time before the load.
The Gotcha
I have quoted the ExtJS code below from the Ext.data.Store documentation. Make sure that the actual parameters of the web service are 'sort' (for field name) and 'dir' (for ASC/DESC). If you do not name the parameters the same as what is listed below, the remote sorting will not work.


remoteSort : boolean
True if sorting is to be handled by requesting the Proxy to provide a refreshed version of the data object in sorted ...
True if sorting is to be handled by requesting the Proxy to provide a refreshed version of the data object in sorted order, as opposed to sorting the Record cache in place (defaults to false).

If remote sorting is specified, then clicking on a column header causes the current page to be requested from the server with the addition of the following two parameters:

  • sort : String

    The name (as specified in the Record's Field definition) of the field to sort on.

  • dir : String

    The direction of the sort, "ASC" or "DESC" (case-sensitive).


Overall, the grid is coming along nicely. Eventually, the code makes sense. But getting ASP.Net to work with ExtJS is proving to be a challenge.