7.2.0 Release Candidate 3

Bug fixes

fix(ovarlay) box-sizing (
fix(igx-grid): Clear filter if expressionstree is empty, #4146
fix(IgxSelect): Update API descriptions. #4171
fix(GroupBy): Fix error thrown when expanding a groupby row. #4179
fix(IgxSelect): Export DropDown Module #4182
fix(grid): expand all icon position
fix(IgxSelect): Add IgxSelectGroupComponent #4182
fix(GroupBy): Fix error thrown when expanding a groupby row. #4180
refactor(IgxSelect): Move public exports to index barrel #4182
fix(GroupBy): Grouping expand/collapse all button is not aligned with the row selector checkbox. #4178
build(schematics, npm): fix migrations output paths due to reference #4156
fix(es6+, aot): Build/runtime errors in AoT builds and JIT es2015+ #4208

7.2.0 Release Candidate 2

• igxCalendar

  • igxCalendar has been refactored to provide the ability to instantiate each view as a separate component.
  • Feature advanced keyboard navigation support has been added. Read up more information in the ReadMe

• New component IgxMonthPicker:

  • Provides the ability to pick a specific month. Read up more information in the ReadMe

• New component IgxHierarchicalGrid:

  • Provides the ability to represent and manipulate hierarchical data in which each level has a different schema. Each level is represented by a component derived from igx-grid and supports most of its functionality. Read up more information about the IgxHierarchicalGrid in the official documentation or the ReadMe

• New component The igxSelect provides an input with dropdown list allowing selection of a single item.

  <igx-select #select1 [placeholder]="'Pick One'">
      <label igxLabel>Sample Label</label>
      <igx-select-item *ngFor="let item of items" [value]="item.field">
          {{ item.field }}
      </igx-select-item>
  </igx-select>

documentation or the ReadMe

• New directive igxAutocomplete - new directive that provides a way to enhance a text input by showing a panel of suggested options, provided by the developer. More information about the IgxAutocomplete is available in the official documentation or the ReadMe.

  <input igxInput type="text" [igxAutocomplete]="townsPanel" />
  <igx-drop-down #townsPanel>
      <igx-drop-down-item *ngFor="let town of towns" [value]="town">
          {{town}}
      </igx-drop-down-item>
  </igx-drop-down>

• igxGrid now has isLoading input property. When enabled will show loading indicator, until the data is available. It can be best utilized for remote scenarios. Another input property loadingGridTemplate allows customizing the loading indicator.

  <!-- Example -->
  <igx-grid [isLoading]="true" ...>
  </igx-grid>

  • Group By
    • The collapse/expand icons have new orientantion to display the action that will be performed when clicked. When an icon points up clicking on it would result in collapsing the related group row and when it points down clicking on it would expand the group row.
    • The collapse/expand all icons have also been updated to reflect the new group row icons better.
    • Group rows now can be expanded/collapsed using Alt + Arrow Up/Down to reflect the new icons.
  • filterMode input added, which determines the filtering ui of the grid. The default value is quickFilter. Other possible value is excelStyle, which mimics the filtering in Excel with added functionality for column moving, sorting, hiding and pinning.
  • IgxColumnComponent now has disablePinning property, which determines wether the column can be pinned from
    the toolbar and whether the column pin will be available in the excel style filter menu. The disableHiding input will be used to show/hide the column hiding functionality in the menu.

• igxTreeGrid

  • The collapse/expand icons have new orientantion to display the action that will be performed when clicked. When an icon points up clicking on it would result in collapsing the related tree grid level and when it points down clicking on it would expand the tree grid level.
  • Expanding/collapsing tree levels can now be performed also by using Alt + Arrow Up/Down to reflect the new icons.

• igxCombo

  • Breaking Change combo.value is now only a getter.
  • Feature added support for templating the default input group of the component. The igx-combo now allows for igx-prefix, igx-suffix,igx-hint and [igxLabel] components to be passed as ng-content and they will be renderer accordingly on the combo's input. Example:

      <!-- customize combo input --->
      <igx-combo #myCombo [data]="myGenres">
          ...
          <label igxLabel>Genres</label>
          <igx-prefix><igx-icon>music_note</igx-icon></igx-prefix>
      </igx-combo>

  • Feature the default combo 'clear' and 'toggle' icons can now be templated. Two new directives are added (with selector [igxComboClearIcon] and [igxComboToggleIcon]). Passing an ng-template with one of the directives will overwrite the default conent of the respective icon. Functionality will remain unaffected. Expample:

      <!-- customize combo input --->
      <igx-combo #myCombo [data]="myGenres">
          ...
          <ng-template igxComboToggleIcon let-collapsed>
              <igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
          </ng-template>
      </igx-combo>

• igxDropDown

  • IgxDropDownItemBase and it's descendants (of which IgxDropDownItem) have had their isSelected and isFocused properties deprecated. Instead, use selected and focused properties.
  • Added an @Input for the index property (such as the one coming from ngFor) of the IgxDropDownItem component. This deprecates the automatic index calculation.

      <igx-drop-down>
          <igx-drop-down-item *ngFor="let item of items; let i = index" [index]="i">
              {{ item.field }}
          </igx-drop-down-item>
      </igx-drop-down>

  • Feature IgxDropDownGroupComponent has been added. It allows for easier grouping of multi-level data, without the need of flattening it. The igx-drop-down-item-group tag accepts igx-drop-down-items and displays them in the appropriate grouped fashion.

        <igx-drop-down>
            <igx-drop-down-item-group *ngFor="let country of contries" [label]="country.name">
                <igx-drop-down-item *ngFor="let city of country.cities" [value]='city.refNo'>
                    {{ city.name }}
                </igx-drop-down-item>
            </igx-drop-down-item-group>
        </igx-drop-down>

• Theme Elevations & Shadows - Components with shadows, set by an elevation level or otherwise, are now fully configurable by the user via schema and/or theme properties. User can also provide a custom elevations set to component themes that support them.

  • Breaking Change - The $search-shadow-color and $search-disabled-shadow-color properties on the igx-input-group-theme have been replaced with $search-resting-shadow and $search-disabled-shadow respectively. Use ng update to migrate automatically.

• IgxTreeGridComponent

  • We can now search in the treegrid's data by using the findNext and the findPrev methods and we can clear the search results with the clearSearch method.

• IgxTextHighlightDirective

  • IgxTextHighlightDirective.page input property is deprecated. rowIndex, columnIndex and page properties of the IActiveHighlightInfo interface are also deprecated. Instead, row and column optional properties are added.

• igxDragDrop

  • dragGhostHost input property added. Sets the element to which the dragged element will be appended. If not provided, the dragged element is appended to the body.

• Column Hiding UI

  • Behavioral Change - The UI now hides the columns whose disableHiding property is set to true instead of simply disabling them.

• igxButton - New Button Style - Include outlined button style to support the latest material spec.

• igxOverlay:

  • igxOverlay.attach() method added. Use this method to obtain an unique Id of the created overlay where the provided component will be shown. Then call igxOverlay.show(id, settings?) method to show the component in overlay. The new attach method has two overloads:
    • attach(element: ElementRef, settings?: OverlaySettings): string - This overload will create overlay where provided element will be shown.
    • attach(component: Type<any>, settings?: OverlaySettings, moduleRef?: NgModuleRef<any>): string - Creates a ComponentRef from the provided component class to show in an overlay. If moduleRef is provided the service will use the module's ComponentFactoryResolver and Injector when creating the ComponentRef instead of the root ones.
  • igxOverlay.show(component, settings) is deprecated. Use igxOverlay.attach() method to obtain an Id, and then call igxOverlay.show(id, settings) method to show a component in the overlay.
  • IPositionStrategy exposes new method clone that clones the strategy instance with its settings.

• igx-date-picker

  • Feature Added dropdown mode to enable the input field value editing and spinning of the date parts as well as displaying a drop down calendar to select a date. Example:

    <igx-date-picker #editableDatePicker1 mode="dropdown" [value]="date" format="dd.MM.y" mask="M/d/y">
  ...

7.2.0-rc.1

Bug Fixes

• Overlay elements are not fully visible in child grid if they need to show outside the bounds of their owner grid. #4095
• When open a date picker from the child grid its position is not correct #4090
• Row Edit overlay banner visible outside the grid when scrolling #4139
• Remote virtualization doesn't calculate correctly the total number of rows on the server #4130
• IgxHierarchicalGrid doesn't retain the scrollbars when the Paging feature is used #3940
• Grid doesn't reflect the applied formatter immediately #3819
• Setting groupingExpressions run-time has different result than using the UI/methods #3952
• There is a shadow, when autocomplete list is empty #3977
• When enabling Toolbar for the Hierarchical Grid its width is not correct compared to the rest of the grid. #4028
• When grid and columns have width in IE the columns are visible outside the grid #3716
• Children of the Hierarchical Grid render vertical scrollbar when using remote data and later disappears. #4029
• IgxGridToolbarComponent is hidden from the API docs #3974
• Excel filter style dialog does not update its position on container scroll. #4043
• Excel style filtering is not styled correctly when used for child grid in IgxHieararchicalGrid #4038
• Field's name instead of header is shown in Excel filtering UI. #4041
• IgxHierarchical grid throws an error on an attempt to pin a column from a child grid #3998
• Number and date filters do not work. #4057
• Subsequent column's values are not filtered based on the filter(s) already applied. #4024
• Excel Style Filtering doesn't show all cell values in a Tree Grid with child collection data binding #4058
• Items get reordered after checking/unchecking a checkbox then scrolling with the mouse wheel. #4063
• Error on app-shell build in the icon module #4065
• Last pinned column is not unpinned when clicking the Right button #4056
• When there is a hidden column it is not possible to move column to the right #4087
• In IE11 it is not possible to group by a column #4078
• Cannot navigate with Shift+Tab keys from root cell to child cell #4086
• The Autocomplete drop-down may be opened using the arrow keys even if disabled #4101
• Sub menu in excel style filtering is too high #4104
• igxSelect - clicking selected item does not close the items container #4105
• Row editing overlay banner not shown when enter row editing #4117
• In IgxHierarchicalGrid, the innermost child grid summary has an offset. #4108

7.1.9

Bug Fixes

• igx-grid: Incorrect height calculation when setting height in percent and binding empty data. #3950
• Grid doesn't reflect the applied formatter immediately #3819
• Cannot set chip as selected through API if selectable is false #2383
• IgxCombo - Keyboard navigation in combo with remote data is incorrect #4049
• Setting groupingExpressions run-time has different result than using the UI/methods #3952
• Error on app-shell build in the icon module #4065
• Grid/TreeGrid toolbar dropdowns reopen when trying to close it every other time #4045
• When grid and columns have width in IE the columns are visible outside the grid #3716
• IgxGridToolbarComponent is hidden from the API docs #3974
• igx-grid: row virtualization doesn't work when setting height in percent if you fetch and bind data after initial rendering. #3949
• IgxToggleAction logs deprecated message in the console #4126

6.2.11

Bug Fixes

• igx-grid: Incorrect height calculation when setting height in percent and binding empty data. #3950
• Cannot set chip as selected through API if selectable is false #2383
• Setting groupingExpressions run-time has different result than using the UI/methods #3952
• igx-grid: row virtualization doesn't work when setting height in percent if you fetch and bind data after initial rendering. #3949

7.2.0-beta.5

Bug fixes

• Excel style filtering breaks AoT builds #4025
• IgxCombo - Keyboard navigation in combo with remote data is incorrect #4049
• fix(toolbar): fixing drop-down flickering #4061
• Position content relative to wrapper #4053
• fix(igxChip): Fix chip select icon not showing when selected and selectable is false. #4015
• Cannot set property 'afterOperator' of undefined console error for date column #4047
• Cannot read property 'filteringOperands' of undefined console error #4044
• Move dragGhost into grid's outlet #3670
• When a column is moved in a grid using a theme, the drag-ghost is not styled in the theme's color #2518

7.2.0-beta.4

New Features

Excel-style filtering #3592
Month picker #3126
Using text field input for date picker #3034

Bug Fixes

• Header height is incorrect when having excel style filtering and multi-column headers. #4034
• Excel style filtering UI refactorings #4039
• IgxSelect - onSelection is emitted even if the selection does not change #4036
• Custom filter dialog opens pre-populated with currently applied filter conditions. #4023
• Cleanup combo and drop down API #4022
• Implement EditorProvider interface so igxFocus can work with the input. #3996
• Fix for lazy-loading issue #3988 #4003
• IgxSelect - first key nav on closed select with initial value is incorrect #4010
• Add clone method to Position strategies #3933
• Include rc-marked versions in the @next package stream #4009
• Calculate width before opening the drop down #4008
• Implement EditorProvider interface - igxCombo. #4006
• IgxCombo - Clearing item filter sometimes empties drop down list #4000
• IgxCombo - Keyboard navigation ArrowDown stutters on chunk load #3999
• Row edit overlay text missing left margin #3976
• Dynamically created components with overlay service can't be resolved when lazy loading #3988
• IgxSelect positioning in IE when there is scroll does not work as expected for scrolled items #3921
• IgxToggle open method always tries to get id even when it has one #3971
• Auto positioning strategy requires re-position when overlay height changes #3931
• Add positioning tests to IgxSelect #3934
• KeyDown event is no longer fired when clicked inside an overlay #3832
• fix(Grid): Hide grouped columns after columns have been generated in ngAfterContentInit. #3964
• Committing/discarding transactions doesn't work correctly for child grids #3960
• If the columns don't fit the treeGrid viewport, horizontal scrollbar in TreeGrid is gone/disappears #3808
• In some cases, click event is not triggered in igx-overlay #3595
• Update horizontal virtualization state for rows re-inserted from cache. #3941
• fix(Grid): Removing forEachOperation accumulation since it’s slow and… #3937
• Required date picker bound to displayData is shown invalid initially. #3641
• IgxHierarchicalGrid throws an exception when the keyboard is used to navigate through a child grid with no data. #3935

7.1.8

Bug Fixes

• Required date picker bound to displayData is shown invalid initially. #3641
• If the columns don't fit the treeGrid viewport, horizontal scrollbar in TreeGrid is gone/disappears #3808
• igxGrid setting autogenerate and groupingExpressions inputs results in errors #3951

6.2.10

Bug Fixes

• Cells position is changed when scroll vertical #3094
• igxGrid setting autogenerate and groupingExpressions inputs results in errors #3951

7.1.7

Bug fixes

• refactor(card): apply the content color to any text element #3878
• style(linear-bar): Fix text alignment #3862