Sunday, August 22, 2010

WPF 4.0 Datagrid Control Basic Information

In this post I will use the data grid control which is part of the WPF 4 and try to highlight the basic functionality of the data grid control. Let us start with the example code, below is the screen shot of the application. I have only one control on my window form which is the data grid control and the data grid control is bind from the code behind ( when the window form is loaded the data grid control Items source is assigned the value of the list of person Records).

Image 1

The data grid control is very useful control to display the information to the end user. The information is arranged in the tabular format. The default functionality which is offered by the data grid control is the sorting, reordering and resizing of the data grid control column. The reordering of the column is that when you click on one column and place it before the another column then it will be placed there, you can arranged them as you like, mean in the Image 1 you can see that first name is placed before last name but if you want to see the last name first then you can place the last name before the first name ( as you can see in the Image 2). The reordering of the column take place at run time not at compile time.

Image 2

You can also disabled the functionality of the sort, resize and reoder of the the columns of the data grid control by using assigning the false value to the following properties CanUserSortColumns  (Gets or sets a value that indicates whether the user can sort columns by clicking the column header) ,CanUserReorderColumns (Gets or sets a value that indicates whether the user can change the column display order by dragging column headers with the mouse),CanUserResizeColumns (Gets or sets a value that indicates whether the user can adjust the width of columns by using the mouse) for sorting, reordering and resizing respectivly. If you look at the DataGridColumn class it has the column level CanUserSort, CanUserReorder and CanUserResize properties which can be set at column level. If you don't want to user to sort the first name column but all the remain columns can be sortable then you can set the CanUserSort property of the first name column to false, now user can't sort the first name column but all the other columns can be sortable.Same is the case for CanUserReorder and CanUserResize property. I have set the CanUserSort property of first name column,  CanUserResize property of the last name column and CanUserReorder property of the email address column to false.

Note: If the DataGridColumn.CanUserSort property and the DataGrid.CanUserSortColumns property are both set, a value of false takes precedence over a value of true.

DataGrid Columns Type: Below is the list of the columns type which are supported by the data grid control.

DataGridTextColumn: Perfect for strings, this column type displays a TextBlock for its normal display and a TextBox when the value is being edited.

DataGridHyperlinkColumn: Turns what would be plain text into a clickable hyperlink. However, note that there is no default behavior associated with clicking that link (such as opening a web browser). You must explicitly handle such actions.

DataGridCheckBoxColumn:Perfect for Boolean values, this column type CheckBox to represent a true (checked) or false (unchecked) value.

DataGridComboBoxColumn: Perfect for enumerations, this column type displays a TextBlock for its normal display and a ComboBox filled with possible values when the value is being edited.

DataGridTemplateColumn: Enables an arbitrary template to be set for a value’s normal display as well as its editing display. This is done by setting its CellTemplate and CellEditingTemplate properties.

Auto-Generated Columns: The auto generated columns property is useful if you don't want to set the columns.When you drag and drop the data grid control the the, if you look at the xaml which is generated for the data grid control then you can see the AutoGenderateColumns property is set to false by default.When  you set the AutoGenerateColumns of the data grid to true then DataGridTextColumn is automatically used for strings, DataGridHyperlinkColumn is automatically used for URIs, DataGridCheckBoxColumn is automatically used for Booleans, and DataGridComboBoxColumn is automatically used for enumerations (with an appropriate items source hooked up automatically). When you set the AutoGenerateColumns of the data grid to true the header text will be the name of the properties, FirstName , LastName etc are the Properties name. As you can see in the Image 3. By setting the AutoGenerateColumns all the columns in the data source are displayed.

Image 3

If a DataGrid already has explicit columns defined, any autogenerated columns are placed after them. You can customize or remove individual autogenerated columns by handling the AutoGeneratingColumn event, which is raised once for each column. When all the columns have been generated, a single AutoGeneratedColumns event is raised. To disable autogenerated columns altogether, simply set DataGrid’s AutoGenerateColumns property to false.

All and any comments / bugs / suggestions are welcomed!
 
 

No comments: