Creating Excel like grid in Silverlight – C1FlexGridBook

If you are developing a business application, you will run into a situation where the end users want to export the data to excel and do some work there and then import the sheet back to the application. This is very normal, the main reason the users ask for it because Silverlight does not have a grid which look and behaves like Excel. There are bunch of work around for this, but I really like the C1FlexGridBook control from Component One. This gird out of the box gives excel like look and feel with less amount of code. Some of the basic features like created tabbed sheet at the bottom of the control to look like worksheets in Excel and many more.

Lets see how to create a simple excel like grid using C1FlexGridBook. What we need to create is Component One dlls for


We need Excel, FlexGridBook and FlexGridBook.

So how do we go about adding the control. So in the XAML I created simple tag for C1FlexGridBook as follows


I am planning to create the columns in the code behind (I am trying figure out a problem so two birds with single stone). The data that I am binding is a collection of customers like the following


where the data structure is


When the page is navigated to the pages I create a customer collection like the following


Now all is left is to create the sheets and bind the data to the grid in each sheet. Here is where you have to be very careful. I would strongly recommend you to create skeleton sheets but do not creating individual grid with data binding, rather, you create the grid for the first and default sheet or the sheet the user wants to see. So here are the steps

Create the sheets with AddSheet and pass in the sheet name as the first parameter as shown below.


We also bound out collection to grid by doing that, the current grid associated with the sheet get the data from customers. We set the autogenerate to false since I have collection that I want to appear properly. So below create the dynamic columns on the fly


now the question is why would I need a cell template? Since the data is boolean I want to display a check box rather than textblock.


That’s it. Now if you would run the code you will see a result something like the following,


With very little code from control perspective, we got a grid which looks like excel. If you notice, it has following excel features out of the box

1. Row and Column numberings.

2. Office theme.

3. Fixed column heading for application.

4. Default Excel like filtering.

5. At the bottom, you see the sheets and also it comes with default behavior to let the user create new sheets.

6. Excel like navigation to move between sheets with forward and backward navigation button.

7. Navigate to first or last sheet with fast navigation.

8. If you have lot of sheets and want to navigate to a specific sheet, then right lick on the left or right navigation, it shows available sheets and just click on the sheet name you navigate to that sheet.

I really enjoyed working with this control. If you like it or would like to know more about this control send me a note.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s