List Control - Grouping Part 2

UX Component

In this document and accompanying video we will continue our discussion on inserting group breaks into a List Control. 


Watch Video - 2


Our example shows a list that is grouped by country:




If we click on City to sort the list, the group breaks disappear because the sort took place as a client-side sort.  In order for sorting to work with group breaks we must do server-side sorting:



To do that click on the Design tab, then List properties:




When the List Builder window opens click on the List Layout tab.  We see that for each column we can turn on the Can sort property which allows us to sort on that column.  We also see that under Sort where we can select either ClientSide or ServerSide.  We want to do all of our sorting on the server-side so that the group breaks can be inserted into the data.  We will click on each item in Columns in List, and select ServerSide for each one:




When we select ServerSide we can also specify the server-side sort expression.  For example we might want to specify that when we sort by CompanyName, we also sort by ContactName in descending order. 




Now when we click on the Working Preview tab we see that as we click on each column the sorting is done within each group break:




Let's look at some of the other options we have by clicking on the Design tab, then List properties.  In addition to the Group header template, we also have the option of creating continuation headers.  A continuation header can be used if we have paginated our data and want the group header to indicate if the group started on one page and continued onto the next.  Let's create an example using a continuation header.  Click the Design tab, then List properites:




We turn on Paginate data, we set our Pagination method to NavigationButtons, then we click Group header template:



When the Group Header Template window opens, click Insert continuation header flag:




In the Continuation Header window we can specify the text to be shown when the group header continues onto the next page.  We have specified that the text to be shown will be "Continued..." :




We see that an expression was automatically generated for us.  If the flag called headerFlags.continued is true, then "Continued..." will be displayed, otherwise no text will be displayed:




Click the Working Preview tab to see the continuation header.  At the bottom of our list Brazil is noted as having nine entries, but only three are displayed.  Click on the Next navigation button:




At the top of the next page we see the remaining six entries for Brazil, with our continuation header "Continued..." displayed with the group header: