UXGridView Part 3: Fundamental Grid Features

By ansoesil | February 11, 2011 | In 2011 R1, Development

The core feature-sets that we wanted to focus in the first data controls CTP are the QueryDescriptor component model, and the fundamental grid architecture/features such as high-performance virtualization, adaptable layout, drag and drop, grouping and much more. In my previous post, I’ve explained how to use QueryDescriptor which greatly simplify server data access using MVVM design pattern. Now, I will share some of the fundamental grid features that already available in the first CTP, and what you can expect in the next release.

Virtualization

One of the most fundamental features in UXGridView is its high-performance virtualization (virtual rendering) architecture. This means that the UXGridView doesn’t actually render all the data passed to it. Instead, it implements a smart logic which virtually render the data based on the available view port and the current scroll position. This virtualization feature is applied to all types of cells and rows rendering including the RowGroupHeader and RowGroupFooter, so that you can expect a blazing fast and scalable grid control for your applications.

You can try to bind the UXGridView with an unbound collection that holds million of rows as follows.

public class Data

{

public string Column1 { get; set; }

public string Column2 { get; set; }

public string Column3 { get; set; }

public string Column4 { get; set; }

public string Column5 { get; set; }

public string Column6 { get; set; }

public string Column7 { get; set; }

public string Column8 { get; set; }

public string Column9 { get; set; }

public string Column10 { get; set; }

public string Column11 { get; set; }

public string Column12 { get; set; }

public string Column13 { get; set; }

public string Column14 { get; set; }

public string Column15 { get; set; }

public string Column16 { get; set; }

public string Column17 { get; set; }

public string Column18 { get; set; }

public string Column19 { get; set; }

public string Column20 { get; set; }

public string Column21 { get; set; }

public string Column22 { get; set; }

public string Column23 { get; set; }

public string Column24 { get; set; }

public string Column25 { get; set; }

public string Column26 { get; set; }

public string Column27 { get; set; }

public string Column28 { get; set; }

public string Column29 { get; set; }

public string Column30 { get; set; }

}

public partial class SilverlightControl1 : UserControl

{

public SilverlightControl1()

{

InitializeComponent();

ObservableCollection

data = new ObservableCollection();

for (int i = 0; i < 1000000; i++)

{

Data d = new Data()

{

Column1 = "Data1",

Column2 = "Data2",

Column3 = "Data3",

Column4 = "Data4",

Column5 = "Data5",

Column6 = "Data6",

Column7 = "Data7",

Column8 = "Data8",

Column9 = "Data9",

Column10 = "Data10",

Column11 = "Data11",

Column12 = "Data12",

Column13 = "Data13",

Column14 = "Data14",

Column15 = "Data15",

Column16 = "Data16",

Column17 = "Data17",

Column18 = "Data18",

Column19 = "Data19",

Column20 = "Data20",

Column21 = "Data21",

Column22 = "Data22",

Column23 = "Data24",

Column24 = "Data25",

Column25 = "Data25",

Column26 = "Data26",

Column27 = "Data27",

Column28 = "Data28",

Column29 = "Data29",

Column30 = "Data30"

};

data.Add(d);

}

this.uXGridView1.ItemsSource = data;

}

Notice that the overall UXGridView performance is based on the view port, the smaller the view port the less objects need to be rendered, thus it will perform faster.

Adaptable Layout (Dynamic Row Height)

Since rows and cells can be represented in many ways, we included a nice feature to support dynamic row height in the virtualization logic. This feature enables you to use a wrapped textblock for the cell, or using a fluid template for the Row and RowDetail without compromising the virtualization feature. Several examples of this feature were already available in the downloadable CTP that you can play around.

To enable text wrapping in the cell, right now you need to customize the CellStyle and add a TextBlock with TextWrapping property enabled. In the next release, we will add a built-in property directly in the UXGridViewColumn to easily enable text wrapping.

Drag and Drop (Column and Group Reordering)

Drag-drop interaction is commonly found in a number of Grid operations such as column reordering, and group manipulation like adding group, removing group or reordering group. Thanks to ClientUI’s robust DragDrop Framework, we can quickly provide fluid drag-drop capabilities in the UXGridView. You can find more exciting UX features related to the drag-drop in the next and third milestone of the CTP release.

Data Grouping

If you are wondering why GroupDescriptors is not included in the QueryDescriptor, it’s because data grouping is considered to be a client operation rather than a server operation. To group a data in runtime, you drag a column header and drop it onto the GroupByBox element which you can enable through the GroupByBoxVisibility property.

You can also add some predefined group declaratively as follows.

<Intersoft:UXGridView Name="uXGridView1" GroupByBoxVisibility="Visible">

<Intersoft:UXGridView.GroupDescriptors>

<Intersoft:UXGridViewGroupDescriptor PropertyName="CategoryID"/>

<Intersoft:UXGridViewGroupDescriptor PropertyName="SupplierID"/>

</Intersoft:UXGridView.GroupDescriptors>

</Intersoft:UXGridView>

Group Total and Aggregates

In addition to the data grouping, we also introduced GroupFooter which represent the aggregate values of a specific column for a specific group. There are five built-in aggregates supported in UXGridView which are: Average, Sum, Count, Min and Max. A more advanced, customized aggregate function is also planned in the next CTP release, which leverage the use of MVVM and multi-binding.

The following example shows how to enable the group footers, and specify the aggregate function for certain columns.

<Intersoft:UXGridView Name="uXGridView1" GroupByBoxVisibility="Visible"

GroupFootersVisibility="Visible">

<Intersoft:UXGridView.GroupDescriptors>

<Intersoft:UXGridViewGroupDescriptor PropertyName="CategoryID"/>

<Intersoft:UXGridViewGroupDescriptor PropertyName="SupplierID"/>

</Intersoft:UXGridView.GroupDescriptors>

<Intersoft:UXGridView.Columns>