C1 Community

Become an Expert Part 5: Generating Reports

C1_GregL — Mon, 08 Mar 2010 15:02:00 GMT

Part 5 Overview

This is the fifth part in the six-part "Become an Expert" series. In this part we will add a report generation feature to the Sales Management Application. This feature will be implemented simply by using the C1Report control, which is part of ComponentOne Studio for WinForms.

In the previous posts we used the C1FlexGrid and C1Chart controls to visualize our data. Now, we will add a reporting feature which is essential to this type of application. We will use the print feature of each control and the C1PdfDocument component as well. For the reporting we will utilize various features of the rich C1Report component, and we'll show how to print preview and actually print the report using the C1PrintPreviewControl.

Final Result

Here is a preview of the final result. When we click the "Report" button on the main form, we will open a print preview window.

From the print preview screen you can display file output or directly print the document.

So, let's add this reporting feature to our application.

Design a report with C1Report control

The first step is to generate a report definition file (xml) that will define the layout and structure of our report. We will use the C1ReportDesigner application to create this report definition through a WYSIWYG design surface. The C1ReportDesigner application installs alongside Studio for WinForms.

Launch the C1ReportDesigner from the Start menu, under ComponentOne and Reports for .NET.

Select "File" --> "Add New Report" to create a new report.

In the first page of the C1Report wizard will connect to the database. Click on the "Build Connection String" button on the top right to display the "Data Link Properties" dialog.

Enter the server name, user name, password and select the database to create the connection string.

Next, write a SQL query to get the data to be displayed in the report.

We will be getting data from the Sales and Category data tables. The two tables are related through the CategoryCode field. We will get "Date", "Proceeds", "Payments", "GrossMargin", and "GrossMarginRate" from the Sales table and "Category Name" from the Category table.

Please refer to Part 1 and Part 2 of this series for details on the layout of Sales and Category tables. The SQL create statements can be found in the attached samples.

We could also use the SQL builder to create our SQL query. The SQL builder dialog can be accessed by clicking the "Build SQL statement" button on the top right.

You must be careful about predefined keywords in the C1Report control. In our case the word "Date" is a keyword so we use the AS operator to change the name of the column to "SalesDate."　

Once the SQL statement has been created, click on the "Next" button. We will group our data based on "CategoryName". Move "CategoryName" to the "Groups" box and all other fields to the "Detail" box on the C1Report Wizard dialog.

Click "Next" to select the layout. We'll select Outline, Portrait and Adjust Fields to fit page options.

Click "Next" to select a preset report style and enter the title of the report.

Finally, click "Finish" and Voila! The initial settings of your report are done.

Now we will decide where the report will be displayed and set the font for the report. These settings are easy to do by just dragging and dropping or setting some properties. We can also set the date format and currency format for our fields here.

Save the report definition file to complete the report design process.

Load and Print the report design using C1Report

Now, let's use the actual C1Report component in our Sales Management application.

Place the C1Report component on the Form. To get the C1Report control, add the control to the toolbox by right clicking on it and accessing the "Choose Toolbox Items" dialog.　For details on how to add controls refer to previous articles.

Use the Load method to load the report definition file. Set the parameters of the Load method to report definition file path and the name of the report. A single report definition file can contain many reports. In our case, we have only 1 report in our definition file but we still need to provide the report name.

this.c1Report1.Load("Report File Name & Path", "Report Name");

Then, call the Print method of the Document property to print the report.

this.c1Report1.Document.Print();

Preview and Export the Report

Printing starts the moment we click on the Report button because we are calling the Print method. However, it would be better if we get a print preview first and allow the user to change settings before the actual printing takes place. Just like other applications. It would also be great if we can get the output of the report in other formats besides simply printing. That would enhance the usability of this application tremendously. So let's try adding these two features.

Exporting the report as a file is easy; C1Report's RenderToFile method is available for generating outputted formats such as rich text, Html, PDF and Excel.

We can easily generate a preview using the standard PrintPreviewControl or the PrintPreviewDialog control. However, there will be some limitations on paging and zooming if you use the standard controls. So for better performance we will use C1PrintPreviewControl.

C1PrintPreviewControl

The C1PrintPreviewControl is also include in Studio for WinForms. This control is optimized for C1Report and already contains features like preview, printing, export etc. Just a few quick settings are needed to implement these features in our application.

First, place the C1PrintPreviewControl on the screen where we want the report to be displayed. For this sample, we add a new Form window called Print Preview.

Change the settings of C1PrintPreviewControl to decide on the commands to be used or if the navigation panel is to be displayed or not.

// Set the tools to be used.
this.c1PrintPreviewControl1.AvailablePreviewActions = C1PreviewActionFlags.All;
// Hide the navigation panel.
this.c1PrintPreviewControl1.NavigationPanelVisible = false;

Then, assign the Document property of C1Report to the Document property of C1PrintPreviewControl.

// Display document preview.
this.c1PrintPreviewControl1.Document = this.c1Report1.Document;

That's it! Replace the line of code that prints our report from earlier and display our new Print Preview window.

Use the buttons on the Print Preview of the C1PrintPreviewControl to print or get the file output.

Conclusion

In this part, we used the C1ReportDesigner application to create a report. We used the C1Report and C1PrintPreviewControl to load and preview our report in the Sales Management application. Unlike PDF export explained in Part 3, here we are able to export our data to PDF format in a better design.

In the final part, we will use some interesting features provided by various controls and complete the application.

Acknowledgements

Article copyright © 2009 Shogo Takayama ＆ Shoeisha Co., Ltd. http://www.shoeisha.co.jp/
http://codezine.jp/
These contents were made by GrapeCity inc., Japan. http://www.grapecity.com/japan/
Translated by Vidhi Kapoor (GrapeCity India Pvt. Ltd.)
Edited by Greg Lutz (ComponentOne)

Creating Outlines and Trees with the C1FlexGrid Control

C1_GregL — Wed, 03 Mar 2010 18:52:00 GMT

One of the unique and popular features of the C1FlexGrid control is the ability to add hierarchical grouping to regular unstructured data.

To achieve this, the C1FlexGrid introduces the concept of Node rows. Node rows do not contain regular data. Instead, they act as headers under which similar data is grouped, exactly like nodes in a regular TreeView control. Like nodes in a TreeView control, node rows can be collapsed and expanded, hiding or showing the data they contain. Also like nodes in a TreeView control, node rows have a Level property that defines the node hierarchy. Lower level nodes contain higher level nodes.

For example, suppose you had a grid showing customer name, country, city, and sales amounts. This typical grid would normally look like this:

All the information is there, but it's hard to see the total sales for each country or customer. You could use the C1FlexGrid's outlining features to group the data by country (level 0), then by city within each country (level 1), then by customer within each city (level 2). Here is the same grid with after adding the outline:

This grid shows the same information as the previous one (it is bound to the same data source), but it adds a tree where each node contains a summary of the data below it. Nodes can be collapsed to show only the summary, or expanded to show the detail. Note that each node row can show summaries for more than one column (in this case, total units sold and total amount).

In this article, we will walk you through the process of turning a regular grid into a richer outline grid.

