Skip to content

Releases: IgniteUI/igniteui-angular

9.1.0-rc.1

27 May 15:17
3da8325

Choose a tag to compare

9.1.0-rc.1 Pre-release
Pre-release

9.1.0

General

  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

    • Behavioral Change - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
  • igx-paginator - The following inputs have been deprecated for the paginator component and will be removed in future versions

    • selectLabel and prepositionPage Use 'resourceStrings' to set/get values.
  • IgxInputGroup

    • Renamed supressInputAutofocus input to suppressInputAutofocus
    • Clicking on prefix, suffix or label elements in the Input Group will no longer blur and re-focus the input.

Themes

  • Breaking Change Change the default $legacy-support value to false in the igx-theme function.

New Features

  • IgxDateTimeEditor directive added.

    • Allows the user to set and edit date and time in a chosen input element.

    • Can edit date or time portion, using an editable masked input.

    • Additionally, can specify a desired display and input format, as well as min and max values.

    • A basic configuration scenario setting a Date object as a value:

    <igx-input-group>
        <input type="text" igxInput igxDateTimeEditor [value]="date"/>
    </igx-input-group>
    • Two-way data-binding via an ngModel:
    <igx-input-group>
        <input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/>
    </igx-input-group>
  • IgxDateRangePicker component added.

    • Allows the selection of a range of dates from a calendar UI or input fields. Supports dialog and dropdown modes.
    • Added IgxDateRangeStartComponent and IgxDateRangeEndComponent.
    • The default template consists of a single readonly field:
    <igx-date-range-picker [(ngModel)]="range"></igx-date-range-picker>
    • Projection of input fields using igxDateTimeEditor
      <igx-date-range-picker>
          <igx-date-range-start>
              <input igxInput igxDateTimeEditor [(ngModel)]="range.start">
          </igx-date-range-start>
          <igx-date-range-end>
              <input igxInput igxDateTimeEditor [(ngModel)]="range.end">
          </igx-date-range-end>
      </igx-date-range-picker>
    • Added IgxPickerToggleComponent which allows templating of the default icon in the input through igxPrefix and igxSuffix.
      • default template:
      <igx-date-range-picker>
          <igx-picker-toggle igxSuffix>
              <igx-icon>calendar_view_day</igx-icon>
          </igx-picker-toggle>
      </igx-date-range-picker>
      • with projections:
      <igx-date-range-picker>
          <igx-date-range-start>
              ...
              <igx-picker-toggle igxPrefix>
                  <igx-icon>calendar_view_day</igx-icon>
              </igx-picker-toggle>
              ...
          </igx-date-range-start>
          <igx-date-range-end>
              ...
          </igx-date-range-end>
      </igx-date-range-picker>
  • IgxActionStrip component added.

    • Provides a template area for one or more actions. In its simplest form the Action Strip
      is an overlay of any container and shows additional content over that container.
    <igx-action-strip #actionstrip>
        <igx-icon (click)="doSomeAction()"></igx-icon>
    </igx-action-strip>
  • igxSplitter component added.

    • Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
      Panes can be resized or collapsed/expanded via the UI. Splitter orientation is defined via the type input.
    <igx-splitter [type]="type">
       <igx-splitter-pane>
       	...
       </igx-splitter-pane>
       <igx-splitter-pane>
       	...
       </igx-splitter-pane>
    </igx-splitter>
  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

    • Added ability to pin rows to top or bottom depending on the new pinning input.
      And new API methods pinRow and unpinRow.
    <igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
    public pinningConfiguration: IPinningConfig = { rows: RowPinningPosition.Bottom };
    this.grid.pinRow(rowID);
    • Added support for pinning columns on the right. Change the position of pinning using the new pinning input.
    <igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
    public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
    • Added functionality for column selection.
    • columnSelection property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
    • selected property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.
    • selectable property has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.
    • onColumnSelectionChange event is added for the IgxGrid. It is emitted when the column selection is changed.
    • excelStyleSelectingTemplate property is introduced to IgxGrid, which allows you to set a custom template for the selecting a column in the Excel Style Filter.
    • selectedColumns API method is added for the IgxGrid. It allows to get all selected columns.
    • selectColumns API method is added for the IgxGrid. It allows to select columns by passing array of IgxColumnComponent or column fields.
    • deselectColumns API method is added for the IgxGrid. It allows to deselect columns by passing array of IgxColumnComponent or column fields.
    • deselectAllColumns API method is added for the IgxGrid. It allows to deselect all columns.
    • getSelectedColumnsData API method is added for the IgxGrid. It allows to get the selected columns data.
      Added keyBoard navigation support in the IgxGrid headers. Now is possible to navigate with the arrows keys through grid headers. Also we provide a number of key combinations that trigger a different column functionality like filtering, sorting, grouping and etc. You can read more information in the Grid Specification.
    • Behavioral Change
      • you can not use tab key to navigate between the cell in the Igx Grid. The navigation is performed only with arrow keys.
      • when you are in edit mode with tab key you can navigate to the next editable cell.
      • page up and page down keys will perform action only if the focused element is the tbody of the grid.
      • The grid introduces the following basic tab stops:
        • Toolbar / Group by Area if existing;
        • The first cell in the header row;
        • The first cell in the first body row;
        • The first cell in column summary if exists;
        • Pager UI;
  • IgxCombo:

    • Added autoFocusSearch input that allows to manipulate the combo's opening behavior. When the property is true (by default), the combo's search input is focused on open. When set to false, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.
  • IgxToast:

    • Added functionality for displaying various content into the toast component. It also allows users to access toast styles through its host element.
  • IgxDrag

    • Added igxDragIgnore directive that allows children of the igxDrag element to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored.
    • Added dragDirection input that can specify only one direction of dragging or both.
  • IgxChip

    • Added support for tabIndex attribute applied to the main chip element.
    • Added tabIndex input so it can support change detection as well.
  • IgxHighlightDirective

    • New metadata property was introduced, which allows adding additional, custom logic to the activation condition of a highlighted element.

