Designing Mobile Grid Control with Edit Capabilities

Based on the feedback from mobile developers follows that there are several similar scenarios they have to solve. One of them is designing a mobile application that allows collecting orders and features full finger-touch operation. Let’s design a simplified app that meets such requirements using Microsoft Visual Studio and a grid control with edit capabilities.

The final application will be capable of:

• Reading orders stored in SQL CE Server database,
• Adding new order,
• Editing orders,
• Order deleting,
• Saving changes to the database.

Prerequisites

You will need:

• Microsoft Windows Mobile 5.0 SDK (or later) which you can download here.
• Resco MobileForms Toolkit 2010 which you can download here.
• you can use any WM device (or an emulator).

Resco MobileForms Toolkit is a set of Visual Studio controls designed for mobile devices. After installing Resco MobileForms Toolkit Volume 2010 on your computer, the controls will be automatically added to the Visual Studio’s toolbox. We will use following Resco controls and libraries in the project:

• Resco SmartGrid for .NET CF,
• Resco AdvancedComboBox for .NET CF,
• Resco NumericUpDown for .NET CF.

The application can be created for both .NET Compact Framework 2.0 and .NET Compact Framework 3.5. Just download the appropriate version of Resco MobileForms Toolkit 2010.

Database Model

For the purpose of this application, I created a simple database with two tables storing data: Orders and Products. The relationship between these tables is defined by the „ProductID“ column.

The first table „Orders“ has four columns:

• OrderID — a string id (primary key) holding id of an order,
• ProductID — string id holding id of a product for an order,
• UnitPrice — a price for a unit of selected product,
• Quantity — the total number of ordered products.

Second table „Products“ has five columns:

• ProductID — string id (primary key) holding id of a product,
• ProductName — name of a product,
• QuantityPerUnit — describes product’s volume,
• UnitPrice — price for a unit,
• UnitsInStock — product units available in stock.

User Interface

The application consists of one Form object — Form which contains the orders‘ grid.
All you need to do to add and display orders from the database is a single control called Resco SmartGrid for .NET CF.
Afterwards, the Resco AdvancedComboBox and Resco NumericUpDown will be implemented into the Resco SmartGrid. The Resco AdvancedComboBox serves as product selector while the NumericUpDown as selector of the amount of product.

Data Loading and Binding

In this application, Resco AdvancedComboBox’s DataSource property is bound to a grid of objects that are instances of the Products class.
Product class contains several properties that match the columns of our table in the database: UnitPrice, ProductID and ProductName.
Resco SmartGrid’s DataSource property is bound to a grid of objects that are instances of the Orders class.
Order class contains several properties that match the columns of our table in the database: ProductID, UnitPrice, Quantity and OrderID.
Resco NumericUpDown is bound to the table Orders and edits values in column Quantity.

Designing Templates for Items

Now, I will add a header to the SmartGrid. The header displays names of the columns. Then with help of cells and their feature CustomizeCell I will design row, selected row and a row adding product to the SmartGrid. The CustomizeCell feature allows designing the cells in which Resco AdvancedComboBox and NumericUpDown can be added.
To bind a cell to the underlying data object property, simply set its CellSource.

Enhancing the SmartGrid

When the application is launched, in my case there are no data stored in the table Orders, a blank SmartGrid is displayed that includes a single row with the option to add a product.

Each row in the table is editable by Resco controls. User can select a product from AdvancedComboBox and set up its volume by Resco NumericUpDown. Both controls are easily operated by a finger.

The Resco AdvancedComboBox provides a lot of features that is out of scope of this article, such as ImageCell, ButtonCell...

Conclusion

This kind of an application provides the user with all important functionality available on a simple finger touch. From developers perspective, the most important is to design applications in way they meet current trends, such as finger touch support, intuitive operation, attractive graphic design and logical layout of both data and controls. Inevitable was to use 3rd party components that have it all — Resco MobileForms Toolkit.

To see how Resco developers got the app down to the fine art, download either the source code or the application below:

• Download the source code of the application and find out.
• Download the application (CAB file).

About Resco MobileForms Toolkit

Resco MobileForms Toolkit is one of the richest and most comprehensive sets of Microsoft Visual Studio controls and libraries designed for developers of software solutions for mobile devices. In its portfolio there are controls and libraries that tackle most problems developers encounter in the mobile environment. Flexible keyboard, professional list control, powerful grid control, charting control, and scheduling control - to mention only the most frequently used ones.
For more information about Resco MobileForms Toolkit, visit http://www.resco.net/developer/mobileformstoolkit/default.aspx