Download Visual Studio Sample (C#)

Loading the Data

Loading data into an outline grid is exactly the same as loading it into a regular grid. If your data source is available at design time, you can use the Visual Studio Property Window to set the grid's DataSource property and bind the grid to the data without writing any code.

If the data source is not available at design time, you can set the grid's DataSource property in code. The data binding code typically looks like this:

public Form1()
{
    InitializeComponent();

    // get data
    var fields = @"
        Country, 
        City, 
        SalesPerson, 
        Quantity,
        ExtendedPrice";
    var sql = string.Format("SELECT {0} FROM Invoices ORDER BY {0}", fields);
    var da = new OleDbDataAdapter(sql, GetConnectionString());
    da.Fill(_dt);

    // bind grid to data
    this._flex.DataSource = _dt;
    
    // format ExtendedPrice column
    _flex.Cols["ExtendedPrice"].Format = "n2";
}

The code uses an OleDbDataAdapter to fill a DataTable with data, then assigns the DataTable to the grid's DataSource property.

After running this code, you would get the "regular grid" shown in the first image. To turn this regular grid into the outline grid shown in the second image, we need to insert the node rows that make up the outline.

Creating Node Rows

Node rows are almost identical to regular rows, except for the following:

Node rows are not data bound. When the grid is bound to a data source, each regular row corresponds to an item in the data source. Node rows do not. Instead, they exist to group regular rows that contain similar data.
Node rows can be collapsed or expanded. When a node row is collapsed, all its data and child nodes are hidden. If the outline tree is visible, users can collapse and expand nodes using the mouse or the keyboard. If the outline tree is not visible, then nodes can only be expanded or collapsed using code.

To determine whether a row is a node or not, you can use the IsNode property:

var row = _flex.Rows[rowIndex];
if (row.IsNode)
{
    // row is a node
    var node = row.Node;
    DoSomethingWithTheNode(node);
}
else
{
    // this row is not a node
}

Node rows can be created in three ways:

Use the Rows.InsertNode method. This will insert a new node row at a specified index. Once the node row has been created, you can use it like you would any other row (set the data for each column, apply styles, etc). This is the 'low-level' way of inserting totals and building outlines. It gives the most control and flexibility and is demonstrated below.
Use the Subtotal method. This method scans the entire grid and automatically inserts node rows with optional subtotals at locations where the grid data changes. This is the 'high-level' way of inserting totals and building outlines. It requires very little code, but makes some assumptions about how the data is structured on the grid and what the outline should look like.
If the grid is unbound, then you can turn regular rows into node rows by setting the IsNode property to true. Note that this only works when the grid is unbound. Trying to turn a regular data bound row into a node will cause the grid to throw an exception.

The code below shows how you could implement a GroupBy method that inserts node rows grouping identical values on a given column.

// group on a given column inserting nodes of a given level
void GroupBy(string columnName, int level)
{
    object current = null;
    for (int r = _flex.Rows.Fixed; r < _flex.Rows.Count; r++)
    {
        if (!_flex.Rows[r].IsNode)
        {
            var value = _flex[r, columnName];
            if (!object.Equals(value, current))
            {
                // value changed: insert node
                _flex.Rows.InsertNode(r, level);

                // show group name in first scrollable column
                _flex[r, _flex.Cols.Fixed] = value;

                // update current value
                current = value;
            }
        }
    }
}

The code scans all the columns, skipping existing node rows (so it can be called to add several levels of nodes), and keeps track of the current value for the column being grouped on. When the current value changes, a node row is inserted showing the new in the first scrollable column.

Back to our example, you could use this method to create a two-level outline by calling:

void _btnGroupCountryCity_Click(object sender, EventArgs e)
{
    GroupBy("Country", 0);
    GroupBy("City", 1);
}

Very simple, but there are some caveats. First, the method assumes that the data is sorted according to the outline structure. In this example, if the data were sorted by SalesPerson instead of by Country, the outline would have several level-0 nodes for each country, which probably is not what you want.

Also, the GroupBy method may insert may rows, which would cause the grid to flicker. To avoid this, you would normally set the Redraw property to false before making the updates and set it back to true when done.

To handle these issues, the code that creates the outline should be re-written as follows:

void _btnGroupCountryCity_Click(object sender, EventArgs e)
{
    // suspend redrawing while updating
    using (new DeferRefresh(_flex))
    {
        // restore original sort (by Country, City, etc.)
        ResetBinding();

        // group by Country, City
        GroupBy("Country", 0);
        GroupBy("City", 1);
    }
}

The DeferRefresh class is a simple utility that sets the grid's Redraw property to false and restores its original value when it is disposed. This ensures that Redraw is properly restored even when exceptions happen during the updates. Here is the implementation of the DeferRefresh class:

/// Utility class used to encapsulate grid lengthy operations in a Redraw block.
/// This avoids flicker and ensures the Redraw property is reset properly in case 
/// an exception is thrown during the operation.
class DeferRefresh : IDisposable
{
    C1FlexGrid _grid;
    bool _redraw;
    public DeferRefresh(C1FlexGrid grid)
    {
        _grid = grid;
        _redraw = grid.Redraw;
        grid.Redraw = false;
    }
    public void Dispose()
    {
        _grid.Redraw = _redraw;
    }
}

The BindGrid method ensures that the grid is sorted in the order required by our outline structure. In our example, the sort order is by Country, City, and SalesPerson. The code looks like this:

// unbind and re-bind grid in order to reset everything
void ResetBinding()
{
    // unbind grid
    _flex.DataSource = null;
    
    // reset any custom sorting
    _dt.DefaultView.Sort = string.Empty;

    // re-bind grid
    _flex.DataSource = _dt;
    
    // format ExtendedPrice column
    _flex.Cols["ExtendedPrice"].Format = "n2";
    
    // auto-size the columns to fit their content
    _flex.AutoSizeCols();
}

If you run this code now, you will notice that the node rows are created as expected, but the outline tree is not visible, so you can't expand and collapse the nodes. The outline tree is described in the next section.

Outline Tree

The outline tree is very similar to the one you see in a regular TreeView control. It shows an indented structure with collapse/expand icons next to each node row so the user can expand and collapse the outline to see the desired level of detail.

The outline tree can be displayed in any column, defined by the Tree.Column property. By default, this property is set to -1, which causes the tree not to be displayed at all. To show the outline tree in the example given above, you would use this code:

void _btnTreeCountryCity_Click(object sender, EventArgs e)
{
    using (new DeferRefresh(_flex))
    {
        // group by country and city as before
        _btnGroupCountryCity_Click(this, EventArgs.Empty);

        // show outline tree
        _flex.Tree.Column = 0;

        // autosize to accommodate tree
        _flex.AutoSizeCol(_flex.Tree.Column);

        // collapse detail nodes
        _flex.Tree.Show(1);
    }
}

The code calls the previous method to build the outline, then sets the Tree.Column property to zero in order to show the outline tree in the first column. It also calls the AutoSizeCol method to ensure that the column is wide enough to accommodate the outline tree. Finally, it calls the Tree.Show method to display all level-0 nodes (cities in this case) and hide all the detail.

The Tree property returns a reference to a GridTree object that exposes several methods and properties used to customize the outline tree. The main ones are listed below:

Column: Gets or sets the index of the column that contains the outline tree. Setting this property to -1 causes the outline tree to be hidden from the users.
Indent: Gets or sets the indent, in pixels, between adjacent node levels. Higher indent levels cause the tree to become wider.
Style: Gets or sets the type of outline tree to display. Use this property to determine whether the tree should include a button bar at the top to allow users to collapse/expand the entire tree, whether lines and/or symbols should be displayed, and whether lines should be displayed connecting the tree to data rows as well as node rows.
LineColor: Gets or sets the color of the tree's connecting lines.
LineStyle: Gets or sets the style of the tree's connecting lines.

For example, by changing the code above to include these two lines:

// show outline tree
_flex.Tree.Column = 0;
_flex.Tree.Style = TreeStyleFlags.CompleteLeaf;
_flex.Tree.LineColor = Color.White;
_flex.Tree.Indent = 30;

The outline tree would change as follows:

Notice the buttons labeled "1", "2", and "*" on the top left cell. Clicking these buttons would cause the entire tree to collapse or expand to the corresponding level. Also notice the much wider indentation and the lines connecting the tree to regular rows ("Anne Dodsworth") as well as to node rows.

Adding Subtotals

So far we have covered the creation of node rows and outline trees. To make the outlines really useful, however, the node rows should include summary information for the data they contain.

If you create an outline tree using the Subtotal method, then the subtotals are added automatically. This will be described in a later section.

If you created the outline tree using the Rows.InsertNode method as described above, then you should use the Aggregate method to calculate the subtotals for each group of rows and insert the result directly into the node rows.

The Subtotal method listed below shows how to do this:

// add subtotals to each node at a given level
void AddSubtotals(int level, string colName)
{
    // get column we are going to total on
    int colIndex = _flex.Cols.IndexOf(colName);

    // scan rows looking for nodes at the right level
    for (int r = _flex.Rows.Fixed; r < _flex.Rows.Count; r++)
    {
        if (_flex.Rows[r].IsNode)
        {
            var node = _flex.Rows[r].Node;
            if (node.Level == level)
            {
                // found a node, calculate the sum of extended price
                var range = node.GetCellRange();
                var sum = _flex.Aggregate(AggregateEnum.Sum, 
                    range.r1, colIndex, range.r2, colIndex,
                    AggregateFlags.ExcludeNodes);

                // show the sum on the grid 
                // (will use the column format automatically)
                _flex[r, colIndex] = sum;
            }
        }
    }
}

The AddSubtotals method scans the grid rows looking for node rows. When a node row of the desired level is found, the method uses the Node.GetCellRange method to retrieve the node's child rows. Then it uses the Aggregate method to calculate the sum of the values on the target column over the entire range. The call to Aggregate includes the ExcludeNodes flag to avoid double-counting existing nodes. Once the subtotal has been calculated, it is assigned to the node row's cell with the usual _flex[row, col] indexer.

Note that this does not affect the data source in any way, since node rows are not bound to the data.

Note also that the method can be used to add multiple totals to each node row. In this example, we will add totals for the Quantity and ExtendedPrice columns. In addition to sums, you could add other aggregates such as average, maximum, minimum, etc.

We can now use this method to create a complete outline, with node rows, outline tree, and subtotals:

void _btnTreeCountryCity_Click(object sender, EventArgs e)
{
    using (new DeferRefresh(_flex))
    {
        // restore original sort (by Country, City, SalesPerson)
        ResetBinding();

        // group by Country, City
        GroupBy("Country", 0); // group by country (level 0)
        GroupBy("City", 1);    // group by city (level 1)

        // add totals per Country, City
        AddSubtotals(0, "ExtendedPrice");  // extended price per country (level 0)
        AddSubtotals(0, "Quantity");       // quantity per country (level 0)
        AddSubtotals(1, "ExtendedPrice");  // extended price per city (level 1)
        AddSubtotals(1, "Quantity");       // quantity per city (level 1)

        // show outline tree
        _flex.Tree.Column = 0;
        _flex.AutoSizeCol(_flex.Tree.Column);
        _flex.Tree.Show(1);
    }
}

If you run the project now, you will see a tree with node rows that show the total quantity and amount sold for each country and city. This is very nice, but there is a little problem. If you expand any of the node rows, you will see a lot of duplicate values. All rows under a given city node have the same country and city:

This is correct, but it is also a waste of screen real estate. Eliminating these duplicate values is easy, all you have to do is set the Width of the columns that are being grouped on to zero. When you do that, however, you should remember to set the grid's AllowMerging property to Nodes, so the text assigned to the node rows will spill into the visible columns. (Another option would be to assign the node text to the first visible column, but merging is usually a better solution because it allows you to use longer text for the node rows).

Here is the revised code and the final result:

void _btnTreeCountryCity_Click(object sender, EventArgs e)
{
    using (new DeferRefresh(_flex))
    {
        // restore original sort (by Country, City, SalesPerson)
        ResetBinding();

        // group by Country, City
        GroupBy("Country", 0); // group by country (level 0)
        GroupBy("City", 1);    // group by city (level 1)

        // hide columns that we grouped on 
        // (they only have duplicate values which already appear on the tree nodes)
        // (but don't make them invisible, that would also hide the node text)
        _flex.Cols["Country"].Width = 0;
        _flex.Cols["City"].Width = 0;

        // allow node content to spill onto next cell
        _flex.AllowMerging = AllowMergingEnum.Nodes;

        // add totals per Country, City
        AddTotals(0, "ExtendedPrice");  // extended price per country (level 0)
        AddTotals(0, "Quantity");       // quantity per country (level 0)
        AddTotals(1, "ExtendedPrice");  // extended price per city (level 1)
        AddTotals(1, "Quantity");       // quantity per city (level 1)
        
        // show outline tree
        _flex.Tree.Column = 0;
        _flex.AutoSizeCol(_flex.Tree.Column);
        _flex.Tree.Show(1);
    }
}

The Country and City columns are now invisible, but their values still appear in the node rows. Collapsing the tree shows totals for each country and city.

Using the Subtotal Method

We mentioned earlier that you could also create trees using the C1FlexGrid's Subtotal method. The Subtotal method performs the same tasks as the GroupBy and AddSubtotals methods described above, except it does both things in a single step and is therefore a little more efficient.

The code below shows how you can use the Subtotal method to accomplish the same thing we did before, only a little faster and without using any helper methods:

void _btnTreeCountryCity_Click(object sender, EventArgs e)
{
    using (new DeferRefresh(_flex))
    {
        // restore original sort (by Country, City, SalesPerson)
        ResetBinding();

        // group and total by country and city
        _flex.Subtotal(AggregateEnum.Sum, 0, "Country", "ExtendedPrice");
        _flex.Subtotal(AggregateEnum.Sum, 0, "Country", "Quantity");
        _flex.Subtotal(AggregateEnum.Sum, 1, "City", "ExtendedPrice");
        _flex.Subtotal(AggregateEnum.Sum, 1, "City", "Quantity");

        // hide columns that we grouped on 
        // (they only have duplicate values which already appear on the tree nodes)
        // (but don't make them invisible, that would also hide the node text)
        _flex.Cols["Country"].Width = 0;
        _flex.Cols["City"].Width = 0;
        _flex.AllowMerging = AllowMergingEnum.Nodes;

        // show outline tree
        _flex.Tree.Column = 0;
        _flex.AutoSizeCol(_flex.Tree.Column);
        _flex.Tree.Show(1);
    }
}

The Subtotal method is very convenient and flexible. It has a number of overloads that allow you to specify which columns should be grouped on and totaled on by index or by name, whether to include a caption in the node rows that it inserts, how to perform the grouping, and so on. The summary below describes the overloads available:

Subtotal(AggregateEnum aggType)
This version of the method takes only one aggregate type as a parameter. It is useful only for removing existing subtotals before inserting new ones. In this case, the aggType parameter is set to AggregateEnum.Clear.
Subtotal(AggregateEnum aggType, int groupBy, int totalOn)
Subtotal(AggregateEnum aggType, string groupBy, string totalOn)
These are the most commonly used overloads. The parameters are the type of aggregate to insert and the columns to group by and total on. The columns may be referenced by index or by name. The latter is the one we used in the example above.
Subtotal(AggregateEnum aggType, int groupBy, int totalOn, string caption)
Subtotal(AggregateEnum aggType, string groupBy, string totalOn, string caption)
These overloads add an extra caption parameter. The caption parameter determines the text that is added to the new node rows to identify the value being grouped on. By default, the value being grouped on is shown, so if you are grouping by country, the node rows would show "Argentina", "Brazil", and so on. If you set the caption parameter to a string such as "Country: {0}", then the node rows would show "Country: Argentina" instead.
Subtotal(AggregateEnum aggType, int groupFrom, int groupTo, int totalOn, string caption)
Subtotal(AggregateEnum aggType, string groupFrom, string groupTo, string totalOn, string caption)
These overloads separate the groupBy parameter into two: groupFrom and groupTo. By default, the Subtotal method inserts a node row whenever the value of the groupBy or any previous column changes.
For example, if you a row has the same value in the "City" column as the previous row, but a different value in the "Country" column, then the Subtotal method assumes the rows should be in different groups and inserts a new node row even though the value of the groupBy column is the same. These aggregates let you override that behavior and specify the range of columns that should be considered when identifying a group.

Outline Maintenance

So far we have discussed how to create outlines with trees and totals using the high-level Subtotal method as well as lower-level Rows.InsertNode and Aggregate methods.

At this point, it is important to remember that the outline tree is created based on the data, but is not bound to it in any way, and is not automatically maintained when there are changes to the grid or to the data.

If the user modifies a value in the "ExtendedPrice" column for example, the subtotals will not be automatically updated. If the user sorts the grid, the data will be refreshed and the subtotals will disappear.

There are two common ways to maintain the outlines:

Prevent the user from making any changes that would invalidate the outline. This is the easiest option. You would set the grid's AllowEditing, AllowDragging, and AllowSorting properties to false and prevent any changes that would affect the outline.
Update the outline when there are changes to the data or to the grid. You would attach handlers to the grid's AfterDataRefresh, AfterSort, and AfterEdit events and re-generate the outline appropriately.

Option 2 is usually more interesting since it provides a quick and simple tool for dynamic data analysis. This approach is illustrated by the Analyze sample provided with the C1FlexGrid. The sample creates an initial outline and allows users to reorder the columns. When the column order changes, the sample automatically re-sorts the data and re-creates the outline. The user can easily create simple reports showing sales by country, by product, by salesperson, and so on.

Using the Node class

The Node class provides a number of methods and properties that can be used to create and manage outline trees. Many of these methods and properties are based on the standard TreeView object model, so they should be familiar to most developers.

To obtain a Node object, you can either:

Use the return value of the Rows.InsertNode method:

var node = _flex.Rows.InsertNode(index, level);

Or you can retrieve the node for an existing row using the row's Node property:

var node = _flex.Rows[index].IsNode
    ? _flex.Rows[index].Node
    : null;

Either way, once you have a Node object you can manipulate it using the following properties and methods:

Level: Gets or sets the node level in the outline tree.
Data: Gets or sets the value in the cell defined by Node.Row and the Tree.Column.
Image: Gets or sets the image in the cell defined by Node.Row and the Tree.Column.
Checked: Gets or sets the check state of the cell defined by Node.Row and the Tree.Column.
Collapsed/Expanded: Gets or sets the node's collapsed/expanded state.

You can also explore the outline structure using the following methods:

GetCellRange(): Gets a CellRange object that described the range of rows that belong to this node.
Children: Gets the number of child nodes under this node.
Nodes: Gets a node array containing this node's child nodes.
GetNode: Gets the node that has a given relationship to this node (parent, first child, next sibling, and so on).

The discussion above focused on bound scenarios, where the grid is attached to a data source that provides the data. You can also create trees and outlines in unbound scenarios. Things are actually somewhat simpler in this case, since you can turn any row into a node row by setting its IsNode property to true.

If the grid is unbound, it owns all the data that is displayed, and you do things that are not possible when a data source owns the data. For example, you can move nodes around the tree using the Node.Move method as shown by the TreeNode sample provided with the C1FlexGrid.

Using nodes in an unbound grid is very similar to using nodes in a regular TreeView control.

Download Visual Studio Sample (C#)

Scheduler Roadmap - Part II. WPF and Silverlight Schedulers: Comparing Features

C1_IrinaP — Wed, 03 Mar 2010 00:35:00 GMT

The next table shows the list of main controls, classes and features:

Feature (control)	Old WPF Scheduler	Silverlight Scheduler	New WPF Scheduler
Namespaces
C1.C1Schedule (business logic)	+	+	+
Main namespace for UI controls	C1.WPF.C1Schedule	C1.Silverlight.Schedule	C1.WPF.Schedule
Main controls
C1Scheduler	+	+	+
C1TimeSpanPicker	+	(uses C1.Silverlight. DateTimeEditors. C1TimeEditor)	(uses C1.WPF. DateTimeEditors. C1TimeEditor)
C1DateTimePicker	+	(uses C1.Silverlight. DateTimeEditors. C1DateTimePicker)	(uses C1.WPF. DateTimeEditors. C1DateTimePicker)
C1MonthCalendar	+
C1MultiMonthCalendar	+	planned for 2010 V2 release)	planned for 2010 V2 release)
Other controls and classes
AppointmentsCoverPane	+	+	+
AppointmentWrapPanel	+	+ (the part of functionality implemented in the IntervalAppointment Presenter class	+
AutoDistributionGrid	+		+
C1BrushBuilder		+	+
C1SchedulerPresenter	+	+	+
C1SchedulerResources	+	+	+
C1SchedulerScrollBar	+	(used standard scrollbar)	(used standard scrollbar)
C1Window		+	+ (in XBAP applications)
CalendarHelper class	+	+	+
EditAppointmentControl EditRecurrenceControl ShowRemindersControl	(implemented in xaml as a DataTemplate)	+	+
IntervalAppointment	+	+	+
IntervalAppointment Presenter		+
NestedPropertySetter	+	+	+
PilePanel	+	+	+
RecChoiceControl	+	+	+
SchedulerLocExtension	+		+
SelectFromListScene	+	+	+
VisualInterval	+	+	+
VisualIntervalGroup	+	+	+
VisualIntervalGroups Presenter	+	+	+
VisualIntervalPresenter	+	+	+
VisualIntervalsPresenter	+	+	+
Themes
Office 2007 themes	- Default - Blue - Black - Silver	- Default	- Default - Blue - Black - Silver
Office 2003 themes	- Default - Blue - Classic - Olive - Royale - Silver
Silverlight toolkit themes		- BureauBlack - ExpressionDark - ExpressionLight - RainierOrange - ShinyBlue - WhistlerBlue
C1 themes	- Dusk Blue - Dusk Green - Media Player - Vista		- Dusk Blue - Dusk Green - Media Player - Vista
Import/Export
xml	+	+	+
iCal	+	+	+
binary	+		+
Supported data sources for AppointmentStorage and other storages
INotifyCollectionChanged (ObservableCollection)	+	+	+
IListSource	+		+
IList	+	+	+
IBindingList	+		+
IBindingListView	+		+
IEnumerable	+	+	+
ITypedList	+		+
C1.Silverlight.Data. DataTable		+
Setting data bindings from code and in xaml	+	+	+

Silverlight Specific Distinctions

Silverlight platform doesn't include some classes and features which are critical for the C1Scheduler control. The next table lists Silverlight-specific features implemented in C1 Studio for Silverlight and their WPF analogs used in WPF Schedulers:

Feature (control)	WPF analog
C1.Silverlight.Schedule.GroupedListBox and related classes (C1ItemsPresenter, C1ListBoxItem, etc.)	System.Windows.Controls.ListBox and related classes (ItemsPresenter, ListBoxItem, etc.)
C1.Silverlight.Schedule.RemindersListBox and RemindersListBoxItem	System.Windows.Controls.ListView and ListViewItem
C1.Silverlight.C1UniformGrid	System.Windows.Controls.Primitives.UniformGrid
C1.Silverlight.Data classes (DataTable, DataRow, DataRowView classes)	Corresponding ADO.Net classes
C1.Silverlight.C1Command	System.Windows.Input.RoutedCommand

Please, let me know if you feel that I missed something important.

Scheduler Roadmap - Part I

C1_IrinaP — Thu, 25 Feb 2010 17:02:00 GMT

At first, I want to give you an overall picture of all Scheduler versions (legacy, current and future).

Available Versions

Currently we ship Scheduler controls for the next platforms:

WinForms (home page). C1.Win.C1Schedule.2.dll assembly includes C1Schedule and C1Calendar controls. It is built with .Net 2.0;
ASP.Net (home page, live demo). There are 2 versions. C1.Web.C1Schedule.2.dll is a legacy version built with .Net 2.0. The C1Schedule for .Net 3.5 is a part of C1.Web.UI.Controls.dll assembly. It will replace legacy version in the nearest year;
WPF (home page, live demo). C1.WPF.C1Schedule.dll assembly includes C1Scheduler, C1MonthCalendar, C1MultiMonthCalendar, C1DateTimePicker, C1TimeSpanPicker controls. It is built with .Net Framework 3.0;
Silverlight 3 (home page, live demo). C1.Silverlight.Schedule.dll assembly contains C1Scheduler control. It uses controls from C1.Silverlight.dll, C1.Silverlight.Data.dll and C1.Silverlight.DateTimeEditors.dll assemblies.

All Schedulers share the same object model defined in C1.C1Schedule namespace. Actually, the most of that is represented by the shared code. So, if you know how to create Appointment from code in WinForms version, then you can be sure that you know how to do that in Silverlight version.

All Schedulers are data-compatible. If you saved xml data with WinForms Scheduler, you should be able to load this data with WPF or Silverlight versions. If you have database with C1Scheduler data, you can use it with any Scheduler version.

Roadmap for 2010 V1

WinForms: new version built against .Net Framework 4.0 Client Profile (perhaps we'll ship it after Microsoft releases VS 2010);
Silverlight 4 version. It will be compatible with Silverlight 3 version;
WPF: 2010 V1 release will contain 2 assemblies compatible with Silverlight version: C1.WPF.DateTimeEditors.dll and C1.WPF.Schedule.dll.
You see, we tend to make our WPF and Silverlight studios compatible with each other. We share code between WPF and Silverlight versions and we want you to have this ability as well. In the future, these assemblies will go together with their Silverlight counterpart. 2010 V1 version is built against .Net Framework 3.5 Client Profile and has design-time support for VS 2008, VS 2010, Blend 2 and Blend 3.

Future Plans

For 2010 V2 release we are planning to add multi-month calendar control to Silverlight and new WPF versions. When it is ready, old WPF version will go into maintenance mode. Old WPF version will remain compatible with pure .Net 3.0. If your clients use Windows XP machines without .Net 3.5 installed, you can continue using this version.

We haven't decided yet, what Framework version will be supported by the new WPF Scheduler. Perhaps, we'll move to .Net 4 when it is released, or will ship both .Net 3.5 and .Net 4 versions. Feel free to leave your feedback; we have time to take it into account.

Next time I'm going to write about WPF and Silverlight versions in more details: distinctions, compatibility issues, etc... If you have questions - don't hesitate to ask.

Become an Expert Part 4: Adding Charts to Analyze Sales Data

C1_GregL — Wed, 17 Feb 2010 15:50:00 GMT

Part 4 Overview

In this series, we will create a Sales Management application to show how easily anyone can "Become an Expert". Up to this point, we have created a sales data list using C1FlexGrid (part of ComponentOne Studio for WinForms), as well as added exporting options including Excel, XML and PDF. We've also refashioned the application window to have the Microsoft Office look-and-feel using C1Ribbon.

*See Part One, Part Two, and Part Three before continuing.

Now in part 4, we will use the C1Chart control (also part of Studio for WinForms) to display different kinds of charts. The data from our C1FlexGrid, will be bound and displayed in the C1Chart control.

So let's continue!

Application Set up

We will use the C1Chart control to display charts. Just like before, we need to add the control to the toolbox. Right click on the toolbox and display "Choose Toolbox Items". For details please refer to Part 1.

First, add a new Form to the project. Change the Form to inherit the C1RibbonForm class to match it with the application we created in Part 3. Set the form title and other properties.

Creating another Ribbon Interface

We need to create another Ribbon interface for the new form using the C1Ribbon control.

On the Home tab create three RibbonGroups:

Home Tab

Display settings for C1Chart

Now let's add the C1Chart control to the form. Drag and drop the C1Chart control onto the new form under the ribbon. Dock the C1Chart control to fill the entire form. The display area for the chart is created!

The next step is to create a BindingSource to use as the data source for the C1Chart control. Place a BindingSource object on the form, named bindingSource1.

We will create a data class in the project called SalesData and place this in a class file called SalesDataList.cs. Members of this data class will be "Date", "Category", "Proceeds", "Payments" and "GrossMargin". Members can be in the form of properties or public variables (Note: In the sample, all the members are properties).

public class SalesData { public SalesData() { } private DateTime _date = DateTime.Now; public DateTime Date { get { return this._date; } set { this._date = value; } } private string _categoryCode = string.Empty; public string CategoryCode { get { return this._categoryCode; } set { this._categoryCode = value; } } private int _proceeds = 0; public int Proceeds { get { return this._proceeds; } set { this._proceeds = value; } } private int _payments = 0; public int Payments { get { return this._payments; } set { this._payments = value; } } private int _grossMargin = 0; public int GrossMargin { get { return this._grossMargin; } set { this._grossMargin = value; } } }

Set this data class as the data source of the BindingSource we just added to the form above (Note: An array has to be set in the data source, so a List is used).

public class SalesDataList : List<SalesData>

Now let's set more specifics for our chart. Launch the chart Wizard from the C1Chart Tasks (the smart tag).

Follow these settings in the wizard:

Select chart type
Set the captions for the chart Header, X Axis and Y Axis
Select the data source to be displayed in the C1Chart control. Select the bindingSource1 BindingSource created earlier.
Select which fields to use for data binding for three each of the three data series (Proceeds, Payments and GrossMargin). Each data series' X values will be bound to the Date field.

That's it! Click Finish and the chart display settings are complete.

Binding C1FlexGrid data to C1Chart

We will bind the C1FlexGrid data to the C1Chart using the SalesDataList created earlier. The SalesData class is populated from the data displayed in C1FlexGrid on the main form. The SalesDataList class is generated as an array to be fed into the C1Chart.

This property below will be used for the get/set of our SalesData class. Add this property to the chart Form's (Form2) code behind.

private SalesDataList _salesDataList = null; public SalesDataList SalesDataList { get { return this._salesDataList; } set { this._salesDataList = value; } }

We will also need a category property for our Form2 class. This property will store the selected category on which to chart data from.

private List<DictionaryEntry> category; public List<DictionaryEntry> Category { get { return this.category; } set { this.category = value; this.initializeCategory(); } }

The initializeCategory method should fill the Ribbon combobox with all possible categories.

Now we need to make a few adjustments to the main form. First, add a Chart button to the ribbon, and in its click event, we need to launch a new chart form.


Form2 chartForm = new Form2();
chartForm.SalesDataList = this.createDataList();
chartForm.Category = this.category;
chartForm.ShowDialog();

We create the SalesDataList pulling data from the C1FlexGrid using this method:

private SalesDataList createDataList() { SalesDataList list = new SalesDataList(); for (int i = 1; i < this.c1FlexGrid1.Rows.Count; i++) { if (this.c1FlexGrid1[i, 0] != null && (this.c1FlexGrid1[i, 2] != null || this.c1FlexGrid1[i, 3] != null)) { SalesData data = new SalesData(); data.Date = DateTime.Parse(this.c1FlexGrid1[i, 0].ToString()); data.CategoryCode = this.c1FlexGrid1[i, 1] == null ? "0" : this.c1FlexGrid1[i, 1].ToString(); data.Proceeds = this.c1FlexGrid1[i, 2] == null ? 0 : int.Parse(this.c1FlexGrid1[i, 2].ToString()); data.Payments = this.c1FlexGrid1[i, 3] == null ? 0 : int.Parse(this.c1FlexGrid1[i, 3].ToString()); data.GrossMargin = this.c1FlexGrid1[i, 4] == null ? 0 : int.Parse(this.c1FlexGrid1[i, 4].ToString()); list.Add(data); } } return list; }

Here, we declare a new SalesDataList and cycle through the C1FlexGrid rows collection filling in the data (so long as it's not null).

Back on Form2, we set the SalesDataList as the data source of the BindingSource.


private void setDataSource(string categoryCode)
{
    this.bindingSource1.DataSource = this._salesDataList.SelectCategory(categoryCode);

Finally, we will show the data based on the category that has been selected. The following code displays only the desired category's data from the data source.

public SalesDataList SelectCategory(string code) { SalesDataList value = new SalesDataList(); List<SalesData> list = this.FindAll(delegate(SalesData data) { return (data.CategoryCode == code); }); value.AddRange(list); return value; }

Now when we run the application, our chart form displays data only from the selected category.

Modifying the chart type

The C1Chart control supports all popular chart types. For this application, will be using the Bar and Line chart types.

We will use some simple code with the Chart Type combobox in the Ribbon to select the chart type. We will add two possible values to the combobox: Line and Bar Graph.

The Ribbon combobox's SelectedIndexChanged event will capture when the user changes chart type.

if (this.ribbonComboBox2.SelectedIndex == 0) this.c1Chart1.ChartGroups[0].ChartType = Chart2DTypeEnum.XYPlot; else this.c1Chart1.ChartGroups[0].ChartType = Chart2DTypeEnum.Bar;

Here we are simply setting the ChartType property to in the C1Chart control. The Chart2DTypeEnum is set to Chart2DTypeEnum.XYPlot for a line chart and Chart2DTypeEnum.Bar for a bar chart.

When we select Bar Graph we will notice the chart displays this type.

All it takes is changing one property to completely change the chart type with C1Chart.

Printing C1Chart

Now that we have been able to display different types of charts, we will add the feature to print them. We just need to call a simple print method in C1Chart control for this.

this.c1Chart1.PrintChart();

In our sample, we've added a Print button to the Miscellaneous RibbonTab in our chart form. When this button is clicked, we call the PrintChart method and the following print dialog is displayed:

Modifying Other Chart Properties

Let's extend the users options for viewing charted data in C1Chart. The C1Chart control also contains 3D effects and stacked charts. We will include these in the display features available on the UI.

The Use3D property is set for the 3D effect feature. Similarly, the Stacked property is used for the stacked display in a chart. Set the following properties when the user checks or unchecks the 3D Effect and Stacked checkboxes we created earlier.

this.c1Chart1.ChartGroups[0].Use3D = "true/false"; this.c1Chart1.ChartGroups[0].Stacked = "true/false";

As you can see, we get a completely different look for the chart just by easily setting these couple properties.

Finally, let's invert the X and Y axes of the chart. We just need to set the Inverted property to true for the ChartArea.

this.c1Chart1.ChartArea.Inverted = "true/false";

In addition to changing the chart type with just one property, we can also modify other chart settings with only a few properties.

Conclusion

In this section we have charted data from our C1FlexGrid control using C1Chart. Data binding was done through some simple coding and we were able to integrate the features of each control into our application. We further modified many chart display settings using only a few simple properties.

In part 5 we will use more features of C1Chart to further improve our application by integrating it with other controls.

Download Part 4 Sample Project

Points to Remember

This application has been created in Visual Studio 2008 and uses SQL Server 2005 or higher. Installation of .NET Framework 3.5 is a prerequisite for running the sample application.

Acknowledgements

Article copyright © 2009 Shogo Takayama ＆ Shoeisha Co., Ltd. http://www.shoeisha.co.jp/
http://codezine.jp/
These contents were made by GrapeCity inc., Japan. http://www.grapecity.com/japan/
Translated by Vidhi Kapoor (GrapeCity India Pvt. Ltd.)
Edited by Greg Lutz (ComponentOne)

Migrating to Palomino: Navigation Controls

C1_ChrisB — Fri, 12 Feb 2010 15:22:00 GMT

Introduction

Recently, ComponentOne has added several new controls to Studio for ASP.NET’s lineup. These new ASP.NET controls, codenamed Palomino, include the C1Gridview, C1ComboBox, C1FormDecorator, C1MultiPage, and more. They have been built from the ground up to take full advantage of the Web’s most promising technologies like AJAX, CSS, XHTML, and so on. The Palomino lineup also offers a rich, client-side object model to meet the demands of today’s ASP.NET developers.

In the months to come, the Palomino controls will be replacing their older counterparts entirely, as these controls enter Legacy status. This may sound problematic to some, but there is no need to worry as this article will demonstrate how to migrate some of our older ASP.NET components, specifically those from the C1WebCommand assembly, to their newer Palomino counterparts. For those unfamiliar with the C1WebCommand controls, these include the C1WebMenu, C1WebTreeView, C1WebTabStrip, C1WebTopicBar, and the C1WebToolBar; although, the focus will be on just the first four of the C1WebCommand controls mentioned.

Prerequisites

For this tutorial, you will need to download ComponentOne Studio for ASP.NET and the WebCommand_Starter sample application. A free 30-day trial and yearly subscriptions of ComponentOne Studio for ASP.NET are available from the ComponentOne website.

Download free trial
Download WebCommand_Starter Sample Application: (Please visit the site to view this media)

Getting Started

Open the sample application in Microsoft Visual Studio 2008, and complete the following steps:

Drag-and-drop a ScriptManager from Visual Studio’s Toolbox to the form. The ScriptManager should be the first control within the tag of your page.
Add the necessary references to the sample by clicking by going to Project | Add Reference and browse to C:\Program Files\ComponentOne\Studio for ASP.NET\bin\. The following assemblies require project references:
- C1.Web.UI.3.dll
- C1.Web.UI.3.Controls.3.dll
- C1.Web.UI.3.Design.dll

*Please note that the assemblies may be located in the following file path: C:\Program Files\ComponentOne Studio.NET 2.0\ bin\. Also note that there are two versions of the Web.UI assemblies; one that targets the .Net Framework 2x and one that targets the .Net Framework 3x.

Directly below the Page directive, add the following Register directives:

<%@ Register Assembly="C1.Web.UI.Controls.3" Namespace="C1.Web.UI.Controls.C1TreeView" TagPrefix="cc4" %>

<%@ Register Assembly="C1.Web.UI.Controls.3" Namespace="C1.Web.UI.Controls.C1NavPanel" TagPrefix="cc3" %>

<%@ Register Assembly="C1.Web.UI.Controls.3" Namespace="C1.Web.UI.Controls.C1Menu" TagPrefix="cc2" %>

<%@ Register Assembly="C1.Web.UI.Controls.3" Namespace="C1.Web.UI.Controls.C1TabControl" TagPrefix="cc1" %>

You will notice that there is a directive for each of the new controls, while using the C1WebCommand controls required only a single directive. At this point, start the web application; the C1WebTabStrip will render with a separate tab for the C1WebMenu, C1WebTreeView, and the C1WebTopicBar controls.

Now, let’s take a look at the controls individually and how to migrate each to its Palomino equivalent, starting with the C1WebTabStrip.

C1WebTabStrip to C1TabControl

The C1TabControl is very similar to the C1WebTabStrip, but is significantly more powerful, allowing developers to host full pages of content within the control. The C1WebTabStrip begins on Line 29 of the Default.aspx file’s markup and is denoted by a  comment tag. Notice that the C1WebTabStip’s markup is clustered and difficult to read; this is because the the styling of the C1WebTabStrip, and the other C1WebCommand controls, is implemented from within the control itself. Now, locate the  comment tag, and paste the following markup directly beneath the comment:

<cc1:C1TabControl ID="C1TabControl1" runat="server" Height="444px" Width="722px" VisualStylePath="~/C1WebControls/VisualStyles" UseEmbeddedVisualStyles="True" VisualStyle="ArcticFox"> <TabPages> <cc1:C1TabPage ID="C1TabPage1" runat="server" Text="C1Menu" AutoSize="False" ToolTip="C1Menu">   </cc1:C1TabPage> <cc1:C1TabPage ID="C1TabPage2" runat="server" Text="C1TreeView" AutoSize="False" ToolTip="C1TreeView">   </cc1:C1TabPage> <cc1:C1TabPage ID="C1TabPage3" runat="server" Text="C1NavPanel" AutoSize="False" ToolTip="C1NavPanel">   </cc1:C1TabPage> </TabPages> </cc1:C1TabControl>

This markup will create an instance of the C1TabControl that can be seen below:

If you take a moment to compare the C1TabControl’s markup to the C1WebTabStrip’s, you should notice that the C1TabControl uses more organized and significantly less markup than its predecessor. At this point, the C1TabControl that you just created should seem very similar to the pre-existing C1WebTabStrip. Before we continue, let’s change the C1TabStrip’s VisualStyle to Vista, one of the five themes include with ComponentOne’s Studio for ASP.NET. This can be done be going to Properties | VisualStyle and selecting Vista from the drop-down. Now let’s take a look at some of the advancements that the C1TabControl introduces.

One of the new features that the C1TabControl introduces is the ability to change the orientation of the C1TabControl by changing its Direction property. In this example, we will change the orientation of the C1TabControl to Left, by going to Properties | Direction and selecting Left. Another new feature of the C1TabControl is its ability to host URL’s. Let’s implement this functionality now; please paste the following markup above the </TabPages> tag:

<cc1:C1TabPage ContentUrl="http://www.componentone.com" Text="ComponentOne" ToolTip="Welcome to ComponentOne" />

If you run the application and select the ComponentOne tab, you should see the ComponentOne website hosted by the C1TabControl itself. Another new feature of the C1TabControl, and some other Palomino controls, is the addition of Animation and Transition effects. To see these effects in action, please paste the following into the C1TabControl’s beginning markup tag:

Animation="SlideBottom" Duration="1000" Easing="EaseOutExpo"

This small amount of markup will add a one-second long animation and transition effects to the C1TabControl each time its tab changes. Other new features of the C1TabControl include multi-row, scrolling, and validation. Before we move on, run the application; you should see the older version of the C1WebTabStrip, and below it, the more professional looking C1TabControl that should render similar to the following image:

C1WebMenu to C1Menu

The C1Menu control and C1WebMenu control are very similar conceptually, but the C1Menu control allows developers to add stylish and professional looking menus to their pages that surpass the C1WebMenu. The C1WebMenu begins on Line 47 of the Default.aspx file’s markup and is denoted by a  comment tag. Now, scroll down to the  comment tag, and paste the following markup directly below the comment:

<cc2:C1Menu ID="C1Menu1" runat="server" Width="350px"> <Items> <cc2:C1MenuItem Text="Root Item1"> <Items> <cc2:C1MenuItem Text="Root Item3"> <Items> <cc2:C1MenuItem Text="Root Item6" /> <cc2:C1MenuItem Text="Root Item7" /> <cc2:C1MenuItem Text="Root Item8" /> </Items> </cc2:C1MenuItem> <cc2:C1MenuItem Text="Root Item4" /> <cc2:C1MenuItem Text="Root Item5" /> </Items> </cc2:C1MenuItem> <cc2:C1MenuItemSeparator /> <cc2:C1MenuItem Text="Root Item2"> <Items> <cc2:C1MenuItem Text="Root Item9" /> <cc2:C1MenuItem Text="Root Item10" /> <cc2:C1MenuItem Text="Root Item11" /> </Items> </cc2:C1MenuItem> <cc2:C1MenuItemSeparator /> <cc2:C1MenuItem Text="ComponentOne" NavigateUrl="http://www.componentone.com" /> </Items> </cc2:C1Menu>

Now that we have the C1Menu on the Page, let’s look at some of the control’s features that distinguish it from the C1WebMenu. The first property to change is the Orientation property. The Orientation property, which has a default value of Horizontal, will determine whether the menu is rendered horizontally or vertically. In this sample, change the Orientation property to Vertical; this can be done through the properties menu, markup, or code. Another new feature that the C1Menu introduces is the ClickToOpen property. The ClickToOpen property, as it suggests, is a Boolean property that determines whether or not the end-user must click on the menu item to view its children; the default value of this property is False and the C1Menu will open when hovering over it items. Change the ClickToOpen property to True so that the C1Menu in this web application behaves similar to the native menus in Window’s operating systems. At this point, run the web application; the C1Menu should look similar to the image below:

Now it’s time to use the C1Menu control as the context menu of an ASP.NET TextBox. To do this, paste the following markup below the  tag:

<cc2:C1MenuItem Text="Root Item6" /> <cc2:C1MenuItem Text="Root Item7" /> <cc2:C1MenuItem Text="Root Item8" /> </Items> </cc2:C1MenuItem> <cc2:C1MenuItem Text="Root Item4" /> <cc2:C1MenuItem Text="Root Item5" /> </Items> </cc2:C1MenuItem> <cc2:C1MenuItemSeparator /> <cc2:C1MenuItem Text="Root Item2">

Now, run the application, locate the newly added TextBox control, and right-click the TextBox; the result should be similar to the following image:

Notice the following pieces of the C1Menu’s markup in this instance: ContextMenu="True" and ContextElementID=”TextBox1”. The ContextMenu property is a Boolean property used to determine if the control should to be used as a context menu. If the ContextMenu property is set to True, the style of the C1Menu will automatically render itself similar to a context menu in Windows Vista. The ContextElementID property indicates the control that the C1Menu will be a context menu for, TextBox1 in this scenario.

Some other features that the C1Menu establishes are menu scrolling; templating; saving and loading the control’s layout as XML; the ability to overlay Flash, ActiveX, and Windowed objects; animations and easing; and much more.

C1WebTreeView to C1TreeView

The C1TreeView is very similar to the C1WebTreeView control in the sense that it allows developers to display a hierarchy, but it also brings additional functionality and style. The C1WebTreeView begins on Line 115 of the Default.aspx file’s markup and is denoted by a  comment tag. Now, scroll down to the  comment tag, and paste the following markup directly below the comment:

<cc4:C1TreeView ID="C1TreeView1" runat="server" VisualStyle="Vista" Height="128px" Width="181px" ExpandAnimation="DropOutToRight" CollapseAnimation="DropInFromRight" ExpandDuration="1000" CollapseDuration="1000" CollapseDelay="50” ExpandDelay="50"> <Nodes> <cc4:C1TreeViewNode Text="Item1"> <Nodes> <cc4:C1TreeViewNode Text="Item1.1" /> <cc4:C1TreeViewNode Text="Item1.2" /> <cc4:C1TreeViewNode Text="Item1.3" /> </Nodes> </cc4:C1TreeViewNode> <cc4:C1TreeViewNode Text="Item2">

</Nodes> </cc4:C1TreeViewNode> <cc4:C1TreeViewNode Text="Item3"> <Nodes> <cc4:C1TreeViewNode Text="Item3.1" /> <cc4:C1TreeViewNode Text="Item3.2" /> <cc4:C1TreeViewNode Text="Item3.3" />

</Nodes> </cc4:C1TreeViewNode> </Nodes> </cc4:C1TreeView>

At this stage, the C1TreeView should render as follows. If you expand or collapse a node, you can see an example of the C1TreeView’s several animation and transition effects.

Now it is time to take advantage of the C1TreeView’s enhancements, but first, change the AllowEdit, AutoCollapse, and ShowCheckBoxes properties to True. The AllowEdit property is a Boolean property with a default value of False; when set to True, this property will allow end-users to modify the C1TreeView’s nodes. When True, the AutoCollapse property will ensure that only one node at that level will be expanded at one time. The ShowCheckBoxes property is a Boolean property, also with a default value of False. When True, the ShowCheckBoxes property will display standard checkboxes, or tri-state checkboxes if specified, next to each need in the C1TreeView. At this point, the C1TreeView should appear on the page similar to the following image:

The C1TreeView also introduces several new features such as node sorting; node drag-and-dropping; templates; the ability to show or hide the node lines; load on demand; and many more.

C1WebTopicBar to C1NavPanel

Of all the controls discussed thus far, the C1NavPanel and the C1WebTopicBar are the least similar of the group. The C1NavPanel offers similar functionality to the C1WebTopicBar, but with a significantly different visual structure that closer resembles the navigation menu in Microsoft Outlook. The C1NavPanel is also easier to develop with for the sole fact that it only has one type of direct item compared to the C1WebTopicBar’s seven. The C1WebTopicBar’s functionality can also be replicated, and extended upon, with other ComponentOne controls like the C1Expander and the C1Accordion. The C1WebTopicBar begins on Line 187 of the Default.aspx file’s markup and is denoted by a  comment tag. Now, scroll down to the  comment tag, and paste the following markup directly below the comment:

<cc3:C1NavPanel ID="C1NavPanel1" runat="server" Height="281px" Width="263px" VisualStyle="Vista" AnimationEasing="EaseLinear" AnimationDuration="100"> <Panes> <cc3:C1NavPanelPane ID="C1NavPanel1Pane1" runat="server" ButtonName="Group1 (Simple Text)"> <Header> Group1 (Simple Text) </Header> <Content> This is just arbitrary text! </Content> </cc3:C1NavPanelPane> <cc3:C1NavPanelPane ButtonName="Favorite Sport" Expanded="false"> <Header> <asp:Label ID="Label1" runat="server" Text="Favorite Sport (ASP.NET Label)"/> </Header> <Content> <asp:RadioButtonList ID="RadioButtonList1" runat="server"> <asp:ListItem Text="Football" /> <asp:ListItem Text="Basketball" /> <asp:ListItem Text="Baseball" /> <asp:ListItem Text="Hockey" /> <asp:ListItem Text="Golf" /> <asp:ListItem Text="Soccer" /> <asp:ListItem Text="Tennis" /> </asp:RadioButtonList> </Content> </cc3:C1NavPanelPane> <cc3:C1NavPanelPane ContentUrl="http://www.componentone.com" ButtonImageUrl="~/Images/C1.jpg" ButtonName="ComponentOne"> <Header> Welcome to ComponentOne </Header> <Content /> </cc3:C1NavPanelPane> </Panes> </cc3:C1NavPanel>

You should notice that the each pane of the C1NavPanel consists of two portions, the header and the footer, that can contain any object. You should also notice that the markup is appreciably cleaner and less cluttered. Rebuild and run the web application to see the C1NavPanel in action. When exploring the C1NavPanel at this point, the control demonstrates some of its several animation options as well as an additional pane that host the ComponentOne website. The C1NavPanel also allows end-users to resize the panes vertically by using the sizer just below the open pane. The C1NavPanel should resemble the following image:

Conclusion

Now that you have seen a simplified example, you can now confidently transform your web applications using ComponentOne’s ASP.NET controls. For the most styled, supercharged, and easy-to-use controls built on Web standards including AJAX, CSS, and XHTML, continue to use ComponentOne Studio for ASP.NET in your sites.

You can download the completed sample application by clicking the link below:

WebCommand_Completed: (Please visit the site to view this media)

Doc-To-Help 2010 Released

C1_EveT — Wed, 10 Feb 2010 18:59:00 GMT

Doc-To-Help 2010 marks our first subscription update of the young year. We have made valuable updates to our RoboHelp conversion, collaboration, and authoring technologies. This is just the beginning of what we have in store for 2010, so stay tuned for more updates! Check it out at www.doctohelp.com

Become an Expert Part 3: Adding a Ribbon Interface and Export Options

C1_GregL — Tue, 09 Feb 2010 17:14:00 GMT

Part 3 Overview

In this series, we will use controls from ComponentOne Studio for WinForms to create a Sales Management application and show how easily anyone can "Become an Expert". Keep in mind that up until now* we have created a table to display sales data, implemented features to add/delete data and added a feature to automatically show totals.

* See Part One and Part Two before continuing.

In Part 3, we'll use the C1Ribbon control (part of Studio for WinForms) to change the look and feel of the application. We'll also use the C1PdfDocument control to export a report to a PDF file, and we'll also add Excel export options using the C1FlexGrid control.

So let's get started!

Implementing the Ribbon Interface 1

Modify the menu using the C1Ribbon control:

Up until now we've used basic Windows controls in the Sales Management Application menu and form itself. To enhance the look and feel of the application, we'll incorporate the Ribbon interface using the C1Ribbon control.

In order to use the C1Ribbon control, we need to add it to the toolbox. To add the control, right click on the toolbox and open "Choose Toolbox Items".

Please refer to the previous articles for details regarding this topic.

Modify preview

Let's begin by adding the C1Ribbon control to the display area of the form. It looks very different from MenuStrip. C1Ribbon provides a tabbed interface using menu items which are divided into tabs and groups for better visual effect. In this application we will divide our items into two tabs: one for basic functionality and another for file exporting features.

We have a C1RibbonForm class which is used to get a form with C1Ribbon control on it. So let's shift from the common Form class to the C1RibbonForm class. Use the following code to modify the base Form class (parent class).

Before modification

public partial class Form1 : Form

After modification

using C1.Win.C1Ribbon; // Add ：：（Omitted）： public partial class Form1 : C1RibbonForm

The form has changed completely! We'll use this as a base and add buttons and textboxes to the C1Ribbon control to create the menu.

Implementing the Ribbon Interface 2

Add Tabs and Groups:

Now we will add tabs and groups to the Ribbon. To add tabs, select the Application Menu (round section) from the top left of the screen and click "Actions" and then "Add Tab".

For changing the text of the tab, select the tab to display its context-sensitive toolbar and click on "Text Settings". Text settings and tooltip settings can be done from this popup window.

You can also modify Text settings and add more groups in the same way. Similarly, controls can also be added to groups. Select the default Group and drop-down the actions menu. Select to add a Button.

Now, let's change the icons. To change the Button's icon, click on "Change Image" from its toolbar.

From the Change Image pop-up, select the icon to be changed. Modify "Large Image" for large icons and "Small Image" for small icons. Depending on whether or not you select a large image will determine if the button is large or small. Even if you want a large button, it's also recommended to choose a small image for use in the Quick Access Toolbar.

Try changing icons for all the controls in the same way. Continue to fill out the Ribbon with the following tabs and groups. Some controls are for features we have already implemented and some are for the new features we plan to implement. For PDF export we will have to add a separate C1PdfDocument component. Note: details about this feature will be covered later.

Home Tab

Read
Write

Data Manipulation

Add Data

PDF

PDF Output
Include Password
Password

File Tab

Excel

Output

XML

Export
Import

Adding Excel Export

Now that we have modified the appearance, let's add new features. Usually in business applications, users want data to be exported to a file.

Let's first add a feature for exporting our data to Excel. First, add a RibbonButton event. This can be done by simply double clicking on the RibbonButton, just like a usual button control. We will use the "Output" button in the "Excel" group of the file tab created earlier.

To accomplish the Excel exporting we'll simply use C1FlexGrid's export feature. Use the following code to export C1FlexGrid data to an Excel file format.

this.c1FlexGrid1.SaveExcel("File Name", "Sheet Name", "Output Options");

Data from C1FlexGrid will be displayed in the specified sheet. We have fixed rows (header rows) and fixed columns (header columns) in the Sales Management Application. Specify FileFlags.IncludeFixedCells in the output option to get fixed cells in the Excel file.

If you open the exported Excel file, you'll notice the window outline is fixed for the sections with fixed cells. Also, our cell styles are respected in the Excel format, but our custom OwnerDraw progress bars are not.

Adding XML Export

In addition to Excel export, we can also export C1FlexGrid data to XML. Exporting to Excel limits reusability from the customer's end because it's restricted to the software being used. By exporting to XML we can load and export data in a format more native to the FlexGrid. We will export C1FlexGrid data to an XML file and then read data from this file.

We'll use the "Export" button in the XML group. Use the following code to export C1FlexGrid data to an XML file format.

this.c1FlexGrid1.WriteXml("File Name");

Just write one line of code and that's it!

Data exported to XML

Let's read the data from the XML file back to the grid. Execute the following code to load the XML file and paste the data back to C1FlexGrid. Use the "Import" button of XML group in the Ribbon.

this.c1FlexGrid1.ReadXml("File Name");

And just like file exporting, we only need one line of code here too. Background color has also been read back with the data! So when data is exported to XML, font, background color, and other similar information is also exported to the file.

Adding PDF Export

Finally, since we are creating a Sales Management application, let's try adding a reporting feature. We will use C1PdfDocument component to create a PDF file. C1PdfDocument (part of Studio for WinForms) is used for generating PDF documents.

So let's start creating the PDF file! Add the C1PdfDocument component from the toolbox, just like you did for C1Ribbon. Then add the click event of the "PDF Output" button under the PDF group in the Home tab.

Now let's add some code.

this.c1PdfDocument1.Clear(); this.c1PdfDocument1.DocumentInfo.Title = "Title";

This code initializes the C1PdfDocument component and sets the PDF file title. The title can be verified in the PDF file properties.

RectangleF rcPage = this.c1PdfDocument1.PageRectangle; rcPage.Inflate(-100, -100);

Here we get the page area and determine the display area of the page by setting the top, bottom, left, right margins.

Next we'll set the title (heading) style of the report.

// Get and set the height. rc.Height = this.c1PdfDocument1.MeasureString("Title (Heading)", "Font", rc.Width).Height; // Draw title. this.c1PdfDocument1.DrawString("Title (Heading)", "Font", Brushes.Black, "Drawing area"); // Adjust the drawing location. rc.Offset(0, rc.Height + 5);

The code above set the height of the drawing area using the MeasureString method. We then draw the title using the DrawString method. Then, modify Brushes.Black to change the color of the text. And finally, adjust the drawing location by an amount equal to the height of the title plus the row padding.

The following code will draw the header section. The basic sequence will be the same as drawing the title; however, in this case it will be for multiple columns, so the horizontal width needs to be calculated. (In our application, we are simply dividing the width by the number of columns. Also, for setting the height of the drawing area, we are calculating based on the height of the tallest cell).

// Measure cell width rcCell.Width = rc.Width / fields.Length; // Get the height. Select the highest one and set it. float height = this.c1PdfDocument1.MeasureString("Header String", "Font", rcCell.Width).Height; rcCell.Height = Math.Max(rcCell.Height, height);

Next, fill the drawing area and draw the header string. Adjust the position of the drawing area and our drawing of the header is complete.

// Fill the cell. this.c1PdfDocument1.FillRectangle(Brushes.Black, rcCell); // Draw header. this.c1PdfDocument1.DrawString("Header String", "Font", Brushes.White, rcCell); // Position is set by adjusting the horizontal width only. rcCell.Offset(rcCell.Width, 0);

Finally, we will draw the data section. Drawing the data section is similar to the header section. It contains numeric values, strings and date values. The numeric values will be left aligned and all other data types will be right aligned.

StringFormat sf = new StringFormat(); // Check if the value can be converted to double. double d; sf.Alignment = (double.TryParse("Data", out d)) ? StringAlignment.Far :StringAlignment.Near; // Draw the data in the cell. this.c1PdfDocument1.DrawString("Data", "Font", Brushes.Black, rcCell, sf);

We are also checking if the numeric data type or any other data type can be converted to double to avoid conversion errors. For numeric data, we set StringAlignment to Far, and for other data types set it to Near. Then draw the data string by specifying the string format at runtime while using the DrawString method. Finally, once the file is saved using the Save method of C1PdfDocument, our process is complete. Page breaks have also been implemented in this sample application.

Setting Password in the PDF File

The generated PDF file now contains sales data. This might be confidential information since this is a business application, so let's set a password for the PDF file. This password will be required to open and view the PDF file.

Check the checkbox "Include Password" in the PDF group of Home tab. The following code is implemented when you click on "PDF Output" after entering a string in the "Password" textbox.

this.c1PdfDocument1.Security.UserPassword = "Password String";

Here we just need to use the UserPassword property of the PdfSecurity class to set the password. The security of the PDF file is enhanced this way so the users who do not have the password will not be able to open the PDF file.

Conclusion

In this part we modified the look and feel of the application with the help of the C1Ribbon control. We implemented features like Excel export and XML export and import. We also created a PDF file and set a password for it using the C1PdfDocument component. By making a few code changes to the controls we were able to enhance the features in the application immensely.

In Part 4, we'll add some more interesting features to the application by binding sales data to a chart control and displaying the data in C1FlexGrid in the form of a chart.

Download Part 3 Sample Project

Acknowledgements

Article copyright © 2009 Shogo Takayama ＆ Shoeisha Co., Ltd. http://www.shoeisha.co.jp/
http://codezine.jp/
These contents were made by GrapeCity inc., Japan. http://www.grapecity.com/japan/
Translated by Vidhi Kapoor (GrapeCity India Pvt. Ltd.)
Edited by Greg Lutz (ComponentOne)

New Case Study: Company Reduces Development Time by 84% Using Third Party Visual Studio Controls

C1_EveT — Mon, 08 Feb 2010 18:35:00 GMT

Read how Tom Sullivan from LogixPower, a non-profit organization located in San Diego, California used ComponentOne Studio for ASP .NET to save 174 man hours and $15,000. http://www.componentone.com/SuperPages/CaseStudies/?caseID=20

Source Control Options? Yeah, We’ve got those…Doc-To-Help 2010 now integrates with Microsoft Team Foundation Server

C1_NickyB — Mon, 08 Feb 2010 16:36:00 GMT

Doc-To-Help has had robust Team Authoring support for quite some time, but with the release of Doc-To-Help 2010, we’ve added a new feature that many have requested: integration with Microsoft’s Team Foundation Server (TFS) source control.

It just takes a few clicks to add a documentation project to a TFS repository, and every member of the team can work with the project and take advantage of the new options. In addition, using TFS makes it possible for documentation and code to be stored in the same location, something many companies prefer because it streamlines processes.

The Doc-To-Help Team Authoring ribbon has been redesigned to add the new TFS features, as well make document check in/check out easier and quicker. The new options available when using TFS include:

Get Specific Version — You can search the archives for a specific version of a file and retrieve it if you wish.
Locking — You have two locking options that give you complete control over the check in/check out of files. These options make branching or creation of multiple versions possible.
Compare Documents — You can compare the document you are working on with one that is stored in the archives – or even compare two archived documents. You can also merge documents.
Commenting — You can add your own notes when checking in a file. These notes are saved to the document history.
Document History — You can view a history of all the changes made to each document, including comments.
Document Properties —You can view the properties of each document via right-click.

If you are interested in using Team Authoring but don’t have TFS, you can still use Doc-To-Help Team Authoring and manage your projects on your network or on the web. See Working on a Team for details.

Become an Expert Part 2: Adding Features to the Sales Management Application

C1_GregL — Fri, 05 Feb 2010 20:46:00 GMT

Part 2 Overview

Microsoft Visual Studio contains a number of standard controls. ComponentOne Studio Enterprise provides easy-to-use controls with enhanced features which can be used in Visual Studio along with standard controls. In this series, we make use of these controls to create a Sales Management Application. In Part 1; we started building a simple application using C1FlexGrid to display and edit sales data. In this part, we'll power up our application by using features provided by C1FlexGrid.

Add Product Category

You may remember that in the previous section, "Proceeds" and "Payments" were added to the Sales Management Application based on dates. A real life organization, however, sells a number of products and might want to look at aggregate sales figures for each product category. For this, a category item needs to be added so that not just dates but category wise sales figures can also be represented.

First, let's add a column "Product Category" in the grid. Open the "C1FlexGrid Column Editor" by selecting Designer... from the C1FlexGrid's smart tag to add/delete rows at any location in the grid. We will put this new column between the "Date" and "Proceeds" columns. Name it ProductCategory and set AllowEditing to False.

We have a separate CategoryMaster table where the data values are translated into display values using DataMap (use CategoryMaster script included in the sample zip to create the CategoryMaster table, and the Sales script to recreate the Sales table adding a CategoryCode data field). Here the CategoryCode value is specified and the corresponding CategoryName is displayed on the grid. Values in C1FlexGrid have been made non-editable in our application, but DataMaps can also be used where editing is possible in the grid and values are entered in a drop-down list.

ListDictionary dictionary = new ListDictionary(); dictionary.Add("CategoryCode", "CategoryName"); this.c1FlexGrid1.Cols[1].DataType = typeof(int); this.c1FlexGrid1.Cols[1].DataMap = dictionary;

CategoryCode is added as the key and CategoryName is added as the display value in the ListDictionary. With this, we have added a "ProductCategory" column in the grid and completed the settings for the DataMap.

Add a Window to Enter Data

Next, let's change the way we enter data in the grid. In Part 1, we added/modified data directly through C1FlexGrid, but this is very inconvenient in a real application. So we'll create a new input window to enter data. When data is to be entered, a new window will pop up and for simple data input.

First, we will add a Form to the project. This form will contain controls where data related to "Date", "Category", "Proceeds" and "Payments" can be entered.

public object CategoryCode { get { return this.comboBox1.SelectedValue; } set { this.comboBox1.SelectedValue = value; } }

Use the code below to get and set the entered value in the main window.

When new data is entered

this.c1FlexGrid1.AddItem(new object[] { "Date", 　　　　　　　　　　　　　　　　"CategoryCode", 　　　　　　　　　　　　　　　　"Proceeds", 　　　　　　　　　　　　　　　　 "Payment" });

When existing data is updated

this.c1FlexGrid1["rowNum", 0] = "Date"; this.c1FlexGrid1["rowNum ", 1] = "CategoryCode"; this.c1FlexGrid1["rowNum ", 2] = "Proceeds"; this.c1FlexGrid1["rowNum ", 3] = "Payments";

When the popup window is closed, the value entered will be retrieved automatically and reflected in C1FlexGrid. Numeric values can also be entered easily through this window.

Adding Subtotals/Grand Total

Up untill now we have been making changes at the record level, but in a Sales Management Application we would need information about total sales. So let's add a totals row to calculate sales for a month. If there are multiple data rows for the same date, we'll calculate subtotals for that date also.

In order to add Subtotals and Grand Total rows, we need to simply add up the values of each column and add a new row to display the result. But here we'll use the data aggregation feature in C1FlexGrid to display values.

Use the Subtotal method to calculate aggregate value

// Clear subtotal. this.c1FlexGrid1.Subtotal(AggregateEnum.Clear); // Sort the contents of the grid. this.c1FlexGrid1.Sort(SortFlags.Ascending, 0, 1); // Calculate the grandtotal. this.c1FlexGrid1.Subtotal(AggregateEnum.Sum, -1, -1, 2, "Total"); // Calculate the subtotal. this.c1FlexGrid1.Subtotal(AggregateEnum.Sum, 0, 0, 2, "{0:MM/dd} Subtotals");

First let's remove the existing aggregate row. The data in the grid is sorted on two fields, first being date and then classified as per the product category. The first parameter in the SubTotal method, used to calculate the total and subtotal values, is the aggregate function type (function type is Sum in this case). Parameters 2 ~ 4 are outline level, grouping columns and aggregate columns. Instead of a specific column, -1 is used as the grouping column of the GrandTotal row. For subtotals column, it is set to 0 (Date column). The aggregate column in both cases (GrandTotal and Subtotal) is column 2 (Proceeds) in the code above. Finally, set "Total" in the caption of the totals row and a date placeholder in the caption of the subtotals row. That's all we need to do to set aggregate rows in C1FlexGrid!

For the GrandTotal row we will specify the average of the Gross Margin Rage column. Please note that the Gross Margin Rate of the SubTotals row is not calculated.

Let's modify the display style for aggregate rows so that they are highlighted in the grid.

CellStyle cellStyle = c1FlexGrid1.Styles[CellStyleEnum.GrandTotal]; cellStyle.BackColor = Color.Blue; cellStyle.ForeColor = Color.White; cellStyle.Font = new Font(Font, FontStyle.Bold); cellStyle = this.c1FlexGrid1.Styles[CellStyleEnum.Subtotal0]; cellStyle.BackColor = Color.Orchid; cellStyle.ForeColor = Color.White; cellStyle.Font = new Font(Font, FontStyle.Bold);

Here, we specify the cell style to change the display. In this application we are setting the cell background of the totals row to blue and the values to white. These are in bold. Cell styles for subtotals are also set in the same way.

Now let's run the application. Notice the Totals row at the bottom of C1FlexGrid. Values for a particular date will be displayed in the Subtotals rows. We've now demonstrated how it's simple to add aggregate rows to the grid by using C1FlexGrid methods.

Visual Display for Gross Margin Rate

Let's make some more changes. Just like the aggregate rows, we'll change the color of the GrossMarginRate column. We want to show visually where the GrossMarginRate is higher and fill the cell proportionally according to the value in the gross margin rate, sort of like a Progress Bar.

Let's change the DrawMode property of C1FlexGrid from Normal to OwnerDraw. Now the OwnerDrawCell event will be fired when the cell is rendered.

The code for the OwnerDrawCell event is as follows:

// Calculate horizontal width. Rectangle rc = this.c1FlexGrid1.GetCellRect(e.Row, "Column Index"); rc.Width = (int)(this.c1FlexGrid1.Cols[e.Col].WidthDisplay * "Gross Margin Rate"); // Draw the background of the cell. e.DrawCell(DrawCellFlags.Background | DrawCellFlags.Border); // Display bar graph. rc.Inflate(-2, -2); e.Graphics.FillRectangle(Brushes.LimeGreen, rc); rc.Inflate(-1, -1); e.Graphics.FillRectangle(Brushes.PaleGreen, rc); // Draw the contents of the cell. e.DrawCell(DrawCellFlags.Content);

First, we get the size of the cell (cell that displays the GrossMarginRate value). Then, calculate the horizontal width of the cell proportional to the actual Gross Margin Rate. Render the background, border, and so on based on the calculated value and set the colors for border and the fill color of the rectangle to display a horizontal bar graph. Finally, display the cell value (GrossMarginRate).

Set the placeholders "{0}" and "{1}" to display page number and total page numbers respectively.

Conclusion

In Part 2, we used the C1FlexGrid features to add aggregate rows, draw cells, and print the grid data. All this was done by simply calling a few methods. In the Part 3, we'll enhance our application's capabilities further by adding a few more controls to it along with C1FlexGrid and exporting data from the grid to a PDF file.

Download Sample Project

Acknowledgements

Article copyright © 2009 Shogo Takayama ＆ Shoeisha Co., Ltd. http://www.shoeisha.co.jp/
http://codezine.jp/
These contents were made by GrapeCity inc., Japan. http://www.grapecity.com/japan/
Translated by Vidhi Kapoor (GrapeCity India Pvt. Ltd.)
Edited by Greg Lutz (ComponentOne)

Migrating to Palomino: from C1WebGrid to C1GridView

C1_ChrisB — Fri, 05 Feb 2010 19:46:00 GMT

Introduction

In recent months, you may have noticed some changes within the Studio for ASP.NET including the addition of new controls and utilities like Foxy for ASP.NET, our visual style designer for the ASP.NET controls. Some of these additions are entirely new concepts for the Studio for ASP.NET, while others have existing counterparts that they will be replacing. The C1GridView is a prime example of the latter, as it will be replacing the C1WebGrid in the months to come.

The C1GridView and our other new controls, collectively referred to as our Palomino controls, are fully AJAX-enabled and take advantage of many promising technologies like CSS, XHTML, and more. For many of you this may seem unsettling, especially those of you who have been using our ASP.NET controls for several years now; however, there is no need to fret as this article will walk you through the C1WebGrid to C1GridView migration.

Prerequisites

For this tutorial, you will need to download ComponentOne Studio for ASP.NET and the C1WebGrid sample application. A free 30-day full-featured trial and yearly subscriptions of ComponentOne Studio for ASP.NET are available from the ComponentOne website.

Getting Started

Open the sample application in Microsoft Visual Studio 2008, and add the necessary references to the sample by clicking by going to Project | Add Reference and browse to C:\Program Files\ComponentOne\Studio for ASP.NET\bin\. The following assemblies require project references:

C1.Web.UI.3.dll
C1.Web.UI.3.Controls.3.dll

* Please note that the assemblies may be located in the following file path: C:\Program Files\ComponentOne Studio.NET 2.0\ bin\. Also notice that there are two versions of the C1.Web.UI assemblies; one that targets the .NET Framework 2.0 and one that targets the .NET Framework 3.0.

Directly beneath the Page directive add the following directive for the C1GridView:

<%@ Register Assembly="C1.Web.UI.Controls.3" Namespace="C1.Web.UI.Controls.C1GridView" TagPrefix="C1GridView" %>

You should notice that C1GridView’s directive is very similar to that of the C1WebGrid.

If you run the application at this point, you will see only the C1WebGrid; it should appear as follows:

Now let’s migrate this C1WebGrid to the C1GridView.

Migrating C1WebGrid to C1GridView

First, switch to visual designer in Visual Studio and add an instance of the C1GridView to the page by selecting it from the Visual Studio Toolbox and dragging it to the page. Once the C1GridView has been added, open its smart tag (the arrow in the upper-right corner of the control) and from the Data Source drop down select AccessDataSource1 as shown below:

After selecting AccessDataSource1, the C1GridView will now appear as follows:

Before we continue any further, lets give the C1GridView a more appealing look for our users by leveraging the new VisualStyle property and one of the five styles included with the Studio for ASP.NET. To do this, open the C1GridView’s smart tag and select Office2007Blue from the VisualStyle dropdown.

I would like to point out that the C1GridView automatically generates a checkbox column for Boolean columns, rather than just displaying true or false. With the C1WebGrid, this is certainly possible; however, this would require you, the developer, to manually set this up using a template column.

Now that we have given our users a more aesthetically appealing look, let’s focus on the functionality that we will be providing to the users. The first item of business in terms of functionality is to allow our end-users to sort, move, and size columns along with enabling paging which can be done by changing the AllowColSizing, AllowColMoving, AllowSorting, and AllowPaging properties to True in the Visual Studio Properties menu. In addition to this, I would also suggest selecting the following C1GridView.CallbackOptions in the Properties menu:

Just like with the C1WebGrid, these changes will not have any real effect on the way the C1GridView is displayed to the end-user; however, changing these properties will greatly increase the usability of the control. If you run the application, you can see that columns in the C1GridView can be moved, sized, and sorted without requiring a full page refresh, and the same goes for paging. Now, let’s move on to some of the finer modifications that will be necessary to recreate the existing C1WebGrid.

To make these finer modifications, it is not necessary to use code, though it can be done just as easily this way, but rather the C1GridView’s Property Builder. To open the Property Builder, open the C1GridView’s smart tag and select Property Builder; the following dialog box will appear.

From the dialog box, select the Show Filter checkbox under the Header and Footer portion of the menu, and then select Columns from the list of options on the left. Before moving on, I would like to mention that filtering is a built-in feature of the C1GridView control with plenty of options; this is a feature that you need to manually design and code for the C1WebGrid. Alternatively, changing the ShowFilter property to True in the Properties menu of Visual Studio would accomplish the same task.

Now in the Columns portion of the Property Builder, you will see the following:

The Selected Columns portion represents the columns that will appear in the C1GridView, while the Available Columns represent the columns and types of columns that you can add to the C1GridView like Image, Template, or Data columns. From the Selected Columns portion, click on CategoryName and change the RowMerge property to Free and the SortDirection property to Ascending; effectively, these changes will sort the CategoryName column alphabetically in ascending order while merging any repeating, like values into one “merged” cell as shown below.

Now from the Selected Columns in the Property Builder, select the ProductID column and set its SortDirection property to Ascending to sort this column alphabetically in ascending order. Afterwards, select the UnitPrice column and set its DataFormatString to {0:c} to format the column as a currency, rather than just displaying this column’s value as an unformatted decimal value; you can manually type {0:c} in for the property or just select it from the dropdown.

Next, add a Band from the list of available columns to the selected columns and move the Band below the ProductName column by clicking the Move Column Up button in the Property Builder. After the Band has been moved to its proper place, select it and change its HeaderText property to Pricing and Availability. Afterwards, all that is left to do with the Band column is to move all columns below it into the Band column by clicking the Move Column Up button in the Property Builder. Once this is done, the Select Columns will look as follows:

Now select Delete from under the Command Field in Available Columns and add it the selected columns. After adding this, change its ShowDeleteButton to False and the ShowFilterButton to True; this will change this column from a delete column to the filter column. After this, change the ButtonType from Link to Image, then add the following to the FilterImageUrl property: ~/Images/filter.gif. This will make the column link for filtering to an image rather than a text link. Afterwards, run the application and your C1GridView should now look as follows:

Return to the C1GridView’s Property Builder, but this time select Paging from the list of sections on the far left.

Once you are in the Paging section, change the mode from Numeric to NextPreviousFirstLast; the C1GridView will not display as follows, rather than using numbers to navigate through the data.

The last thing that needs to be done is adding a RowHeader, which is a new feature of the C1GridView. To do this, select the C1GridView and go to the Visual Studio Properties menu; locate RowHeader, expand it, and change its Visible property to True to display the RowHeader.

If you run the application now, the C1GridView is complete and should display as follows:

Feel free to take a few minutes at this point to use the C1GridView and try some of its new features like filtering and row selection using the row header.

Programming Considerations

Now as easy as this was, you may still be concerned about how things will be changing in terms of code, which is understandable. One of the major code changes in the C1GridView over the C1WebGrid is that the Items collection is now referred to as the Rows collection. So the C1WebGrid’s ItemCreated event is now referred to as the RowCreated event in the C1GridView; the event still works the same way, but is just named differently. Let’s make use of the C1GridView’s RowDataBound event now to add a little bit more to the UnitsInStock column.

First, add an event handler for C1GridView’s RowDataBound event. After you have done this, navigate to the code behind of your page and add the following using statement to the top:

using C1.Web.UI.Controls.C1GridView;

After this, locate the RowDataBound event and add the following code:

if (e.Row.RowType == C1.Web.UI.Controls.C1GridView.C1GridViewRowType.DataRow && e.Row != null)

{

e.Row.Cells[6].Text = string.Format("{0} Items", e.Row.Cells[6].Text);

}

This code snippet will make each cell under the UnitsInStock column display its value followed by “Items”. At the end of this article, you can download the full list of differences between the C1WebGrid and the C1GridView.

Conclusion

Now that you have seen how to migrate a ComponentOne ASP.NET control to an updated Palomino control first hand, you can confidently supercharge your existing ASP.NET application by upgrading to C1GridView and the ComponentOne Studio for ASP.NET.

Download this article: (Please visit the site to view this media)
Download document with programming considerations: (Please visit the site to view this media)

We're Coming to See You at SPTechCon San Francisco

C1_EveT — Wed, 03 Feb 2010 18:23:00 GMT

Visit Dan Beall at booth #503 to learn about what's new in SharePoint and to receive a complimentary C1 branded hat. They go fast, so stop by early!

Test Drive the C1 Web Parts

C1_EveT — Tue, 02 Feb 2010 22:00:00 GMT

Visit the SharePoint demo site: http://tinyurl.com/yhfl8b8

Username: sitevisitor

Password: sitevisitor

Enjoy and buckle-up!

Become an Expert Part 1: Create a Sales Management Application using ComponentOne Studio for WinForms

C1_GregL — Fri, 29 Jan 2010 20:00:00 GMT

Introduction

Visual Studio provides a number of standard controls, but every so often you may wish you could do something more. Most of us developers are aware that trying something complicated with standard controls means a lot of time will be spent on coding.

ComponentOne Studio for WinForms (hereafter Studio for WinForms) offers a number of useful components that implement enhanced functionalities which are not included in standard controls. These are useful as standalone components, but with a little bit of effort, one can combine the features of a number of these components and create amazing applications in minutes.

In this series, we will make use of a Sales Management application to show how easily you can "Become an Expert". The first step in this application is creating a table to display sales data. The basic structure of this application will be created using the C1FlexGrid control (included in Studio for WinForms).

Part 1: Create a Sales Management Application using ComponentOne Studio for WinForms
Part 2: Adding Features to the Sales Management Application
Part 3: Adding a Ribbon Interface and Export Options
Part 4: Adding Charts to Analyze Sales Data
Part 5: Generating Reports

Part 1 Overview

Microsoft Visual Studio contains a number of standard controls. ComponentOne Studio provides easy to use controls with enhanced features which can be used in Visual Studio along with standard controls. In this series, we make use of these controls to create a Sales Management Application. In the first part of this series, we create a table to display sales data using C1FlexGrid (a control in ComponentOne Studio for WinForms) as the base.

Target Audience

Those who have created or want to create Windows applications in .NET.
Those who find standard controls somewhat limited in their usage.
Those who have some preliminary knowledge of databases.

Environment

Visual Studio 2005 or 2008
SQL Server 2005

Set-up the Application

Before you start, you’ll need to have ComponentOne Studio for WinForms downloaded and installed. This includes the C1FlexGrid control.

Points to Remember: This application has been created in Visual Studio 2008. Installation of .NET Framework 3.5 is a prerequisite for running the provided sample. We will also be creating a SQL Server database, however you can skip over this section to create an unbound application.

Download Studio for WinForms at http://www.componentone.com/SuperProducts/StudioWinForms/.
Create a WinForms application in Microsoft Visual Studio. Open Microsoft Visual Studio 2008, and select "File | New | Project" from the main menu. For this article, select C# as the language and select .NET Framework 2.0. Name the project "Sales Management App" in the Name field and click the OK button.

Note: C1FlexGrid is supported under the 2.0 or 3.x Frameworks and can be used in either Visual Studio 2005 or 2008 environments. You can choose the Framework and the environment. The code in this tutorial will be in C#.
Drag and drop C1FlexGrid from your Toolbox onto your page.
Drag and drop a DateTimePicker to the form and place it in the top right corner of Form1.
Set the Format property of the DateTimePicker to Custom and set the Custom Format property to “yyyy/MM.”
Set the Size of the DateTimePicker to Width=96, Height=20.
Give Form1 a Title of “Sales Management” by settings its Text property.
In Form1.cs, add the following line of code above the namespace. This will give us direct access to the SqlClient library for connecting to our database.

using System.Data.SqlClient;

Create the User Interface

Now let’s decide on the content of our application. A Sales Management application should contain the following items:

Date
Proceeds
Payments (Cost)
Gross Margin
Gross Margin Rate

Let’s create a table to display these 5 items.

By default, C1FlexGrid consists of 50 rows × 10 columns. Since we need only 5 columns in our application, we will set Cols.Count property (located under the Cols node) to 5 in the FlexGrid property window. We do not need any rows in the grid at the start of the application, so we will set the Rows.Count property to 1.

Setting up the Columns

We need to label each of our five columns. To do this we can simply select a column and modify the Column Caption property using the smart tag. Name the five columns Date, Proceeds, Payments, GrossMargin, and GrossMarginRate.

Setting Input Constraints

Next we want to format the “Proceeds” and “Payments” columns to allow only numeric input. To set input constraints and captions for each column, we can make the desired changes by simply selecting a column and modifying the settings using the smart tag.

Select the Proceeds column, and click the smart tag to open the C1FlexGrid Tasks menu. Locate the Format Strings textbox and click the ellipsis button. This opens the “Format String” dialog box. Select "Currency" as the "Format type".

Repeat the steps above for the Payments column.

The GrossMargin and GrossMarginRate columns will contain computed values; therefore, we won’t allow editing for these columns.

Select the GrossMargin column, and click the smart tag to open the C1FlexGrid Tasks menu. Uncheck the “Allow Editing” option. Repeat the steps for the GrossMarginRate column.

To sum up, only numeric values can be entered in “Proceeds” and “Payments” columns while input is disabled in other columns.

So by simply setting a few properties, we can restrict the entry of certain type values in some columns and prohibit entering any values in other columns.

Calculating Values

Next, let’s calculate the values of GrossMargin and GrossMarginRate columns. To do this, add C1FlexGrid’s AfterEdit event to the application. This event fires after the cell has been edited. Add the following code:

double proceeds = this.c1FlexGrid1[e.Row, 1] == null ? 0 : double.Parse(this.c1FlexGrid1[e.Row, 1].ToString()); double payments = this.c1FlexGrid1[e.Row, 2] == null ? 0 : double.Parse(this.c1FlexGrid1[e.Row, 2].ToString()); double grossMargin = proceeds - payments; this.c1FlexGrid1[e.Row, 3] = grossMargin; this.c1FlexGrid1[e.Row, 4] = proceeds != 0 ? grossMargin / proceeds : 0;

Values of Proceeds and Payments columns are converted to Double to calculate the GrossMargin. Null value is converted to 0. Subtract Payments from Proceeds to get GrossMargin amount (GrossMargin = Proceeds – Payments). GrossMarginRate is calculated by dividing GrossMargin with Proceeds (GrossMarginRate = GrossMargin/Proceeds). When the value in the Proceeds column is 0, GrossMarginRate is also changed to 0.

This is how we calculate GrossMargin and GrossMarginRate after the values in Proceeds and Payments columns have been entered.

Setting Date

Now let's see how we can set dates in the fixed column for each row. Of course it is possible to enter the date every time, but for our convenience, let’s try setting the date automatically. Month and year are set to display the date on a monthly basis.

Let’s use the DateTimePicker to set the date and month. Add the following code to dynamically change the row count of FlexGrid and values of the fixed column to the ValueChanged event of DateTimePicker.

This.setDateCell();

Now we need to add the setDateCell method which deletes all rows excep the fixed row and adds rows with the selected date.

private void setDateCell() { this.c1FlexGrid1.Rows.RemoveRange(1, this.c1FlexGrid1.Rows.Count - 1); DateTime startDate = new DateTime(this.dateTimePicker1.Value.Year, this.dateTimePicker1.Value.Month, 1); DateTime value = startDate; while (value.Month == startDate.Month) { this.c1FlexGrid1.AddItem(value.ToShortDateString()); value = value.AddDays(1); } }

By using this simple piece of code, we can add the date in the heading of each row and also add and delete rows.

Let’s add a couple lines of code to the Form’s Load event so that the C1FlexGrid is displaying some dates before we even select one.

this.dateTimePicker1.Value = DateTime.Now; this.setDateCell();

Loading and Registering Data

Now let’s try registering the entered data and loading this registered data into the grid. A 'Sales' table has to be created for registering the sales data. You can use the DBScript that's included with the downloaded sample to generate the sales table.

Add a button to the form with the text “Register,” and in its click event write the method for registering the data to the database.

The method of registering data to the database and loading it to the grid has been summarized below (implement steps 1-7 in order). The following code should be placed in the Register button’s click event.

Create an instance of SqlConnectionSqlConnection connection = new SqlConnection(this.getConnectionString());
Open database connectionconnection.Open();
Create an instance of SqlCommand

SqlCommand command = new SqlCommand();

Set SQL command command.Connection = connection; command.CommandType = CommandType.Text;

Delete data by executing SQL commands

DateTime selectedMonth = new DateTime(this.dateTimePicker1.Value.Year, this.dateTimePicker1.Value.Month, 1); command.CommandText = string.Format("DELETE FROM Sales WHERE Date >= '{0}' AND Date < '{1}'", selectedMonth, selectedMonth.AddMonths(1)); command.ExecuteNonQuery(); for (int i = 1; i < this.c1FlexGrid1.Rows.Count; i++) { if (this.c1FlexGrid1[i, 1] != null || this.c1FlexGrid1[i, 2] != null) { string insert = string.Format("INSERT Sales (Date, Proceeds, Payments, GrossMargin, GrossMarginRate) VALUES ('{0}', {1}, {2}, {3}, {4})", this.c1FlexGrid1[i, 0], this.c1FlexGrid1[i, 1] == null ? 0 : this.c1FlexGrid1[i, 1], this.c1FlexGrid1[i, 2] == null ? 0 : this.c1FlexGrid1[i, 2], this.c1FlexGrid1[i, 3], this.c1FlexGrid1[i, 4]); command.CommandType = CommandType.Text; command.CommandText = insert; command.ExecuteNonQuery(); } }

Dispose command

command.Dispose();

Close database connection

connection.Close(); connection.Dispose(); MessageBox.Show("Data has been written to the database.");

We used the following SQL command to delete records.

DELETE FROM Sales WHERE Date >= 'Start date of the month' AND Date < 'Start date of the next month'

The range of dates selected in the table for sales data are specified in the WHERE clause. By setting a single month for the dates in the WHERE clause, we prevented registering data on a date that already existed in the table.

We registered the sales data entered in C1FlexGrid using the following SQL command.

INSERT Sales (Date, Proceeds, Payments, GrossMargin, GrossMarginRate) VALUES ('Date', ‘Proceeds’, ‘Payments’, ‘GrossMargin’, ‘GrossMarginRate’)

The data from C1FlexGrid will be set as it is. Null values are acceptable in the “Proceeds” and “Payment” columns. They are registered as 0 in the database.

Getting Records

Let’s check the registered data. We will add another button to our Form and call it “Load.” In the Load button’s click event, add the following code:

SqlConnection connection = new SqlConnection(this.getConnectionString()); // Open database connection. connection.Open(); // Generate an instance of SqlCommand from SqlConnection. SqlCommand command = connection.CreateCommand(); DateTime selectedMonth = new DateTime(this.dateTimePicker1.Value.Year, this.dateTimePicker1.Value.Month, 1); string selectSQL = string.Format("SELECT Date, Proceeds, Payments, GrossMargin, GrossMarginRate FROM Sales" + " WHERE Date >= '{0}' AND Date < '{1}'" + " ORDER BY Date", selectedMonth, selectedMonth.AddMonths(1)); // Set the SQL command to be executed. command.CommandText = selectSQL; // Execute the specified SQL command and create a SQLDataReader. SqlDataReader reader = command.ExecuteReader(); // Dispose command. command.Dispose(); // Move to the next record. while (reader.Read()) { DateTime dbDate = Convert.ToDateTime(reader["Date"]); this.c1FlexGrid1[dbDate.Day, 1] = reader["Proceeds"]; this.c1FlexGrid1[dbDate.Day, 2] = reader["Payments"]; this.c1FlexGrid1[dbDate.Day, 3] = reader["GrossMargin"]; this.c1FlexGrid1[dbDate.Day, 4] = reader["GrossMarginRate"]; } // Close reader. reader.Close(); // Close database connection. connection.Close(); connection.Dispose(); MessageBox.Show("Data has been loaded to the grid.");

Here we are creating a SqlConnection just as we did before when registering the data. We are using the following SQL statement for getting the records.

SELECT Date, Proceeds, Payments, GrossMargin, GrossMarginRate FROM Sales WHERE Date >= ‘Start date of the month' AND Date < 'Start date of the next month' ORDER BY Date

Only the date is added initially, and then the corresponding data for a particular date is added in the other columns. Therefore, data retrieved is based on the sorted date column.

The following screenshot shows the sample application for registering the data.

Conclusion

In Part 1 we have introduced Studio for WinForms and have explained the usage and features of C1FlexGrid. Use C1FlexGrid to create a simple data list display. Although the sample shown here is a Sales Management Application, with a few minor changes it can also be used as an accounting application.

In Part 2, we will use more features from C1FlexGrid and use the grid with other ComponentOne controls to create a feature rich application.

Download Part 1 Sample Project

Acknowledgements

http://codezine.jp/
These contents were made by GrapeCity inc., Japan. http://www.grapecity.com/japan/
Translated by Vidhi Kapoor (GrapeCity India Pvt. Ltd.)
Edited by Greg Lutz (ComponentOne)

Easy Data Views in SharePoint - Studio for SharePoint Just Released

leannel — Fri, 29 Jan 2010 15:42:00 GMT

2010 is going to be a big year for Studio for SharePoint and its individual Web Parts. We have started with 2010’s first release, which adds powerful new technology and introduces a brand new bundle. Below is a quick list of key points of this release:

ComponentOne Studio for SharePoint
Get all of the ComponentOne Web Parts in one package, and we add online support and a one year renewable subscription that entitles you to anything we release as part of the Studio. That means you get maintenance updates, new features, and even new Web Parts at no extra cost.
Microsoft Excel Data Source
All Web Parts can use Excel files as a data source. You don't need Excel Web Services which means you can use Excel even if you don't have Microsoft Office SharePoint Server (MOSS).
Oracle Data Source
Select Oracle tables and views to display with all of the ComponentOne Web Parts. Just point and click. No need to worry about coding a connection.
Able to Edit Data From All Data Sources
Use ComponentOne DataGrid for SharePoint to edit and add data to SharePoint lists, SQL Server, Excel, and Oracle.
More Column Formatting Options
Display columns in the DataGrid the way you want. Use the On-Board Designer to specify data formats, set column widths, show images, display hyperlinks, set up grouping, and more.

See for yourself. Test drive these Web Parts on our live SharePoint demo site: LAUNCH LIVE DEMO. Log-in information for live demo site:

Username: sitevisitor
Password: sitevisitor

Popular UI Volume 1 - Facebook Application Bar

C1_ChrisB — Tue, 26 Jan 2010 18:33:00 GMT

If you are a Facebook user like myself and 350 million others then you probably noticed the application bar. If you don't know what I'm talking about then check out this screenshot.

The application bar is a menu fixed to the bottom of the Facebook site. It serves as navigation and also displays notifications such as updates or chat. At first I was weary of adding such an obtrusive element on top of the entire site, but have become quite fond of the idea. I really find it useful for its notification functionality. In fact, I have come to rely on it instead of refreshing the page or clicking on the "Home" tab again.

It is an extremely useful UI for such an active website. There are too frequent of updates to rely on an end user to refresh the content. Using a site-wide toolbar at the bottom of every page is a great way of keeping the user aware of important updates. I began to think of how useful it could be in other web applications and decided to try to build one myself.

Less talk, more code

Let's walk through the process of building a Facebook-like application bar using two ComponentOne controls, our ASP.NET Menu control and our ASP.NET ToolTip control.

Want to follow along? Download the code: PopularUI.zip or See it live: Application bar demo

File > New Website

To start I create a new ASP.NET 2.0 website in Visual Studio 2008. Keep in mind this could be done in .NET 3.0 and 4.0 as well. I just chose the lowest common denominator. I name the project PopularUI since I will be adding multiple samples in it. For this sample I will add a directory named FacebookAppBar. Inside it I create an Images folder and added a new WebForm, Default.aspx.

I then add the ComponentOne Palomino dll's to the Bin directory:

C1.Web.UI.2
C1.Web.UI.Controls.2
C1.Web.UI.Design.2

Make a Container

The next step is to make a container to position the application bar in. I am going to use the same ID Facebook does just to make it a better reference. Here is the markup for the page so far:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Facebook Application Bar</title>    
</head>
<body>
    <form id="form1" runat="server">   
    <div>      
    </div>
    <div id="presence">
        <div id="presence_ui">
           
        </div>
    </div>
    </form>
</body>
</html>

The application bar will go inside the div with id=presence_ui. The rest of the content for the app will go in the first div element in the DOM. The reason this is at the end of the page is to ensure it is not a priority for robots to index. Since this is on every page it should be low in priority in the DOM structure. It also does not need to have priority in tab order (unless you feel it otherwise necessary).

With this markup as-is the application bar will not always be visible. We need to use some CSS to get the right positioning similar to Facebook. To achieve the desired layout we will use fixed positioning. Fixed positioning is not very common since it fixed DOM element in the same place (relative to the window) no matter how the user scrolls the page. It can be a difficult layout option to pull off since the element positioned fixed can end up covering other elements on the page. For example, if Facebook did not correctly build their CSS then the footer of each page might be inaccessible due to the application bar covering it up. So we will add some bottom padding to the body to ensure this doesn't happen. Here is how our CSS looks so far:

Fix the Container

body
{
    font-family: "lucida grande" ,tahoma, verdana,arial,sans-serif;
    font-size: 11px;
    color: #333;
    margin: 0;
    padding: 0 0 30px 0;
}
#presence
{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 25px;
}
#presence_ui
{
    position: relative;
    margin: 0 15px;
}

The #presence selector is fixing the outer div to the bottom left of the browser and stretching it across the screen. It is also setting the height to ensure it has layout properties and sizes correctly. The #presence_ui selector is positioning itself relative to the fixed container and giving itself some breathing room to the left and right via 15px of margin. I added the font family, size and color to match Facebook by applying it to the entire document.

Add the C1Menu

Now that we have the fixed box at the bottom of our page we can add the menu. First we need to add the declaration to the top of the page:

<%@ Register Assembly="C1.Web.UI.Controls.2" Namespace="C1.Web.UI.Controls.C1Menu" TagPrefix="c1" %>

Next we add the C1Menu control inside the div with id=presence_ui. It is hardcoded for demo purposes, but could be databound just the same. It could also link to URLs in your app or raise JavaScript/Code-behind events to handle. The menu markup is as follows:

<c1:C1Menu ID="C1Menu1" runat="server" Height="25px" ClickToOpen="True" VisualStylePath="~/C1WebControls/VisualStyles" WindowCollisionDetection="True" NestedGroupCheckable="False" UseEmbeddedVisualStyles="True" VisualStyle="ArcticFox">
   <Items>
       <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" Text="Applications">
           <Items>
               <c1:C1MenuItemHeader runat="server" NestedGroupCheckable="False" Text="Applications">
               </c1:C1MenuItemHeader>
               <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" Text="Video">
               </c1:C1MenuItem>
               <c1:C1MenuItemHeader runat="server" NestedGroupCheckable="False" Text="Bookmarks">
               </c1:C1MenuItemHeader>
               <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" Text="Ads and Pages">
               </c1:C1MenuItem>
               <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" Text="Photos">
               </c1:C1MenuItem>
               <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" Text="Groups">
               </c1:C1MenuItem>
               <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" Text="Events">
               </c1:C1MenuItem>
               <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" Text="Marketplace">
               </c1:C1MenuItem>
               <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" Text="Links">
               </c1:C1MenuItem>
               <c1:C1MenuItemSeparator runat="server">
               </c1:C1MenuItemSeparator>
               <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" Text="Notes">
               </c1:C1MenuItem>
               <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" Text="Gifts">
               </c1:C1MenuItem>
               <c1:C1MenuItemSeparator runat="server">
               </c1:C1MenuItemSeparator>
               <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" Text="Edit Applications">
               </c1:C1MenuItem>
               <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" Text="Browse More Applications">
               </c1:C1MenuItem>
           </Items>
       </c1:C1MenuItem>
       <c1:C1MenuItemSeparator runat="server">
       </c1:C1MenuItemSeparator>
       <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" ToolTip="Ads and Pages">
       </c1:C1MenuItem>
       <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" ToolTip="Photos">
       </c1:C1MenuItem>
       <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" ToolTip="Groups">
       </c1:C1MenuItem>
       <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" ToolTip="Events">
       </c1:C1MenuItem>
       <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" ToolTip="Marketplace">
       </c1:C1MenuItem>
       <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" ToolTip="Links">
       </c1:C1MenuItem>
       <c1:C1MenuItemGroup runat="server" CssClass="right">
           <Items>
               <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" Text="Chat (14)">
                   <Items>
                       <c1:C1MenuItemHeader ID="C1MenuItemHeader1" runat="server" NestedGroupCheckable="False" Text="Chat">
                       </c1:C1MenuItemHeader>
                       <c1:C1MenuItem ID="C1MenuItem1" runat="server" Text="LinkItem1">
                       </c1:C1MenuItem>
                       <c1:C1MenuItemSeparator ID="C1MenuItemSeparator1" runat="server">
                       </c1:C1MenuItemSeparator>
                       <c1:C1MenuItem ID="C1MenuItem2" runat="server" Text="LinkItem2">
                       </c1:C1MenuItem>
                       <c1:C1MenuItemSeparator ID="C1MenuItemSeparator2" runat="server">
                       </c1:C1MenuItemSeparator>
                       <c1:C1MenuItem ID="C1MenuItem3" runat="server" Text="LinkItem3">
                       </c1:C1MenuItem>
                       <c1:C1MenuItemSeparator ID="C1MenuItemSeparator3" runat="server">
                       </c1:C1MenuItemSeparator>
                       <c1:C1MenuItem ID="C1MenuItem4" runat="server" Text="LinkItem4">
                       </c1:C1MenuItem>
                       <c1:C1MenuItemSeparator ID="C1MenuItemSeparator4" runat="server">
                       </c1:C1MenuItemSeparator>
                       <c1:C1MenuItem ID="C1MenuItem5" runat="server" Text="LinkItem5">
                       </c1:C1MenuItem>
                       <c1:C1MenuItemSeparator ID="C1MenuItemSeparator5" runat="server">
                       </c1:C1MenuItemSeparator>
                       <c1:C1MenuItem ID="C1MenuItem6" runat="server" Text="LinkItem2">
                       </c1:C1MenuItem>
                       <c1:C1MenuItemSeparator ID="C1MenuItemSeparator6" runat="server">
                       </c1:C1MenuItemSeparator>
                       <c1:C1MenuItem ID="C1MenuItem7" runat="server" Text="LinkItem3">
                       </c1:C1MenuItem>
                       <c1:C1MenuItemSeparator ID="C1MenuItemSeparator7" runat="server">
                       </c1:C1MenuItemSeparator>
                       <c1:C1MenuItem ID="C1MenuItem8" runat="server" Text="LinkItem4">
                       </c1:C1MenuItem>
                       <c1:C1MenuItemSeparator ID="C1MenuItemSeparator8" runat="server">
                       </c1:C1MenuItemSeparator>
                       <c1:C1MenuItem ID="C1MenuItem9" runat="server" Text="LinkItem5">
                       </c1:C1MenuItem>
                   </Items>
               </c1:C1MenuItem>
               <c1:C1MenuItemSeparator runat="server">
               </c1:C1MenuItemSeparator>
               <c1:C1MenuItem runat="server" ImageUrl="Images/Facebook.png" ToolTip="Notifications">
                   <Items>
                       <c1:C1MenuItemHeader runat="server" NestedGroupCheckable="False" Text="Notifications">
                       </c1:C1MenuItemHeader>
                       <c1:C1MenuItem runat="server" Text="LinkItem1">
                       </c1:C1MenuItem>
                       <c1:C1MenuItemSeparator runat="server">
                       </c1:C1MenuItemSeparator>
                       <c1:C1MenuItem runat="server" Text="LinkItem2">
                       </c1:C1MenuItem>
                       <c1:C1MenuItemSeparator runat="server">
                       </c1:C1MenuItemSeparator>
                       <c1:C1MenuItem runat="server" Text="LinkItem3">
                       </c1:C1MenuItem>
                       <c1:C1MenuItemSeparator runat="server">
                       </c1:C1MenuItemSeparator>
                       <c1:C1MenuItem runat="server" Text="LinkItem4">
                       </c1:C1MenuItem>
                       <c1:C1MenuItemSeparator runat="server">
                       </c1:C1MenuItemSeparator>
                       <c1:C1MenuItem runat="server" Text="LinkItem5">
                       </c1:C1MenuItem>
                   </Items>
               </c1:C1MenuItem>
           </Items>
       </c1:C1MenuItemGroup>
   </Items>
</c1:C1Menu>

Notice that I just used one icon to keep things simple, but it would be easy to add others for the different links. It looks close, but we need a little CSS help to get the Chat and Notification group aligned to the right of the application bar. Here is the CSS to tweak the menu:

.right
{
    float: right;
}
div.C1Menu div.C1SubMenu
{
    margin-top: -24px;
}
.C1Menu .c1-h-child .C1Opened .C1TextNode, .C1Menu .C1SubMenu .c1-h-child .C1Opened .C1TextNode, .C1Menu .c1-h-child .C1Closed .C1TextNode, .C1Menu .C1SubMenu .c1-h-child .C1Closed .C1TextNode
{
    background: none;
    padding-right: 0;
}

The odd looking negative margin is to make sure the submenus don't open on top of the application bar. I also took out the default background image for textnodes which is an arrow pointing down. It didn't make much sense to have a down arrow if the submenus opened upwards.

Add the C1ToolTip Just for Kicks

The only thing missing now is nice looking tooltips on each link. To get those we will use a single C1ToolTip control and specify a ToolTipZoneID. Doing this will turn every alt attribute on elements inside this zone into nice pretty tooltips. I am setting the ToolTipZoneID=presence_ui so only the menu items will get this special tooltip in my site. No other elements will be affected.

To get the tooltip we first need to add a reference to the C1ToolTip control like so:

<%@ Register Assembly="C1.Web.UI.Controls.2" Namespace="C1.Web.UI.Controls.C1ToolTip" TagPrefix="c1" %>

Next we need to add a C1ToolTip anywhere in the page. Here is the markup I used:

<c1:C1ToolTip ID="C1ToolTip1" runat="server" ToolTipZoneID="presence_ui" Position="TopCenter" UseEmbeddedVisualStyles="True" VisualStyle="ArcticFox">
</c1:C1ToolTip>

These are small tooltips that do not need a title in them. I am going to add some CSS to remove the title and also give a little padding inside the tooltip. Here is the last bit of code to complete the application bar:

.C1ttTitleBar
{
    display: none;
}
.C1ttContentBar
{
    padding: 4px;
}

Run it!

There you have it! A cool application bar just like Facebook has built in ASP.NET. Feel free to check out the online version of the application bar. It isn't quite as complex as Facebook's, but you get the gist of it. There are some other cool things we could do to make this even more like the Facebook application bar. Here are some of the ideas I can think of...

Add drag and drop to move items in the menu
Use AJAX to change content on the page when items are clicked
Call a web service to check for updates and notify the user if there are
Load the chat list dynamically
Any other ideas? Post a comment!

Dynamic Connection Strings

C1_GregL — Tue, 26 Jan 2010 17:01:00 GMT

Dynamic Connection Strings

This blog post details a solution to the common problem of dynamically setting connection strings. The approach used allows end-users to change database connections at runtime through a friendly user interface, and save the connection for future uses. Provided with this post is source code for the connection form which accesses all SQL servers and databases on a computer and its networks, builds a connection string based upon user selection, and also saves this to an xml file in local data storage (see bottom of post for download).

Scenario:

You create a project in Visual Studio which utilizes a backend database. Typically, you first create your database, and then create a connection string in Visual Studio to link to your database, and then you complete the rest of your project. You store the database connection string in the settings of your project.

The Problem:

Once you are happy with the application you package and distribute it to your end users. This is when the fun starts as your end users start to say that they can't make a connection to the database on their server. The reason for this is really quite simple. The connection string that you have created has Application scope and is strongly typed. You need to allow the connection string to be set on the users end.

Because the connection string is strongly typed, you can do something like:

[C#] string myString = Properties.Settings.Default.MyConnectionString;

[VB.NET] Dim MyString As String = My.Settings.MyConnectionString

But if you try and reverse the logic:

[C#] Properties.Settings.Default.MyConnectionString = "abc";

[VB.NET] My.Settings.MyConnectionString = "abc"

You get an error.

The problem, of course, lies in the strongly typed connection string that you created when you designed the application. The real problem is that it is strongly typed.

So how can you get around this? It's something that you would think has a ready solution available, but strangely there isn't one. A web search for ‘How do I dynamically reassign the connection string' will return hundreds of results. The realization is that you are not alone.

The Solution:

Well, it turns out that you can actually play with the settings, but to do this you need to access the settings events. If you return to the Settings page of your project you'll see a button that allows you to view the code.

Now, you still can't directly assign the connection string here in the code page (because it's still strongly typed), but you can make use of late binding. The following code is possible (in the Settings Load event):

[C#] this["MyConnectionString"] = "abc";

[VB.NET] Me.Item("MyConnectionString") = "abc"

This is the key to solving the problem. And now that you know that you can change the connection string at runtime, you can expand this process by letting the user build the connection string rather than you, the developer, always being responsible for knowing it. To do this you can create a property in your Settings.cs or Settings.vb page.

[C#] public string RuntimeSqlConnectionString {
	set
	{
		this["MyConnectionString"] = value;
	}
}

[VB.NET] Public WriteOnly Property RuntimeSqlConnectionString() As String
	Set(ByVal value As String)
		My.Settings("MyConnectionString") = value
	End Set
End Property

The rest, as they say, is just a case of applying a little logic to your new found freedom. The easiest approach (for you) is just to present the end user with a text box and have them fill in their connection string and assign that value. But to avoid all those future support calls, you should give them as much help as possible. To achieve this you should display a form that actually searches the end user's computer/network for active SQL Servers, and when they select one, automatically list all of the databases available.

When they have made a successful test connection you write the information out to an xml file in the user's application data directory. This approach allows each user to have their own connection string (each user could have different passwords!).

Finally, on application startup, you read the xml file and dynamically assign the connection string to the property we created earlier. It's that simple.

The same logic can be used for other database connection strings, such as OleDb if you're using C1Reports. Just add another connection string setting and another property in your Settings code.

Download Sample:

Download source for this sample:

ConnectionWizard.zip [C# - VS2008]
ConnectionWizardVB.zip [VB.NET - VS2008]

This sample provides the code for accessing all SQL servers and databases on a computer and its networks. It builds a connection string with the option for a password, and also saves the connection string to an xml file in local data storage. It may not look like a "wizard" but you could certainly take the logic used and apply it within a wizard of your own.

Thanks to Dom Sinclair (http://www.viewtolearn.net/) for submitting the content of this article.

ComponentOne Toolbar for Silverlight Samples

C1_GregL — Tue, 26 Jan 2010 13:00:00 GMT

Overview

This article demonstrates simple techniques that can be used to customize the behavior and appearance of the C1Toolbar control for Silverlight.

The techniques presented take advantage of the Silverlight (and WPF) compositional nature, which allows developers and designers to combine controls and layout elements with great flexibility. Specifically, the article demonstrates how you can accomplish the following:

Create compound toolbar buttons that look like regular buttons, but have several clickable areas
Create dropdown elements that use a Grid element to provide a rich layout
Create dropdown elements that appear when the mouse hovers over them, rather than only when the user clicks them

These items are not artificial samples designed to show off unique features of the C1Toolbar. They came from real customers who wanted to implement these features in real applications.

1. Creating Compound Buttons

To create groups of buttons in a C1Toolbar control, you would normally use XAML such as this:

   <c1tb:C1ToolbarStrip >
    <c1tb:C1ToolbarButton Content="Button1" />
    <c1tb:C1ToolbarButton Content="Button2" />
    <c1tb:C1ToolbarButton Content="Button3" />
  </c1tb:C1ToolbarStrip>

Which would create a toolbar that looks like this:

Notice how the edges of the buttons are automatically adjusted so the first and last buttons have rounded corners and the middle one does not.

Now suppose the application designer wanted to combine the three buttons into a single one. The desired result is something that looks like a regular button, but has three separate clickable areas.

Thanks to the compositional nature of Silverlight, this turns out to be extremely easy. We can simply add a StackPanel as the content of a C1ToolbarButton, place the inner buttons in the toolbar, and remove the borders of the buttons:

   <c1tb:C1ToolbarStrip >
    <c1tb:C1ToolbarButton >
      <StackPanel Orientation="Horizontal" >
        <Button Content="Area 1" IsTabStop="False" BorderThickness="0" />
        <Button Content="Area 2" IsTabStop="False" BorderThickness="0" />
        <Button Content="Area 3" IsTabStop="False" BorderThickness="0" />
      </StackPanel>
    </c1tb:C1ToolbarButton>
  </c1tb:C1ToolbarStrip>

The result is very close to what we want:

Unfortunately, even though we specified zero for the BorderThickness, there is still a white gap between the buttons (you have to look carefully to see it).

The gap appears because of the template used to build the regular Button objects. The template contains a Grid panel named "Background" that has a margin which is not affected by the BorderThickness property.

The easiest way to eliminate the undesired gap is to create a new button class that derives from Button and override the OnApplyTemplate method to modify the template:

   public class InnerButton : Button
  {
    public override void OnApplyTemplate()
    {
      base.OnApplyTemplate();
      Grid grid = ((Border)GetTemplateChild("Background")).Child as Grid;
      if (grid != null)
      {
        grid.Margin = new Thickness(0);
      }
    }
  }

The code is quite simple, but it does assume you know how the base class template is structured.

We can now use our new InnerButton class as follows:

   <c1tb:C1ToolbarStrip >
    <c1tb:C1ToolbarButton >
      <StackPanel Orientation="Horizontal" >
        <local:InnerButton Content="Area 1" IsTabStop="False" BorderThickness="0" />
        <local:InnerButton Content="Area 2" IsTabStop="False" BorderThickness="0" />
        <local:InnerButton Content="Area 3" IsTabStop="False" BorderThickness="0" />
      </StackPanel>
    </c1tb:C1ToolbarButton>
  </c1tb:C1ToolbarStrip>

And this time the result is exactly what we wanted: a single button with three clickable areas:

Even though the result looks like a single button, there are three buttons in the toolbar. Each InnerButton provides visual feedback when the mouse hovers over it, and each has its own Click event.

Remember our InnerButton class inherits from the regular Button, so you are not limited to showing text in each button. You can also use images or any other element your application requires.

2. Using Grid elements as layout elements for dropdowns

In addition to buttons, many toolbars contain dropdown items similar to menus. These are implemented using the C1ToolbarDropDown class. For example, you could create a simple dropdown using this XAML:

   <c1tb:C1ToolbarStrip >
    <c1tb:C1ToolbarDropDown Padding="3" Header="Regular DropDown">
      <c1tb:C1ToolbarDropDown.Menu>
        <c1:C1ContextMenu>
          <c1:C1MenuItem Header="Item1" />
          <c1:C1MenuItem Header="Item2" />
          <c1:C1MenuItem Header="Item3" />
        </c1:C1ContextMenu>
      </c1tb:C1ToolbarDropDown.Menu>
    </c1tb:C1ToolbarDropDown>
  </c1tb:C1ToolbarStrip>

Which would create the following:

But you are not restricted to simple menus. In addition to the Menu property used in the example above, the C1ToolbarDropDown has a Content property that allows you to use any element as a dropdown. The most flexible option is to use a Grid panel, which provides virtually unlimited layout options.

For example, imagine that instead of a simple menu we wanted to display a list of items consisting of some left-aligned text and a right aligned button. This can be accomplished using this XAML:

<c1tb:C1ToolbarStrip >
  <c1tb:C1ToolbarDropDown Padding="3" Header="Grid in DropDown">
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="100"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
      </Grid.RowDefinitions>
      <TextBlock VerticalAlignment="Center" Text="Label 1" />
      <Button Content="Button 1" Grid.Column="1" />
      <TextBlock VerticalAlignment="Center" Text="Label 2" Grid.Row="1" />
      <Button Content="Button 2" Grid.Row="1" Grid.Column="1" />
      <TextBlock VerticalAlignment="Center" Text="Label 3" Grid.Row="2" />
      <Button Content="Button 3" Grid.Row="2" Grid.Column="1" />
    </Grid>
  </c1tb:C1ToolbarDropDown>
</c1tb:C1ToolbarStrip>

Which would create the following:

The Grid panel is the most versatile panel available in Silverlight and in WPF. It can host any type of element and lay it out over single cells or cell spans, with the usual choices of vertical and horizontal alignment. You can leverage all this power directly from your C1ToolbarDropDown elements.

3. Creating dropdowns that appear on mouse hover

Many web pages have menus that dropdown when the mouse hovers over them (as opposed to when the user clicks them).

To accomplish the same effect with a C1ToolbarDropDown, we need to do the following:

Handle the MouseEnter event of the C1ToolbarDropDown to show the dropdown.
Handle the MouseLeave event of the C1ToolbarDropDown and of the dropdown itself to start a timer that will close the dropdown. This is better than closing the dropdown immediately because it makes the UI more forgiving. Users can move the mouse away and back to the control without having the dropdown disappear if they make a slightly imprecise move.
Handle the MouseEnter event of the C1ToolbarDropDown and of the dropdown itself to stop the timer and prevent the dropdown from closing if the user moves the mouse back over the dropdown within a short time.

As you can see, showing the dropdown is easy. Hiding it at the right time is more difficult.

To accomplish this, we define a HoverDropDown class that looks like this:

   public class HoverDropDown : C1ToolbarDropDown
  {
    Popup _helper;
    Rectangle _rect;
    DispatcherTimer _timer;
 
    public HoverDropDown()
    {
      // create timer to hide the dropdown when the mouse moves away
      // from the toolbar item itself and from the dropdown
      _timer = new DispatcherTimer();
      _timer.Interval = TimeSpan.FromSeconds(0.5);
      _timer.Tick += _timer_Tick;
 
      // create transparent element to detect mouse movement over the 
      // toolbar item
      _rect = new Rectangle();
      _rect.Fill = new SolidColorBrush(Colors.Transparent);
      _helper = new Popup();
      _helper.Child = _rect;
 
      // start/stop the timer when mouse leaves/enters the toolbar item
      _rect.MouseLeave += (s, e) => _timer.Start();
      _rect.MouseEnter += (s, e) => _timer.Stop();
    }

The HoverDropDown class derives from C1ToolbarDropDown and defines a timer to hide the dropdown as described above. In addition to the timer, the class defines a Rectangle object that will be used to detect mouse movements over the control itself (regardless of its contents).

When the mouse leaves the Rectangle, the timer starts ticking. If the mouse returns to the control before the specified delay has elapsed, the timer stops before the dropdown closes.

Next, we need to attach similar event handlers to the dropdown element itself. This can be done using the OnApplyTemplate method as shown below:

   // connect our timer to the dropdown element (popup child)
  public override void OnApplyTemplate()
  {
    // allow default handling
    base.OnApplyTemplate();
 
    // get the dropdown element from the template
    var popup = GetTemplateChild("DropDownPopup") as Popup;
    var popupChild = (FrameworkElement)popup.Child;
 
    // start/stop the timer when mouse leaves/enters the dropdown
    popupChild.MouseLeave += (s, e) => _timer.Start();
    popupChild.MouseEnter += (s, e) => _timer.Stop();
  }

Next, we need to override the OnMouseEnter method to show the dropdown and to position the Rectangle element declared earlier so it will detect mouse movements while the dropdown is visible:

   // drop down when mouse enters the toolbar item
  // control, setup to detect when the mouse leaves the dropdown element
  protected override void OnMouseEnter(MouseEventArgs e)
  {
    // allow default handling
    base.OnMouseEnter(e);
 
    if (!IsDropDownOpen)
    {
      // drop down now
      IsDropDownOpen = true;
        
      // update mouse detector position
      Point pt = TransformToVisual(null).Transform(new Point());
      _rect.Width = ActualWidth;
      _rect.Height = ActualHeight;
      _helper.HorizontalOffset = pt.X;
      _helper.VerticalOffset = pt.Y;
      _helper.IsOpen = true;
    }
  }

And finally, we need to implement the timer's Tick event handler which will close the dropdown half a second after the mouse has left the control or the dropdown:

   // close pop-up 0.5 seconds after the mouse leaves the pop-up area
  void _timer_Tick(object sender, EventArgs e)
  {
    IsDropDownOpen = _helper.IsOpen = false;
  }

That concludes the implementation of the HoverDropDown class. You can use it in XAML exactly as you would use the base C1ToolbarDropDown class:

   <c1tb:C1ToolbarStrip >
    <local:HoverDropDown Padding="3" Header="Hover">
      <StackPanel Orientation="Vertical">
        <CheckBox Content="Check box 1" />
        <CheckBox Content="Check box 2" />
        <CheckBox Content="Check box 3" />
      </StackPanel>
    </local:HoverDropDown>
  </c1tb:C1ToolbarStrip>

Showing an image would not help illustrate the customized behavior. To see the HoverDropDown in action, please build and run the sample included with the article.

Downloads

Download Studio for Silverlight: Get your 30-day, full-featured trial
Download C1Toolbar Samples: C1Toolbar_Sample_Projects.zip

Welcome to WPF & Silverlight blog

C1_GregL — Mon, 25 Jan 2010 22:32:00 GMT

This blog is for anything exciting and new from the ComponentOne WPF & Silverlight development team.

How ComponentOne Web Parts Improve the SharePoint Experience

C1_EveT — Fri, 22 Jan 2010 16:55:00 GMT

Read this document to learn how our Web Parts are unique and how they will help you. You will learn details about each benefit ComponentOne Web Parts deliver as well as screen shots, and links for documentation, tutorials, and samples. http://www.componentone.com/newimages/products/datasheets/HowC1WebPartsHelp.pdf

Easy Data Views in SharePoint - Studio for SharePoint Just Released!

C1_EveT — Wed, 20 Jan 2010 21:11:00 GMT

Studio for SharePoint includes the only Web Parts (DataGrid, Chart, and Maps) that give you a point-and-click interface to select the data sources and completely configure how the data is displayed.

Check it out at: http://www.componentone.com/SuperProducts/SharePointWebParts/

Join WritersUA for a 4-day conference on software user assistance

C1_EveT — Tue, 19 Jan 2010 20:05:00 GMT

The focus is on developing the best possible user experience for all types of software applications through well-designed interfaces and helpful and accessible support information. Stop by our booth #7 and attend Nicky Bleiel's (our "Ask the Expert" author) sessions: "Speed Sketching" A Software Documentation Project and the "User Assistance Trends" panel. http://www.writersua.com/ohc/index.html

Visual Studio 2010 beta Compatibility

C1_EveT — Fri, 15 Jan 2010 19:46:00 GMT

http://helpcentral.componentone.com/CS/blogs/windev/archive/2010/01/15/visual-studio-2010-beta-compatibility.aspx

Visual Studio 2010 beta Compatibility

C1_GregL — Fri, 15 Jan 2010 17:54:00 GMT

If you convert an existing project or solution to Visual Studio 2010 beta there should be no problem. But if you are creating new projects within VS2010 beta there are a couple things you need to know when using ComponentOne WinForms controls.

You cannot target .NET 4.0 Client Profile (which is the default for any new WindowsApplication.)
The ISupportInitialize BeginInit and EndInit methods do not get generated automatically when you drop a new C1 control on the form.

Workarounds

1. Targeting .NET 4.0 Framework

To use ComponentOne WinForms controls under .NET 4, you must target the full .NET 4.0 Framework. By default, new projects are set to target the .NET 4.0 Client Profile. ComponentOne controls depend on the full framework to run properly. If your application is targeting the Client Profile, ComponentOne controls will not appear in the toolbox, and you’ll receive errors regarding System.Design.dll.

To change this setting for C# applications: go to the project's properties (from the Visual Studio menu, select Project | Properties...) and from the Application tab change the Target framework to ".NET Framework 4".

To change this setting for VB applications: go to the project's properties (from the Visual Studio menu, select Project | Properties...) and from the Compile tab click the Advanced Compile Options…. From this window change the Target framework to ".NET Framework 4".

Upon changing this you will be prompted to close and reopen the project.

2. Adding New Controls to the Form

When you add a new C1 control onto your form in Visual Studio 2010 beta, everything should appear fine until you go to run the form. The control will be missing. This is because of a bug in Visual Studio where the ISupportInitialize’s BeginInit and EndInit methods are not added automatically.

The fix is real simple. Just open up your designer-generated code and add these missing method calls.

For C# applications, open up <YourForm>.Designer.cs and add the following two lines of code above the form’s SuspendLayout and ResumeLayout methods (replace c1Chart1 with the name of your control).

((System.ComponentModel.ISupportInitialize)(this.c1Chart1)).BeginInit();
this.SuspendLayout();

...

((System.ComponentModel.ISupportInitialize)(this.c1Chart1)).EndInit();
this.ResumeLayout(false);

For VB applications, click the “Show All Files” button from the Solution Explorer and then open <YourForm>.Designer.vb. Add the following two lines of code above the form’s SuspendLayout and ResumeLayout methods (replace C1Chart1 with the name of your control).

CType(Me.C1Chart1, System.ComponentModel.ISupportInitialize).BeginInit()
Me.SuspendLayout()

...

CType(Me.C1Chart1, System.ComponentModel.ISupportInitialize).EndInit()
Me.ResumeLayout(False)

You will need to do this for each C1 control added to your form.

The good news is this bug will be fixed in the official release of VS2010.

Studio for WPF

Regarding ComponentOne WPF controls...if you convert your existing project to VS2010 beta you should have no problem. We have reported errors of adding C1Chart and C1DataGrid to the toolbox and dragging them to a new form. These will be addressed for the official release.