Freezing Rows and Columns in FlexGrid Using Wijmo

When displaying data inside a DataGrid, there may be times when you want to freeze rows or columns to always view, no matter where the user is in the grid. Wijmo's FlexGrid control makes this simple and straightforward to accomplish.

In this blog, we will outline how to freeze both rows and columns inside a FlexGrid control and how to toggle freezing and unfreezing rows and columns.

Wijmo offers the fastest, most flexible JavaScript DataGrid with features including sorting, grouping, searching, Excel-like filtering, DataMaps, custom CellTemplates, sparklines, rich editing, Excel/PDF export, validation, DetailsRows, and more.

You can download the entire Wijmo component library here.

How to Import the Required Modules

Before we can create our FlexGrid control, we will need to import the required Wijmo modules in our JavaScript file:

import ‘@grapecity/wijmo.styles/wijmo.css’;  
import { FlexGrid } from ‘@grapecity/wijmo.grid’;

Here, we import both the FlexGrid component from Wijmo's grid module and Wijmo's CSS file so that the grid is correctly styled when upon creation.

Generate Data and Create the FlexGrid

Next, we’ll need to generate a set of data for the FlexGrid to use, as well as initialize our FlexGrid control. For this sample, we’re just going to generate a list of random data to be placed inside of our grid:

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = [];  
for (var i = 0; i < 200; i++) {  
  data.push({  
    id: i,  
    country: countries[i % countries.length],  
    downloads: Math.round(Math.random() * 20000),  
    sales: Math.random() * 10000,  
    expenses: Math.random() * 5000,  
    num1: Math.random() * 5000,  
    num2: Math.random() * 5000,  
    num3: Math.random() * 5000,  
    num4: Math.random() * 5000,  
    num5: Math.random() * 5000,  
  });  
}

Here, we create our data variable and push a set of objects into it to use as our grid's data source.
Next, we’ll create our FlexGrid control using JavaScript:

var theGrid = new FlexGrid('#theGrid', {  
  itemsSource: data,  
  frozenRows: 2,  
  frozenColumns: 1  
});

This is a straightforward FlexGrid control. We're only setting three properties here: itemsSource, frozenRows, and frozenColumns. The frozenRows and frozenColumns properties take an integer value, determining how many rows/columns get frozen in the grid.

Toggling Frozen Rows and Columns

Finally, we’ll give the user the ability to toggle the frozen rows and columns. First, we'll create two buttons:

  Toggle Frozen Rows  

  Toggle Frozen Columns  

Now, we’ll tie these two buttons to events that will modify the frozenRows and frozenColumns properties when clicked:

document.getElementById('btnFreezeRows').addEventListener('click', function () {  
  theGrid.frozenRows = theGrid.frozenRows > 0 ? 0 : 2;  
});  
document.getElementById('btnFreezeCols').addEventListener('click', function () {  
  theGrid.frozenColumns = theGrid.frozenColumns > 0 ? 0 : 1;  
});

When one of those buttons appears pressed, we check to see if there are already any frozen rows/columns depending on which button was pushed. If the rows/columns are already frozen, the JavaScript will unfreeze them; if not, they will be frozen in the grid.

You can see a live sample here.