Known Issues and Limitations in 2013 Volume 1

Overview

The following table summarizes the known issues and limitations of the Ignite UI for jQuery 2013 Volume 1 release. Detailed explanations of known issues and the possible workarounds are provided in the known issues topics for each control.

Legend:

igCombo

Using a parentComboKey for cascading igCombos does not allow for filtering the child igCombo

If you require filtering on child igCombos, use the cascadingDataSources approach as opposed to the parentComboKey. For more details, see the Binding Cascading igCombo Controls to a Cascading Data Sources topic.

Load-on-demand not supported for cascading igCombo child

Configuring a cascading child igCombo to have load-on-demand enabled along with defining its parent combo key is not supported. This is due to the fact that the data source for cascading combo can be obtained only once, at the time of the initial loading. Changing the selected item in the parent combo may only filter the existing records in the data source.

igDataChart

First and last items appear half cut in financial series charts

In financial series the first and the last data items do not appear entirely on the chart view but are plotted as if they are half cut.

A new feature of data charts will be implemented in the future releases that will solve this issue.

Chart animation disabled when axis range changes solution

If you use the Motion Framework for charts and updated data causes Y-axis range to be changed then all chart animation is disabled and new data appears immediately without any motion effect.

The solution to this problem is to select an appropriate range for the Y-axis of your chart and set the minimumValue and maximumValue options accordingly. This prevents axis range changes.

igDialog

A control does not have proper dimensions when it is inside an igDialog and its width or height are relative

It is recommended to instantiate controls after the igDialog is opened when you use them with relative dimensions.

igEditors

Changing locale dynamically for the igEditor is not possible with the Infragistics Loader

Regional settings of editors cannot be changed dynamically when using the Infragistics Loader.

A postback is necessary in order to change the regional option. Another workaround is to destroy the editor control, call the loader to load with different locale, and recreate the control again.

igEditor styling workaround

Layout of HTML elements was modified and rounded corners are rendered around the whole editor, not only buttons.

Applications may disable rounded corners by providing custom CSS or overriding default igEditor CSS classes.

igEditor rendering failure workaround

Rendering may fail if the base element is a TD.

Applications should not restrict the width of a parent element if the base element is a TD or it should ensure that the actual width of the TD element is not less than the width of the igEditor control. The parent element is not only the parent table but the whole chain of parents up in the DOM hierarchy.

igGrid

Grids and touch support solution

A grid and its features may have inconsistent behavior when the stylus is sliding over certain UI elements.

You have to explicitly reference the js\modules\infragistics.ui.scroll.js file to ensure that sliding will cause scrolling on the correct UI elements.

Input argument ui.groupedColumns may be empty under certain circumstances workaround

The ui.groupedColumns input argument of the groupedColumnsChanged event is empty when a column has been grouped by dragging it into the group-by area.

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 grouping). 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.

Cannot use igGridHiding with row templates solution

The scenario in which a row template is used and some columns are hidden is not supported.

You can omit the definitions of the columns you want to hide from the row template instead of using the igGridHiding features.

igGridGroupBy and autoGenerateColumns to True prevents other columns from being grouped workaround

If a grid control has some columns explicitly defined and autoGenerateColumns is set to true, having columns grouped at initialization will prevent other columns from being grouped at runtime.

The option autoGenerateColumns is true by default so if you are planning to have columns grouped at initialization you have to explicitly define them. It is better to define all of the columns that you want in the grid and set autoGenerateColumns to false.

Grid column widths workaround

The scenario where some columns' widths are defined in percentages while others' are in pixels (or not specified at all) is not supported.

Define all column widths in one unit of measure: percentages or pixels.

Grid layout problems for header and footer elements in Microsoft Internet Explorer 7 solution

When a grid control does not have a width defined, its header and footer elements (caption, pager, group-by area etc.) are rendered with a smaller width than the records table in Microsoft Internet Explorer® 7.

You can define the width for the grid explicitly.

Grid API calls do not work as expected with DIV elements solution

If a grid is instantiated from a DIV element, the API calls to the grid's features do not work as expected. The best solution is to use a TABLE element as the base element for the igGrid. If a DIV must be used, continue with the following workaround.

The calls to the API of the grid's features should rely on the table that they are actually attached to: [gridElementId]_table. If the grid is bound to a DIV 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 like shown here:

In JavaScript:

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

or

In JavaScript:

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

Vertical scroll causes dialogs to appear behind the records solution

