Wijmo Migration: TreeView
ComponentOne has recently released its latest and greatest in ASP.Net controls, ASP.Net Wijmo. In the spotlight now is ComponentOne's TreeView. If you have used the older control (ASP.Net Ajax) then you will know of some of the cool features that will come packaged. The Wijmo control features:
- Improved Performance: Fully extensible client-side and server-side object models with faster load times.
- Latest Standards Support: CSS3 and HTML5 compliance.
- Major Browser Support: Internet Explorer, Firefox, Chrome and Safari.
- Themes: Built-in premium CSS3 themes and all Controls are compatible with jQuery UI Themeroller.
- Tightly integrated with jQuery.
If you have used the ASP.Net Ajax control and are interested in moving over to the new Wijmo control, this will be a good read. Let's take a look at the procedures involved in migrating over to our latest controls and delve into some details about some basic differences between ASP.net Wijmo controls and their older ASP.Net Ajax controls along the way.
Prerequisites
To get started in this migration you will need our ASP.net Wijmo controls. These can be downloaded here by clicking the orange "Download Free Trial" button.
Getting Started
To get things started, you should create a new ASP.net Web Application using ComponentOne's older Ajax controls. Below is the link to the quick-start guide where you will receive directions to create a web page with an accordion control and visual aid as to what the final product will look like. Once the control is set up on your web application, we can then begin to delve into the migration details for our ASP.Net Wijmo controls. During the migration process I will note changes between the Ajax and Wijmo controls.
C1TreeView
Follow this quick-start to create the C1Accordion using our ASP.net Ajax control.
Migration details
Once you have completed the quick-start guide you can begin migrating to the new ASP.Net Wijmo controls. The first thing you will want to do is add the new ASP.Net Wijmo assembly references. Go to 'Project' from the menu-bar and select 'Add Reference'. Click the 'Browse.' button and navigate to: For .net 4.0
- For 32bit Machines: C:\Program Files\ComponentOne\Studio for ASP.NET Wijmo\bin\v4
- For 64bit Machines: C:\Program Files (x86)\ComponentOne\Studio for ASP.NET Wijmo\bin\v4
Select the C1.Web.Wijmo.Controls.4 and click "Open". For .net 3.5
- For 32bit Machines: C:\Program Files\ComponentOne\Studio for ASP.NET Wijmo\bin\v3
- For 64bit Machines: C:\Program Files (x86)\ComponentOne\Studio for ASP.NET Wijmo\bin\v3
Select the C1.Web.Wijmo.Controls.3 and click "Open". Then in the "Add Reference to." dialog box add click "Add". In your solution, open up your page where you have your ASP.net control in the Designer View.
C1TreeView Migration
???To add the new ASP.Net Wijmo Control, simply drag the C1TreeView from the C1 Wijmo Controls ToolBox onto the page. This will display a TreeView box without any nodes. You can use the C1TreeView Designer Form dialog to add nodes and edit each of the nodes properties by clicking the "Edit TreeView" link. All data binding is performed the same way as with the original ASP.Net control. The TreeView Nodes will populate accordingly based on your data source or static declaration as seen below: 
If you created panes in code and wanted to move those items from your old ASP.Net Ajax TreeView to your new ASP.Net Wijmo TreeView, you could do so by manipulating the code. The accordion markup is very similar. The hierarchical markup is respented in both the Ajax and Wijmo controls as follows:
You would then need to find and replace every instance of "cc1" to "wijmo". The TreeView Designer Form can be used to edit the ASP.net Wijmo TreeView. The properties are very similar, which makes it easier to move over. Some of the changes can be noted below.
The TreeView provides check box support by simply setting the showCheckBox property to True. This will create your TreeView with checkable nodes. Setting the Allow Drag and Allow Drop properties will allow you to maneuver your nodes as you wish. These properties also allow you to drag nodes from one tree view to another. Add keyboard accessibility support to give the C1TreeView control focus with a specified key combination. This enables end-users to use the keyboard arrow keys to navigate through the TreeView items. Make the TreeView look pretty using the packaged Wijmo themes. Keep in mind that you could easily change the appearance of your control by setting the theme to one of 30 pre-designed themes. These themes can be easily styled with ThemeRoller and of course you could create your own! This and many other features can be found at the Wijmo TreeView control product page.
Conclusion
In conclusion I would like to fortify how painless and straightforward migrating to the new ASP.net Wijmo Controls can be. If you would like to learn more and even see a live demo, you can go to our ASP.Net Wijmo site at: http://www.componentone.com/SuperProducts/StudioASPNET/ Please feel free to download our free trial and get started today!
MESCIUS inc.