Development | .NET Compact Framework

A Powerful New Grid Control Optimized for the .NET Compact Framework
Written by Radomir Vozar  [author's bio]  [read 31797 times]
Edited by Derek

   

Page 1 

A Powerful New Grid Control Optimized for the .NET Compact Framework

The grid control is a standard component of almost every desktop and mobile application and although Visual Studio .NET includes the DataGrid control, its functionality is very limited and usage quite problematic especially in mobile application projects. The Resco SmartGrid .NET is a powerful control designed specifically for mobile devices. In addition to the standard grid functionality the SmartGrid supports advanced graphics features such as column and cell customizations as well as very efficient data handling.

In this article Radomir presents the basic features of this control and the way SmartGrid works in a smart device application project. To this end I will create a sample form which loads product sales data from a SQLCE database and displays them in a stylish grid complete with graphics and customized cells.

Quick data loading

My local database contains only one table with three columns:

• ProductName – the name of the product
• Sales – total yearly product sales in USD
• Change – sales change in comparison to the previous year

I will use the DBConnector object to load data to my SmartGrid. This object significantly simplifies my work. The only thing I need to do is to set its ConnectionString and CommandText properties and then call the LoadData method which creates all columns and loads the data to the SmartGrid.

Me.SmartGrid1.DbConnector.ConnectionString = _
      "Data Source = \Program Files\DevBuzzSample\Northwind.sdf;"
Me.SmartGrid1.DbConnector.CommandText = "SELECT * FROM Sales"
Me.SmartGrid1.LoadData(True)

This works well until the "Select" command returns too many rows then the loading process becomes extremely slow, especially on a Pocket PC owing to the limited CPU and memory constraints of mobile devices. This can often translate into a certain degree of frustration to the users of my application. To address this performance issue the SmartGrid utilizes a proprietary quick data loading technique. The only thing I need to do is set the DelayLoad property.

Me.SmartGrid1.DelayLoad = True

This option ensures that the SmartGrid only loads data for the rows which are visible in the grid. For example, if my Select returns 1000 rows, the LoadData method loads only the first 15 to 20 rows (those which are visible in the SmartGrid). The remaining rows are only read after the user clicks on the scroll bar.

Using this approach the SmartGrid can be filled within a second, no matter how much data the SelectCommand returns.

Advanced graphics capabilities

In the next part of my article I will modify the appearance of my SmartGrid.

Basic look and feel customizations can be achieved by setting the color properties of standard, alternative, header and selected cells all of which can be done in the Visual Studio Designer using the Properties Window.

If I want to perform more advanced customizations I need to create grid columns and grid styles which I will use for my columns or particular cells. This can be also done in the Designer.

In my sample I create three columns named ProductName, Sales and Change and set their basic properties such as DataMember, HeaderText, Width, etc. Now say I want to keep the default simple style of the first two columns but need to add some graphics to the Change column. I can do this thanks to the CustomCell Event. All I need to do is set the CustomCell property of this column to True. This setting causes the CustomCell Event to be raised for every cell in the Change column.

Finally I need to write the code for this Event along these lines. In case of a positive value I’ll change the color to blue and draw an up arrow image in the left part of the cell, while in case of negative values, I’ll use the red color and a down arrow image.

For this type of customization I need to create two new styles Number_blue and Number_red and set their ForeColor property to blue (or red respectively) and ImagePosition property to Left. I also need to add the ImageList control and both arrow images to my form. The CustomCell Event code will look like this:

Private Sub SmartGrid1_CustomizeCell(ByVal sender As Object, _
                ByVal e As Resco.Controls.SmartGrid.CustomizeCellEventArgs) _
                Handles SmartGrid1.CustomizeCell

    If e.Cell.Header = False Then
        If e.Cell.Column.DataMember = "Change" Then

            ' Format the Text property
            e.Cell.Text = FormatPercent(e.Cell.Data, 0)

            ' Format the Style and Image properties
            If e.Cell.Data > 0 Then
                e.Cell.Style = Me.SmartGrid1.Styles("Number_blue")
                e.Cell.Image = Me.ImageList1.Images(0)
            Else
                e.Cell.Style = Me.SmartGrid1.Styles("Number_red")
                e.Cell.Image = Me.ImageList1.Images(1)
            End If

        End If
    End If

End Sub

And this is what my final SmartGrid sample form looks like.

In conclusion

This is just a brief explanation of the basic SmartGrid features. More advanced functionality is available, such as:

• Use the location and size properties of the cell to display an edit component allowing direct data modification.
• Use data binding to all standard data sources like DataTable, DataView, ArrayList...
• Use manual data loading through the Rows collection.
• Save the layout of the control to an XML Template and load it during runtime.
• Use the Advanced SmartGrid Designer
• …

Click here to buy the SmartGrid .NET Control - optimized for .NET Conpact Framework.

Back to .NET Compact Framework | [Article Index]