Click here to Skip to main content
Click here to Skip to main content
Go to top

Designing Mobile Grid Control with Edit Capabilities

, 8 Mar 2010
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.

Editorial Note

This article is in the Product Showcase section for our sponsors at CodeProject. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

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.

Designing mobile grid control with edit capabilities

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.

Designing mobile grid control with edit capabilities

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.

Designing mobile grid control with edit capabilitiesDesigning mobile grid control with edit capabilities

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Resco Developer Tools
Marketing Resco
Slovakia Slovakia
No Biography provided

Comments and Discussions

 
Questiondownload Pinmembermajoob229-Jun-11 9:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140926.1 | Last Updated 8 Mar 2010
Article Copyright 2010 by Resco Developer Tools
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid