Step 4 of 4: Running the Grid Application

Now that you've created a grid application, bound the grid to a data source, and customized the grid's appearance and behavior, the only thing left to do is run your application. To observe DataGrid for Silverlight's run-time interactions, complete the following steps:

1. Select Debug | Start Debugging to run your application.

2. Click the Name header once to sort the grid by product name. Notice that a sort indicator glyph appears to indicate the column being sorted and the direction of the sort.

You can sort multiple columns by holding the CTRL key while clicking another column.

3. Re-order the columns by clicking the Category column header and dragging it in front of the Name column header:

The Category column will now appear before the Name column.

4. Resize a column, here the Name column, by clicking the right edge of the column and dragging the edge to a new location.

5. Filter the content of a column by clicking the drop-down arrow in the Category header, entering "bev" in the filter text box, and pressing the Filter button, so that only items beginning with that string appear:

Notice that the drop-down arrow icon is replaced with a filter icon, indicating that the column is filtered. Note that the vertical scroll bar remains visible, though content cannot be scrolled vertically. This is because you set the VerticalScrollBarVisibility property to Visible.

6. Clear the filter by clicking the Filter icon in the Category column header and clicking the Clear button:

7. Drag the Category header to the grouping area to group the grid by category:

You can repeat this with additional columns to group by multiple criteria.

8. Click the X button in the Category column header in the grouping area to no longer group columns by category.

9. Add new data to the grid by clicking in the new row and typing content:

Click away from the row or press ENTER for the content you added to be included in the grid.

10. To edit the contents of a cell, click once on a cell, type text to add or change content, and press the ENTER key:

Notice that a pencil icon appears in the row indicator column, specifying that a cell in that row is in edit mode.

Congratulations! You've completed the DataGrid for Silverlight quick start and created a DataGrid for Silverlight grid application, bound the grid to a data source, customized the appearance of the grid, and viewed some of the run-time capabilities of your grid application.[D2HML1]

[D2HML1]D2HML|C1H Conditional|target=C1DataGridSL Manual+C1DataGridSL MHV+C1DataGridSL NetHelp