Sorting and Filtering the Grid Data
Adding a Sort Button to a Column
1. Select the Grid widget, open the Properties panel, and then click 
. The column configuration dialog box opens.
. The column configuration dialog box opens.2. In the left pane, select the column that you want to configure, then on the Column Format tab, select the Sort Button check box.
3. Click Done to close the dialog box, then click Save to save the mashup.
A sort button is added to the header of the grid column at run time. You can sort the results in ascending or a descending order.
Sorting Rows Initially on the Grid
1. Select the Grid widget, and then click on the Properties panel. The column configuration dialog box opens.
on the Properties panel. The column configuration dialog box opens.2. In the left pane, select the column that you want to configure, then on the Column Format tab, under Initial Sort, select an Ascending or a Descending sorting order.
3. Click Done to close the dialog box, and then click Save to save the mashup.
When the grid is loaded at run time, rows are sorted automatically based on column values.
Adding a Simple Filter Box
1. Select the Grid widget, open the Properties pane. The widget properties are listed.
2. Enable the ShowFilter property. A filer box is displayed above the header row.
Optionally, configure the following related properties:
◦ FilterLabel—Sets the label to display for the filter box.
◦ FilterString—A property with a two-way binding that enables you to set or retrieve the filter string programmatically. You can use this property to apply a specific filter when users open the Grid widget.
3. Click Save, then View Mashup.
The filter string is automatically applied to the data as you type. To clear the selection for rows that are filtered outside the current view, set the ClearFilteredSelection property to true. To keep the selections when using the filter box, you must provide unique IDs for each row using the IDFieldName property, and then set the ClearFilteredSelection property to false.
 | The filter is only applied to preloaded data when using the filter box in the Tree Grid widget. Unloaded child data is only included when their parent is expanded and the data is loaded into the grid view. |
Using a Chip Based Data Filter Widget
Use the Chip Based Data Filter widget to add more advanced filtering functionality in your mashup. The widget includes support for multiple filters and more complex filter expressions.
1. Open the Widgets panel, and then drag the Chip Based Data Filter widget to a container on the canvas.
2. Bind the Query property of the Data Filter widget to the QueryFilter property of the grid widget. The QueryFilter property functions as both input and output. It receives input from the Data Filter, and generates an output based on the filter criteria that is defined within the filter widget.
3. Bind the QueryFilter property to the query input parameter of the QueryDataTableEntries service that is used to retrieve the grid data.
4. Configure the Data Filter widget to choose the available items in the drop-down list for the filter categories.
5. Click Save, then View Mashup.
For more information about the Chip Based Data Filter, see Chip Based Data Filter Widget (Themable).