When the igGrid is running under Android, version 4.0.2, and when the igGrid has vertical scrolling enabled, all the popups/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.

To fix this problem you need to reference the latest stable versions of the Modernizr JavaScript library, as well as to include the Infragistics igScroll™ widget.

Under Firefox, igGrid columns cannot be resized correctly, when the column widths are not set

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

Under Firefox, igGrid columns cannot be resized correctly when the column widths are set in percentages workaround

Due to a bug in Firefox, columns cannot be resized correctly when the column widths are set in percentages. This is an issue with resizing the second col element in a colgroup. To get 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.

Row Selectors do not work with column virtualization

Row Selectors are not supported in the context of the column virtualization. This will be implemented in future releases.

The renderCheckboxes option is not compatible with templating (row and column)

When you use templating and the renderCheckboxes option is set to true, the Boolean columns will not render checkboxes because it is not possible to check if the Boolean column has a template defined for it.

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

In HTML:

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

Only local configuration is supported for the filtering, grouping, and sorting features and summaries are not supported when binding a grid to a DataTable/DataSet.

Local configuration for filtering, grouping and sorting features should be used when binding grids to a DataTable or a DataSet.

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

Cannot use row template in igGrid/igHierarchicalGrid to set attributes to table rows

It is not possible to set any type of an attribute (i.e. class) on a tr element because the row template is implemented as a repeating column template. The suggested workarounds are listed below.

Workaround 1

Set a global style to the tr element of the specified grid. In the following code snippet, the global style of the tr element is set to a container (grid) with ID grid.

In CSS:

#grid tr { /* style definition */ }

Workaround 2

Hook on to the grid rendered event and, inside the event handler function, set the desired attribute or style to the tr elements (either all of them or to specific trs, depending on what you need).

In JavaScript:

rendered: function (event, ui) {
// apply a attribute/style/class to all tr-s, or to a specific tr based on a condition
}

Column Moving not working in Internet Explorer 9

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

Workaround: Use jQuery UI version 1.8.6 or newer.

Group By not working in Internet Explorer 9

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

Workaround: Use jQuery UI version 1.8.6 or newer.

Inappropriate behavior of Column Moving in Google Chrome with older versions of jQuery UI

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.

To avoid this, use jQuery UI version 1.8.6 or newer.

Remote sorting, filtering and grouping are not supported for unbound columns

Remote sorting, filtering and grouping are not supported for unbound columns. The features are disabled for the unbound columns in the Columns collection.

Use local configuration for sorting, filtering and grouping features when unbound columns are defined.

The grid SetUnboundValues([Column key], [Dictionary of values]) method overload of grid MVC helpers requires a primary key

Using the SetUnboundValues([Column key], [Dictionary of values]) method overload requires setting 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.

Use the method overload SetUnboundValues([Column key], [Dictionary of values]) if there is no primary key defined.

Cannot use the grid helper in the view when the data source is remote and MergeUnboundColumns is set to true

Using the grid helper in the 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.

Cannot use formula property for grid unbound columns when the MergeUnboundColumns option is set to true

When the MergeUnboundColumns option is set to true then formula property cannot be used to set values of unbound columns in the igGrid

Using the dataBound client side event may be used as a workaround. 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. The unbound columns are part of the _data array in the data source passed to the dataBound event handler. Thus, they can be accessed and filled based on the other current row data or another value.

Unbound data values are not persisted automatically in the grid controls

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

During CRUD operations, unbound columns are present in the transactions as well as 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.

Grid is scrolled to the top when rendering unbound columns and virtualization is used

A grid is scrolled to the top before values in any unbound column are rendered when any form of virtualization (fixed or continuous) is used and the setUnboundValues() client API method is called.

Unbound columns are populated with false when MergeUnboundColumns is set to false

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

The getUnboundValues() grid method does not return unbound values in certain situations

Using the getUnboundValues() client API method does not return unbound values if they are set through the dataBound client side event.

Adding new row is not supported when Updating and Virtualization are enabled and autoCommit = false

When autoCommit = false transactions are kept in the pending transaction log. They are not visible by the Virtualization 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.

Workaround: autoCommit should be set to true, or the newly added row should be committed immediatelly.

igGrid Resizing does not work with older jQuery versions

Workaround: You should use another versions of jQuery UI, different of 1.8.0 - 1.8.5

igHierarchicalGrid

Screen taps misinterpreted on Android 4.* devices for grid grouping modal dialog solution

On Android 4.*-powered touch devices tapping on the drop-down in the group-by modal dialog in a hierarchical grid will often act on the grid cell behind the modal dialog.

The solution is to set modalDialogDropDownWidth and modalDialogDropDownAreaWidth to values which ensure that the drop-down in the modal dialog is wide enough to show the whole layouts tree, or you just set those settings to null.

Limitation of remote grouping in hierarchical grid solution

Grouping columns from more than one layout (or the root grid) will not work with remote group-by.

There are two possible solutions:

1. Use local group-by for the entire hierarchical grid - this circumvents the problem entirely.

2. When using remote group-by, only group columns from one layout (or the root grid).

Rendering issues in the hierarchical grid features are added in a particular order

In the igHierarchicalGrid, child layouts may have rendering issues (missing or misaligned columns) if the Row Selectors feature is added after the grouping feature to the feature list.

To avoid this, add the Row Selectors before grouping in the array.

Ignite UI for MVC

MVC helper generated code in conjunction with MVC Loader executes after any custom JavaScript code on a page solution

When MVC Loader and MVC helper for any control are used in an MVC view the JavaScript code they generate is executed after custom page set-up code put in document.ready or window.load events. (This is because the control is rendered in the body part of a page and script code is usually put in the head part.) If the custom code refers to the control rendered by the MVC helper code, it may fail since the control does not exist yet. This is a timing issue and depends on how quickly the loader loads necessary resources.

The solution is to attach to the last event in the control initialization sequence like dataBound and execute any JavaScript code on the control from the event handler. Alternatively, you can put a short script block after the MVC helper with contents similar to:

In JavaScript:

$.ig.loader(function () {
    customControlLogic();
});

In this example, the customControlLogic() function handles any custom code. This ensures that code affecting the control will execute after the control is instantiated.

In the MVC Helper for grids the default value of AutoGenerateLayouts is changed from true to false.

When AutoGenerateLayouts() is set to true in remote data binding scenarios such as remote sorting and filtering, there is an additional request to the data source. In order to avoid this additional request for the flat grid the default value was changed from true to false.

Note: This is a breaking change.

The ASP.NET MVC Loader does not function properly in an MVC Razor layout view solution

Ignite UI for MVC do not produce the proper Loader code when the Loader is included in a layout page in an ASP.NET MVC Razor application. They use the regular jQuery $(function() { }) (document.ready) syntax. This happens only for ASP.NET MVC Razor applications and in MVC ASPX views with master pages the same problem is not experienced.

The reason for this is that layout views are processed and executed after the particular view is rendered and the loader has no chance to initialize prior to the view rendering.

The solution is not to include the MVC Loader in an ASP.NET MVC Razor layout page in your applications but to include it in each particular view.

Infragistics Document Engine

Using Document Engines from Infragistics ASP.NET and Ignite UI for jQuery together workaround

Using both the Infragistics ASP.NET and Ignite UI for jQuery documents assemblies together causes namespace conflict exceptions.

To resolve this issue, reference either the documents assemblies from Infragistics ASP.NET or the documents assemblies from Ignite UI for jQuery in your application. The documents libraries within these assemblies are the same and can be used to replace one another.

Ignite UI for jQuery ASP.NET MVC Mobile Wrappers

The ASP.NET MVC Popup Mobile control requires jQuery Mobile version 1.2

The popup widget is introduced in jQuery Mobile version 1.2. If you want to use the Popup MVC wrapper use a jQuery Mobile version higher or equal to 1.2.

Mobile control helpers are in the Infragistics.Web.MVC.Mobile dll

In the 2013.1 Release the mobile control helpers were part of the Infragistics.Web.MVC.dll assembly. Now all mobile controls are isolated in Infragistics.Web.MVC.Mobile.dll assembly.

Note: This is a breaking change.

Mobile SelectMenu

The CloseText property of the mobile SelectMenu control is not applied when the menus are in custom dialog-based containers

If you set a text for the close button tooltip using the CloseText property of the SelectMenu control in dialog-based containers, your custom tooltip will not appear and the default one will be shown instead. This is due to jQuery Mobile not injecting the custom close text which cannot be accessed later.

Mobile Slider

Mobile Slider does not slide on Windows Phone 7

Because Windows Phone 7 does not support standard touch events, the slider is read-only.

Workaround: By default, devices that do not support touch events, the slider renders with a numeric input field rendered to the left of the slider. This behavior is customized using the NumericInputDisplayMode method on the ASP.NET helper.

igOlapXmlaDataSource

Authenticated data access not working correctly with Mozilla Firefox for igOlapXmlaDataSource

When using igOlapXmlaDataSource in the Mozilla Firefox browser with authenticated access, additional configuration of the Internet Information Services (IIS) is necessary. The authentication process does not work due to a bug in the browser (the pre-flight request is registered as un-authenticated).

Workaround: Register a custom managed module in IIS that will capture the Mozilla Firefox OPTIONS verb and complete the response with an authorization header. For details, refer to the Configuring Authenticated Access for the Mozilla Firefox Browser (igOlapXmlaDataSource) topic.

Authenticated data access not working correctly with Internet Explorer 8.0 and 9.0 for non-trusted domains for igOlapXmlaDataSource

The igOlapXmlaDataSource component cannot retrieve OLAP data on non-trusted domains with the Internet Explorer browser, versions 8 and 9. If the domain on which the msmdpump.dll HTTP data provider for your SQL Server Analysis Services server is hosted, is not in the trusted domains list of the browser, it will not be able to access the server data.

Workaround: The solution can be either of the following:

• Users having these versions of the browser must have data provider domain added to the trusted sites list of their browsers.

• Host the data provider on a domain trusted by the user’s browser.

Chrome does not display authentication popup for cross-domain requests when using igOlapXmlaDataSource

In the Chrome browser, versions 13 or higher, the authentication popup dialog is not displayed for cross-domain requests. This behavior is prescribed by the browser’s default security policy. (Displaying a credentials popup dialog under such conditions is considered as security risk by the browser’s developers.)

Workaround:The solution can be either of the following:

• Host both your website and the HTTP OLAP data provider (msmdpump.dll) on the same domain

• Start the Chrome browser by setting the --allow-cross-origin-auth-prompt flag. (If the Chrome browser is started with the --allow-cross-origin-auth-prompt flag, the popup is displayed for cross-domain requests, too.)

igPivotDataSelector

Drop label remains after drop between igPivotDataSelector areas using old jQuery UI versions

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

Workaround: Use another versions of jQuery UI, different from 1.8.19.

igPivotGrid

igPivotGrid is not always rendered correctly in browsers for the Android operating system.

In browsers for the Android operating system, only the first column of the igPivotGrid is visible.

Workaround: Two workarounds are available:

• Set the table-layout CSS property of the igPivotGrid’s table container to auto

• Set the width option of the igPivotGrid to an explicit size

Infragistics Templating Engine

Infragistics Templating limitations

Nested {{each}} templates are not supported.

Related Content

Topics

The following topics provide additional information related to this topic.

• igGrid Known Issues: This topic provides information about the known issues specific to the igGrid control.

• igHierarchicalGrid Known Issues: This topic provides information about the known issues specific to the igHierarchicalGrid™ control.

• igCombo Known Issues: This topic provides information about the known issues specific to the igCombo™ control.

• igDataSource Known Issues: This topic provides information about the known issues specific to the igDataSource™ control.

• igEditor Known Issues: This topic provides information about the known issues specific to the igEdtor™ control and its descendants.

• igRating Known Issues: This topic provides information about the known issues specific to the igRating™ control.

• igTree Known Issues: This topic provides information about the known issues specific to the igTree™ control.

• igUpload Known Issues: This topic provides information about the known issues specific to the igUpload™ control.

• igVideoPlayer Known Issues: This topic provides information about the known issues specific to the igVideoPlayer™ control.

• Known Issues and Limitations (igDataChart): This topic provides information about the known issues specific to the igDataChart™ control.

• Known Issues and Limitations (igMap): This topic lists all known issues and limitations in the igMap™ control.

• Known Issues and Limitations (igPivotGrid): This topic lists all known issues and limitations in the igPivotGrid™ control.

• Known Issues and Limitations (igPivotView): This topic lists all known issues and limitations in the igPivotView™ control.

• Known Issues and Limitations (igPivotDataSelector): This topic lists all known issues and limitations in the igPivotDataSelector™ control.

• igSplitter Known Issues and Limitations: This topic lists all known issues and limitations in the igSplitter™ control.

• Known Issues and Limitations (igFunnelChart): This topic lists all known issues and limitations in the igFunnelChart™ control.

• Known Issues and Limitations (igOlapXmlaDataSource): This topic lists all known issues and limitations in the igFunnelChart™ control.