Sortable Grid

[Bryan Matthews]

I recently had to implement a sortable grid.  The implementation is of the quick-and-dirty variety, so I’m open to suggestions.

Anyway, the initial DOM structure looked something like this:

 

 

I modified it by attaching a dataview to the containing table bound to the current data item, so there would only be one repetition of its content.

 

 

The reason for this was to allow for elements in the table header to raise dataview commands for sorting (notice the “oncommand” option).

 

Next, I wrapped the header text in a hyperlink which raises a dataview “sort” command when clicked.

 

 

The command argument is the path to sort the items by (can be a multi-part path).  The sort command (implemented in the window.sortCommand function) does the following:

·         finds the parent dataview bound to a table

·         finds its child tbody with an attached dataview

·         looks at the element that raised the event (the link) and determines whether to sort asc or desc based on a class, also updates the class

·         sets the dataview’s data equal to the original list, ordered by the sort expression ascending or descending

 

Here’s the code (text version attached):

 

 

That’s pretty much it.  Let me know if you have any questions or suggestions for how it could be improved - I’d like to come up with a more elegant solution if possible.  The solution also depends on the usage of msajax, which will be the preferred templating solution for who knows how long.

 

Thanks,

Bryan