Using Syncfusion’s WinRT DataGrid : Getting Started with Syncfusion’s DataGrid (SfDataGrid) for WinRT

A DataGrid is a Graphical UI element, which presents a tabular view of data, and Syncfusion’s SfDataGrid is no different except with the added feature list it offers.  At the time of this writing, SfDataGrid also supports populating items source from Database like SQLite which I will cover in a separate post.

Populating Data With Grid:

Mean and sole purpose, the DataGrid had existed is to present the data to the user.  To set SfDataGrid in action, Drag-and-Drop SfDataGrid from Toolbox in Visual Studio. Visual Studio will take the responsibility of adding all reference to your project.  With SfDataGrid added to your application, Now LETS GET STARTED.

Syncfusion SfDataGrid Toolbox

Itemsource had/has and will be the backbone of a DataGrid, So first we need to bind the Itemsource collection to SfDataGrid.  SfDataGrid provides with a public property called AutoGenerateColumns that automatically generates columns based on the public properties of your data objects.

Code Snippet Syncfusion DataGrid

Alternatively, you can define your columns manually by setting AutoGenerateProperty to False.  In this case you need to define the columns in Columns collection of SfDataGrid.  For the Release Preview, SfDataGrid supports GridTextColumn for text values and GridTemplateColumn for defining our own cell template.

Code Snippet Syncfusion DataGrid

Selection:

SfDataGrid offers variety of selection modes, which includes: None, Single, Multiple and Extended.

Syncfusion SfDataGrid Properties

None: SfDataGrid won’t allow selection, When SelectionMode is set to None

Single: SfDataGrid allows only Single selection, no matter of assistance is provided by helper keys such as Ctrl, or Shift

Multiple: SfDataGrid allows Multiple selection, where clicking on every row selects the row.

Extended: Property by which, you can use Ctrl/Shift Keys to select more rows in SfDataGrid.

Public Properties available for Selection: SelectionMode, SelectedItem, SeletedItems, SelectionOnMouseDown, SelectionBrush, SelectedIndex, ShowCurrentCell

Methods available for Selection: SelectRows(), SelectAll(), ClearSelection()

Events available for Selection: SelectionChanging, SelectionChanged

Reordering, Resizing Columns:

SfDataGrid provides support for reordering and resizing the columns in Runtime, during design time the coder can make use of ColumnSizer to Size the Columns for rendering to the user

Syncfusion SfDataGrid Column Sizer

Auto: Sizes the column width based on the width minimum needed by the column to show without wrapping the column content.

AutoWithLastColumnFill: Sizes all column as with Auto ColumnSizer, but fills the viewport size with last column.

SizeToCell, SizeToHeader: These are self-explanatory, sizes the column width to Cell/Header

Star: Divides the Column width, equally depending on the viewport area.

Syncfusion DataGrid Column Drag and Drop

SfDataGrid also supports Reordering and Resizing via touch, we just need to enable AllowDragColumns Property to True.

PS : You will be needing Syncfusion’s Essential Studio 11.1.0.21 or later to work with SfDataGrid

  • Ramu

    Kudutha kasuku mela koovurada goyala!!!!