9.1.22

Bug fixing

• First column header captures focus upon other header click when empty data source is bound #8104
• igx-dialog - isOpen is not bindable #8320
• igxDatePicker: Input field is auto-focused on load (IE11) #8165
• Selecting the "Clear column filters" option does not clear the search criteria #8372
• Error is thrown when open ESF during unique column values loading #8388

10.2.0

10.2.0

General

• IgxGridActions
  • Added asMenuItems Input for grid actions - igx-grid-editing-actions, igx-grid-pinning-actions. When set to true will render the related action buttons as separate menu items with button and label.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Behavioral Change - The Excel Style Filtering has been reworked to provide filtering experience such as in Excel. This includes the following changes:
    • You can close the Excel Style Filtering menu by pressing Ctrl + Shift + L.
    • You can apply the filter by pressing Enter.
    • When searching items in the Excel Style Filtering menu, only the rows that match your search term will be filtered in.
    • By checking the Add current selection to filter option, the new search results will be added to the previously filtered items.
• IgxInputGroup
  • Breaking Change - Removed fluent, fluent_search, bootstrap, and indigo as possible values for the type input property.
  • Behavioral Change - The styling of the input group is now dictated by the theme being used. The remaining types - line, border, and box will only have effect on the styling when used with the material theme. The search type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Rename outputs
    onRowEditEnter to rowEditEnter
onCellEditEnter to cellEditEnter
onCellEdit to cellEdit
onRowEdit to rowEdit
  • Breaking Change - The onCellEditCancel event is replaced by the new cellEditExit event that emits every time the editable cell exits edit mode.
  • Breaking Change - The onRowEditCancel event is replaced by the new rowEditExit event that emits every time the editable row exits edit mode.
• IgxOverlay
  • Breaking Change - target property in PositionSettings has been deprecated. You can set the attaching target for the component to show in OverlaySettings instead.
• IgxToggleDirective
  • onAppended, onOpened and onClosed events are emitting now arguments of ToggleViewEventArgs type.
  • onOpening and onClosing events are emitting now arguments of ToggleViewCancelableEventArgs type.
• IgxSelect
  • Added aria-labelledby property for the items list container(marked as role="listbox"). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
• IgxDatePicker
  • Breaking Change - Deprecated the label property.
  • Added aria-labelledby property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
• igxNavigationDrawer
  • Added disableAnimation property which enables/disables the animation, when toggling the drawer. Set to false by default.
• igxTabs
  • Added disableAnimation property which enables/disables the transition animation of the tabs' content. Set to false by default.
• IgxExpansionPanel
  • IExpansionPanelEventArgs.panel - Deprecated. Usе owner property to get a reference to the panel.
• IgxCalendarComponent, IgxMonthsViewComponent and IgxYearsViewComponent
  • tabIndex property was removed in order to improve on page navigation and to be compliant with W3 accessability recommendations; Also the date grid in the calendar is now only one tab stop, the same approach is applied and in the IgxMonthsViewComponent and IgxYearsViewComponent;

New Features

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
  • cellEditExit is a new event that fires when cell exits edit mode
  • rowEditExit is a new event that fires when row exits edit mode
  • Added getRowData(rowSelector) method that returns an object that represents the data that is contained in the specified row component.
  • Added ability to spawn row adding UI through exposed methods. Note that rowEditing should be enabled.
    • beginAddRow method which starts the adding row UI.
    • beginAddChild method which starts the adding child UI.

    this.grid.beginAddRow(rowID);

    • Added an input properties to IgxGridEditingActions component to show/hide add row and add child buttons which trigger the UI based on context expression.

    <igx-tree-grid [rowEditing]="true">
        <igx-action-strip #actionStrip>
            <igx-grid-editing-actions [addRow]="true" [addChild]="actionStrip.context.level < 3">
            </igx-grid-editing-actions>
        </igx-action-strip>
    </igx-tree-grid>

  • A new locale and pipeArgs parameters are introduced in the operate method exposed by the IgxNumberSummaryOperand and IgxDateSummaryOperand, which exposes the grid locale. Use the locale parameter to get localized summary data (as per the grid locale. If not passed, locale defaults to 'en-US'). Use the pipeArgs parameter only if you want to customize the format of the date and numeric values that will be returned.

  class MySummary extends IgxDateSummaryOperand {
      operate(columnData: any[], allData = [], fieldName, locale: string, pipeArgs: IColumnPipeArgs): IgxSummaryResult[] {
          const pipeArgs: IColumnPipeArgs = {
              format: 'longDate',
              timezone: 'UTC',
              digitsInfo: '1.1-2'
          }
          const result = super.operate(columnData, allData, fieldName, locale, pipeArgs);
          return result;
      }
  }

  • A new pipeArgs input property is exposed by the IgxColumnComponent, which is used to pass arguments to the Angular DatePipe and DecimalPipe, to format the display for date and numeric columns.

• IGX_INPUT_GROUP_TYPE injection token
  • Allows for setting an input group type on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a type.
• IgxExcelExporterService
  • Added worksheetName property to the IgxExcelExporterOptions, that allows setting the name of the worksheet.
• IgxDatePicker
  • The the label property have been deprecated and a custom label can also be set by nesting a inside the tags.
• IgxTimePicker
  • Added a custom label functionality.
• IgxCalendar and IgxDatePicker - new showWeekNumbers input, that allows showing of the week number at left side of content area.
• IgxOverlay
  • The PositionSettings target property has been deprecated and moved to OverlaySettings.
  • An optional Point/HTML Element parameter target has been added to the position() method
  • Added createAbsoluteOverlaySettings and createRelativeOverlaySettings methods which create non-modal OverlaySettings based on predefined PositionSettings. The methods are exposed off the IgxOverlayService.
    • createAbsoluteOverlaySettings creates non-modal OverlaySettings with GlobalPositionStrategy or ContainerPositionStrategy if an outlet is provided. Accepts AbsolutePosition enumeration, which could be Center, Top and Bottom. Default is Center.

        const globalOverlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(AbsolutePosition.Top);

    • createRelativeOverlaySettings creates OverlaySettings with AutoPositionStrategy, ConnectedPositioningStrategy or ElasticPositionStrategy. Accepts target, strategy and position. The target is the attaching point or element for the component to show. The position strategy is a RelativePositionStrategy enumeration, which defaults to Auto. The position is a RelativePosition enumeration. Possible values are Above, Below, Before, After and Default. The default option is Default, which positions the element below the target, left aligned.

        const targetElement = this.button.nativeElement;
        const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings(
                targetElement,
                RelativePositionStrategy.Connected,
                RelativePosition.Above);

• IgxToast
  • The component now utilizes the IgxOverlayService to position itself in the DOM.
  • An additional input property outlet has been added to allow users to specify custom Overlay Outlets using the IgxOverlayOutletDirective;
  • The position property now accepts values of type IgxToastPosition that work with strict templates.
• IgxExpansionPanelHeader
  • onInteraction is now cancelable
  • Added iconRef property. This can be used to get a reference to the displayed expand/collapsed indicator. Returns null if iconPosition is set to NONE.

10.1.10

Bug fixes

• i18n not being applied on buttons for hide/pin dropdowns. #8185
• excelStyleFiltering search duplicates records when filteringIgnoreCase is set to true #8162
• DataGrid seems not to render with dynamic/asynchronous router-outlet #8071
• The uniqueColumnValuesStrategy is fired multiple times when opening an Excel Style Filtering #8138
• Excel Style Filtering throws error for column with numeric values and dataType string #8420
• IgxDatePipe is not transforming values of type ISO string and number #8195
• IViewDateChangeEventArgs interface is not exported #8322

9.1.21

Bug fixes

• excelStyleFiltering search duplicates records when filteringIgnoreCase is set to true #8162
• DataGrid seems not to render with dynamic/asynchronous router-outlet #8071
• The uniqueColumnValuesStrategy is fired multiple times when opening an Excel Style Filtering #8138
• Excel Style Filtering throws error for column with numeric values and dataType string #8420

10.2.0-rc.1

General

• IgxGridActions
  • Added asMenuItems Input for grid actions - igx-grid-editing-actions, igx-grid-pinning-actions. When set to true will render the related action buttons as separate menu items with button and label.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Behavioral Change - The Excel Style Filtering has been reworked to provide filtering experience such as in Excel. This includes the following changes:
    • You can close the Excel Style Filtering menu by pressing Ctrl + Shift + L.
    • You can apply the filter by pressing Enter.
    • When searching items in the Excel Style Filtering menu, only the rows that match your search term will be filtered in.
    • By checking the Add current selection to filter option, the new search results will be added to the previously filtered items.
• IgxInputGroup
  • Breaking Change - Removed fluent, fluent_search, bootstrap, and indigo as possible values for the type input property.
  • Behavioral Change - The styling of the input group is now dictated by the theme being used. The remaining types - line, border, and box will only have effect on the styling when used with the material theme. The search type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Rename outputs
    onRowEditEnter to rowEditEnter
onCellEditEnter to cellEditEnter
onCellEdit to cellEdit
onRowEdit to rowEdit
  • Breaking Change - The onCellEditCancel event is replaced by the new cellEditExit event that emits every time the editable cell exits edit mode.
  • Breaking Change - The onRowEditCancel event is replaced by the new rowEditExit event that emits every time the editable row exits edit mode.
• IgxOverlay
  • Breaking Change - target property in PositionSettings has been deprecated. You can set the attaching target for the component to show in OverlaySettings instead.
• IgxToggleDirective
  • onAppended, onOpened and onClosed events are emitting now arguments of ToggleViewEventArgs type.
  • onOpening and onClosing events are emitting now arguments of ToggleViewCancelableEventArgs type.
• IgxSelect
  • Added aria-labelledby property for the items list container(marked as role="listbox"). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
• IgxDatePicker
  • Breaking Change - Deprecated the label property.
  • Added aria-labelledby property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
• igxNavigationDrawer
  • Added disableAnimation property which enables/disables the animation, when toggling the drawer. Set to false by default.
• igxTabs
  • Added disableAnimation property which enables/disables the transition animation of the tabs' content. Set to false by default.
• IgxExpansionPanel
  • IExpansionPanelEventArgs.panel - Deprecated. Usе owner property to get a reference to the panel.
• IgxCalendarComponent, IgxMonthsViewComponent and IgxYearsViewComponent
  • tabIndex property was removed in order to improve on page navigation and to be compliant with W3 accessability recommendations; Also the date grid in the calendar is now only one tab stop, the same approach is applied and in the IgxMonthsViewComponent and IgxYearsViewComponent;

New Features

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
  • cellEditExit is a new event that fires when cell exits edit mode
  • rowEditExit is a new event that fires when row exits edit mode
  • Added getRowData(rowSelector) method that returns an object that represents the data that is contained in the specified row component.
  • Added ability to spawn row adding UI through exposed methods. Note that rowEditing should be enabled.
    • beginAddRow method which starts the adding row UI.
    • beginAddChild method which starts the adding child UI.

    this.grid.beginAddRow(rowID);

    • Added an input properties to IgxGridEditingActions component to show/hide add row and add child buttons which trigger the UI based on context expression.

    <igx-tree-grid [rowEditing]="true">
        <igx-action-strip #actionStrip>
            <igx-grid-editing-actions [addRow]="true" [addChild]="actionStrip.context.level < 3">
            </igx-grid-editing-actions>
        </igx-action-strip>
    </igx-tree-grid>

  • A new locale and pipeArgs parameters are introduced in the operate method exposed by the IgxNumberSummaryOperand and IgxDateSummaryOperand, which exposes the grid locale. Use the locale parameter to get localized summary data (as per the grid locale. If not passed, locale defaults to 'en-US'). Use the pipeArgs parameter only if you want to customize the format of the date and numeric values that will be returned.

  class MySummary extends IgxDateSummaryOperand {
      operate(columnData: any[], allData = [], fieldName, locale: string, pipeArgs: IColumnPipeArgs): IgxSummaryResult[] {
          const pipeArgs: IColumnPipeArgs = {
              format: 'longDate',
              timezone: 'UTC',
              digitsInfo: '1.1-2'
          }
          const result = super.operate(columnData, allData, fieldName, locale, pipeArgs);
          return result;
      }
  }

  • A new pipeArgs input property is exposed by the IgxColumnComponent, which is used to pass arguments to the Angular DatePipe and DecimalPipe, to format the display for date and numeric columns.

• IGX_INPUT_GROUP_TYPE injection token
  • Allows for setting an input group type on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a type.
• IgxExcelExporterService
  • Added worksheetName property to the IgxExcelExporterOptions, that allows setting the name of the worksheet.
• IgxDatePicker
  • The the label property have been deprecated and a custom label can also be set by nesting a inside the tags.
• IgxTimePicker
  • Added a custom label functionality.
• IgxCalendar and IgxDatePicker - new showWeekNumbers input, that allows showing of the week number at left side of content area.
• IgxOverlay
  • The PositionSettings target property has been deprecated and moved to OverlaySettings.
  • An optional Point/HTML Element parameter target has been added to the position() method
  • Added createAbsoluteOverlaySettings and createRelativeOverlaySettings methods which create non-modal OverlaySettings based on predefined PositionSettings. The methods are exposed off the IgxOverlayService.
    • createAbsoluteOverlaySettings creates non-modal OverlaySettings with GlobalPositionStrategy or ContainerPositionStrategy if an outlet is provided. Accepts AbsolutePosition enumeration, which could be Center, Top and Bottom. Default is Center.

        const globalOverlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(AbsolutePosition.Top);

    • createRelativeOverlaySettings creates OverlaySettings with AutoPositionStrategy, ConnectedPositioningStrategy or ElasticPositionStrategy. Accepts target, strategy and position. The target is the attaching point or element for the component to show. The position strategy is a RelativePositionStrategy enumeration, which defaults to Auto. The position is a RelativePosition enumeration. Possible values are Above, Below, Before, After and Default. The default option is Default, which positions the element below the target, left aligned.

        const targetElement = this.button.nativeElement;
        const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings(
                targetElement,
                RelativePositionStrategy.Connected,
                RelativePosition.Above);

• IgxToast
  • The component now utilizes the IgxOverlayService to position itself in the DOM.
  • An additional input property outlet has been added to allow users to specify custom Overlay Outlets using the IgxOverlayOutletDirective;
  • The position property now accepts values of type IgxToastPosition that work with strict templates.
• IgxExpansionPanelHeader
  • onInteraction is now cancelable
  • Added iconRef property. This can be used to get a reference to the displayed expand/collapsed indicator. Returns null if iconPosition is set to NONE.

10.2.0-rc.0

10.2.0

General

• IgxGridActions
  • Added asMenuItems Input for grid actions - igx-grid-editing-actions, igx-grid-pinning-actions. When set to true will render the related action buttons as separate menu items with button and label.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Behavioral Change - The Excel Style Filtering has been reworked to provide filtering experience such as in Excel. This includes the following changes:
    • You can close the Excel Style Filtering menu by pressing Ctrl + Shift + L.
    • You can apply the filter by pressing Enter.
    • When searching items in the Excel Style Filtering menu, only the rows that match your search term will be filtered in.
    • By checking the Add current selection to filter option, the new search results will be added to the previously filtered items.
• IgxInputGroup
  • Breaking Change - Removed fluent, fluent_search, bootstrap, and indigo as possible values for the type input property.
  • Behavioral Change - The styling of the input group is now dictated by the theme being used. The remaining types - line, border, and box will only have effect on the styling when used with the material theme. The search type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Rename outputs
    onRowEditEnter to rowEditEnter
onCellEditEnter to cellEditEnter
onCellEdit to cellEdit
onRowEdit to rowEdit
  • Breaking Change - The onCellEditCancel event is replaced by the new cellEditExit event that emits every time the editable cell exits edit mode.
  • Breaking Change - The onRowEditCancel event is replaced by the new rowEditExit event that emits every time the editable row exits edit mode.
• IgxOverlay
  • Breaking Change - target property in PositionSettings has been deprecated. You can set the attaching target for the component to show in OverlaySettings instead.
• IgxToggleDirective
  • onAppended, onOpened and onClosed events are emitting now arguments of ToggleViewEventArgs type.
  • onOpening and onClosing events are emitting now arguments of ToggleViewCancelableEventArgs type.
• IgxSelect
  • Added aria-labelledby property for the items list container(marked as role="listbox"). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
• IgxDatePicker
  • Breaking Change - Deprecated the label property.
  • Added aria-labelledby property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
• igxNavigationDrawer
  • Added disableAnimation property which enables/disables the animation, when toggling the drawer. Set to false by default.
• igxTabs
  • Added disableAnimation property which enables/disables the transition animation of the tabs' content. Set to false by default.
• IgxExpansionPanel
  • IExpansionPanelEventArgs.panel - Deprecated. Usе owner property to get a reference to the panel.
• IgxCalendarComponent, IgxMonthsViewComponent and IgxYearsViewComponent
  • tabIndex property was removed in order to improve on page navigation and to be compliant with W3 accessability recommendations; Also the date grid in the calendar is now only one tab stop, the same approach is applied and in the IgxMonthsViewComponent and IgxYearsViewComponent;

New Features

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
  • cellEditExit is a new event that fires when cell exits edit mode
  • rowEditExit is a new event that fires when row exits edit mode
  • Added getRowData(rowSelector) method that returns an object that represents the data that is contained in the specified row component.
  • Added ability to spawn row adding UI through exposed methods. Note that rowEditing should be enabled.
    • beginAddRow method which starts the adding row UI.
    • beginAddChild method which starts the adding child UI.

    this.grid.beginAddRow(rowID);

    • Added an input properties to IgxGridEditingActions component to show/hide add row and add child buttons which trigger the UI based on context expression.

    <igx-tree-grid [rowEditing]="true">
        <igx-action-strip #actionStrip>
            <igx-grid-editing-actions [addRow]="true" [addChild]="actionStrip.context.level < 3">
            </igx-grid-editing-actions>
        </igx-action-strip>
    </igx-tree-grid>

  • A new locale and pipeArgs parameters are introduced in the operate method exposed by the IgxNumberSummaryOperand and IgxDateSummaryOperand, which exposes the grid locale. Use the locale parameter to get localized summary data (as per the grid locale. If not passed, locale defaults to 'en-US'). Use the pipeArgs parameter only if you want to customize the format of the date and numeric values that will be returned.

  class MySummary extends IgxDateSummaryOperand {
      operate(columnData: any[], allData = [], fieldName, locale: string, pipeArgs: IColumnPipeArgs): IgxSummaryResult[] {
          const pipeArgs: IColumnPipeArgs = {
              format: 'longDate',
              timezone: 'UTC',
              digitsInfo: '1.1-2'
          }
          const result = super.operate(columnData, allData, fieldName, locale, pipeArgs);
          return result;
      }
  }

  • A new pipeArgs input property is exposed by the IgxColumnComponent, which is used to pass arguments to the Angular DatePipe and DecimalPipe, to format the display for date and numeric columns.

• IGX_INPUT_GROUP_TYPE injection token
  • Allows for setting an input group type on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a type.
• IgxExcelExporterService
  • Added worksheetName property to the IgxExcelExporterOptions, that allows setting the name of the worksheet.
• IgxDatePicker
  • The the label property have been deprecated and a custom label can also be set by nesting a inside the tags.
• IgxTimePicker
  • Added a custom label functionality.
• IgxCalendar and IgxDatePicker - new showWeekNumbers input, that allows showing of the week number at left side of content area.
• IgxOverlay
  • The PositionSettings target property has been deprecated and moved to OverlaySettings.
  • An optional Point/HTML Element parameter target has been added to the position() method
  • Added createAbsoluteOverlaySettings and createRelativeOverlaySettings methods which create non-modal OverlaySettings based on predefined PositionSettings. The methods are exposed off the IgxOverlayService.
    • createAbsoluteOverlaySettings creates non-modal OverlaySettings with GlobalPositionStrategy or ContainerPositionStrategy if an outlet is provided. Accepts AbsolutePosition enumeration, which could be Center, Top and Bottom. Default is Center.

        const globalOverlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(AbsolutePosition.Top);

    • createRelativeOverlaySettings creates OverlaySettings with AutoPositionStrategy, ConnectedPositioningStrategy or ElasticPositionStrategy. Accepts target, strategy and position. The target is the attaching point or element for the component to show. The position strategy is a RelativePositionStrategy enumeration, which defaults to Auto. The position is a RelativePosition enumeration. Possible values are Above, Below, Before, After and Default. The default option is Default, which positions the element below the target, left aligned.

        const targetElement = this.button.nativeElement;
        const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings(
                targetElement,
                RelativePositionStrategy.Connected,
                RelativePosition.Above);

• IgxToast
  • The component now utilizes the IgxOverlayService to position itself in the DOM.
  • An additional input property outlet has been added to allow users to specify custom Overlay Outlets using the IgxOverlayOutletDirective;
  • The position property now accepts values of type IgxToastPosition that work with strict templates.
• IgxExpansionPanelHeader
  • onInteraction is now cancelable
  • Added iconRef property. This can be used to get a reference to the displayed expand/collapsed indicator. Returns null if iconPosition is set to NONE.

10.2.0-beta.1

General

• IgxGridActions
  • Added asMenuItems Input for grid actions - igx-grid-editing-actions, igx-grid-pinning-actions. When set to true will render the related action buttons as separate menu items with button and label.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Behavioral Change - The Excel Style Filtering has been reworked to provide filtering experience such as in Excel. This includes the following changes:
    • You can close the Excel Style Filtering menu by pressing Ctrl + Shift + L.
    • You can apply the filter by pressing Enter.
    • When searching items in the Excel Style Filtering menu, only the rows that match your search term will be filtered in.
    • By checking the Add current selection to filter option, the new search results will be added to the previously filtered items.
• IgxInputGroup
  • Breaking Change - Removed fluent, fluent_search, bootstrap, and indigo as possible values for the type input property.
  • Behavioral Change - The styling of the input group is now dictated by the theme being used. The remaining types - line, border, and box will only have effect on the styling when used with the material theme. The search type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Rename outputs
    onRowEditEnter to rowEditEnter
onCellEditEnter to cellEditEnter
onCellEdit to cellEdit
onRowEdit to rowEdit
  • Breaking Change - The onCellEditCancel event is replaced by the new cellEditExit event that emits every time the editable cell exits edit mode.
  • Breaking Change - The onRowEditCancel event is replaced by the new rowEditExit event that emits every time the editable row exits edit mode.
• IgxOverlay
  • Breaking Change - target property in PositionSettings has been deprecated. You can set the attaching target for the component to show in OverlaySettings instead.
• IgxToggleDirective
  • onAppended, onOpened and onClosed events are emitting now arguments of ToggleViewEventArgs type.
  • onOpening and onClosing events are emitting now arguments of ToggleViewCancelableEventArgs type.
• IgxSelect
  • Added aria-labelledby property for the items list container(marked as role="listbox"). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
• IgxDatePicker
  • Breaking Change - Deprecated the label property.
  • Added aria-labelledby property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
• igxNavigationDrawer
  • Added disableAnimation property which enables/disables the animation, when toggling the drawer. Set to false by default.
• igxTabs
  • Added disableAnimation property which enables/disables the transition animation of the tabs' content. Set to false by default.
• IgxExpansionPanel
  • IExpansionPanelEventArgs.panel - Deprecated. Usе owner property to get a reference to the panel.
• IgxCalendarComponent, IgxMonthsViewComponent and IgxYearsViewComponent
  • tabIndex property was removed in order to improve on page navigation and to be compliant with W3 accessability recommendations; Also the date grid in the calendar is now only one tab stop, the same approach is applied and in the IgxMonthsViewComponent and IgxYearsViewComponent;

New Features

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
  • cellEditExit is a new event that fires when cell exits edit mode
  • rowEditExit is a new event that fires when row exits edit mode
  • Added getRowData(rowSelector) method that returns an object that represents the data that is contained in the specified row component.
  • Added ability to spawn row adding UI through exposed methods. Note that rowEditing should be enabled.
    • beginAddRow method which starts the adding row UI.
    • beginAddChild method which starts the adding child UI.

    this.grid.beginAddRow(rowID);

    • Added an input properties to IgxGridEditingActions component to show/hide add row and add child buttons which trigger the UI based on context expression.

    <igx-tree-grid [rowEditing]="true">
        <igx-action-strip #actionStrip>
            <igx-grid-editing-actions [addRow]="true" [addChild]="actionStrip.context.level < 3">
            </igx-grid-editing-actions>
        </igx-action-strip>
    </igx-tree-grid>

  • A new locale and pipeArgs parameters are introduced in the operate method exposed by the IgxNumberSummaryOperand and IgxDateSummaryOperand, which exposes the grid locale. Use the locale parameter to get localized summary data (as per the grid locale. If not passed, locale defaults to 'en-US'). Use the pipeArgs parameter only if you want to customize the format of the date and numeric values that will be returned.

  class MySummary extends IgxDateSummaryOperand {
      operate(columnData: any[], allData = [], fieldName, locale: string, pipeArgs: IColumnPipeArgs): IgxSummaryResult[] {
          const pipeArgs: IColumnPipeArgs = {
              format: 'longDate',
              timezone: 'UTC',
              digitsInfo: '1.1-2'
          }
          const result = super.operate(columnData, allData, fieldName, locale, pipeArgs);
          return result;
      }
  }

  • A new pipeArgs input property is exposed by the IgxColumnComponent, which is used to pass arguments to the Angular DatePipe and DecimalPipe, to format the display for date and numeric columns.

• IGX_INPUT_GROUP_TYPE injection token
  • Allows for setting an input group type on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a type.
• IgxExcelExporterService
  • Added worksheetName property to the IgxExcelExporterOptions, that allows setting the name of the worksheet.
• IgxDatePicker
  • The the label property have been deprecated and a custom label can also be set by nesting a inside the tags.
• IgxTimePicker
  • Added a custom label functionality.
• IgxCalendar and IgxDatePicker - new showWeekNumbers input, that allows showing of the week number at left side of content area.
• IgxOverlay
  • The PositionSettings target property has been deprecated and moved to OverlaySettings.
  • An optional Point/HTML Element parameter target has been added to the position() method
  • Added createAbsoluteOverlaySettings and createRelativeOverlaySettings methods which create non-modal OverlaySettings based on predefined PositionSettings. The methods are exposed off the IgxOverlayService.
    • createAbsoluteOverlaySettings creates non-modal OverlaySettings with GlobalPositionStrategy or ContainerPositionStrategy if an outlet is provided. Accepts AbsolutePosition enumeration, which could be Center, Top and Bottom. Default is Center.

        const globalOverlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(AbsolutePosition.Top);

    • createRelativeOverlaySettings creates OverlaySettings with AutoPositionStrategy, ConnectedPositioningStrategy or ElasticPositionStrategy. Accepts target, strategy and position. The target is the attaching point or element for the component to show. The position strategy is a RelativePositionStrategy enumeration, which defaults to Auto. The position is a RelativePosition enumeration. Possible values are Above, Below, Before, After and Default. The default option is Default, which positions the element below the target, left aligned.

        const targetElement = this.button.nativeElement;
        const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings(
                targetElement,
                RelativePositionStrategy.Connected,
                RelativePosition.Above);

• IgxToast
  • The component now utilizes the IgxOverlayService to position itself in the DOM.
  • An additional input property outlet has been added to allow users to specify custom Overlay Outlets using the IgxOverlayOutletDirective;
  • The position property now accepts values of type IgxToastPosition that work with strict templates.
• IgxExpansionPanelHeader
  • onInteraction is now cancelable
  • Added iconRef property. This can be used to get a reference to the displayed expand/collapsed indicator. Returns null if iconPosition is set to NONE.

10.2.0-beta.0

10.2.0

General

• IgxGridActions
  • Added asMenuItems Input for grid actions - igx-grid-editing-actions, igx-grid-pinning-actions. When set to true will render the related action buttons as separate menu items with button and label.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Behavioral Change - The Excel Style Filtering has been reworked to provide filtering experience such as in Excel. This includes the following changes:
    • You can close the Excel Style Filtering menu by pressing Ctrl + Shift + L.
    • You can apply the filter by pressing Enter.
    • When searching items in the Excel Style Filtering menu, only the rows that match your search term will be filtered in.
    • By checking the Add current selection to filter option, the new search results will be added to the previously filtered items.
• IgxInputGroup
  • Breaking Change - Removed fluent, fluent_search, bootstrap, and indigo as possible values for the type input property.
  • Behavioral Change - The styling of the input group is now dictated by the theme being used. The remaining types - line, border, and box will only have effect on the styling when used with the material theme. The search type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Rename outputs
    onRowEditEnter to rowEditEnter
onCellEditEnter to cellEditEnter
onCellEdit to cellEdit
onRowEdit to rowEdit
  • Breaking Change - The onCellEditCancel event is replaced by the new cellEditExit event that emits every time the editable cell exits edit mode.
  • Breaking Change - The onRowEditCancel event is replaced by the new rowEditExit event that emits every time the editable row exits edit mode.
• IgxOverlay
  • Breaking Change - target property in PositionSettings has been deprecated. You can set the attaching target for the component to show in OverlaySettings instead.
• IgxToggleDirective
  • onAppended, onOpened and onClosed events are emitting now arguments of ToggleViewEventArgs type.
  • onOpening and onClosing events are emitting now arguments of ToggleViewCancelableEventArgs type.
• IgxSelect
  • Added aria-labelledby property for the items list container(marked as role="listbox"). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
• IgxDatePicker
  • Breaking Change - Deprecated the label property.
  • Added aria-labelledby property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
• igxNavigationDrawer
  • Added disableAnimation property which enables/disables the animation, when toggling the drawer. Set to false by default.
• igxTabs
  • Added disableAnimation property which enables/disables the transition animation of the tabs' content. Set to false by default.
• IgxExpansionPanel
  • IExpansionPanelEventArgs.panel - Deprecated. Usе owner property to get a reference to the panel.
• IgxCalendarComponent, IgxMonthsViewComponent and IgxYearsViewComponent
  • tabIndex property was removed in order to improve on page navigation and to be compliant with W3 accessability recommendations; Also the date grid in the calendar is now only one tab stop, the same approach is applied and in the IgxMonthsViewComponent and IgxYearsViewComponent;

New Features

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
  • cellEditExit is a new event that fires when cell exits edit mode
  • rowEditExit is a new event that fires when row exits edit mode
  • Added getRowData(rowSelector) method that returns an object that represents the data that is contained in the specified row component.
  • Added ability to spawn row adding UI through exoposed methods. Note that rowEditing should be enabled.
    • beginAddRow method which starts the adding row UI.
    • beginAddChild method which starts the adding child UI.

    this.grid.beginAddRow(rowID);

    • Added an input properties to IgxGridEditingActions component to show/hide add row and add child buttons which trigger the UI based on context expression.

    <igx-tree-grid [rowEditing]="true">
        <igx-action-strip #actionStrip>
            <igx-grid-editing-actions [addRow]="true" [addChild]="actionStrip.context.level < 3">
            </igx-grid-editing-actions>
        </igx-action-strip>
    </igx-tree-grid>

• IGX_INPUT_GROUP_TYPE injection token
  • Allows for setting an input group type on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a type.
• IgxExcelExporterService
  • Added worksheetName property to the IgxExcelExporterOptions, that allows setting the name of the worksheet.
• IgxDatePicker
  • The the label property have been deprecated and a custom label can also be set by nesting a inside the tags.
• IgxTimePicker
  • Added a custom label functionality.
• IgxCalendar and IgxDatePicker - new showWeekNumbers input, that allows showing of the week number at left side of content area.
• IgxOverlay
  • The PositionSettings target property has been deprecated and moved to OverlaySettings.
  • An optional Point/HTML Element parameter target has been added to the position() method
  • Added createAbsoluteOverlaySettings and createRelativeOverlaySettings methods which create non-modal OverlaySettings based on predefined PositionSettings. The methods are exposed off the IgxOverlayService.
    • createAbsoluteOverlaySettings creates non-modal OverlaySettings with GlobalPositionStrategy or ContainerPositionStrategy if an outlet is provided. Accepts AbsolutePosition enumeration, which could be Center, Top and Bottom. Default is Center.

        const globalOverlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(AbsolutePosition.Top);

    • createRelativeOverlaySettings creates OverlaySettings with AutoPositionStrategy, ConnectedPositioningStrategy or ElasticPositionStrategy. Accepts target, strategy and position. The target is the attaching point or element for the component to show. The position strategy is a RelativePositionStrategy enumeration, which defaults to Auto. The position is a RelativePosition enumeration. Possible values are Above, Below, Before, After and Default. The default option is Default, which positions the element below the target, left aligned.

        const targetElement = this.button.nativeElement;
        const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings(
                targetElement,
                RelativePositionStrategy.Connected,
                RelativePosition.Above);

• IgxToast
  • The component now utilizes the IgxOverlayService to position itself in the DOM.
  • An additional input property outlet has been added to allow users to specify custom Overlay Outlets using the IgxOverlayOutletDirective;
  • The position property now accepts values of type IgxToastPosition that work with strict templates.
• IgxExpansionPanelHeader
  • onInteraction is now cancelable
  • Added iconRef property. This can be used to get a reference to the displayed expand/collapsed indicator. Returns null if iconPosition is set to NONE.

10.1.9

Bug fixes

• Missing right border on child-headers with light indigo theme #8172
• Make selectedIndex an Input #2253
• Error thrown when trying to close the overlay on outside click and target is set as Point #8297
• IgxOverlay does not close on outside click on iOS #5853

9.1.20

Bug fixes

• Make selectedIndex an Input #2253
• Error thrown when trying to close the overlay on outside click and target is set as Point #8297
• IgxOverlay does not close on outside click on iOS #5853