CollectionView in Javascript

Every application deals with data and end users have functionalities like sorting/filtering/grouping the data. As a developer, you performs these operations either using the jQuery based widgets at client side or manually do at server side. But with CollectionView concept in Javascript , all these can be handled easily without much code.

CollectionView is mainly used in XAML applications. It’s a very powerful concept since it provides a layer that wraps the actual data and performs various operations like sorting, filtering, grouping etc. without affecting the actual data. In simple terms, you can think it as DefaultView of the datatable.

Wijmo 5 provide a solid infrastructure based on a powerful and familiar data layer i.e. CollectionView. The CollectionView class implements the following interfaces:

  • ICollectionView: provides current record management, custom sorting, filtering, and grouping
  • IEditableCollectionView: provides methods for editing, adding, and removing items.
  • IPagedCollectionView: provides paging.

So what are we waiting for !

Let’s start. The first thing is to create a CollectionView and for that you just need to pass the datasource in its constructor like this:

// create a new CollectionView
var cv = new wijmo.collections.CollectionView(myArray);

You can sort the data using SortDescription. It defines the direction and the property name to be used as the criteria for sorting a collection. Here is a small example:

// sort items by amount in descending order
var sd = new wijmo.collections.SortDescription('amount', false);

The CollectionView actually maintains a stack of SortDescription objects, each of them being a structure can hold information of a Column and the Direction of sorting. Hence, you can add multiple instances of it in order to have multiple column sorting.

It requires a delegate (Predicate) based on which filtering will occur. The Predicate takes in the item and based on the value, it returns true or false i.e. selects or unselect an element like the following :

// show only items with amounts greater than 100
cv.filter = function(item) { return item.amount > 100 };

Simply add PropertyGroupDescription in the groupDescriptions collection to create groups. GroupDescription objects are flexible, allowing you to group data based on value or on grouping functions. Here is small code snippet demonstrating how you can create groups based on amount range:

if (groupName == 'amount') { // ** group amounts in ranges
var groupDesc = new wijmo.collections.PropertyGroupDescription(groupName, function (item, prop) {
return item.amount >= 5000 ? '> 5,000' : item.amount >= 500 ? '500 to 5,000' : '< 500';

This is just a brief introduction about the CollectionView . Apart from these, the CollectionView class can keep track of changes made to the data and can manage the current record through APIs. You can manage editing, adding, and removing items, paging etc. It also implements INotifyCollectionChanged Interface which notifies listeners of dynamic changes, such as when items get added and removed or when the collection is sorted, filtered, or grouped.

I would suggest you to checkout this sample describing CollectionView in detail. And feel free to revert in case you have any questions/feedback.

Coding Chart Animations

Animation is an important emerging field of graphics. It can add a visual impact in a dull business application. Animated charts have obvious advantages over static charts when explaining subject matter that changes over time.

ComponentOne Chart for WPF/Silverlight provides in built support for Animations.
Visit our blog post Getting Started with Chart Animation in XAML to implement the same in XAML.

With this blog post, we will discuss how to CODE Animations in Chart.

Lets take a simple example from our documentation :


We will implement the same XAML markup in code behind at runtime by coding every line which is stated in the markup:

Loading new Data on MouseLeftButtonDown

Basically the animation performed in this blog deals with loading of the new data on chart’s MouseLeftButtonDown.

chart.MouseLeftButtonDown += (s, e) =>
   //create chart data
   var vals = new double[rnd.Next(5, 10)];
   for (int i = 0; i < vals.Length; i++)
   vals[i] = rnd.Next(0, 100);
   chart.Data.Children.Add(new DataSeries() { ValuesSource = vals });
   chart.View.AxisX.Min = -0.5;
   chart.View.AxisX.Max = vals.Length - 0.5;
   //handle the PlotElementLoaded event
   chart.Data.Children[0].PlotElementLoaded += MainWindow_PlotElementLoaded;

Creating the Animation

Here we will see how to:

-Create a PlotElementAnimation object
Style the plotting symbol
-Define the Storyboard
Load the animation into the Chart

private void chart_Loaded(object sender, RoutedEventArgs e)
   //Create a new PlotElementAnimation object
   PlotElementAnimation animation = new PlotElementAnimation();

   //Set the style to assign to the PlotElementAnimation 
   Style style = new Style(typeof(PlotElement));
   style.Setters.Add(new Setter(PlotElement.OpacityProperty, 0.0));
   animation.SymbolStyle = style;

   //Set the storyboard to be assigned to the PlotElementAnimation
   Storyboard storyboard = new Storyboard();
   DoubleAnimation doubleAnimation = new DoubleAnimation(1.0, new Duration(new TimeSpan(0, 0, 1)));
   Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(PlotElement.OpacityProperty));
   PlotElementAnimation.SetIndexDelay(doubleAnimation, 0.5d);
   animation.Storyboard = storyboard;

   //Set the object to PlotElementAnimation Data.LoadAnimation property of the Chart control
   chart.Data.LoadAnimation = animation;

Next, we need to handle the PlotElementLoaded event to handle the scenario wherein the plot elements are loaded one by one and not all at once.

void chart_PlotElementLoaded(object sender, EventArgs e)
   //Specify the plot elements of the story as the target board
   PlotElement pe = sender as PlotElement;
   var doubleAnimation = chart.Data.LoadAnimation.Storyboard.Children[0] as DoubleAnimation;
   if (doubleAnimation != null)
      Storyboard.SetTarget(doubleAnimation, pe);

Many other scenarios wherein Animations in Chart come handy are possible with C1Chart. For instance, the image below depicts yet another example of Animations in Chart, here the Animations are re-loaded upon a Button click.

Let us know if you have any special requirements. We would be happy to cater them🙂

Binding Spread Control using WCF service

Accessing the data at remote location has been an exciting feature ever since the Data Services came in to picture. Where Windows Data Services enable accessing data locally, Web Services extended this feature allowed us to access data on LAN and WAN.

However accessing data through Web Services is not a secure transaction because WebServices use SOAP 1.1 specification. Data is sent as plain text with no security. This problem was resolved by WCF data services. WCF Data Services use SOAP 1.2 specification where it supports wsHttpBinding to send data over HTTP protocol in XML format.

This blog is about binding ComponentOne Spread control to DataTable sent via WCF service over HTTP protocol. One of the most important part of this blog is sending and receiving DataTable through WCF service. This is not a common practice at all but as a developer you would like to know whether and how a DataTable can be accessed via WCF Service.

First we will write code to create a WCF service and later we will consume this service in Web application using for ComponentOne Spread. Start a WCF project as shown in the image below:


Now in IService Interface let’s declare a function marked as OperationContract which will perform data operation for our service.

public interface IService
DataTable GetData();
//In Service.cs file let’s provide the definition for the above method.
public class Service : IService
public DataTable GetData()
DataTable dt = new DataTable();
SqlConnection cpn = new SqlConnection(@"Data Source=MachineName\SQLEXPRESS;Initial Catalog=master;Integrated Security=True");
SqlDataAdapter adap = new SqlDataAdapter("Select * from Employee", cpn);
adap.FillSchema(dt, SchemaType.Mapped);
return dt;

In the above code GetData method retrurns a DataTable. First a blank DataTable, a SqlDataConnection and a SqlDataAdapter is created. Thereafter the connection is opened to perform transactions and then FillSchema() method for SqlDataAdapter is called. Now the question which is coming to your mind is why we need to FillSchema() method when we can directly fill the DataTable with data using the Fill() method. Actually FillSchema() is going to play a measure role here. As we all know FillShema() method is used to retrieve the structure of the table and not the actual data. We would need this structure when this data table is serialized and deserialized while working with WCF. Once the data structure is retrieved we fill the DataTable with data using the SqlDataAdapter’ s Fill() method. Now DataTable is ready which we are going to access via WCF.

Now let’s create an EndPoint for our WCF service. Basically EndPoint is an entry point where WCF service will be accssed. As we are going to access this WCF service in a web application we are using “basicHttpBinding” . Please have a look at the code below that we use to create an EndPoint in Web.config file of your WCF project.








I chose to create this WCF project on HTTP only which by default host the project on IIS. If you have chosen to create your project on “File System” then you would need to first host this service on IIS. Run this Service on IIS and gives you a URL:


Copy this URL and paste it in notepad for future use.

Now start a new ASP.Net project where we would consume this service. Place CompoenentOne Spread on to the aspx page which we will bind to the data table received from service. In project’s Solution explorer right click on the project and click on “AddServiceReference”. It opens up a window similar to this:


Paste the URL copied to the notepad in the Address box and click on “Go” button. It will generate a namspace for the WCF service which is going to help you to access the method exposed by this WCF service. In the code behind window let’s create proxy for this Service and try to get the data table:


ServiceReference1.ServiceClient s = new ServiceReference1.ServiceClient();

DataTable dt = s.GetData();


It seems that proxy is successfully created as it is able to access the GetData() method defined in the service remotely.

Now set the DataTable as a DataSource for ComponentOne Spread:


FpSpread1.DataSource = dt;


Let’s run this web project to see if everything is working as desired and can we get the data shown in ComponentOne Spread.


It works!!!

Hope you enjoyed reading the blog and got to learn something new. You may download the sample from here:

After downloading the sample please change the connection path for data base and the data table name as well.

Save Hidden Chart Images

C1Chart can be directly exported to a variety of image formats including Bmp, Png, Gif, Jpeg, Tiff and Wmp. It provides a SaveImage method to implement the same.

A typical user scenario here can be of a TabControl containing chart objects in its Tabs and the user wishes to save all the chart images at once without viewing them.

This blog talks about how one can achieve the same using C1WPFChart.

Populate the Charts with some data

First of all populate the chart objects contained inside different tabs of the TabControl with some random data.

// create tabs with charts
for (int i = 0; i < cnt; i++)
charts[i] = new C1Chart() {ChartType = ChartType.Line};
var values1 = new double[npts];
var values2 = new double[npts];
var values3 = new double[npts];

for (int j = 0; j < npts; j++)
    values1[j] = rnd.Next(100);
    values2[j] = rnd.Next(100);
    values3[j] = rnd.Next(100);
charts[i].Data.Children.Add(new DataSeries() {ValuesSource = values1, Label = "series1" });
charts[i].Data.Children.Add(new DataSeries() { ValuesSource = values2, Label = "series2" });
charts[i].Data.Children.Add(new DataSeries() { ValuesSource = values3, Label = "series3" });
charts[i].Palette = ColorGeneration.Solstice;
charts[i].Children.Add(new C1ChartLegend() { Title = "Chart " + i });

tabs.Items.Add(new TabItem() 
    Header = "Tab " + i,
    Content = new Grid() { Children = { charts[i] } } 

Save the Chart Images

Then, save all the Chart images in different file(s) on button click.
For generating chart images from inactive tabs as well, we need to make use of the Chart’s Arrange and UpdateLayout method to perform the correct layout for the chart objects.

private void SaveBtn_Click(object sender, RoutedEventArgs e)
    // use size of visible chart
    var sz = new Size(charts[0].ActualWidth, charts[0].ActualHeight);
    for (int i = 0; i < cnt; i++)
    using (var file = File.Open("chart" + i +  ".jpg", FileMode.Create))
        // two arranges is neccesary to perform chart layout
        charts[i].Arrange(new Rect(0, 0, sz.Width, sz.Height));
        charts[i].Arrange(new Rect(0, 0, sz.Width, sz.Height));

        charts[i].SaveImage(file, ImageFormat.Jpeg);


This comes to an end of one particular user scenario. There can be many others as well. We are open to your suggestions and implementation of other user scenarios. We would be happy to look into them🙂

Download Sample CS
Download Sample VB

Magic Of HitTest in OLAP

ComponentOne OLAP for WinForms helps to create interactive tables, charts, and reports.
The C1OlapGrid contained within the C1OlapPage control extends the C1FlexGrid control, our general-purpose grid control. This means the whole C1FlexGrid object model is also available to C1Olap users.

With this blog, we will provide customizations in C1Olap via ‘HitTest‘ method of C1FlexGrid.

Custom Details View Dialog

The default Details View Dialog displays the cell information in the C1OlapGrid within the C1OlapPage by right clicking a particular cell in grid.

This dialog could be customized with the help of ‘HitTest’ method and the information relevant to a particular user scenario could be displayed.

Here is how the dialog could be customized :

//Get Clicked Data on the BeforeMouseDown event of the grid
_c1OlapPage.OlapGrid.BeforeMouseDown += (_s, _e) =>
//check if the cell is right clicked 
if (_e.Button == MouseButtons.Right && _e.Clicks > 0)
    //store the HitTest information in a variable 'hti'
    C1.Win.C1FlexGrid.HitTestInfo hti = _c1OlapPage.OlapGrid.HitTest(_e.X, _e.Y);
    // make sure we are working with a cell
    if (hti.Type == C1.Win.C1FlexGrid.HitTestTypeEnum.Cell)
        // get data using OlapEngine
        var data = _c1OlapPage.OlapEngine.GetDetail((_c1OlapPage.OlapGrid.Rows[hti.Row].DataSource as DataRowView).Row, _c1OlapPage.OlapEngine.OlapTable.Columns[0].ColumnName);
        Form f = new Form();
        f.Size = new Size(400, 250);
        f.StartPosition = FormStartPosition.CenterParent;
        f.Text = "Customized Detail View : " + data.Count.ToString() + " records";
        C1.Win.C1FlexGrid.C1FlexGrid flex = new C1.Win.C1FlexGrid.C1FlexGrid();
        flex.Dock = DockStyle.Fill;
        flex.DataSource = data;
        //display the custom dialog form


Copy information from the Row Headers

The Information displayed on the Fixed columns of the C1OlapGrid is not accessible as such.
However, there can occur a need to use this information.
We can again make use of the 'HitTest' method here to access that information from the Row Headers of the C1OlapGrid.
For doing this, we will make use of the Clipboard object to store the information copied from the row headers and then this could be pasted and used in particular user scenarios.
To copy this information from the RowHeaders of the grid, we will employ a cotextmenustrip on the grid.

Here is how this could be done :

//Get Clicked Data on the BeforeMouseDown event of the grid
_c1OlapPage.OlapGrid.BeforeMouseDown += (_s, _e) =>
//check if the cell is right clicked 
if (_e.Button == MouseButtons.Right && _e.Clicks > 0)
    //store the HitTest information in a variable 'hti'
    C1.Win.C1FlexGrid.HitTestInfo hti = _c1OlapPage.OlapGrid.HitTest(_e.X, _e.Y);

    // make sure we are working with the row header
    if (hti.Type == HitTestTypeEnum.RowHeader)
        //assign a contextmenustrip to the olapgrid
        _c1OlapPage.OlapGrid.ContextMenuStrip = contextMenuStrip1;
        //get the row header text in some variable 'clickeddata' 
        clickeddata = _c1OlapPage.OlapGrid.GetData(_c1OlapPage.OlapGrid.MouseRow, _c1OlapPage.OlapGrid.MouseCol).ToString();


//handle the click event of the 'Copy' menu item on the contextmenustrip
private void copyMenuItem1_Click(object sender, EventArgs e)
        //store the captured data from 'clickeddata' in a clipboard object
        _c1OlapPage.OlapGrid.ClipboardCopyMode = ClipboardCopyModeEnum.DataOnly;
        Clipboard.SetData(System.Windows.Forms.DataFormats.StringFormat, clickeddata);
    catch(Exception ex)
        //display the error message


Many more customizations like this are possible in C1Olap.
We are open to your suggestions and requirements🙂

Download Sample CS
Download Sample VB

ActiveReports : Section Reports vs Page Reports

ActiveReports is one of the most powerful report designers in the market. ActiveReports doesn’t just offer an easy reporting solution; it also offers a flexible reporting style.

It is the only product in market that offers two different reporting formats in just one ReportingTool. Hence, not just providing more options of reporting but also a better value for money.

Why a Reporting Tool?

Collecting and organizing data is one of the most cumbersome tasks for most of us. But a reporting tool not just makes it easier but also more organised and presentable. With a reporting tool, we just need to provide the datasource, set a few properties here and there and data can be represented in groups, charts, tables etc. Hence, a format that is far more acceptable and easier to comprehend from a user’s perspective.

ActiveReports offers this and much more as an integrated ad-hoc report designer for Microsoft .Net developers. It also offers Multiple Report types to fit the needs of one and all.

Section-Based Reports

Section-based reports are the banded reports with predefined sections namely – Page header , Detail , Page footer. From Invoices to Budget and Sales-Accounting reports or even a school report card, virtually any report can be divided into these 3 basic sections. Reporting eventually reduces down to just binding data to control or providing a data source to fetch from and leaving the reporting engine to render beautiful and professional reports.

We can further customize these reports using code/scripts in the report events. The detailed concepts (structure/events etc.) of SectionReports are discussed here.

User Scenario :
Lets consider a case of a supermarket where a simple invoice needs to be generated on the basis of the products sold.

The invoice will start with the name of the store, its address and contact details, followed by a summarized view of total amount due before taxes, taxes involved and amount due after taxes. It will then display the list of all purchased items, their quantity and final price. This list may go on till several pages and finally the total amount, calculation for taxes and the final amount due would be displayed.

The design of the report would be in the following manner :
ReportHeader would have the fields displaying : name of the store, its address and contact details
Detail would have the fields displaying : purchased items, their quantity and final price
ReportFooter would have the fields displaying : total amount, calculation for taxes and the final amount due

The final report would look like the following :



Page-Based Reports

Sometimes designing of reports requires that each page be designed to a specific need. Even though many workarounds can be created with Section based report it becomes a little painstaking. Page based reports are the perfect solution in such scenarios.

In this case, each page is an object and can contain controls both that need to be fixed and that need to be repeated to show data from a data source.

Even PageReports offers two layouts to meet all the user-needs and provide the most interactive options.

1. Fixed Page Layout :

This kind of layout is a 100% ‘What you see is what you get’. Each page is a canvas and the controls can be dropped anywhere on it. Unlike SectionReports it does not have a fixed header/footer and hence this report can be best the option when Vertical PageHeaders are required.

Under ideal condition, the fields are not allowed to grow/shrink and hence we may design it exactly the way we want it to get displayed. However, this isn’t any limitation and Page-Based reports does have specially designed controls to handle such situations. They can be placed according to need where we wish to display the overflown data.

This kind of reporting is best for creating form based reports and multiple layout reports.

User Scenario :
Lets again talk about the SuperMarket. This time from a different perspective to handle the billing. Everytime a bill would be generated, it will have the name of the store, its address and contact details at the top of each bill. It will then display the list of items purchased by the customer and sum total of the bill.

A desirable situation would be to have two copies for this bill: one for the store and one for the customer. The store’s copy will have a ‘Merchant’s Copy’ message and might also include customer’s detail (name, contact number) for further follow up. It might also include the name of the person at the billing counter for the day. Since the details are specific, we can use parameters to enter them at the time of report generation. On the other hand, the customer’s copy would have a ‘Customer’s Copy’ message, store’s tollfree helpline number and the other messages like ‘NoRefund/NoExchange’, ‘Thank you for Shopping’ etc.

In such a scenario, a report with two pages (one for cutsomer’s copy and other for store’s copy) can be created and each page would have a different layout.

The final report in this case would look like the following :


2. Continous Page Layout :

The CPL report is the most interactive type of report. Controls can grow and shrink, one can set up interactive sorting, drill-down reports in which detail data is initially hidden, and can be toggled by other items, and add drill-through links to other reports and to bookmark links within reports. CPL reports are ideal when you need to show data from different data sets, and when you do not need to control where the data appears on the page.

Hence, the CPL offers best of both worlds. The liberty to design each page according to need and the fun of not bothering about how much space is allotted to which control.

User Scenario :
Considering the Supermarket example once again, how would CPL fit in this scenario. It would be best suited in a situation when the Supermarket might want to create an ‘end of the year’ report highlighting its total sales that year (Category wise) with a chart representation of the same, list of the 5 most loyal customers and its 5 most valuable employees.

Designing this report will be a breeze with CPL.

The final report would look like the following :


5 Cool Features of ActiveReports 8

Reporting is both a dream and a nightmare for any technical personnel.

With the release of ActiveReports 8, we are proud to say that reporting has reached a new level. Reporting is no longer limited to just displaying data.

New graphical components for enhanced data visualization, a load-balanced and distributed server platform, a new ad-hoc designer for simple, self-service reporting for your end users, ActiveReports 8 has something for both the developers and the non-developers.

Here are the 5 Coolest ‘New’ features of ActiveReports 8:

1. HTML5 Viewer :

A brand new viewer has been added to preview reports.

The HTML5 Viewer is a Javascript component that you can use in various web applications, to preview reports, hosted on ActiveReports 8 Server or ActiveReports 8 Web Service.


Offering a whole new level of experience of reporting to its users, the HTML5 Viewer provides the following advantages over other viewers:

  • Ability to view reports anywhere (iphone, ipads, desktops etc)
  • Interaction with drill-down reports
  • Export Report Output on any mobile devices
  • Extensive Customization API

2. Maps Control :

A new ability has been added to PageReports to visualize geographical data using Maps.

For quick visualization of data various layers (Polygon, Tile, Line and Point) can be used, individually or in combination, as per requirement.


It provides the ability to integrate with Bing Maps, ESRI Shape files, and built-in Tiles and Polygons also.

The various coloring and zooming options doesn’t only make the report more interactive, but also enhances its UI.

3. Touch Support for Report Viewers :

Today, as we progress into the era of Touch Devices, ActiveReports 8 has begun to provide the Touch-Enabled Report Viewers (specifically for Winforms/WPF). Hence, ensuring more usability of the product, for your customers having Touch-enabled laptops/tablets.

Just install ActiveReports 8 on any touch enabled device and you can view the reports using a few basic touch gestures even on the go.


4. WPF Viewer :

The ActiveReports 8 report control is committed to providing the best statement for the organization and individual solutions. Hence, to  meet the rapidly increasing market demands,  ActiveReports 8 now offers WPFViewer. This viewer no longer uses the WindowsFormsHost control internally to display report output. It is a custom control that allows you to easily view both section and page report layouts.


Also, since it is a customizable control, one can easily change the look of the WPF Viewer and its elements as per requirement.

5. BarCodes :

ActiveReports 8 also expanded its support for GS1Composite Options available for the RSS14Stacked and RSSLimited barcode styles. To control compaction and seconds, MicroPDF417 Options has been added.

To experience the whole new world of reporting, download your copy of the trial version of ActiveReports 8 now.