Welcome to Wijmo 5 FlexGrid! In this video, we'll learn how to:
- Create a basic Wijmo 5 FlexGrid control
- Bind it to an item source
- Add to your Wijmo5 application
- Include necessary references in your application
- Create a control host
- Instantiate a new FlexGrid control
If you haven’t already downloaded Wijmo, get your fully-featured watermarked trial now.
Code Snips
// create FlexChart
var gettingStartedGrid = new wijmo.grid.FlexGrid('#gettingStartGrid');
// generate some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
// initialize FlexChart's properties
gettingStartedGrid.initialize({
itemsSource: data,
});
Transcript
Intro
Hello, everyone. In this video I will show you the simple steps of adding a Wijmo5 FlexGrid to your HTML5 web application.
Configure Project
To begin, we want to download Wijmo5 from Wijmo.com. Once we have the downloaded zip files, open it up. Inside the Dist folder, you will find the Wijmo5 controls collection, as well as our CSS and Angular and Knockout Interops. Let’s open up controls and copy our base class, Wijmo.js, and our grid modules, Wijmo.grid.js, and copy them into our project. Next, we need to include the base css library, Wijmo.css, as well as one of our professionally-made themes. Now that we have our project setup, let’s open it up in our favorite IDE.
Creating the App
To begin, I need to create a new file called index.html. Next, I need to copy the HTML and BODY tags into my application, and let’s give it a title. Under our title, we need to include the two Wijmo5 javascript files we copied into our project folder. After we have loaded the JS, we need to link our base CSS and the theme that we selected. Next, we want to add a control host to our application. For the grid, we can use a standard HTML div. We will assign it a unique ID--here, called gettingStartGrid. Under our control host, add a place to add some JavaScript.
Configure The Control
We want to create some generic data. Here we have an array of countries, and we generate some random data to populate it. Next, we will declare a new instance of the FlexGrid and call it gettingStartedGrid so we can reference it later in the application. You will see we declare a new Grid, and pass it the ID of our control host from our markup. (This tells Wijmo5 where to place the control.) The last step is to initialize some properties of the Grid. You can find a list of all of the APIs on the website. We will bind our charts itemsSource to our data array.
Run the application
If we run the application we should see a FlexGrid on your screen.
You can learn more about FlexGrid and other JavaScript controls at Wijmo.com.
GrapeCity