Articles → Light Switch 2011 → Sorting Data In Light Switch 2011

Sorting Data In Light Switch 2011

In this tutorial I will explain how to sort data in a grid. In this tutorial I will create an editable screen and show you how to show data in a sorted manner when we add(or delete) data from the grid.

Implementation

First of all create a new editable screen

Click to Enlarge

Enter the name of screen(SortingEditableScreen in this case) and click Ok.

When a new screen is added you will see the screen designer

Picture showing the Edit Query link for editing the screen query

Click to Enlarge

Now click on Edit Query option on the upper left side of the sceen (as highlighted in figure above). A screen will appear as shown in the figure below

Picture showing the screen for setting up the sort parameters for the query

Click to Enlarge

Picture showing adding the Department Name as sort parameter

Click to Enlarge

In the row we have a drop down which contains the list of fields that the data grid contains. From this drop down you can select the name of the field on which you want to apply sorting. For example if I want to apply sorting on DepartmentName and the sort direction should be ascending then select DepartmentName from the first dropdown and Ascending from the second drop down.

You can set the sorting on more than one columns. In the Department table we have two columns DepartmentName and Id. To add another column in the sorting list click on Add Sort button and a new row is added as shown in figure below

Picture showing the option to delete the sorting parameter and adding the new sorting parameters

Click to Enlarge

Check the screen above there are two things that are worth noticing. First the Add Sort button is disabled. The reason is because the Department table only contains two columns so if the number of rows equalize the number of columns in the table then the button gets disabled.

Second point is the delete icon button. If you have added a field in the sorting list, but later you feel that you need to delete it then click on this button and the row is removed from the list.

Now run the project a screen comes as shown in figure below

Picture showing the screen with sorting order according to the department name in ascending order

Click to Enlarge

Here we have two records sorted by department name in an ascending order. Now add a new record in the grid by clicking on the plus(+) sign. Enter any value say C# in the pop up window and press Ok. Once the record is added in the grid click on Save button.

Picture showing the screen with sorting order according to the department name in descending order

Click to Enlarge

Now the record is added into the table, but the records are not in ascending order because C# should come between the .Net and Java option. So to do that click on Refresh button and all records will be sorted as shown in figure below

Picture showing the screen with sorting order according to the department name in ascending order when the new record is added

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Thursday, December 29, 2011

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**