Coming with the 12.1 release of the Infragistics jQuery product line is a new feature for both the jQuery Grid and jQuery Hierarchical Grid. Checkbox columns let your grid render boolean variables as checkboxes – this way you don’t need to map the true/false values to meaningful text before displaying in a grid.

The difference

With a standard grid setup at hand , let’s see how it deals with boolean values within the data source. We have the following array of objects:

   1: var data = [

   2:     { Item: "Bread", InStock: true },

   3:     { Item: "Butter", InStock: false },

   4:     { Item: "Cheese", InStock: true },

   5:     { Item: "Chocolate", InStock: false }

   6: ];

And then you have a straightforward Infragistics Grid setup that’s used to display this data.

   1: $("#grid1").igGrid({

   2:     dataSource: data,

   3:     autoGenerateColumns: false,

   4:     width: "400px",

   5:     columns: [

   6:              { headerText: "Product", key: "Item", dataType: "string" },

   7:              { headerText: "In Stock", key: "InStock", dataType: "bool" }

   8:         ],

   9:     features: [

  10:         { 

  11:             name: "Updating",

  12:             enableAddRow: false,

  13:             enableDeleteRow: false

  14:         }

  15:     ]

  16: });

The “In Stock” column will display the values just as they are – true / false. Which is okay but it certainly can be a bit better. Here’s what the grid looks like right now:

In update mode , you get a dropdown menu when clicking on any of the “In Stock” column’s rows. It will let you change the value of that certain item to true or false.

In this exact case it makes almost no difference whether we have to select items from the dropdown individually for every row – there are only a limited amount of rows present.

Imagine , however , that we had a few thousand entries and again you need to update certain values. The entire process becomes so much easier when the column holding boolean values looks like this:

And editing these values now is simple as double-clicking on the checkbox and then clicking done !

The implementation

In order to get the checkboxes in place of the true/false values , you will need to modify your Infragistics jQuery Grid setup to look like this:

   1: $("#grid1").igGrid({

   2:    dataSource: data,

   3:    autoGenerateColumns: false,

   4:    renderCheckboxes: true,

   5:    width: "400px",

   6:    columns: [

   7:             { headerText: "Product", key: "Item", dataType: "string" },

   8:             { headerText: "In Stock", key: "InStock", dataType: "bool" }

   9:        ],

  10:    features: [

  11:        { 

  12:            name: "Updating",

  13:            enableAddRow: false,

  14:            enableDeleteRow: false

  15:        }

  16:    ]

  17: });

Notice line 4 – this property tells the grid to render all columns with dataType: "bool” in them as checkboxes. You don’t need to change anything else to make the grid work like this – the renderCheckboxes property affects the Updating feature as well.