Avoid this Obscure Error when Using the igGrid Control by Selecting the Right Root Element

Instantiating the igGrid control is straight-forward; you can simply create the control with a call similar to $("#grid").igGrid() and pass in grid options depending on your requirements. While it’s easy to construct a new grid this way, it’s also easy to overlook a small nuance which can have a significant impact on how you work with the control. In the end, the HTML element that is selected by the #grid selector makes a big difference on how the control is constructed in markup and how easy it is to work against the grid’s API.

TL;DR

• Use TABLEs as the root elements for the igGrid and igHierarchicalGrid

Choosing the Right Root Element

There is a subtle difference between the following markup listings when you are working with the igGrid:

<div id="grid"></div>

and

<table id="grid"></table>

The DIV element is often used as a “catch all” container for many Ignite UI controls where the generated markup is injected into the DIV and all interaction usually works as expected. The grid controls are a bit different in that they inherently HTML tables, so using a HTML TABLE element as the control’s root is the most appropriate choice.

Anatomy of the Grid Control

When a new instance of the igGrid control is created on a page the root element is wrapped by a container DIV element. This wrapping DIV element is necessary in order to act as a container for the supporting UI elements associated with the grid when different features are enabled in the grid. For instance, when you enable paging, the paging UI elements are rendered in the DIV which contains the TABLE for the grid. The same is true for group by, multi-column headers and any other additional UI elements required by the grid.

Effects of Differing Roots

To better illustrate the difference between using a DIV as the root element as opposed to a TABLE element, take a look at the following images which depict the markup generated inside a DIV vs. a TABLE element.

Figure 1: igGrid Markup with DIV element as Root Element

Figure 1 is an excerpt of the markup generated by a grid where the root element is a DIV. In order to generate all the required markup for the control, the widget creates the grid container and TABLE element as respective children of the root DIV element. This can propose a problem if you attempt to access features from the grid.

For instance, if you attempt to sort the grid with a call to the sortColumn method such as:

$("#grid").igGridSorting('sortColumn', 1, 'ascending');

You will encounter an error like:

Uncaught TypeError: Cannot read property 'currentSortDirection' of undefined

Now, this is not an error in the control, but rather the object with which was selected as #grid is pointing to a DIV and not the expected TABLE element which produces the error. The resolution is to use a TABLE element as the root of the control.

Figure 2: igGrid Markup with TABLE Element as Root

Figure 2 shows how the markup is generated when with a TABLE root element. Notice that the grid is instantiated as a TABLE element with the ID of grid and it is wrapped with a container DIV element. Now each time the object that is selected against #grid references the table element, which is the grid itself, rather than a container element.

---