Known Issues and Limitations (igGrid)

.ui-iggrid th, .ui-iggrid th.ui-state-default, .ui-iggrid th.ui-state-hover, .ui-iggrid th.ui-state-active {
     text-align:left;
     white-space: pre-wrap;
 }

element, the API calls to the grid's features do not work as expected.

Workaround 1

Use a <table> element (instead of <div>) as the base element for the grid. This is the optimal solution.

Workaround 2

Use this workaround if you need to use a <div> element as the base element for the grid. The calls to the grid's features API should rely on the table to which they are actually attached: the [gridElementId]_table. If the grid is bound to a <div> element with id attribute set to "grid1", the easiest way to reference that table is to use either the grid's id() or widget() API methods as shown below.

In JavaScript:

$("#" + $("#grid1").igGrid("id")).igGridPaging("option", "pageSize", 2)

In JavaScript:

$("#grid1").igGrid("widget").igGridPaging("option", "pageSize", 10)

Dialogs/pop-ups appear behind the records on Android 4.0.2

When the igGrid is running on Android, version 4.0.2 and has vertical scrolling enabled, all pop-ups/dialogs appear behind the records. This is due to the fact that all HTML <div> elements placed over another scrollable <div> are rendered behind the scrollable <div>, no matter what you have set as a z-index or as a CSS rule.

Workaround

Reference the latest stable versions of the Modernizr JavaScript library and use the Infragistics igScroll™ widget.

The showHeader option not working correctly

When the showHeader option is set to false on grid initialization, setting it to true run-time using the API will not show the header.

Workaround

Set the showHeader option to true and use the rendered event to hide it using the API. (This will ensure that the headers are added to the DOM structure) Then use the API to show the header at run-time.

In JavaScript:

$("#grid1").on("iggridrendered", function (evt, ui) {
  if (ui.owner.dataSource.dataView().length === 0) {
    ui.owner._setOption("showHeader", false);
  }
});
//At runtime use the following code to show the header:
$("#grid1").igGrid("option", "showHeader", true);

Horizontal scrollbar visibility issues on Mac OS

The grid’s horizontal scrollbar is not visible on Mac OS when its Show scrollbars only when scrolling option is set to true. This is because the grid’s horizontal scrollbar has an overflow set to hidden.

Workaround

The scrollbar's classes can be overriden in order for the scrollbar to be visible. The following is an example on how they can be overriden.

In CSS:

::-webkit-scrollbar {
    width:16px;
}
::-webkit-scrollbar-track {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb:hover {
    background:rgba(0,0,0,0.4);
}

::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(0,0,0,0.05);
}

Checkbox rendering not compatible with templates (row and column)

When using row/column templates and the renderCheckboxes option is set to true, the Boolean columns will not render checkboxes because it is not possible to examine if the Boolean column has a template defined for it.

Workaround

Use an <input type='checkbox'/> within the rendered template to render checkboxes for a Boolean column. Below is an example template to use.

In HTML:

<input type="checkbox" {{if ${MakeFlag} === "true"}} checked="checked" {{/if}} disabled="disabled">

KnockoutJS observable array functions’ limitations

The use of unshift, reverse and sort observable array functions results in incorrect visual appearance of the grid.

• unshift – causes the new row to be added at the end of the grid.
• reverse – causes the zebra styling to break.
• sort – causes the zebra styling to break

Workaround

In all cases, call the dataBind method to render the rows in the correct order.

igGrid does not support column keys containing special chars - [, ], \, (, ), etc.

The column keys are used in internal jQuery selectors for many of the grid's features. Currently the selectors are not explicitly escaped so any special characters in the column key would break the selectors.

Workaround

Overwrite JQuery's find method and make sure that the selector is always escaped.

In JavaScript:

