GridView Migration from Palomino to Wijmo

In the coming months, our ASP.net controls will be undergoing a transition from the long-running Palomino controls to controls we call ASP.net Wijmo. The ASP.net Wijmo controls are strikingly similar to their predecessors but at the same time very different. One of these controls is the C1GridView control. This control is a versatile web grid with some impressive capabilities. In this article, I will be going through, in detail, the migration process for C1GridView for ASP.net Wijmo.

Let's take a look at the prerequisites that we need before we get started with the migration.

Prerequisites

  1. Studio for ASP.net Wijmo controls. You will be able to download and install these controls from www.componentone.com/SuperProducts/StudioASPNET. Be sure to select the check boxes during the install to add the controls to the toolbox and product samples to save you some time.
  2. NorthWind sample database. This sample database can be located in your Documents folder under ComponentOne Samples/Common/C1NWind.mdb.

Getting Started

Let's begin by creating a new ASP.net web application in Visual Studio by opening Visual Studio and selecting "New Project" from the file menu. Select "ASP.net Web Application", give your project a name and click "OK".

Next, follow the steps at the following address to create a sample ASP.net Palomino C1GridView.

http://helpcentral.componentone.com/nethelp/c1gridview/

The end result should resemble the following.

Migration

With the sample project created and all of the new ASP.net Wijmo controls installed, it is time to begin the migration. The first thing that we want to do is to add some references for the new Wijmo C1GridView. Right click "References" in solution explorer and browse for the folder in C:/Program Files (x86)/ComponentOne/Studio for ASP.NET Wijmo/bin/v4. You will notice that there are multiple C1.Web.UI assemblies. Each targets a specific framework. The dlls that you are looking for in this file are:

  1. C1.Web.Wijmo.Controls.4.dll
  2. C1.Web.UI.4.dll

And this dll from C:/Program Files (x86)/ComponenOne/Studio for ASP.NET Wijmo/bin/v4/Designer.

  1. C1.Web.Wijmo.Controls.Design.4.dll

With this added to the project, we can now add the Wijmo C1GridView control to the page. Navigate to the default.aspx page in the solution explorer. Right click the default.aspx page and select "view designer". Once in the designer view, move to the toolbox and locate the C1GridView in the Wijmo 4.0 tab of the toolbox. Drag an instance of C1GridView onto the page.

Once the control is on the page, you will need to set the data source for the Wijmo C1GridView to the same data source as the Palomino C1GridView.

Before I go any further I want to direct your attention to the Wijmo C1GridView's task menu. Specifically to the theme drop down menu. You will notice a change from the GridView's predecessor. There are six great new themes that are available immediately with the download package for the Wijmo C1GridView for you to utilize. For this example I am using the "midnight" theme.

Moving on we will set the properties in the same manner that we set the original, through the property builder found in the C1GridView's task menu, to the same settings as the original grid. In the tabs of the C1GridView's property builder you will set these properties identical to the previous grid.

After the settings have been set in the property builder, click "apply" and "OK" to close the window.

Now that the grid has all of the properties set, you will need to remove the script manager that you placed onto your page for the Wijmo grid to function properly. Keep in mind that this will effectively render the Palomino grid useless as it needs the script manager to function. DO NOT remove your old grid until you have tested the functionality of the new one. Once the new grid has been tested, you may remove the old one.

ASPX Markup

There are also some subtle differences that warrant a quick look in this guide. Below you will find both the Wijmo GridView markup page (shown first) and the Palomino GridView markup page (shown second). Please take a moment and not the difference between the two.

C1BoundField.DataFormatString

Before we close this article out, there is one important piece of the puzzle that I need to mention. The Component One GridView for ASP.net Palomino uses .net format specifiers to specify the format in which the data in a given column will be displayed. In the Palomino GridView, you have the option to select the format of a given column with the DataFormatString property found in the task menu for the C1GridView. Here is a sample aspx markup showing the .net specifiers in action in the old Palomino GridView.

The Wijmo GridView on the other hand makes use of the JQuery.glob (globalization) format specifiers. These format specifiers offer a huge variety of formatting possibilities across multiple cultures. Using the JQuery.glob specifiers, you are able to format the DataFormatString property with a host of different date/time types, currency types and so much more. With JQuery.glob you can accurately format the correct date/time format for a specific culture or language and also accurately translate the headings into a given language. This is a huge step up for the GridView's formatting possibilities. A comprehensive sample of the JQuery.glob format specifiers can be downloaded HERE.

Conclusion

Now that you have seen it done, hopefully you can confidently transform your existing apps with the newer, more powerful C1GridView for ASP.net Wijmo. The C1GridView is included in the Studio for ASP.net Wijmo suite which can be downloaded at www.componentone.com/SuperProducts/StudioASPNET.

MESCIUS inc.

comments powered by Disqus