RTL Support

  • igxSlider have full right-to-left (RTL) support.

8.2.29

01 Jun 11:06
05b6bb0

Choose a tag to compare

Merge pull request #7382 from IgniteUI/PMiteva/disabled-textarea-v.8.2

Remove pointer-events setting on disabled input

9.1.0-rc.0

22 May 14:12
44b2675

Choose a tag to compare

9.1.0-rc.0 Pre-release
Pre-release

9.1.0

General

  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

    • Behavioral Change - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
  • igx-paginator - The following inputs have been deprecated for the paginator component and will be removed in future versions

    • selectLabel and prepositionPage Use 'resourceStrings' to set/get values.
  • IgxInputGroup

    • Renamed supressInputAutofocus input to suppressInputAutofocus
    • Clicking on prefix, suffix or label elements in the Input Group will no longer blur and re-focus the input.

Themes

  • Breaking Change Change the default $legacy-support value to false in the igx-theme function.

New Features

  • IgxDateTimeEditor directive added.

    • Allows the user to set and edit date and time in a chosen input element.

    • Can edit date or time portion, using an editable masked input.

    • Additionally, can specify a desired display and input format, as well as min and max values.

    • A basic configuration scenario setting a Date object as a value:

    <igx-input-group>
        <input type="text" igxInput igxDateTimeEditor [value]="date"/>
    </igx-input-group>
    • Two-way data-binding via an ngModel:
    <igx-input-group>
        <input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/>
    </igx-input-group>
  • IgxDateRangePicker component added.

    • Allows the selection of a range of dates from a calendar UI or input fields. Supports dialog and dropdown modes.
    • Added IgxDateRangeStartComponent and IgxDateRangeEndComponent.
    • The default template consists of a single readonly field:
    <igx-date-range-picker [(ngModel)]="range"></igx-date-range-picker>
    • Projection of input fields using igxDateTimeEditor
      <igx-date-range-picker>
          <igx-date-range-start>
              <input igxInput igxDateTimeEditor [(ngModel)]="range.start">
          </igx-date-range-start>
          <igx-date-range-end>
              <input igxInput igxDateTimeEditor [(ngModel)]="range.end">
          </igx-date-range-end>
      </igx-date-range-picker>
    • Added IgxPickerToggleComponent which allows templating of the default icon in the input through igxPrefix and igxSuffix.
      • default template:
      <igx-date-range-picker>
          <igx-picker-toggle igxSuffix>
              <igx-icon>calendar_view_day</igx-icon>
          </igx-picker-toggle>
      </igx-date-range-picker>
      • with projections:
      <igx-date-range-picker>
          <igx-date-range-start>
              ...
              <igx-picker-toggle igxPrefix>
                  <igx-icon>calendar_view_day</igx-icon>
              </igx-picker-toggle>
              ...
          </igx-date-range-start>
          <igx-date-range-end>
              ...
          </igx-date-range-end>
      </igx-date-range-picker>
  • IgxActionStrip component added.

    • Provides a template area for one or more actions. In its simplest form the Action Strip
      is an overlay of any container and shows additional content over that container.
    <igx-action-strip #actionstrip>
        <igx-icon (click)="doSomeAction()"></igx-icon>
    </igx-action-strip>
  • igxSplitter component added.

    • Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
      Panes can be resized or collapsed/expanded via the UI. Splitter orientation is defined via the type input.
    <igx-splitter [type]="type">
       <igx-splitter-pane>
       	...
       </igx-splitter-pane>
       <igx-splitter-pane>
       	...
       </igx-splitter-pane>
    </igx-splitter>
  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

    • Added ability to pin rows to top or bottom depending on the new pinning input.
      And new API methods pinRow and unpinRow.
    <igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
    public pinningConfiguration: IPinningConfig = { rows: RowPinningPosition.Bottom };
    this.grid.pinRow(rowID);
    • Added support for pinning columns on the right. Change the position of pinning using the new pinning input.
    <igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
    public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
    • Added functionality for column selection.
    • columnSelection property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
    • selected property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.
    • selectable property has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.
    • onColumnSelectionChange event is added for the IgxGrid. It is emitted when the column selection is changed.
    • excelStyleSelectingTemplate property is introduced to IgxGrid, which allows you to set a custom template for the selecting a column in the Excel Style Filter.
    • selectedColumns API method is added for the IgxGrid. It allows to get all selected columns.
    • selectColumns API method is added for the IgxGrid. It allows to select columns by passing array of IgxColumnComponent or column fields.
    • deselectColumns API method is added for the IgxGrid. It allows to deselect columns by passing array of IgxColumnComponent or column fields.
    • deselectAllColumns API method is added for the IgxGrid. It allows to deselect all columns.
    • getSelectedColumnsData API method is added for the IgxGrid. It allows to get the selected columns data.
      Added keyBoard navigation support in the IgxGrid headers. Now is possible to navigate with the arrows keys through grid headers. Also we provide a number of key combinations that trigger a different column functionality like filtering, sorting, grouping and etc. You can read more information in the Grid Specification.
    • Behavioral Change
      • you can not use tab key to navigate between the cell in the Igx Grid. The navigation is performed only with arrow keys.
      • when you are in edit mode with tab key you can navigate to the next editable cell.
      • page up and page down keys will perform action only if the focused element is the tbody of the grid.
      • The grid introduces the following basic tab stops:
        • Toolbar / Group by Area if existing;
        • The first cell in the header row;
        • The first cell in the first body row;
        • The first cell in column summary if exists;
        • Pager UI;
  • IgxCombo:

    • Added autoFocusSearch input that allows to manipulate the combo's opening behavior. When the property is true (by default), the combo's search input is focused on open. When set to false, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.
  • IgxToast:

    • Added functionality for displaying various content into the toast component. It also allows users to access toast styles through its host element.
  • IgxDrag

    • Added igxDragIgnore directive that allows children of the igxDrag element to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored.
    • Added dragDirection input that can specify only one direction of dragging or both.
  • IgxChip

    • Added support for tabIndex attribute applied to the main chip element.
    • Added tabIndex input so it can support change detection as well.
  • IgxHighlightDirective

    • New metadata property was introduced, which allows adding additional, custom logic to the activation condition of a highlighted element.

RTL Support

  • igxSlider have full right-to-left (RTL) support.

9.1.0-alpha.14

15 May 16:23
6a0ef83

Choose a tag to compare

9.1.0-alpha.14 Pre-release
Pre-release

9.1.0

General

  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

    • Behavioral Change - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
  • igx-paginator - The following inputs have been deprecated for the paginator component and will be removed in future versions

    • selectLabel and prepositionPage Use 'resourceStrings' to set/get values.
  • IgxInputGroup

    • Renamed supressInputAutofocus input to suppressInputAutofocus
    • Clicking on prefix, suffix or label elements in the Input Group will no longer blur and re-focus the input.

Themes

  • Breaking Change Change the default $legacy-support value to false in the igx-theme function.

New Features

  • IgxDateTimeEditor directive added.

    • Allows the user to set and edit date and time in a chosen input element.

    • Can edit date or time portion, using an editable masked input.

    • Additionally, can specify a desired display and input format, as well as min and max values.

    • A basic configuration scenario setting a Date object as a value:

    <igx-input-group>
        <input type="text" igxInput igxDateTimeEditor [value]="date"/>
    </igx-input-group>
    • Two-way data-binding via an ngModel:
    <igx-input-group>
        <input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/>
    </igx-input-group>
  • IgxDateRangePicker component added.

    • Allows the selection of a range of dates from a calendar UI or input fields. Supports dialog and dropdown modes.
    • Added IgxDateStartComponent and IgxDateEndComponent.
    • The default template consists of a single readonly field:
    <igx-date-range-picker [(ngModel)]="range"></igx-date-range-picker>
    • Projection of input fields using igxDateTimeEditor
      <igx-date-range-picker>
          <igx-date-range-start>
              <input igxInput igxDateTimeEditor [(ngModel)]="range.start">
          </igx-date-range-start>
          <igx-date-range-end>
              <input igxInput igxDateTimeEditor [(ngModel)]="range.end">
          </igx-date-range-end>
      </igx-date-range-picker>
    • Added IgxPickerToggleComponent which allows templating of the default icon in the input through igxPrefix and igxSuffix.
      • default template:
      <igx-date-range-picker>
          <igx-picker-toggle igxSuffix>
              <igx-icon>calendar_view_day</igx-icon>
          </igx-picker-toggle>
      </igx-date-range-picker>
      • with projections:
      <igx-date-range-picker>
          <igx-date-range-start>
              ...
              <igx-picker-toggle igxPrefix>
                  <igx-icon>calendar_view_day</igx-icon>
              </igx-picker-toggle>
              ...
          </igx-date-range-start>
          <igx-date-range-end>
              ...
          </igx-date-range-end>
      </igx-date-range-picker>
  • IgxActionStrip component added.

    • Provides a template area for one or more actions. In its simplest form the Action Strip
      is an overlay of any container and shows additional content over that container.
    <igx-action-strip #actionstrip>
        <igx-icon (click)="doSomeAction()"></igx-icon>
    </igx-action-strip>
  • igxSplitter component added.

    • Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
      Panes can be resized or collapsed/expanded via the UI. Splitter orientation is defined via the type input.
    <igx-splitter [type]="type">
       <igx-splitter-pane>
       	...
       </igx-splitter-pane>
       <igx-splitter-pane>
       	...
       </igx-splitter-pane>
    </igx-splitter>
  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

    • Added ability to pin rows to top or bottom depending on the new pinning input.
      And new API methods pinRow and unpinRow.
    <igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
    public pinningConfiguration: IPinningConfig = { rows: RowPinningPosition.Bottom };
    this.grid.pinRow(rowID);
    • Added support for pinning columns on the right. Change the position of pinning using the new pinning input.
    <igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
    public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
    • Added functionality for column selection.
    • columnSelection property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
    • selected property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.
    • selectable property has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.
    • onColumnSelectionChange event is added for the IgxGrid. It is emitted when the column selection is changed.
    • excelStyleSelectingTemplate property is introduced to IgxGrid, which allows you to set a custom template for the selecting a column in the Excel Style Filter.
    • selectedColumns API method is added for the IgxGrid. It allows to get all selected columns.
    • selectColumns API method is added for the IgxGrid. It allows to select columns by passing array of IgxColumnComponent or column fields.
    • deselectColumns API method is added for the IgxGrid. It allows to deselect columns by passing array of IgxColumnComponent or column fields.
    • deselectAllColumns API method is added for the IgxGrid. It allows to deselect all columns.
    • getSelectedColumnsData API method is added for the IgxGrid. It allows to get the selected columns data.
      Added keyBoard navigation support in the IgxGrid headers. Now is possible to navigate with the arrows keys through grid headers. Also we provide a number of key combinations that trigger a different column functionality like filtering, sorting, grouping and etc. You can read more information in the Grid Specification.
    • Behavioral Change
      • you can not use tab key to navigate between the cell in the Igx Grid. The navigation is performed only with arrow keys.
      • when you are in edit mode with tab key you can navigate to the next editable cell.
      • page up and page down keys will perform action only if the focused element is the tbody of the grid.
      • The grid introduces the following basic tab stops:
        • Toolbar / Group by Area if existing;
        • The first cell in the header row;
        • The first cell in the first body row;
        • The first cell in column summary if exists;
        • Pager UI;
  • IgxCombo:

    • Added autoFocusSearch input that allows to manipulate the combo's opening behavior. When the property is true (by default), the combo's search input is focused on open. When set to false, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.
  • IgxToast:

    • Added functionality for displaying various content into the toast component. It also allows users to access toast styles through its host element.
  • IgxDrag

    • Added igxDragIgnore directive that allows children of the igxDrag element to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored.
    • Added dragDirection input that can specify only one direction of dragging or both.
  • IgxChip

    • Added support for tabIndex attribute applied to the main chip element.
    • Added tabIndex input so it can support change detection as well.
  • IgxHighlightDirective

    • New metadata property was introduced, which allows adding additional, custom logic to the activation condition of a highlighted element.

RTL Support

  • igxSlider have full right-to-left (RTL) support.

9.0.15

20 May 10:33
25a2f68

Choose a tag to compare

  • When maximum scrollbar size is exceeded in a remote virtualization scenario rendered rows are not visible. #7234
  • igxInput and/or igx-input-group Input element doesn't enable/disable correctly using Reactive Forms #7086

8.2.28

20 May 10:32
cf4b78d

Choose a tag to compare

Bug fixing

  • When maximum scrollbar size is exceeded in a remote virtualization scenario rendered rows are not visible. #7234

9.1.0-alpha.13

12 May 13:21
e7eda38

Choose a tag to compare

9.1.0-alpha.13 Pre-release
Pre-release

9.1.0

General

  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

    • Behavioral Change - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
  • igx-paginator - The following inputs have been deprecated for the paginator component and will be removed in future versions

    • selectLabel and prepositionPage Use 'resourceStrings' to set/get values.
  • IgxInputGroup

    • Renamed supressInputAutofocus input to suppressInputAutofocus
    • Clicking on prefix, suffix or label elements in the Input Group will no longer blur and re-focus the input.

Themes

  • Breaking Change Change the default $legacy-support value to false in the igx-theme function.

New Features

  • IgxDateTimeEditor directive added.

    • Allows the user to set and edit date and time in a chosen input element.

    • Can edit date or time portion, using an editable masked input.

    • Additionally, can specify a desired display and input format, as well as min and max values.

    • A basic configuration scenario setting a Date object as a value:

    <igx-input-group>
        <input type="text" igxInput igxDateTimeEditor [value]="date"/>
    </igx-input-group>
    • Two-way data-binding via an ngModel:
    <igx-input-group>
        <input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/>
    </igx-input-group>
  • IgxDateRangePicker component added.

    • Allows the selection of a range of dates from a calendar UI or input fields. Supports dialog and dropdown modes.
    • Added IgxDateStartComponent and IgxDateEndComponent.
    • The default template consists of a single readonly field:
    <igx-date-range-picker [(ngModel)]="range"></igx-date-range-picker>
    • Projection of input fields using igxDateTimeEditor
      <igx-date-range-picker>
          <igx-date-range-start>
              <input igxInput igxDateTimeEditor [(ngModel)]="range.start">
          </igx-date-range-start>
          <igx-date-range-end>
              <input igxInput igxDateTimeEditor [(ngModel)]="range.end">
          </igx-date-range-end>
      </igx-date-range-picker>
    • Added IgxPickerToggleComponent which allows templating of the default icon in the input through igxPrefix and igxSuffix.
      • default template:
      <igx-date-range-picker>
          <igx-picker-toggle igxSuffix>
              <igx-icon>calendar_view_day</igx-icon>
          </igx-picker-toggle>
      </igx-date-range-picker>
      • with projections:
      <igx-date-range-picker>
          <igx-date-range-start>
              ...
              <igx-picker-toggle igxPrefix>
                  <igx-icon>calendar_view_day</igx-icon>
              </igx-picker-toggle>
              ...
          </igx-date-range-start>
          <igx-date-range-end>
              ...
          </igx-date-range-end>
      </igx-date-range-picker>
  • IgxActionStrip component added.

    • Provides a template area for one or more actions. In its simplest form the Action Strip
      is an overlay of any container and shows additional content over that container.
    <igx-action-strip #actionstrip>
        <igx-icon (click)="doSomeAction()"></igx-icon>
    </igx-action-strip>
  • igxSplitter component added.

    • Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
      Panes can be resized or collapsed/expanded via the UI. Splitter orientation is defined via the type input.
    <igx-splitter [type]="type">
       <igx-splitter-pane>
       	...
       </igx-splitter-pane>
       <igx-splitter-pane>
       	...
       </igx-splitter-pane>
    </igx-splitter>
  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

    • Added ability to pin rows to top or bottom depending on the new pinning input.
      And new API methods pinRow and unpinRow.
    <igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
    public pinningConfiguration: IPinningConfig = { rows: RowPinningPosition.Bottom };
    this.grid.pinRow(rowID);
    • Added support for pinning columns on the right. Change the position of pinning using the new pinning input.
    <igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
    public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
    • Added functionality for column selection.
    • columnSelection property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
    • selected property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.
    • selectable property has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.
    • onColumnSelectionChange event is added for the IgxGrid. It is emitted when the column selection is changed.
    • excelStyleSelectingTemplate property is introduced to IgxGrid, which allows you to set a custom template for the selecting a column in the Excel Style Filter.
    • selectedColumns API method is added for the IgxGrid. It allows to get all selected columns.
    • selectColumns API method is added for the IgxGrid. It allows to select columns by passing array of IgxColumnComponent or column fields.
    • deselectColumns API method is added for the IgxGrid. It allows to deselect columns by passing array of IgxColumnComponent or column fields.
    • deselectAllColumns API method is added for the IgxGrid. It allows to deselect all columns.
    • getSelectedColumnsData API method is added for the IgxGrid. It allows to get the selected columns data.
      Added keyBoard navigation support in the IgxGrid headers. Now is possible to navigate with the arrows keys through grid headers. Also we provide a number of key combinations that trigger a different column functionality like filtering, sorting, grouping and etc. You can read more information in the Grid Specification.
    • Behavioral Change
      • you can not use tab key to navigate between the cell in the Igx Grid. The navigation is performed only with arrow keys.
      • when you are in edit mode with tab key you can navigate to the next editable cell.
      • page up and page down keys will perform action only if the focused element is the tbody of the grid.
      • The grid introduces the following basic tab stops:
        • Toolbar / Group by Area if existing;
        • The first cell in the header row;
        • The first cell in the first body row;
        • The first cell in column summary if exists;
        • Pager UI;
  • IgxCombo:

    • Added autoFocusSearch input that allows to manipulate the combo's opening behavior. When the property is true (by default), the combo's search input is focused on open. When set to false, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.
  • IgxToast:

    • Added functionality for displaying various content into the toast component. It also allows users to access toast styles through its host element.
  • IgxDrag

    • Added igxDragIgnore directive that allows children of the igxDrag element to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored.
    • Added dragDirection input that can specify only one direction of dragging or both.
  • IgxChip

    • Added support for tabIndex attribute applied to the main chip element.
    • Added tabIndex input so it can support change detection as well.
  • IgxHighlightDirective

    • New metadata property was introduced, which allows adding additional, custom logic to the activation condition of a highlighted element.

RTL Support

  • igxSlider have full right-to-left (RTL) support.

9.0.14

12 May 13:19
cc68206

Choose a tag to compare

Bug fixes

  • GridRangeSelection is not exported to the public API #6274
  • Column auto resizing does not work when minWidth is set on column #7209
  • IgxHierarchicalGrid with binding causes ExpressionChangedAfterItHasBeenCheckedError when scrolling #7257

9.1.0-alpha.12

07 May 12:08
2e31764

Choose a tag to compare

9.1.0-alpha.12 Pre-release
Pre-release

9.1.0

General

  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

    • Behavioral Change - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
  • igx-paginator - The following inputs have been deprecated for the paginator component and will be removed in future versions

    • selectLabel and prepositionPage Use 'resourceStrings' to set/get values.
  • IgxInputGroup

    • Renamed supressInputAutofocus input to suppressInputAutofocus
    • Clicking on prefix, suffix or label elements in the Input Group will no longer blur and re-focus the input.

Themes

  • Breaking Change Change the default $legacy-support value to false in the igx-theme function.

New Features

  • IgxDateTimeEditor directive added.

    • Allows the user to set and edit date and time in a chosen input element.

    • Can edit date or time portion, using an editable masked input.

    • Additionally, can specify a desired display and input format, as well as min and max values.

    • A basic configuration scenario setting a Date object as a value:

    <igx-input-group>
        <input type="text" igxInput igxDateTimeEditor [value]="date"/>
    </igx-input-group>
    • Two-way data-binding via an ngModel:
    <igx-input-group>
        <input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/>
    </igx-input-group>
  • IgxDateRangePicker component added.

    • Allows the selection of a range of dates from a calendar UI or input fields. Supports dialog and dropdown modes.
    • Added IgxDateStartComponent and IgxDateEndComponent.
    • The default template consists of a single readonly field:
    <igx-date-range-picker [(ngModel)]="range"></igx-date-range-picker>
    • Projection of input fields using igxDateTimeEditor
      <igx-date-range-picker>
          <igx-date-range-start>
              <input igxInput igxDateTimeEditor [(ngModel)]="range.start">
          </igx-date-range-start>
          <igx-date-range-end>
              <input igxInput igxDateTimeEditor [(ngModel)]="range.end">
          </igx-date-range-end>
      </igx-date-range-picker>
    • Added IgxPickerToggleComponent which allows templating of the default icon in the input through igxPrefix and igxSuffix.
      • default template:
      <igx-date-range-picker>
          <igx-picker-toggle igxSuffix>
              <igx-icon>calendar_view_day</igx-icon>
          </igx-picker-toggle>
      </igx-date-range-picker>
      • with projections:
      <igx-date-range-picker>
          <igx-date-range-start>
              ...
              <igx-picker-toggle igxPrefix>
                  <igx-icon>calendar_view_day</igx-icon>
              </igx-picker-toggle>
              ...
          </igx-date-range-start>
          <igx-date-range-end>
              ...
          </igx-date-range-end>
      </igx-date-range-picker>
  • IgxActionStrip component added.

    • Provides a template area for one or more actions. In its simplest form the Action Strip
      is an overlay of any container and shows additional content over that container.
    <igx-action-strip #actionstrip>
        <igx-icon (click)="doSomeAction()"></igx-icon>
    </igx-action-strip>
  • igxSplitter component added.

    • Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
      Panes can be resized or collapsed/expanded via the UI. Splitter orientation is defined via the type input.
    <igx-splitter [type]="type">
       <igx-splitter-pane>
       	...
       </igx-splitter-pane>
       <igx-splitter-pane>
       	...
       </igx-splitter-pane>
    </igx-splitter>
  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

    • Added ability to pin rows to top or bottom depending on the new pinning input.
      And new API methods pinRow and unpinRow.
    <igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
    public pinningConfiguration: IPinningConfig = { rows: RowPinningPosition.Bottom };
    this.grid.pinRow(rowID);
    • Added support for pinning columns on the right. Change the position of pinning using the new pinning input.
    <igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
    public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
    • Added functionality for column selection.
    • columnSelection property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
    • selected property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.
    • selectable property has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.
    • onColumnSelectionChange event is added for the IgxGrid. It is emitted when the column selection is changed.
    • excelStyleSelectingTemplate property is introduced to IgxGrid, which allows you to set a custom template for the selecting a column in the Excel Style Filter.
    • selectedColumns API method is added for the IgxGrid. It allows to get all selected columns.
    • selectColumns API method is added for the IgxGrid. It allows to select columns by passing array of IgxColumnComponent or column fields.
    • deselectColumns API method is added for the IgxGrid. It allows to deselect columns by passing array of IgxColumnComponent or column fields.
    • deselectAllColumns API method is added for the IgxGrid. It allows to deselect all columns.
    • getSelectedColumnsData API method is added for the IgxGrid. It allows to get the selected columns data.
      Added keyBoard navigation support in the IgxGrid headers. Now is possible to navigate with the arrows keys through grid headers. Also we provide a number of key combinations that trigger a different column functionality like filtering, sorting, grouping and etc. You can read more information in the Grid Specification.
    • Behavioral Change
      • you can not use tab key to navigate between the cell in the Igx Grid. The navigation is performed only with arrow keys.
      • when you are in edit mode with tab key you can navigate to the next editable cell.
      • page up and page down keys will perform action only if the focused element is the tbody of the grid.
      • The grid introduces the following basic tab stops:
        • Toolbar / Group by Area if existing;
        • The first cell in the header row;
        • The first cell in the first body row;
        • The first cell in column summary if exists;
        • Pager UI;
    • onGridKeydown event is deprecated. Now you can directly bind to keydown on the IgxGrid component in order to perform custom keyboard navigation.
  • IgxCombo:

    • Added autoFocusSearch input that allows to manipulate the combo's opening behavior. When the property is true (by default), the combo's search input is focused on open. When set to false, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.
  • IgxToast:

    • Added functionality for displaying various content into the toast component. It also allows users to access toast styles through its host element.
  • IgxDrag

    • Added igxDragIgnore directive that allows children of the igxDrag element to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored.
    • Added dragDirection input that can specify only one direction of dragging or both.
  • IgxChip

    • Added support for tabIndex attribute applied to the main chip element.
    • Added tabIndex input so it can support change detection as well.