(function (find) {
        $.prototype.find = function () {
            var sel = arguments[0], matches, i, newMatch;
            if (typeof sel === 'string') {
                matches = sel.match(/#.*[\(|\)]+/);
                if (matches) {
                    for (i = 0; i < matches.length; i++) {
                        newMatch = matches[i].replace(/(\(|\))/g, "\\$1");
                        sel = sel.replace(matches[i], newMatch);
                    }
                    arguments[0] = sel;
                }
            }
            return find.apply(this, arguments);
        };
})($.prototype.find);

Scrolling with a horizontal scrollbar until the end of a non-virtualized grid and then trying to scroll vertically with a vertical scrollbar does not work on Edge browser

The interaction with the default browser vertical scrollbar is not functioning correctly when the horizontal scrollbar is at its most right position. This is a ThirdParty issue from Microsoft due to the igGrid scrolling areas that have hidden overflow.

Workaround

Since the igGrid continuous virtualization uses completely custom scrolling behaviour when interacting with the grid's scrollbars, it can be enabled to workaround this issue.

igGrid – Data Binding

Remote filtering, sorting, summaries, and grouping not supported with binding to a data table/set

When binding grids to a DataTable or a DataSet, local configuration for the Sorting, Filtering, Summaries, and Group By features is supposed be used, but a workaround for remote configuration is available, for Sorting and Filtering.

Workaround

Remote sorting and/or filtering can be implemented by processing the request and performing the filtering and/or sorting on the server before returning the data.

For more details how to implement remote sorting by processing the request and sorting the data on DataTable level before returning it, you can take a look at the DataTable Binding sample.

igGrid – Unbound Columns

Remote filtering, sorting and grouping not supported for unbound columns

The Sorting, Filtering, and Group By features do not work with unbound columns. These features are disabled for unbound columns in the Columns collection.

Workaround

When unbound columns are defined, use local configuration for the Sorting, Filtering, and Group By features.

The grid SetUnboundValues(<Column key>, <Dictionary of values>) method overload of the Ignite UI for MVC Grid requires a primary key

The grid SetUnboundValues(<Column key>, <Dictionary of values>) method overload of the Ignite UI for MVC grid requires a primary key. This overload has parameters for column key and dictionary of primary key and unbound value pairs. The primary key in the dictionary points to the primary key of a row in the grid and the unbound value is the value which will be set in the unbound column with key equal to the column key.

Workaround

Use the method overload SetUnboundValues(<Column key>, < List of values >) if there is no primary key defined.

Limitations to using the grid helper in the View

The grid helper cannot be used in the View when the data source is remote and MergeUnboundColumns is set to true. Using the Ignite UI for MVC Grid ASP.NET MVC View is not a valid scenario when the data source is remote and the MergeUnboundColumns property is set to true.

You can set some options through chaining but when remote requests are performed, these options are re-set with the default values from the request.

Unbound column values not updated when remote paging and unboundValues is used

The grid displays same values for the unbound column when unboundValues is set on the client with remote paging enabled. In this case, each time the grid rebinds, it re-applies these new settings. Therefore, when navigating to a new page, the same values are shown. This is normal behavior because the server returns only the result for the current page.

Limitations to using formulas in unbound columns

Formulas cannot be used in the igGrid’s unbound columns when the MergeUnboundColumns option is set to true.

Workaround

The dataBound client-side event can be used as a workaround. The unbound columns are part of the data() array in the data source passed to the dataBound event handler. You can handle the dataBound client-side event and add those values manually to the data source on the client before the grid is rendered. This way the unbound columns can be accessed and filled based on the other current row data or another column value.

In JavaScript:

$("#grid1").live("iggriddatabound", function (event, ui) {
            var i, grid = ui.owner,
                ds = grid.dataSource,
                data = ds.data(),
                dsLength = data.length;
            for (i = 0; i < dsLength; i++) {
              data[i]["UnboundColumn1"] = 
                data[i]["UnitPrice"] * data[i]["UnitsInStock"];              
            }
 });

Unbound data values not persisted automatically in the grid’s controls

If a row with unbound values is edited and committed and the grid is rebound after that, changes are not persisted.

Workaround

During CRUD operations, unbound columns are present in the transactions and updating. As unbound columns are part of the data array in the data source, it is up to the implementation to check if such a column exists in the underlying data source when the transactions are committed to the data source.

Boolean unbound columns populated incorrectly when remote data is used

When the MergeUnboundColumns property is set to false and remote data is used, then any Boolean unbound columns are populated with false.

Workaround

Set all Boolean row values explicitly on the server.

Sorting, Filtering and Group By not persisting state

Sorting, Filtering, and GroupBy do not persist their state when they are applied to unbound columns. If the feature persistence is enabled (by default) and an unbound column is grouped/sorted/filtered, after invoking dataBind() of igGrid:

• For GroupBy - the column will be ungrouped

• For Filtering - the filtering expressions of the unbound column will be cleared

• For Sorting - the sorting style applied to the unbound column will be removed

Workaround

1. For all unbound columns, save the filtering expression/grouped columns/sorted columns before invoking dataBind()

​2. After a dataBound event (for example, dataRendered event), apply the column settings/expressions through the API methods of the features.

igGridVirtualization

Fixed virtualization is not supported with RWD Mode

Fixed virtualization depends on the row's height being constant. If the row's height changes the fixed virtualization will not work as expected. RWD Mode changes the row's height as it adopts to the screen size so fixed virtualization will not work as expected with it.

Workaround 1: Use continuous virtualization. It works in scenarios where the height of the rows are dynamically resized.

Workaround 2: Apply styles for the cells that would ensure that the height of the rows is not changed when dynamically resizing. For example apply “white-space:nowrap” to the cell in order to ensure that the text length does not affect the height of the row.

In HTML:

<style> 
.ui-iggrid-record > tr > td
{ 
  white-space:nowrap; 
} 
</style>

igGridColumnFixing

Misalignment between fixed and unfixed part of the rows in IE9+

In IE9 or higher, if you fix a column in igGrid and scroll down to the middle of the grid, you will see misalignment between the fixed and unfixed part of the rows.

Workaround

You can set height for the TD element in the rows and set syncRowHeights to false (because of a performance issue)

In HTML:

<style> 
    #grid1 tbody tr td, 
    #grid1_fixed tbody tr td {    
        height: 100px !important; 
    } 
</style>

igGridColumnMoving

Column Moving not working in IE 9

This is caused by a bug in the jQuery UI draggable introduced in version 1.7.2 and resolved in 1.8.6. For more information on the bug, see jQuery UI Bug 5370.

Workaround

Use jQuery version 1.8.6 or higher.

Erroneous Column Moving behavior of in Google Chrome

When the Column Moving feature is used with a jQuery UI version lower than 1.8.6, it causes the grid to be selected in Google Chrome.

Workaround

Use jQuery version 1.8.6 or higher.

igGridFiltering

Simple Filtering does not work with column virtualization

Workaround: Use advanced Filtering (mode = "advanced") with column virtualization

igGridGroupBy

Inconsistent date format in the group row and the rest of the rows

When grouping, the date format in the group row can be different from the format in the rows. When grouping by column that has data in date format, the format of the date at the top of the group (this format is automatically displayed when grouping), is different from the column format.

Workaround

If you implement a custom group using a function for date columns or use custom name for the grouped rows, you will be able to change the format and make it consistent with the row format.

Grouping not working in IE 9

This is caused by a bug in the jQuery UI draggable introduced in version 1.7.2. For more information, see jQuery UI Bug 5370.

Workaround

Use jQuery version 1.8.6 or higher.

Erroneous grouping when defining paging before grouping in MVC

When using an MVC Solution and defining the Paging and Group By features together, the groups will be incorrect if Paging is defined before the Group By feature.

Workaround

When defining features in an ASP.NET MVC Solution, set Group By before Paging.

Incorrect row count for the second group when more than two groups are grouped together with remote paging enabled

When more than two groups are grouped with the Group By feature together with remote Paging enabled, the second group gets incorrect row count.

This happens because the server doesn’t know the sequence of the groups it sends. It just sends distinct values count to the client without any grouping or depth levels information.

Incorrect record count with remote paging and summaries

When grid Paging and grid Summaries are remote and there are records with null values, the count of the records in the group is incorrect because the value is send as a null string from the server.

This is due to the fact that, when a null value is wrapped in JSON format, the value is encapsulated in quotation marks ("null"), otherwise it cannot be parsed correctly on the client. This requirement however makes it impossible to differentiate a "null" from the actual null values.

Exception thrown when the Group By feature defines column settings together with enabling inheritance

Exception is thrown when the Group By feature defines column settings and enables inheritance at the same time. This issue occurs in an MVC solution with a grid using chaining approach in the MVC View page. If you enable the Group By feature and, in it, attempt to both define column settings and enable inheritance, a page exception will be thrown.

Workaround

Instead of defining both column settings and enabling inheritance in the Group By feature, in the Group By feature disable inheritance and then manually define the same Group By settings in every child layout.

Values in a column grouped but not displayed correctly

When autoGenerateColumns is set to true (explicitly or by default) and a column is set to be grouped at initialization, the values in the column are grouped but not displayed correctly.

Workaround

Defining columns as opposed to using auto-generate columns will enable grouping to work properly.

The groupedColumnsChanged event input argument ui.groupedColumns may be empty

The ui.groupedColumns input argument of the groupedColumnsChanged event may be empty when a column has been grouped by dragging it into the Group By area.

Workaround

The ui.groupedColumns array shows only grouped columns on the root level (as if it is acting as a flat grid, as in any flat grid with Group By). If you want to get all grouped columns, use the groupByColumns() function from the API, which recursively iterates all child grids and adds up the grouped columns for any layout.

Tapping the igTree inside the Group By modal dialog not working properly on Android 4.0

Tapping the drop-down inside the Group By modal dialog may lead to some layout problems under Android 4.0. They can be one of the following:

• Drop-down collapsing
• When selecting a child layout from the drop-down, the columns are still the root ones
• Group By modal dialog disappearing upon clicking and instead of interacting with the modal dialog the user interacts with the grid itself

This issue is caused by a recent change in the Android OS. The issue appears when the tree is shown partially, having a vertical or horizontal scroll.

Workaround

Set modalDialogDropDownWidth and modalDialogDropDownAreaWidth to values that allow showing the whole layouts tree. Another workaround would be to set all values to null.

Hiding a column shrinks the grid in Firefox

When Group By feature is enabled and igGrid doesn’t have column widths defined, hiding a column shrinks the grid in Firefox browser.

This issue is replicated when column chooser is used and Group By feature is enabled.

Workaround

Hide the container and after that show it.

In JavaScript:

var gridInstance = ("#grid1").data('igGrid');gridInstance.container().hide();setTimeout(function () {   gridInstance.container().show();}, 0);

igGridPaging

Paging events not firing at run-time

The igGrid Paging events only fire when the UI triggers a paging operation. They do not fire when paging options are set at run-time.

Workaround

Create a separate handler function to be used when a Paging event is fired. When changing any Paging options in code, call the handler function explicitly to perform the actions that the event would also perform.

igGridResizing

Resizing not working with some jQuery versions

igGrid Resizing does not work with jQuery versions 1.8.0÷1.8.5.

Workaround

Use versions of jQuery UI different from 1.8.0 - 1.8.5.

Resizing not working with fixed virtualization

The column resizing feature does not work when fixed virtualization is enabled.

Workaround

Resizing doesn't work with fixed virtualization, but works with continuous virtualization.

Columns not resizing correctly, when column widths are not set (in Firefox)

Due to a bug in Firefox browser, the igGrid columns cannot be resized correctly when the column widths are not set. This is an issue with resizing the second element in a . For more information about this Firefox bug, follow this bug thread conversation.

Columns not resizing correctly when column widths are set relatively (in Firefox)

Due to a bug in Firefox browser, the igGrid columns cannot be resized correctly when the column widths are set relatively (in percentages). This is an issue with resizing the second <col> element in a <colgroup>. For more information about the Firefox bug, follow this bug thread conversation.

Before resizing the table, the height of the grid table container needs to be removed. After the resizing is finished, the height needs to be restored.

Limitation when using column autosizing

Grid column containing long text is not resized correctly on double click, when the grid table element has explicitly defined 'white-space: nowrap' CSS rule.

Workaround

A possible workaround is by using CSS to specifying more generic selector or setting columnCssClass option to the respective column(s) if they're not autogenerated

In CSS:

tr td { white-space: nowrap; }

igGridRowSelectors

The igGridRowSelectors widget requires the Selection feature enabled

The requireSelection option of the igGridRowSelectors widget is set to true by default and will throw an exception indicating that the Selection feature is required for using row selectors.

Workaround

The recommended configuration for using row selectors is to also enable Selection. One scenario, row numbering, does not require Selection to be enabled. To use this feature without enabling Selection, set the requireSelection option to false to avoid the exception thrown by the igGridRowSelectors widget.

The Selection feature cannot be enabled automatically

Automatically Enabling of the Selection feature does not work. The Selection widget is required for the RowSelectors to have full functionality. (See The igGridRowSelectors widget requires the Selection feature enabled.) Without that widget, certain features (e.g. checkbox selection) of the row selectors are either unavailable or only partly available. RowSelectors does not enable Selection automatically.

Workaround

When using RowSelectors, make sure the Selection feature is enabled.

igGridSelection

Cell selection not working correctly in iOS

In iOS, when wanting to scroll the igGrid, the user should first tap on a cell and then swipe in the desired direction. There is a difference when scrolling the igGrid under iOS and Android due to the way jQuery Mobile presents the events:

