Working With FlexSheet: Downloading and Getting Started

Downloading the FlexSheet Sample

Introduced in our 2015v2 (mid-summer) release, FlexSheet is available via download from our website. I encourage you to go create an account if you haven’t already and login to download the newest release. You can also subscribe to our newsletter to receive updates about future releases.

1. Download and extract the .zip file.
2. Open up the Wijmo5 folder.
3. Under Samples, open the Angular folder
4. You'll see a folder called ExcelBook, which incldues FlexSheet. Open that solution file in Visual Studio.
5. Once you have the solution, expand the scripts folder in the ExcelBook project.
6. Within the Scripts folder, expand the Wijmo.angular subdirectory.

Inside the Wijmo.angular subdirectory, you'll see Wijmo.angular.flexsheet.ts, the TypeScript file that contains the code for the FlexSheet. This is where the directives are for FlexSheet control. You'll see other files in there, such as the ExcelConverter code, and the subclasses for the Wijmo.grid.sheet, such as cells, scrolbars, contextmenu, etc. Now that we understand the structure of the sample and what you'll need, let’s load the FlexSheet in a web browser and bind data to it.

Getting Started with FlexSheet

Getting started with Wijmo5 is straightforward. To begin, we add the references to AngularJS, Wijmo, and with Wijmo’s AngularJS library as well as Wijmo’s CSS, as we discussed above. After we add either local references or reference the CDN, include the Wijmo5 directives in the app module. It's important to note here for those that have used Wijmo in the past: in this case we need an additional dependency that we usually don't require.

var app = angular.module('app', ['wj', 'wj.flexsheet']);  

Next, we add a controller to provide some logic. Inside the controller is where we define our data provider. I'm not including the getData function here, but you can see the logic in the attached sample.

angular.module('app').controller('basicController', function ($scope, dataService) {  
data: dataService.getData(50)  
}  

Next, add the FlexSheet control host element to our view and define some properties. In this case, the sheets.

Fnially, add some CSS to customize the appearance of the control. Note: at this point we aren’t able to import and export Excel files. This requires some additional functionality that I'll get into in a later blog. Read more about FlexSheet >>

Resources

Follow me on GitHub Link to Download Wijmo