RTL Support

  • igxSlider have full right-to-left (RTL) support.

9.1.0-alpha.11

30 Apr 19:33
19e759f

Choose a tag to compare

9.1.0-alpha.11 Pre-release
Pre-release

General

  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

    • Behavioral Change - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
  • igx-paginator - The following inputs have been deprecated for the paginator component and will be removed in future versions

    • selectLabel and prepositionPage Use 'resourceStrings' to set/get values.
  • IgxInputGroup

    • Renamed supressInputAutofocus input to suppressInputAutofocus
    • Clicking on prefix, suffix or label elements in the Input Group will no longer blur and re-focus the input.

Themes

  • Breaking Change Change the default $legacy-support value to false in the igx-theme function.

New Features

  • IgxDateTimeEditor directive added.

    • Allows the user to set and edit date and time in a chosen input element.

    • Can edit date or time portion, using an editable masked input.

    • Additionally, can specify a desired display and input format, as well as min and max values.

    • A basic configuration scenario setting a Date object as a value:

    <igx-input-group>
        <input type="text" igxInput igxDateTimeEditor [value]="date"/>
    </igx-input-group>
    • Two-way data-binding via an ngModel:
    <igx-input-group>
        <input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/>
    </igx-input-group>
  • IgxDateRangePicker component added.

    • Allows the selection of a range of dates from a calendar UI or input fields. Supports dialog and dropdown modes.
    • Added IgxDateStartComponent and IgxDateEndComponent.
    • The default template consists of a single readonly field:
    <igx-date-range-picker [(ngModel)]="range"></igx-date-range-picker>
    • Projection of input fields using igxDateTimeEditor
      <igx-date-range-picker>
          <igx-date-range-start>
              <input igxInput igxDateTimeEditor [(ngModel)]="range.start">
          </igx-date-range-start>
          <igx-date-range-end>
              <input igxInput igxDateTimeEditor [(ngModel)]="range.end">
          </igx-date-range-end>
      </igx-date-range-picker>
    • Added IgxPickerToggleComponent which allows templating of the default icon in the input through igxPrefix and igxSuffix.
      • default template:
      <igx-date-range-picker>
          <igx-picker-toggle igxSuffix>
              <igx-icon>calendar_view_day</igx-icon>
          </igx-picker-toggle>
      </igx-date-range-picker>
      • with projections:
      <igx-date-range-picker>
          <igx-date-range-start>
              ...
              <igx-picker-toggle igxPrefix>
                  <igx-icon>calendar_view_day</igx-icon>
              </igx-picker-toggle>
              ...
          </igx-date-range-start>
          <igx-date-range-end>
              ...
          </igx-date-range-end>
      </igx-date-range-picker>
  • IgxActionStrip component added.

    • Provides a template area for one or more actions. In its simplest form the Action Strip
      is an overlay of any container and shows additional content over that container.
    <igx-action-strip #actionstrip>
        <igx-icon (click)="doSomeAction()"></igx-icon>
    </igx-action-strip>
  • igxSplitter component added.

    • Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
      Panes can be resized or collapsed/expanded via the UI. Splitter orientation is defined via the type input.
    <igx-splitter [type]="type">
       <igx-splitter-pane>
       	...
       </igx-splitter-pane>
       <igx-splitter-pane>
       	...
       </igx-splitter-pane>
    </igx-splitter>
  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

    • Added ability to pin rows to top or bottom depending on the new pinning input.
      And new API methods pinRow and unpinRow.
    <igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
    public pinningConfiguration: IPinningConfig = { rows: RowPinningPosition.Bottom };
    this.grid.pinRow(rowID);
    • Added support for pinning columns on the right. Change the position of pinning using the new pinning input.
    <igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
    public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
    • Added functionality for column selection.
    • columnSelection property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
    • selected property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.
    • selectable property has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.
    • onColumnSelectionChange event is added for the IgxGrid. It is emitted when the column selection is changed.
    • excelStyleSelectingTemplate property is introduced to IgxGrid, which allows you to set a custom template for the selecting a column in the Excel Style Filter.
    • selectedColumns API method is added for the IgxGrid. It allows to get all selected columns.
    • selectColumns API method is added for the IgxGrid. It allows to select columns by passing array of IgxColumnComponent or column fields.
    • deselectColumns API method is added for the IgxGrid. It allows to deselect columns by passing array of IgxColumnComponent or column fields.
    • deselectAllColumns API method is added for the IgxGrid. It allows to deselect all columns.
    • getSelectedColumnsData API method is added for the IgxGrid. It allows to get the selected columns data.
      Added keyBoard navigation support in the IgxGrid headers. Now is possible to navigate with the arrows keys through grid headers. Also we provide a number of key combinations that trigger a different column functionality like filtering, sorting, grouping and etc. You can read more information in the Grid Specification.
    • Behavioral Change
      • you can not use tab key to navigate between the cell in the Igx Grid. The navigation is performed only with arrow keys.
      • when you are in edit mode with tab key you can navigate to the next editable cell.
      • page up and page down keys will perform action only if the focused element is the tbody of the grid.
      • The grid introduces the following basic tab stops:
        • Toolbar / Group by Area if existing;
        • The first cell in the header row;
        • The first cell in the first body row;
        • The first cell in column summary if exists;
        • Pager UI;
    • onGridKeydown event is deprecated. Now you can directly bind to keydown on the IgxGrid component in order to perform custom keyboard navigation.
  • IgxCombo:

    • Added autoFocusSearch input that allows to manipulate the combo's opening behavior. When the property is true (by default), the combo's search input is focused on open. When set to false, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.
  • IgxToast:

    • Added functionality for displaying various content into the toast component. It also allows users to access toast styles through its host element.
  • IgxDrag

    • New igxDragIgnore directive that allows children of the igxDrag element to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored.
    • New dragDirection input that can specify only one direction of dragging or both.

RTL Support

  • igxSlider have full right-to-left (RTL) support.