• In iOS, the cell is selected and then you cannot unselect it.
• In Android, no cell is selected when the igGrid is swiped.

Incorrect row/cell selection with continuous virtualization in jQuery 1.6.4

When selecting row/cell of the igGrid while continuous virtualization is enabled, the grid scrolls down and a different row/cell is selected due to a bug in jQuery version 1.6.4. This problem appears only in this version of the jQuery library.

Workaround

Use version of the jQuery library different from 1.6.4.

Text selection is not working when Selection feature is enabled

The Selection feature disables text selection inside the grid by cancelling the selectstart event and as a result the cell's text cannot be selected. For cell selection mode the following workaround can be applied:

Workaround

Handle the selectstart event on a closer parent than the grid and stopping propagation (so that the grid never receives it to cancel it).

In JavaScript:

$("#grid td").on("selectstart",
function (e) {
e.stopPropagation();
}

This workaround cannot be applied to row selection where there's additional custom logic that ensures that the whole row stays focused while it is selected. In this case the cells cannot take the focus and since text selection depends on the focused element the cell's text cannot be selected.

Incorrect cell selection when selecting with mouse dragging and persistence is enabled

Selecting with mouse dragging when persistence is enabled and there are rows which cells are duplicated (the rows are visually the same) will select only the cells from the first row.

Workaround: Set persistence to false.

Selecting a row in IE scrolls the row to most left in a grid with horizontal scrollbar

Selecting a row in IE is applying focus to the row, which scrolls the igGrid all the way to the left.

Workaround 1

Removе activation altogether (note that this will remove Selection's keyboard navigation)

Workaround 2

Change the selection mode to "cell"

igGridSummaries

Limitation when using custom summary with remote data

Ignite UI for MVC doesn’t handle the custom summaries by default. Therefore, a custom summary should be created and calculated separately.

Workaround

Hook to appropriate event (it’s recommended to hook to summariesCalculating event) and use your own logic to request the summaries from the server.

Limitation when setting custom methods

When setting custom methods, it is highly recommended to set the order and summaryCalculator options of the summary operands. If you do not define order, the summary calculator will probably not behave as you expect it – the order of summary operands in the drop-down and in the summaries may differ. When you set the summaryOperand to custom type but do not set the customCalculator, the summaryOperand will not be shown neither in the results in the summaries nor in the drop-down.

igGridTooltips

Tooltips display issues when moving pointer too fast over the cells

If the user moves the mouse quickly through the control, the tooltip fade animation slows down the process of showing and hiding tooltips and can create display issues when the values are very small.

These issues occur when both of the following conditions are met:

• The fadeTimespan value exceeds either of the following values: showDelay or hideDelay
• The showDelay and hideDelay values are too low (less than 200 ms).

Workaround

To prevent this issue, do one of the following:

• Set fadeTimout to a value that smaller than the values for showDelay and hideDelay.
• Set showDelay and hideDelay to values higher than 200 ms each.

igGridUpdating

Adding a new row with Updating and Virtualization enabled requires immediate committing

Adding a new row is not supported when the Updating and Virtualization features are enabled while autoCommit is disabled. When autoCommit = false, transactions are kept in the pending transaction log. They are not visible to the Virtualization feature until they are committed. The newly added row will not be visible by the user once a new chunk of data is loaded by the Virtualization feature.

Workaround

Either the autoCommit option should be set to true, or the newly added row should be committed immediately.

Column template including <td> tag attributes is ignored when updating rows

When updating rows the igGrid correctly changes only the content of the TD-s so that styles and/or attributes applied internally to the TD elements are not lost.

Workaround 1

To get the templates re-executed with the new values, the templated elements must be limited to the contents of the <td> tags.

Workaround 2

Calling the dataBind() method will re-execute any kind of templating applied to the columns.

Updating rows/cells when the Updating and Continuous Virtualization features are enabled while autoCommit is disabled is not supported.

Editing rows/cells with Updating when the autoCommit grid option is set to false and Continuous Virtualization is enable will throw exception.

Workaround

The autoCommit option should be set to true.

New row editors have incorrect height with jQuery 3.2.1 under IE 11

jQuery 3.2.1 reports incorrect height for the new row editors under IE11 which causes them to render too small and make them unusable.

Workaround

Using any other version of jQuery resolves the issue.

Related Content

Topics

The following topics provide additional information related to this topic.

• igGrid - This is a group of topics containing the help content about the igGrid control.