+
Drop here
```
@@ -253,7 +243,7 @@ onDrop(event: IDropDroppedEventArgs) {
```html
@for (item of items; track item.id) {
-
+
drag_handle
{{ item.name }}
@@ -261,8 +251,8 @@ onDrop(event: IDropDroppedEventArgs) {
```
-Key drag events: `(dragStart)`, `(dragMove)`, `(dragEnd)`, `(dragClick)`, `(transitioned)`.
-Key drop events: `(dragEnter)`, `(dragLeave)`, `(dragOver)`, `(dropped)`.
+Key drag events: `(dragStart)`, `(dragMove)`, `(dragEnd)`, `(dragClick)`, `(ghostCreate)`, `(ghostDestroy)`, `(transitioned)`.
+Key drop events: `(enter)`, `(leave)`, `(over)`, `(dropped)`.
> **NOTE:** For touch-based drag, add `importProvidersFrom(HammerModule)` to `app.config.ts` providers.
diff --git a/skills/igniteui-angular-components/references/feedback.md b/skills/igniteui-angular-components/references/feedback.md
index abdd9046b7c..dc69603ea51 100644
--- a/skills/igniteui-angular-components/references/feedback.md
+++ b/skills/igniteui-angular-components/references/feedback.md
@@ -18,8 +18,6 @@ This reference gives high-level guidance on when to use each feedback and overla
## Dialog
-> **Docs:** [Dialog Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog)
-
```typescript
import { IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective } from 'igniteui-angular/dialog';
import { IgxButtonDirective } from 'igniteui-angular/directives';
@@ -31,7 +29,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
[isModal]="true"
[closeOnEscape]="true"
[closeOnOutsideSelect]="false"
- title="Confirm Delete"
(closed)="onDialogClosed()">
Confirm Delete
Are you sure you want to delete this item? This action cannot be undone.
@@ -57,10 +54,8 @@ Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`, `(leftButtonSelect)`,
## Snackbar
-> **Docs:** [Snackbar Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/snackbar)
-
```typescript
-import { IgxSnackbarComponent, IgxSnackbarActionDirective } from 'igniteui-angular/snackbar';
+import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
import { IgxButtonDirective } from 'igniteui-angular/directives';
```
@@ -69,9 +64,10 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
#snackbar
[displayTime]="3000"
[autoHide]="true"
+ actionText="UNDO"
+ (clicked)="undo()"
(animationDone)="onSnackbarDone()">
Item saved successfully
-
```
@@ -88,8 +84,6 @@ save() {
## Toast
-> **Docs:** [Toast Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast)
-
```typescript
import { IgxToastComponent } from 'igniteui-angular/toast';
```
@@ -104,8 +98,6 @@ Toast vs Snackbar: Toast is non-interactive (no action button), always auto-hide
## Banner
-> **Docs:** [Banner Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner)
-
```typescript
import { IgxBannerComponent, IgxBannerActionsDirective } from 'igniteui-angular/banner';
import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -114,12 +106,12 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
```html
- wifi_off
+ wifi_off
You are offline. Some features may not be available.
-
-
+
+
-
+
```
diff --git a/skills/igniteui-angular-components/references/form-controls.md b/skills/igniteui-angular-components/references/form-controls.md
index ae6c2bd1314..1ee597e597b 100644
--- a/skills/igniteui-angular-components/references/form-controls.md
+++ b/skills/igniteui-angular-components/references/form-controls.md
@@ -15,6 +15,7 @@
- [Calendar](#calendar)
- [Checkbox, Radio, Switch](#checkbox-radio-switch)
- [Slider](#slider)
+- [Autocomplete](#autocomplete)
- [Reactive Forms Integration](#reactive-forms-integration)
- [Key Rules](#key-rules)
@@ -23,8 +24,6 @@ This reference gives high-level guidance on when to use each form control compon
## Input Group
-> **Docs:** [Input Group](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input-group)
-
```typescript
import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -44,8 +43,6 @@ Types: `line` (default), `border`, `box`, `search`.
## Combo (Multi-Select Dropdown)
-> **Docs:** [Combo Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo)
-
```typescript
import { IgxComboComponent } from 'igniteui-angular/combo';
```
@@ -68,8 +65,6 @@ Events: `(opening)`, `(opened)`, `(closing)`, `(closed)`, `(selectionChanging)`,
## Simple Combo (Single-Select)
-> **Docs:** [Combo — Single Selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo#single-selection)
-
```typescript
import { IgxSimpleComboComponent } from 'igniteui-angular/simple-combo';
```
@@ -88,8 +83,6 @@ Same API as `igx-combo` but restricted to single selection.
## Select
-> **Docs:** [Select Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/select)
-
```typescript
import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select';
```
@@ -104,8 +97,6 @@ import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/sel
## Date Picker
-> **Docs:** [Date Picker](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-picker)
-
```typescript
import { IgxDatePickerComponent } from 'igniteui-angular/date-picker';
```
@@ -124,8 +115,6 @@ Implements `ControlValueAccessor` and `Validator`. Works with both reactive and
## Date Range Picker
-> **Docs:** [Date Range Picker](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-range-picker)
-
```typescript
import { IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxDateRangeEndComponent } from 'igniteui-angular/date-picker';
import { IgxDateTimeEditorDirective } from 'igniteui-angular/directives';
@@ -193,8 +182,6 @@ Common two-input configuration with calendar toggles:
## Time Picker
-> **Docs:** [Time Picker](https://www.infragistics.com/products/ignite-ui-angular/angular/components/time-picker)
-
```typescript
import { IgxTimePickerComponent } from 'igniteui-angular/time-picker';
```
@@ -202,15 +189,12 @@ import { IgxTimePickerComponent } from 'igniteui-angular/time-picker';
```html
+ [inputFormat]="'HH:mm'">
```
## Calendar
-> **Docs:** [Calendar Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/calendar)
-
```typescript
import { IgxCalendarComponent } from 'igniteui-angular/calendar';
```
@@ -228,8 +212,6 @@ Selection modes: `'single'`, `'multi'`, `'range'`.
## Checkbox, Radio, Switch
-> **Docs:** [Checkbox](https://www.infragistics.com/products/ignite-ui-angular/angular/components/checkbox) · [Radio Button](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radio-button) · [Switch](https://www.infragistics.com/products/ignite-ui-angular/angular/components/switch)
-
```typescript
import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular/radio';
@@ -249,8 +231,6 @@ import { IgxSwitchComponent } from 'igniteui-angular/switch';
## Slider
-> **Docs:** [Slider Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/slider/slider)
-
```typescript
import { IgxSliderComponent, IgxSliderType } from 'igniteui-angular/slider';
@@ -275,12 +255,37 @@ public sliderType = IgxSliderType;
```
+## Autocomplete
+
+```typescript
+import { IgxAutocompleteDirective, IgxDropDownComponent, IgxDropDownItemComponent } from 'igniteui-angular/drop-down';
+import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
+```
+
+```html
+
+
+
+
+
+ @for (city of cities | startsWith:selectedCity; track city) {
+
+ {{ city }}
+
+ }
+
+```
+
+The `igxAutocomplete` directive attaches to an input and displays a drop-down of suggestions as the user types. It references an `igx-drop-down` via a template variable.
+
+Filtering is **not** built in — use a pipe or filter the data in the component to control which items appear.
+
## Reactive Forms Integration
All form controls implement `ControlValueAccessor` and work with both reactive and template-driven forms.
-> **Docs:** [Angular Reactive Form Validation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/angular-reactive-form-validation)
-
```typescript
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
@@ -354,6 +359,11 @@ export class MyFormComponent {
- Date/Time pickers implement both `ControlValueAccessor` and `Validator` — they integrate with reactive forms natively
- For `igx-date-range-picker` with separate start and end inputs, use this structure for both inputs: `igx-picker-toggle igxPrefix`, then `input igxInput igxDateTimeEditor`, then optional `igx-picker-clear igxSuffix`.
- Do not use a plain `igx-prefix` / `igx-suffix` icon for calendar or clear actions.
+- How to choose between Combo, Simple Combo, Select, and Auto-complete:
+ - Use `igx-combo` for multi-select dropdowns with built-in filtering and grouping
+ - Use `igx-simple-combo` for single-select dropdowns with built-in filtering and grouping
+ - Use `igx-select` for simple single-select dropdowns without filtering or grouping (or when you want to provide custom filtering UI)
+ - Use `igxAutocomplete` for input fields with dynamic suggestions based on user input
## See Also
diff --git a/skills/igniteui-angular-components/references/layout-manager.md b/skills/igniteui-angular-components/references/layout-manager.md
index d49d8e36400..c74364110a1 100644
--- a/skills/igniteui-angular-components/references/layout-manager.md
+++ b/skills/igniteui-angular-components/references/layout-manager.md
@@ -16,8 +16,6 @@ This reference gives high-level guidance on when to use each layout manager comp
## Layout Manager Directives
-> **Docs:** [Layout Manager](https://www.infragistics.com/products/ignite-ui-angular/angular/components/layout)
-
The Layout Manager is a pair of Angular directives (`igxLayout` / `igxFlex`) that wrap CSS Flexbox. Apply `igxLayout` to any container to control its children's flow; apply `igxFlex` to individual children to control their flex properties.
```typescript
@@ -115,9 +113,6 @@ import { IgxLayoutDirective, IgxFlexDirective } from 'igniteui-angular/directive
## Dock Manager
-> **Docs:** [Dock Manager (Angular)](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dock-manager)
-> **Full API Docs:** [Dock Manager Web Component](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/dock-manager.html)
-
The Dock Manager is a **separate package** (`igniteui-dockmanager`) and is implemented as a **Web Component** (`
`). It provides IDE-style dockable, resizable, floating, and tabbed pane layouts. It is a **premium** (licensed) component.
### Installation
@@ -130,12 +125,11 @@ npm install igniteui-dockmanager
Because Dock Manager is a Web Component, it requires two one-time setup steps:
-**1. Register custom elements — `main.ts`:**
+**1. Register custom elements — `app.config.ts`:**
```typescript
import { defineCustomElements } from 'igniteui-dockmanager/loader';
-// Must be called before bootstrapApplication
defineCustomElements();
```
@@ -366,50 +360,10 @@ export class DockManagerComponent {
```
-### Pane Types
-
-| `IgcDockManagerPaneType` | Purpose |
-|---|---|
-| `splitPane` | Splits space horizontally or vertically between child panes |
-| `contentPane` | A single leaf pane that renders a slotted element via `contentId` |
-| `tabGroupPane` | Groups multiple `contentPane` children as tabs |
-| `documentHost` | A special area for `documentOnly: true` panes (like an editor area) |
-
-### `IgcSplitPaneOrientation`
-
-| Value | Layout |
-|---|---|
-| `horizontal` | Children placed left-to-right |
-| `vertical` | Children placed top-to-bottom |
-
-### Key `contentPane` Properties
-
-| Property | Type | Description |
-|---|---|---|
-| `contentId` | `string` | Matches the `slot` attribute on the rendered HTML element |
-| `header` | `string` | Tab/title bar label |
-| `isPinned` | `boolean` | `false` = auto-hidden (collapsed to edge); default `true` |
-| `documentOnly` | `boolean` | Restricts pane to `documentHost` areas only |
-| `size` | `number` | Relative size within parent split |
-| `allowClose` | `boolean` | Show close button (default `true`) |
-| `allowPinning` | `boolean` | Allow user to pin/unpin (default `true`) |
-| `allowFloating` | `boolean` | Allow user to float the pane (default `true`) |
-
-### Key `splitPane` / floating pane Properties
-
-| Property | Type | Description |
-|---|---|---|
-| `orientation` | `IgcSplitPaneOrientation` | `horizontal` or `vertical` |
-| `size` | `number` | Relative size in the parent split |
-| `allowEmpty` | `boolean` | Allow pane to remain when all children are closed |
-| `floatingWidth` | `number` | Initial width of floating pane (px) |
-| `floatingHeight` | `number` | Initial height of floating pane (px) |
-| `floatingLocation` | `{x, y}` | Initial top-left corner position of floating pane |
-
### Key Rules for Dock Manager
1. **Separate package** — `igniteui-dockmanager` is installed independently of `igniteui-angular`
-2. **Call `defineCustomElements()` in `main.ts`** before `bootstrapApplication` — without this the `
` element renders as an unknown element
+2. **Call `defineCustomElements()` from `igniteui-dockmanager/loader` in `app.config.ts`** — without this the `` element renders as an unknown element
3. **Add `CUSTOM_ELEMENTS_SCHEMA`** to every standalone component or NgModule that uses ``
4. **Slot names = `contentId` values** — the `slot="..."` attribute on child elements must exactly match the `contentId` string in the layout
5. **Premium component** — requires a licensed Ignite UI subscription; verify availability before recommending to users
diff --git a/skills/igniteui-angular-components/references/layout.md b/skills/igniteui-angular-components/references/layout.md
index 86819fff7eb..24e70f7c556 100644
--- a/skills/igniteui-angular-components/references/layout.md
+++ b/skills/igniteui-angular-components/references/layout.md
@@ -17,8 +17,6 @@ This reference gives high-level guidance on when to use each layout component, t
## Tabs
-> **Docs:** [Tabs Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs)
-
```typescript
import { IGX_TABS_DIRECTIVES } from 'igniteui-angular/tabs';
import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -46,8 +44,6 @@ Key inputs: `[(selectedIndex)]`, `[tabAlignment]` (`'start'` | `'end'` | `'cente
## Bottom Navigation
-> **Docs:** [Bottom Navigation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabbar)
-
```typescript
import { IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxBottomNavContentComponent } from 'igniteui-angular/bottom-nav';
```
@@ -73,8 +69,6 @@ import { IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderCom
## Stepper
-> **Docs:** [Stepper Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/stepper)
-
```typescript
import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular/stepper';
```
@@ -100,10 +94,6 @@ import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular/stepper';
```
-Key inputs: `[linear]`, `[orientation]` (`'horizontal'` | `'vertical'`), `[stepType]` (`'indicator'` | `'title'` | `'full'`), `[animationType]`.
-
-Events: `(activeStepChanging)`, `(activeStepChanged)`.
-
Programmatic navigation:
```typescript
stepper = viewChild.required(IgxStepperComponent);
@@ -115,8 +105,6 @@ navigateTo(index: number) { this.stepper().navigateTo(index); }
## Accordion
-> **Docs:** [Accordion Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/accordion)
-
```typescript
import { IgxAccordionComponent } from 'igniteui-angular/accordion';
import { IGX_EXPANSION_PANEL_DIRECTIVES } from 'igniteui-angular/expansion-panel';
@@ -154,8 +142,6 @@ Standalone `igx-expansion-panel` (without accordion):
## Splitter
-> **Docs:** [Splitter Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/splitter)
-
```typescript
import { IgxSplitterComponent, IgxSplitterPaneComponent, SplitterType } from 'igniteui-angular/splitter';
```
@@ -180,8 +166,6 @@ import { IgxSplitterComponent, IgxSplitterPaneComponent, SplitterType } from 'ig
## Navigation Drawer
-> **Docs:** [Navigation Drawer](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer)
-
```typescript
import { IgxNavigationDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerTemplateDirective, IgxNavDrawerMiniTemplateDirective } from 'igniteui-angular/navigation-drawer';
import { IgxIconComponent } from 'igniteui-angular/icon';
diff --git a/skills/igniteui-angular-components/references/setup.md b/skills/igniteui-angular-components/references/setup.md
index a8c03016ab9..9b062539dcd 100644
--- a/skills/igniteui-angular-components/references/setup.md
+++ b/skills/igniteui-angular-components/references/setup.md
@@ -44,7 +44,6 @@ export const appConfig: ApplicationConfig = {
|---|---|---|
| `provideAnimations()` | `@angular/platform-browser/animations` | **All overlay and animated components** — Dialog, Combo, Select, Dropdown, Date/Time Picker, Snackbar, Toast, Banner, Navigation Drawer, Carousel, Overlay service |
| `importProvidersFrom(HammerModule)` | `@angular/platform-browser` | OPTIONAL — touch gestures (Slider, Drag & Drop, swipe) |
-| `provideIgniteIntl()` | `igniteui-angular/core` | Localization for grids, date/time pickers, and components displaying formatted values |
> **`provideAnimationsAsync()`** lazy-loads the animations module — prefer it for SSR or when optimizing initial bundle size:
> ```typescript
diff --git a/skills/igniteui-angular-grids/SKILL.md b/skills/igniteui-angular-grids/SKILL.md
index b8139d87a0a..d1c7c07d73a 100644
--- a/skills/igniteui-angular-grids/SKILL.md
+++ b/skills/igniteui-angular-grids/SKILL.md
@@ -44,6 +44,11 @@ Base your code and explanation exclusively on what you read in Step 3. If the re
---
+## Overview
+This reference gives high-level guidance on grids and their features. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component and feature you're interested in.
+
+---
+
## Prerequisites
- Angular 20+ project
diff --git a/skills/igniteui-angular-grids/references/data-operations.md b/skills/igniteui-angular-grids/references/data-operations.md
index 7406e99bf22..5f666978402 100644
--- a/skills/igniteui-angular-grids/references/data-operations.md
+++ b/skills/igniteui-angular-grids/references/data-operations.md
@@ -20,32 +20,6 @@ All programmatic data operations require a reference to the grid component. Use
> **AGENT INSTRUCTION:** Check `package.json` to determine whether the project uses `igniteui-angular` or `@infragistics/igniteui-angular`. Replace the package prefix in every import accordingly. Always use specific entry points — never the root barrel of either package.
-```typescript
-import { Component, ChangeDetectionStrategy, signal, viewChild } from '@angular/core';
-
-// Open-source package — import from specific entry points
-// Grid Lite (separate npm package — requires `npm install igniteui-grid-lite`)
-import { IgxGridLiteComponent } from 'igniteui-angular/grids/lite';
-// Flat Grid
-import { IgxGridComponent, IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid';
-// Tree Grid
-import { IgxTreeGridComponent, IGX_TREE_GRID_DIRECTIVES } from 'igniteui-angular/grids/tree-grid';
-// Hierarchical Grid
-import { IgxHierarchicalGridComponent, IGX_HIERARCHICAL_GRID_DIRECTIVES } from 'igniteui-angular/grids/hierarchical-grid';
-// Pivot Grid
-import { IgxPivotGridComponent, IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular/grids/pivot-grid';
-
-// Licensed package — same entry-point paths, different prefix:
-// import { IgxGridComponent, IGX_GRID_DIRECTIVES } from '@infragistics/igniteui-angular/grids/grid';
-// import { IgxTreeGridComponent, IGX_TREE_GRID_DIRECTIVES } from '@infragistics/igniteui-angular/grids/tree-grid';
-// import { IgxHierarchicalGridComponent, IGX_HIERARCHICAL_GRID_DIRECTIVES } from '@infragistics/igniteui-angular/grids/hierarchical-grid';
-// import { IgxPivotGridComponent, IGX_PIVOT_GRID_DIRECTIVES } from '@infragistics/igniteui-angular/grids/pivot-grid';
-
-// AVOID — never import from the root barrel (wrong for BOTH variants)
-// import { IgxGridComponent } from 'igniteui-angular';
-// import { IgxGridComponent } from '@infragistics/igniteui-angular';
-```
-
### Flat Grid Example
```typescript
@@ -123,8 +97,6 @@ export class CompanyGridComponent {
## Sorting
-> **Docs:** [Sorting](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sorting) · [Tree Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/sorting) · [Hierarchical Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/sorting)
-
> **Applies to**: Flat Grid, Tree Grid, and Hierarchical Grid. Pivot Grid uses dimension-level sorting instead (see [`state.md`](./state.md)). **Grid Lite** uses a different sorting API — see [`state.md`](./state.md).
>
> **Tree Grid behavior**: sorting is applied per-level — children are sorted among their siblings, not globally flattened.
@@ -178,18 +150,21 @@ this.gridRef().clearSort();
| Event | Cancelable | Payload |
|---|---|---|
| `(sorting)` | Yes | `ISortingEventArgs` — set `event.cancel = true` to prevent |
-| `(sortingDone)` | No | `ISortingEventArgs` — fires after sort is applied |
+| `(sortingDone)` | No | `ISortingExpression \| ISortingExpression[]` — fires after sort is applied |
```typescript
onSorting(event: ISortingEventArgs) {
// Prevent sorting on a specific column
- if (event.fieldName === 'id') {
+ const exprs = Array.isArray(event.sortingExpressions)
+ ? event.sortingExpressions : [event.sortingExpressions];
+ if (exprs.some(e => e?.fieldName === 'id')) {
event.cancel = true;
}
}
-onSortingDone(event: ISortingEventArgs) {
- console.log('Sorted by:', event.fieldName, event.dir);
+onSortingDone(event: ISortingExpression | ISortingExpression[]) {
+ const expr = Array.isArray(event) ? event[0] : event;
+ console.log('Sorted by:', expr.fieldName, expr.dir);
// Good place to trigger remote data fetch
}
```
@@ -204,8 +179,8 @@ import { ISortingStrategy, SortingDirection } from 'igniteui-angular/core';
class PrioritySortStrategy implements ISortingStrategy {
private priorityOrder = ['Critical', 'High', 'Medium', 'Low'];
- sort(data: any[], fieldName: string, dir: SortingDirection): any[] {
- return data.sort((a, b) => {
+ sort(data: any[], fieldName: string, dir: SortingDirection, ignoreCase: boolean, valueResolver: (obj: any, key: string) => any): any[] {
+ return [...data].sort((a, b) => {
const indexA = this.priorityOrder.indexOf(a[fieldName]);
const indexB = this.priorityOrder.indexOf(b[fieldName]);
return dir === SortingDirection.Asc ? indexA - indexB : indexB - indexA;
@@ -220,8 +195,6 @@ class PrioritySortStrategy implements ISortingStrategy {
## Filtering
-> **Docs:** [Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/filtering) · [Excel-Style](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/excel-style-filtering) · [Advanced](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/advanced-filtering) (substitute URL prefix per grid type)
-
> **Applies to**: Flat Grid, Tree Grid, and Hierarchical Grid. Pivot Grid uses dimension-level filtering instead (see [`state.md`](./state.md)). **Grid Lite** uses a different filtering API — see [`state.md`](./state.md).
>
> **Tree Grid behavior**: filtering is **recursive** — when a child matches, all its ancestor rows are shown (even if they don't match) and auto-expanded.
@@ -305,8 +278,11 @@ this.gridRef().cdr.detectChanges();
### Global Filtering & Cross-Column Logic
+> **DEPRECATED (v19.0+):** `filterGlobal()` is deprecated. Use `filteringExpressionsTree` to build a tree that applies conditions across all columns instead.
+
```typescript
// Filter all filterable columns at once with a search term
+// ⚠️ Deprecated since v19.0 — prefer filteringExpressionsTree
this.gridRef().filterGlobal('search term', IgxStringFilteringOperand.instance().condition('contains'), true);
```
@@ -319,7 +295,8 @@ Control the AND/OR logic between **different column** filters:
```
```typescript
-import { FilteringLogic } from 'igniteui-angular';
+import { FilteringLogic } from 'igniteui-angular/core';
+// import { FilteringLogic } from '@infragistics/igniteui-angular/core'; for licensed package
// FilteringLogic.And (default) — row must match ALL column filters
// FilteringLogic.Or — row must match ANY column filter
@@ -331,11 +308,11 @@ filteringLogic = FilteringLogic.And;
| Event | Cancelable | Payload |
|---|---|---|
| `(filtering)` | Yes | `IFilteringEventArgs` — set `event.cancel = true` to prevent |
-| `(filteringDone)` | No | `IFilteringEventArgs` — fires after a **column-level** filter is applied |
+| `(filteringDone)` | No | `IFilteringExpressionsTree` — fires after a **column-level** filter is applied |
| `(filteringExpressionsTreeChange)` | No | `IFilteringExpressionsTree` — fires after the **grid-level** filter tree changes (use this for remote data) |
```typescript
-onFilteringDone(event: IFilteringEventArgs) {
+onFilteringDone(event: IFilteringExpressionsTree) {
// Trigger remote data fetch with new filter state
this.loadFilteredData();
}
@@ -354,8 +331,6 @@ onFilteringDone(event: IFilteringEventArgs) {
## Grouping (Flat Grid Only)
-> **Docs:** [Group By](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/groupby)
-
> **NOTE**: GroupBy is **exclusive to the Flat Grid** (`igx-grid`). Tree Grid uses its natural hierarchy. Hierarchical Grid uses row islands. Pivot Grid uses dimensions.
### Template-Driven Grouping
diff --git a/skills/igniteui-angular-grids/references/editing.md b/skills/igniteui-angular-grids/references/editing.md
index c4d6b274a13..6f96fe703b6 100644
--- a/skills/igniteui-angular-grids/references/editing.md
+++ b/skills/igniteui-angular-grids/references/editing.md
@@ -31,8 +31,6 @@
### Cell Editing (Immediate)
-> **Docs:** [Cell Editing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/cell-editing)
-
The simplest mode. Each cell saves the moment the user tabs away or presses Enter.
```typescript
@@ -78,9 +76,7 @@ export class CarsGridComponent {
```
-### Row Editing (Recommended for CRUD)
-
-> **Docs:** [Row Editing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-editing)
+### Row Editing
Users click into a row, edit cells, then click **Done** or **Cancel** — changes only apply when Done is pressed. An overlay toolbar appears automatically.
@@ -171,10 +167,10 @@ When starting a new row programmatically, pre-populate fields using `(cellEditEn
```typescript
onCellEditEnter(event: IGridEditEventArgs) {
if (event.isAddRow && event.column.field === 'available') {
- event.cellEditArgs.newValue = true; // default new cars to available
+ event.newValue = true; // default new cars to available
}
if (event.isAddRow && event.column.field === 'year') {
- event.cellEditArgs.newValue = new Date().getFullYear();
+ event.newValue = new Date().getFullYear();
}
}
```
@@ -370,8 +366,6 @@ onCellEdit(event: IGridEditEventArgs) {
## Validation
-> **Docs:** [Validation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/validation)
-
### Template-Driven Validation
Apply Angular validators directly on columns:
@@ -417,8 +411,6 @@ this.gridRef().validation.clear(recordId);
## Summaries
-> **Docs:** [Summaries](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/summaries) (substitute URL prefix per grid type)
-
### Built-In Summaries
```html
@@ -475,7 +467,7 @@ When grouping is enabled, summaries appear for each group. Control this with:
2. **`[primaryKey]` is required for all editing** — row editing, batch editing, row adding, and row deletion all depend on it (Flat, Tree, Hierarchical, Pivot grids; NOT Grid Lite)
3. **Always set `[autoGenerate]="false"` when editing** — define columns explicitly and mark each with `[editable]="true"` to control exactly what users can change
4. **Batch editing requires `[primaryKey]`** — call `endEdit(true)` before `transactions.undo()`/`redo()`, commit via `transactions.commit(data)`
-5. **Cancelable events** — use `event.cancel = true` in `(cellEdit)`, `(rowEdit)`, `(paging)` to prevent the action
+5. **Cancelable events** — use `event.cancel = true` in `(cellEdit)`, `(rowEdit)`, `(rowEditEnter)`, `(cellEditEnter)` to prevent the action
6. **Validation** — use template-driven validators on columns (`required`, `min`, `max`, `email`, `pattern`) or reactive validators via `(formGroupCreated)`
7. **Use the correct component type for `viewChild`** — `IgxGridComponent`, `IgxTreeGridComponent`, `IgxHierarchicalGridComponent`, or `IgxPivotGridComponent`
8. **Import the correct directives/components** — `IGX_GRID_DIRECTIVES`, `IGX_TREE_GRID_DIRECTIVES`, `IGX_HIERARCHICAL_GRID_DIRECTIVES`, or `IGX_PIVOT_GRID_DIRECTIVES`
diff --git a/skills/igniteui-angular-grids/references/features.md b/skills/igniteui-angular-grids/references/features.md
index dc785782310..78df04c0817 100644
--- a/skills/igniteui-angular-grids/references/features.md
+++ b/skills/igniteui-angular-grids/references/features.md
@@ -32,9 +32,7 @@ Quick reference:
| **Row editing** (recommended default) | `[rowEditable]="true"` + `[editable]="true"` on columns + `(rowEditDone)` |
| **Batch editing** | `[batchEditing]="true"` + `[rowEditable]="true"` + `transactions.commit(data)` |
-## Grouping (Grid only)
-
-> **Docs:** [Group By](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/groupby)
+## Grouping (Grid and Tree Grid only)
```html
@@ -67,30 +65,39 @@ For advanced programmatic grouping patterns — see [`data-operations.md`](./dat
Merge adjacent cells with equal values:
```html
-
+
+
+
```
-Or apply a custom merge strategy:
+Grid merge modes (`cellMergeMode`):
+- `'onSort'` — merge only when the column is sorted **(default)**
+- `'always'` — merge regardless of sort state
+
+Or apply a custom merge strategy at the **grid level** (not column):
```html
-
+
+
+
```
```typescript
-import { IGridMergeStrategy } from 'igniteui-angular/core';
-// import { IGridMergeStrategy } from '@infragistics/igniteui-angular/core'; for licensed package
+import { DefaultMergeStrategy } from 'igniteui-angular/core';
+// import { DefaultMergeStrategy } from '@infragistics/igniteui-angular/core'; for licensed package
-priceRangeMerge: IGridMergeStrategy = {
- shouldMerge(prevCell, curCell) {
- return Math.abs(prevCell.value - curCell.value) < 10;
+// Extend DefaultMergeStrategy and override comparer
+class PriceRangeMergeStrategy extends DefaultMergeStrategy {
+ public override comparer(prevRecord: any, record: any, field: string): boolean {
+ return Math.abs(prevRecord[field] - record[field]) < 10;
}
-};
+}
+
+customMerge = new PriceRangeMergeStrategy();
```
## Toolbar
-> **Docs:** [Toolbar](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/toolbar)
-
```typescript
import { IgxGridToolbarComponent } from 'igniteui-angular/grids/core';
```
@@ -115,8 +122,6 @@ import { IgxGridToolbarComponent } from 'igniteui-angular/grids/core';
### Excel Export
-> **Docs:** [Excel Export](https://www.infragistics.com/products/ignite-ui-angular/angular/components/exporter-excel)
-
```typescript
import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular/grids/core';
@@ -133,8 +138,6 @@ export class MyComponent {
### CSV Export
-> **Docs:** [CSV Export](https://www.infragistics.com/products/ignite-ui-angular/angular/components/exporter-csv)
-
```typescript
import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from 'igniteui-angular/grids/core';
@@ -160,19 +163,27 @@ For full remote virtualization patterns — see [`paging-remote.md`](./paging-re
## Row Drag
-> **Docs:** [Row Drag](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-drag)
-
```html
-
- Moving {{ dragData.dragData.name }}
+
+
+ arrow_right_alt
```
-## Action Strip
+Handle drops via `igxDrop` on the target:
-> **Docs:** [Action Strip](https://www.infragistics.com/products/ignite-ui-angular/angular/components/action-strip)
+```typescript
+import { IDropDroppedEventArgs } from 'igniteui-angular/directives';
+
+onDropAllowed(args: IDropDroppedEventArgs) {
+ this.targetGrid.addRow(args.dragData.data); // row data
+ this.sourceGrid.deleteRow(args.dragData.key); // primary key
+}
+```
+
+## Action Strip
Overlay actions on a row:
@@ -188,8 +199,6 @@ Overlay actions on a row:
## Master-Detail (Grid only)
-> **Docs:** [Master-Detail](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/master-detail)
-
Expand rows to show arbitrary detail content:
```html
diff --git a/skills/igniteui-angular-grids/references/paging-remote.md b/skills/igniteui-angular-grids/references/paging-remote.md
index df2318437a1..b77f5111615 100644
--- a/skills/igniteui-angular-grids/references/paging-remote.md
+++ b/skills/igniteui-angular-grids/references/paging-remote.md
@@ -15,8 +15,6 @@
## Paging
-> **Docs:** [Paging — Remote Paging](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/paging#remote-paging) (substitute URL prefix per grid type)
-
### Using the Paginator Component
```html
@@ -114,8 +112,6 @@ export class RemotePagingComponent {
## Remote Data Operations
-> **Docs:** [Remote Data Operations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/remote-data-operations) (substitute URL prefix per grid type)
-
### The Problem
Grids perform sorting, filtering, and paging **client-side** by default. For large datasets, you must intercept these operations and delegate them to the server.
@@ -130,11 +126,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { IgxGridComponent, IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid';
import {
IFilteringExpressionsTree,
+ ISortingExpression,
NoopSortingStrategy,
NoopFilteringStrategy
} from 'igniteui-angular/core';
import { IForOfState } from 'igniteui-angular/directives';
-import { ISortingEventArgs } from 'igniteui-angular/grids/core';
import { debounceTime, Subject } from 'rxjs';
@Component({
@@ -156,7 +152,7 @@ export class RemoteGridComponent {
private dataService = inject(OrderService);
private destroyRef = inject(DestroyRef);
- private currentSort: ISortingEventArgs[] | undefined;
+ private currentSort: ISortingExpression[] | undefined;
private currentFilter: IFilteringExpressionsTree | undefined;
// Debounce rapid dataPreLoad events during fast scrolling
@@ -179,7 +175,7 @@ export class RemoteGridComponent {
this.dataPreLoad$.next(event);
}
- onSortingDone(event: ISortingEventArgs) {
+ onSortingDone() {
this.currentSort = this.gridRef().sortingExpressions;
this.loadData(0, 15);
}
@@ -217,7 +213,7 @@ export class RemoteGridComponent {
[sortStrategy]="noopSort"
[filterStrategy]="noopFilter"
(dataPreLoad)="onDataPreLoad($event)"
- (sortingDone)="onSortingDone($event)"
+ (sortingDone)="onSortingDone()"
(filteringExpressionsTreeChange)="onFilteringExpressionsTreeChange()"
height="600px">
diff --git a/skills/igniteui-angular-grids/references/sizing.md b/skills/igniteui-angular-grids/references/sizing.md
index d7b99cb7639..5cf718b9108 100644
--- a/skills/igniteui-angular-grids/references/sizing.md
+++ b/skills/igniteui-angular-grids/references/sizing.md
@@ -25,6 +25,15 @@ The grid supports both component inputs (`width`/`height`) and regular CSS/layou
**Default:** `100%` — the grid fills available width of the parent/window.
+### `null` Width
+
+```html
+
+```
+
+- All columns are rendered in the DOM — **horizontal column virtualization is disabled**.
+- **Warning:** rendering many columns without virtualization can significantly impact performance.
+
### Pixel Width
```html
@@ -141,6 +150,7 @@ html, body, .grid-container {
- Column width is calculated as a percentage of the grid width.
- Responsive — resizes when the grid resizes.
- Combined percentages less than `100%` leave an empty area; greater than `100%` triggers a horizontal scrollbar.
+- If the grid `width` is `null`, percentage-width columns fall back to `136px` each.
## Grid Cell Spacing Control
diff --git a/skills/igniteui-angular-grids/references/state.md b/skills/igniteui-angular-grids/references/state.md
index 2ffdd43d24f..e0e03418ba4 100644
--- a/skills/igniteui-angular-grids/references/state.md
+++ b/skills/igniteui-angular-grids/references/state.md
@@ -16,8 +16,6 @@
## State Persistence
-> **Docs:** [State Persistence](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/state-persistence) (substitute URL prefix per grid type)
-
### Saving and Restoring Grid State
Use `IgxGridStateDirective` to persist sorting, filtering, grouping, paging, selection, and column state:
@@ -115,8 +113,6 @@ onColumnInit(column: IgxColumnComponent) {
## Tree Grid Data Operations
-> **Docs:** [Tree Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree-grid) · [Load on Demand](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/load-on-demand)
-
### Recursive Filtering Behavior
Tree Grid filtering is **inclusive** — when a child matches, all its ancestors are kept visible (marked as `isFilteredOutParent`) and auto-expanded. This is the default `TreeGridFilteringStrategy`.
@@ -171,8 +167,6 @@ this.treeGridRef().deleteRow(2); // deletes row 2 and all its children
## Hierarchical Grid Data Operations
-> **Docs:** [Hierarchical Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/hierarchical-grid) · [Load on Demand](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/load-on-demand)
-
### Independent Grid Levels
Each level of a hierarchical grid has its **own independent** sorting, filtering, and paging state. Configure features on the `` blueprint:
@@ -236,8 +230,6 @@ Setting `[batchEditing]="true"` on the root hierarchical grid automatically prop
## Pivot Grid Data Operations
-> **Docs:** [Pivot Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotGrid/pivot-grid)
-
> **IMPORTANT**: The Pivot Grid does NOT use standard sorting, filtering, editing, or paging APIs. All data operations are controlled through `pivotConfiguration`.
### Dimension-Based Filtering
@@ -260,18 +252,16 @@ regionFilter.filteringOperands = [
}
];
-// Apply the filter to a dimension
+// Apply the filter to a dimension and notify the grid
this.pivotConfig.filters[0].filter = regionFilter;
-// Notify the grid of the change
-this.pivotGridRef().pipeTrigger++;
+this.pivotGridRef().notifyDimensionChange(true);
```
### Dimension-Based Sorting
```typescript
-// Sort a row dimension
-this.pivotConfig.rows[0].sortDirection = SortingDirection.Desc;
-this.pivotGridRef().pipeTrigger++;
+// Sort a row dimension via the public API
+this.pivotGridRef().sortDimension(this.pivotConfig.rows[0], SortingDirection.Desc);
```
### Key Pivot Grid Limitations
diff --git a/skills/igniteui-angular-grids/references/structure.md b/skills/igniteui-angular-grids/references/structure.md
index 371a8de56c8..708be3390ed 100644
--- a/skills/igniteui-angular-grids/references/structure.md
+++ b/skills/igniteui-angular-grids/references/structure.md
@@ -71,8 +71,6 @@ export class UsersGridComponent {
## Column Configuration
-> **Docs:** [Column Types](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-types)
-
### Data Types
Set `dataType` to enable proper formatting, filtering, sorting, and editing:
@@ -91,8 +89,6 @@ Set `dataType` to enable proper formatting, filtering, sorting, and editing:
### Column Templates
-> **Docs:** [Column Configuration](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid#angular-grid-column-configuration)
-
Override default rendering with template directives:
```html
@@ -131,8 +127,6 @@ Override default rendering with template directives:
### Column Groups
-> **Docs:** [Collapsible Column Groups](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/collapsible-column-groups)
-
Group columns under a shared header:
```html
@@ -149,8 +143,6 @@ Group columns under a shared header:
### Multi-Row Layout (MRL)
-> **Docs:** [Multi-Row Layout](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/multi-row-layout)
-
Create complex cell layouts spanning multiple rows/columns:
```html
@@ -163,8 +155,6 @@ Create complex cell layouts spanning multiple rows/columns:
### Column Pinning
-> **Docs:** [Column Pinning](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-pinning)
-
```html
```
@@ -173,8 +163,6 @@ Or programmatically: `this.gridRef().pinColumn('name')`.
## Sorting
-> **Docs:** [Sorting](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sorting) (substitute URL prefix per grid type — see hub instruction)
-
```html
**Docs:** [Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/filtering)
-
```html
@@ -209,8 +195,6 @@ For advanced programmatic sorting patterns, custom sort strategies, and sorting
### Excel-Style Filter
-> **Docs:** [Excel-Style Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/excel-style-filtering)
-
```html
@@ -219,8 +203,6 @@ For advanced programmatic sorting patterns, custom sort strategies, and sorting
### Advanced Filtering Dialog
-> **Docs:** [Advanced Filtering](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/advanced-filtering)
-
```html
@@ -243,13 +225,11 @@ For advanced programmatic filtering, complex AND/OR trees, and remote filtering
### Row Selection
-> **Docs:** [Row Selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-selection)
-
```html
-
+
@@ -259,16 +239,12 @@ Modes: `'none'`, `'single'`, `'multiple'`, `'multipleCascade'` (tree grids).
### Cell Selection
-> **Docs:** [Cell Selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/cell-selection)
-
```html
```
### Column Selection
-> **Docs:** [Column Selection](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/column-selection)
-
```html
diff --git a/skills/igniteui-angular-grids/references/types.md b/skills/igniteui-angular-grids/references/types.md
index 08c69e08aea..62a8d53c9de 100644
--- a/skills/igniteui-angular-grids/references/types.md
+++ b/skills/igniteui-angular-grids/references/types.md
@@ -15,8 +15,6 @@
## Tree Grid
-> **Docs:** [Tree Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree-grid)
-
For data with parent-child relationships **within a single schema** (e.g., org charts, file systems, categories).
### Two Data Binding Modes
@@ -89,8 +87,6 @@ export class OrgTreeComponent {
## Hierarchical Grid
-> **Docs:** [Hierarchical Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/hierarchical-grid)
-
For master-detail data where **each level has a different schema** (e.g., Companies → Departments → Employees). Each level is defined by a **Row Island** blueprint.
```typescript
@@ -184,7 +180,7 @@ npm install igniteui-grid-lite
### Setup
```typescript
-import { Component, CUSTOM_ELEMENTS_SCHEMA, viewChild } from '@angular/core';
+import { Component, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA, viewChild } from '@angular/core';
import {
IgxGridLiteComponent,
IgxGridLiteColumnComponent,
@@ -215,7 +211,6 @@ export class UsersLiteComponent {
```html
` with these inputs:
### Templates
-Cell and header templates use dedicated directives:
+Use `igxGridLiteCell` for cell templates and `igxGridLiteHeader` for header templates:
```html
-
-
-
- {{ value }}
+
+
+ ⭐ Rating
-
-
-
- {{ column.header }}
+
+ {{ value }}
```
+> When a header template is provided, the `header` text property is ignored.
+
### Sorting & Filtering API
```typescript
@@ -345,9 +339,9 @@ dataPipeline: IgxGridLiteDataPipelineConfiguration = {
| Event | Cancelable | Payload |
|---|---|---|
-| `(sorting)` | Yes (`event.detail.cancel = true`) | Sorting expression about to be applied |
+| `(sorting)` | Yes (`event.preventDefault()`) | Sorting expression about to be applied |
| `(sorted)` | No | Sorting completed |
-| `(filtering)` | Yes (`event.detail.cancel = true`) | Filter expression about to be applied |
+| `(filtering)` | Yes (`event.preventDefault()`) | Filter expression about to be applied |
| `(filtered)` | No | Filtering completed |
### Grid Lite Limitations
@@ -378,8 +372,6 @@ These features are **NOT available** in Grid Lite:
## Pivot Grid
-> **Docs:** [Pivot Grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotGrid/pivot-grid)
-
For **pivot table analytics** where users reshape data by dragging dimensions between rows, columns, filters, and values.
> **IMPORTANT**: The Pivot Grid is fundamentally different from the other three grids. Standard grid features like cell editing, row editing, batch editing, paging, column pinning, column moving, row dragging, and standard filtering/sorting are **disabled**. All data operations are driven by the `pivotConfiguration`.