Custom Table Sorting

You can create custom sorting of a table in your application's UI.

The Sorter class (com.nexaweb.client.sorter) controls sorting. By default, it switches between an ascending or descending sort order of the column header on which a user clicks.

However, you can create a custom sort order for tables in your UI.

To set your own sorting options, do the following:

• Register for the onSort method in the table for which you want custom sorting
• Create an MCO that:
  • Sets the sort attribute on the columns by which you want to sort the table
  • Returns false for the onSort method to prevent the Sorter from then executing default behavior

For example, to set a sort order so that when the user clicks on the first column in a table the table sorts both the first and the second column, write an MCO that sets the sort attribute on BOTH the first and second column and that returns false, so that the table bypasses the default sorting.

Inside the body of the MCO method handler you can also set sortPriority on the columns to control which column is the primarily sorted one.
For example, the method could sort by every column when one column is clicked, if it set sort="ascending" on each column in the table.

The following example shows the XAL table syntax and an MCO for a custom sorted table.

XAL syntax:

 <table height="300" sortType="stable" onSort="mco:tableSorter.onSort()"> 

MCO:

This MCO does the following:

• If the user clicks on one of the first two columns, the table sorts using the default method.
• If the user clicks on one of the later columns, the MCO manually sets the sort and sortyPriority attributes on that column without clearing the sort and sortPriority attributes on a previous column. That is, if a user clicks column headers in this order: 1, 4, 5 - the table sorts based on column 1, and then breaks ties by sorting based on columns 4 and 5. If a user clicks column 1 again, the table no longer sorts by columns 4 and 5.

public boolean onSort(){
ClientEvent e = getSession().getEventHandler().getClientEvent();
Element table = (Element)e.getSource();
Vector children = table.getChildren();

String columnId = e.getParameter("columnId");
Element columnElement = getSession().getDocumentRegistry().getUiDocument().getElementById(columnId);
int columnIndex = children.indexOf(columnElement);

System.out.println("On sort column index=" + columnIndex); 

The following clears all other columns if a user clicks on one of the first two columns:

if (columnIndex<=1){
for (int i =2; i<children.size();i++){
Element column = (Element)children.elementAt(i);
if (!column.getLocalName().equals("column")){
break;
}
column.removeAttribute("sortPriority");
column.removeAttribute("sort");
_lastPriority = 3;
}
return true;

}

The following lowers the priority and marks as sorted any other column on which a user clicks:

else{
columnElement.setAttribute("sortPriority",String.valueOf(_lastPriority++));
String sort = columnElement.getAttribute("sort");
if (sort==null sort.equals("descending")){
columnElement.setAttribute("sort","ascending");
}
else{
columnElement.setAttribute("sort","descending");
}
}
return false;
}