igniteui-cli 15.2.1-alpha.3 → 15.2.2-alpha.0

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/references/editing.md

@@ -57,7 +57,7 @@ Mark columns as editable:
 | `CellEditEnter` | `EventCallback<IgbGridEditEventArgs>` | Fires when a cell enters edit mode |
 | `CellEdit` | `EventCallback<IgbGridEditEventArgs>` | Fires before a cell value is committed - set `args.Cancel = true` to reject |
 | `CellEditDone` | `EventCallback<IgbGridEditDoneEventArgs>` | Fires after a cell value is committed |
-| `CellEditExit` | `EventCallback<IgbGridEditEventArgs>` | Fires when a cell exits edit mode |
+| `CellEditExit` | `EventCallback<IgbGridEditDoneEventArgs>` | Fires when a cell exits edit mode |
 
 ### Example: Validate before commit
 
@@ -126,7 +126,7 @@ Mark columns as editable:
 | `RowEditEnter` | `EventCallback<IgbGridEditEventArgs>` | Fires when a row enters edit mode |
 | `RowEdit` | `EventCallback<IgbGridEditEventArgs>` | Fires before row changes are committed - set `args.Cancel = true` to reject |
 | `RowEditDone` | `EventCallback<IgbGridEditDoneEventArgs>` | Fires after row changes are committed |
-| `RowEditExit` | `EventCallback<IgbGridEditEventArgs>` | Fires when a row exits edit mode |
+| `RowEditExit` | `EventCallback<IgbGridEditDoneEventArgs>` | Fires when a row exits edit mode |
 
 ### Example: Save row on confirm
 
@@ -201,40 +201,32 @@ Add inline add/edit/delete actions:
 
 ## Validation
 
-### Built-in validation
+### Custom validation via editing events
 
-Columns support built-in validators that run during editing:
-
-```razor
-<IgbColumn Field="Name" Editable="true" Required="true" />
-<IgbColumn Field="Email" Editable="true" DataType="GridColumnDataType.String" MinLength="5" MaxLength="100" />
-<IgbColumn Field="Age" Editable="true" DataType="GridColumnDataType.Number" Min="18" Max="120" />
-```
-
-| Validator Parameter | Type | Description |
-|---|---|---|
-| `Required` | `bool` | Value cannot be empty |
-| `MinLength` | `int` | Minimum string length |
-| `MaxLength` | `int` | Maximum string length |
-| `Min` | `object` | Minimum numeric/date value |
-| `Max` | `object` | Maximum numeric/date value |
-
-### Validation display
-
-When a validation rule is violated, the cell shows a red border and a tooltip with the error message. The row cannot be committed while validation errors exist in row editing mode.
-
-### Custom validation
-
-Implement custom logic in the `CellEdit` or `RowEdit` event:
+Use the `CellEdit` or `RowEdit` event to validate values before commit. Set `args.Cancel = true` to reject invalid input:
 
 ```razor
 <IgbGrid Data="data" PrimaryKey="Id" RowEditable="true"
-         RowEdit="OnRowEdit">
+         RowEdit="OnRowEdit" CellEdit="OnCellEdit">
+    <IgbColumn Field="Name" Editable="true" DataType="GridColumnDataType.String" />
+    <IgbColumn Field="Age" Editable="true" DataType="GridColumnDataType.Number" />
     <IgbColumn Field="StartDate" Editable="true" DataType="GridColumnDataType.Date" />
     <IgbColumn Field="EndDate" Editable="true" DataType="GridColumnDataType.Date" />
 </IgbGrid>
 
 @code {
+    private void OnCellEdit(IgbGridEditEventArgs args)
+    {
+        if (args.Column.Field == "Age")
+        {
+            var newValue = Convert.ToInt32(args.NewValue);
+            if (newValue < 18 || newValue > 120)
+            {
+                args.Cancel = true; // reject out-of-range age
+            }
+        }
+    }
+
     private void OnRowEdit(IgbGridEditEventArgs args)
     {
         var rowData = args.NewValue as ProjectTask;
@@ -247,6 +239,21 @@ Implement custom logic in the `CellEdit` or `RowEdit` event:
 }
 ```
 
+### Validation error template
+
+Use `ErrorTemplate` on a column to display a custom message when validation fails:
+
+```razor
+<IgbColumn Field="Age" Editable="true" DataType="GridColumnDataType.Number">
+    <ErrorTemplate>
+        @{
+            var cell = (IgbCellTemplateContext)context;
+        }
+        <span style="color: red;">Invalid value</span>
+    </ErrorTemplate>
+</IgbColumn>
+```
+
 ---
 
 ## Custom Editors

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/references/features.md

@@ -68,15 +68,15 @@ Customize the group row:
             var groupRow = (IgbGroupByRowTemplateContext)context;
         }
         <span>
-            <strong>@groupRow.GroupRow.Expression.FieldName</strong>:
-            @groupRow.GroupRow.Value
-            (@groupRow.GroupRow.Records.Count items)
+            <strong>@groupRow.Implicit.Expression.FieldName</strong>:
+            @groupRow.Implicit.Value
+            (@groupRow.Implicit.Records.Length items)
         </span>
     </GroupRowTemplate>
 </IgbGrid>
 ```
 
-### Hide group area
+### Hide grouped columns from the grid
 
 ```razor
 <IgbGrid Data="data" PrimaryKey="Id" HideGroupedColumns="true">
@@ -84,6 +84,14 @@ Customize the group row:
 </IgbGrid>
 ```
 
+### Hide the group area
+
+```razor
+<IgbGrid Data="data" PrimaryKey="Id" ShowGroupArea="false">
+    ...
+</IgbGrid>
+```
+
 ### Grouping events
 
 | Event | Type | Description |
@@ -115,14 +123,9 @@ Enable with `HasSummary="true"` on a column. The built-in summaries depend on th
 
 ### Custom summary operands
 
-Extend `IgbNumberSummaryOperand` (or `IgbDateSummaryOperand`, `IgbSummaryOperand`) and override `Operate()` to return `IgbSummaryResult[]`. Apply via `Summaries` parameter:
-
-```razor
-<IgbColumn Field="Salary" Header="Salary" HasSummary="true"
-           Summaries="typeof(MySalarySummary)" />
-```
+Custom summaries in Blazor are implemented via JavaScript using `ColumnInitScript`. Define a JavaScript class with an `operate(data, allData, fieldName)` method that returns an array of `{ key, label, summaryResult }` objects, then assign it during column initialization.
 
-> For full custom summary class syntax, call `get_doc(framework: "blazor", slug: "grids/grid/summaries")` and use `get_api_reference` for the exact API contract.
+> For full custom summary class syntax, call `get_doc(framework: "blazor", name: "grid-summaries")` for the JavaScript pattern and template usage.
 
 ### Summary position
 
@@ -227,11 +230,15 @@ The grid toolbar provides built-in UI for column hiding, column pinning, exporti
 
 ### Programmatic export
 
-```razor
-@inject IgbExcelExporterService ExcelExporter
-@inject IgbCsvExporterService CsvExporter
+Use a `@ref` on the `IgbGridToolbarExporter` to trigger export from code:
 
+```razor
 <IgbGrid @ref="grid" Data="data" PrimaryKey="Id">
+    <IgbGridToolbar>
+        <IgbGridToolbarActions>
+            <IgbGridToolbarExporter @ref="exporter" ExportExcel="true" ExportCSV="true" Filename="employees" />
+        </IgbGridToolbarActions>
+    </IgbGridToolbar>
     ...
 </IgbGrid>
 
@@ -240,40 +247,72 @@ The grid toolbar provides built-in UI for column hiding, column pinning, exporti
 
 @code {
     private IgbGrid grid = default!;
+    private IgbGridToolbarExporter exporter = default!;
 
     private async Task ExportToExcel()
     {
-        var options = new IgbExcelExporterOptions("employees");
-        await ExcelExporter.ExportAsync(grid, options);
+        await exporter.ExportGridAsync(GridToolbarExporterType.Excel);
     }
 
     private async Task ExportToCsv()
     {
-        var options = new IgbCsvExporterOptions("employees");
-        options.FileType = CsvFileTypes.CSV;
-        await CsvExporter.ExportAsync(grid, options);
+        await exporter.ExportGridAsync(GridToolbarExporterType.CSV);
     }
 }
 ```
 
+### Customize export via events
+
+Handle `ToolbarExporting` on the grid to modify options or cancel the export:
+
+```razor
+<IgbGrid Data="data" PrimaryKey="Id" ToolbarExportingScript="OnToolbarExporting">
+    <IgbGridToolbar>
+        <IgbGridToolbarActions>
+            <IgbGridToolbarExporter ExportExcel="true" ExportCSV="true" />
+        </IgbGridToolbarActions>
+    </IgbGridToolbar>
+    ...
+</IgbGrid>
+```
+
+```javascript
+// In JavaScript
+igRegisterScript("OnToolbarExporting", (evt) => {
+    const args = evt.detail;
+    args.options.fileName = `Report_${new Date().toDateString()}`;
+    // args.cancel = true; // to cancel export
+    args.exporter.columnExporting.subscribe((colArgs) => {
+        if (colArgs.header === "ID") {
+            colArgs.cancel = true; // skip this column
+        }
+    });
+}, false);
+```
+
 ### Export options
 
+These properties exist on `IgbExporterOptionsBase`, accessible via the `ToolbarExporting` event args:
+
 | Option | Type | Description |
 |---|---|---|
 | `FileName` | `string` | Name of the exported file (without extension) |
 | `IgnoreFiltering` | `bool` | Export all data, not just filtered |
 | `IgnoreSorting` | `bool` | Export in original data order |
 | `IgnoreColumnsVisibility` | `bool` | Include hidden columns in export |
-| `ExportGroupedRows` | `bool` | Include group rows in export (IgbGrid only) |
+| `IgnoreGrouping` | `bool` | Ignore grouping in export (IgbGrid only) |
+| `AlwaysExportHeaders` | `bool` | Export headers even if there is no data |
+| `ExportSummaries` | `bool` | Include column summaries in export |
 
 ### Export events
 
-| Event | Description |
-|---|---|
-| `ExportStarted` | Fires before export begins - cancel or configure here |
-| `ExportEnded` | Fires after export completes |
-| `ColumnExporting` | Fires for each column - skip or modify |
-| `RowExporting` | Fires for each row - skip or modify |
+| Event | On | Description |
+|---|---|---|
+| `ExportStarted` | `IgbGridToolbarExporter` | Fires before export begins |
+| `ExportEnded` | `IgbGridToolbarExporter` | Fires after export completes |
+| `ToolbarExporting` | Grid (`IgbGrid` etc.) | Fires when toolbar export is triggered - configure options or cancel |
+| `ColumnExporting` | `IgbBaseExporter` (via event args) | Fires for each column - skip or modify |
+| `RowExporting` | `IgbBaseExporter` (via event args) | Fires for each row - skip or modify |
 
 ---
 
@@ -324,14 +363,14 @@ Enable row reordering or drag-to-external targets:
 
 ```razor
 <IgbGrid Data="data" PrimaryKey="Id" RowDraggable="true">
-    <DragGhostTemplate>
+    <DragGhostCustomTemplate>
         @{
             var row = (IgbGridRowDragGhostContext)context;
         }
         <div class="custom-ghost">
-            Moving: @row.RowData
+            Moving: @row.Data
         </div>
-    </DragGhostTemplate>
+    </DragGhostCustomTemplate>
     ...
 </IgbGrid>
 ```
@@ -385,7 +424,8 @@ Show a detail view for each expanded row. This is specific to the flat grid - fo
     <IgbColumn Field="Country" Header="Country" />
     <DetailTemplate>
         @{
-            var customer = (Customer)context;
+            var ctx = (IgbGridMasterDetailContext)context;
+            var customer = (Customer)ctx.Implicit;
         }
         <div style="padding: 16px;">
             <h4>Orders for @customer.Name</h4>

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/references/paging-remote.md

@@ -33,17 +33,17 @@ The grid does not have built-in paging. Instead, place an `IgbPaginator` compone
 
 | Parameter | Type | Default | Description |
 |---|---|---|---|
-| `PerPage` | `int` | `15` | Rows per page |
-| `TotalRecords` | `int` | - | Total record count (required for remote paging) |
-| `SelectOptions` | `int[]` | `[5, 10, 15, 25, 50]` | Page size dropdown options |
+| `PerPage` | `double` | `15` | Rows per page |
+| `TotalRecords` | `double` | - | Total record count (required for remote paging) |
+| `SelectOptions` | `double[]` | `[5, 10, 15, 25, 50]` | Page size dropdown options |
 
 ### Paginator events
 
 | Event | Type | Description |
 |---|---|---|
-| `PerPageChanged` | `EventCallback<int>` | Fires when page size changes |
-| `PageChanged` | `EventCallback<int>` | Fires when current page changes |
-| `PagingDone` | `EventCallback<IgbPagingEventArgs>` | Fires after paging completes |
+| `PerPageChange` | `EventCallback<IgbNumberEventArgs>` | Fires when page size changes |
+| `PageChange` | `EventCallback<IgbNumberEventArgs>` | Fires when current page changes |
+| `PagingDone` | `EventCallback<IgbPageEventArgs>` | Fires after paging completes |
 
 ### Programmatic paging
 
@@ -76,7 +76,7 @@ The grid does not have built-in paging. Instead, place an `IgbPaginator` compone
 
 | Method | Description |
 |---|---|
-| `PaginateAsync(int page)` | Go to a specific page (0-based index) |
+| `PaginateAsync(double page)` | Go to a specific page (0-based index) |
 | `NextPageAsync()` | Go to the next page |
 | `PreviousPageAsync()` | Go to the previous page |
 
@@ -94,8 +94,8 @@ When data lives on a server, fetch only the current page:
     <IgbColumn Field="Department" Header="Department" />
     <IgbPaginator PerPage="@pageSize"
                    TotalRecords="@totalRecords"
-                   PageChanged="OnPageChanged"
-                   PerPageChanged="OnPerPageChanged" />
+                   PageChange="OnPageChange"
+                   PerPageChange="OnPerPageChange" />
 </IgbGrid>
 
 @code {
@@ -110,15 +110,15 @@ When data lives on a server, fetch only the current page:
         await LoadPageAsync();
     }
 
-    private async Task OnPageChanged(int page)
+    private async Task OnPageChange(IgbNumberEventArgs args)
     {
-        currentPage = page;
+        currentPage = (int)args.Detail;
         await LoadPageAsync();
     }
 
-    private async Task OnPerPageChanged(int newPageSize)
+    private async Task OnPerPageChange(IgbNumberEventArgs args)
     {
-        pageSize = newPageSize;
+        pageSize = (int)args.Detail;
         currentPage = 0;
         await LoadPageAsync();
     }
@@ -137,7 +137,7 @@ When data lives on a server, fetch only the current page:
 
 1. **Set `TotalRecords`** on the paginator - this tells it the total number of records on the server.
 2. **Bind `Data` to the current page** - only the current page's data is in memory.
-3. **Handle `PageChanged` and `PerPageChanged`** - fetch new data from the server on each event.
+3. **Handle `PageChange` and `PerPageChange`** - fetch new data from the server on each event.
 
 ---
 
@@ -154,7 +154,7 @@ For large datasets, disable client-side sorting/filtering and handle them on the
     <IgbColumn Field="Department" Sortable="true" />
     <IgbColumn Field="Salary" Sortable="true" DataType="GridColumnDataType.Number" />
     <IgbPaginator PerPage="@pageSize" TotalRecords="@totalRecords"
-                   PageChanged="OnPageChanged" />
+                   PageChange="OnPageChange" />
 </IgbGrid>
 
 @code {
@@ -165,16 +165,16 @@ For large datasets, disable client-side sorting/filtering and handle them on the
     private int currentPage = 0;
     private IgbSortingExpression[]? currentSort;
 
-    private async Task OnSortingDone(IgbSortingEventArgs args)
+    private async Task OnSortingDone(IgbSortingExpressionEventArgs args)
     {
-        currentSort = args.SortingExpressions;
+        currentSort = args.Detail;
         currentPage = 0;
         await LoadDataAsync();
     }
 
-    private async Task OnPageChanged(int page)
+    private async Task OnPageChange(IgbNumberEventArgs args)
     {
-        currentPage = page;
+        currentPage = (int)args.Detail;
         await LoadDataAsync();
     }
 
@@ -207,11 +207,11 @@ For large datasets, disable client-side sorting/filtering and handle them on the
     private IgbGrid grid = default!;
     private List<Employee> data = new();
 
-    private async Task OnFilteringDone(IgbFilteringEventArgs args)
+    private async Task OnFilteringDone(IgbFilteringExpressionsTreeEventArgs args)
     {
         // Extract filter information and send to server
-        var filterExpressions = args.FilteringExpressions;
-        var result = await Api.GetEmployeesFilteredAsync(filterExpressions);
+        var filterDetail = args.Detail;
+        var result = await Api.GetEmployeesFilteredAsync(filterDetail);
         data = result.Items;
         StateHasChanged();
     }
@@ -291,7 +291,7 @@ With 50 columns at 150px each (7500px total) in an 800px wide grid, only the vis
 
 1. **`IgbPaginator` goes inside the grid** - it is a child component, not a sibling.
 2. **Remote paging requires `TotalRecords`** - without it, the paginator cannot calculate page count.
-3. **Handle events for remote operations** - `SortingDone`, `FilteringDone`, `PageChanged` are your hooks to fetch server data.
+3. **Handle events for remote operations** - `SortingDone`, `FilteringDone`, `PageChange` are your hooks to fetch server data.
 4. **Virtualization needs a fixed `Height`** - this is the #1 performance requirement.
 5. **Do not use `.Skip().Take()` on `IQueryable` directly on the grid** - the grid expects a materialized collection (`List<T>` or `T[]`). Fetch data asynchronously and set it as the `Data` property.
 6. **`StateHasChanged()` after data updates** - call it after reassigning the `Data` property from an async operation.

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/references/sizing.md

@@ -146,21 +146,24 @@ Users can drag column borders to resize. Combine with `MinWidth` and `MaxWidth`
 
 ### Auto-size column to fit content
 
-Programmatically auto-size a column to fit its longest cell value:
+Programmatically auto-size a column to fit its longest visible cell value:
 
 ```razor
 @code {
     private IgbGrid grid = default!;
 
-    private async Task AutoSizeNameColumn()
+    private void AutoSizeNameColumn()
     {
         var column = grid.GetColumnByName("Name");
-        await grid.AutoSizeColumnWidthAsync(column);
+        column.Autosize(false); // false = include cell content, true = header only
     }
 
-    private async Task AutoSizeAllColumns()
+    private void AutoSizeAllColumns()
     {
-        await grid.AutoSizeColumnsWidthAsync();
+        foreach (var col in grid.Columns)
+        {
+            col.Autosize(false);
+        }
     }
 }
 ```
@@ -168,10 +171,10 @@ Programmatically auto-size a column to fit its longest cell value:
 ### Column auto-width on init
 
 ```razor
-<IgbColumn Field="Name" Header="Name" AutoSize="true" />
+<IgbColumn Field="Name" Header="Name" Width="auto" />
 ```
 
-When `AutoSize="true"`, the column width adjusts on initial render to fit the header and visible content.
+When `Width="auto"`, the column width adjusts on initial render to fit the header and visible content.
 
 ---
 
@@ -179,19 +182,19 @@ When `AutoSize="true"`, the column width adjusts on initial render to fit the he
 
 ### Default row height
 
-The default row height depends on the theme's display density. Use `DisplayDensity` on the grid:
+The default row height depends on the `--ig-size` CSS custom property. Set it on the grid or a parent element:
 
-```razor
-<IgbGrid Data="data" PrimaryKey="Id" DisplayDensity="DisplayDensity.Comfortable">
-    ...
-</IgbGrid>
+```css
+igc-grid {
+    --ig-size: var(--ig-size-large); /* default */
+}
 ```
 
-| Display Density | Approximate Row Height |
+| `--ig-size` value | Approximate Row Height |
 |---|---|
-| `Comfortable` | 50px (default) |
-| `Cosy` | 40px |
-| `Compact` | 32px |
+| `var(--ig-size-large)` | 50px (default) |
+| `var(--ig-size-medium)` | 40px |
+| `var(--ig-size-small)` | 32px |
 
 ### Custom row height
 
@@ -215,22 +218,11 @@ Or use `RowHeight` parameter:
 
 ## Cell Spacing (CSS Variables)
 
-Control cell padding and spacing using CSS custom properties:
-
-```css
-igc-grid {
-    --ig-grid-cell-padding-block: 12px;     /* top and bottom padding */
-    --ig-grid-cell-padding-inline: 16px;    /* left and right padding */
-}
-```
-
-### Available CSS variables for grid spacing
+The grid does not expose individual cell-padding CSS custom properties. Cell padding and row height are controlled by the `--ig-size` CSS variable:
 
 | CSS Variable | Description | Default |
 |---|---|---|
-| `--ig-grid-cell-padding-block` | Vertical cell padding | Theme-dependent |
-| `--ig-grid-cell-padding-inline` | Horizontal cell padding | Theme-dependent |
-| `--ig-size` | Overall component size (affects row height, cell padding) | `var(--ig-size-large)` |
+| `--ig-size` | Overall component size (affects row height, cell padding, header height) | `var(--ig-size-large)` |
 
 ### Sizing via `--ig-size`
 
@@ -280,5 +272,5 @@ Apply different sizing to a specific grid:
 5. **`MinWidth` and `MaxWidth` constrain resizing** - always set them when `Resizable="true"` for predictable UX.
 6. **`--ig-size` controls the overall density** - it affects row height, cell padding, header height, and internal spacing.
 7. **Column virtualization requires column widths** - without widths, the grid cannot calculate which columns are outside the viewport.
-8. **Auto-size is a one-time operation** - `AutoSize="true"` on a column fits content at initial render; it doesn't update dynamically as data changes.
+8. **Auto-size is a one-time operation** - `Width="auto"` on a column fits content at initial render; it doesn't update dynamically as data changes.
 9. **Row height consistency** - all rows in a grid have the same height. Variable row height is not supported.

package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/references/state.md

@@ -21,6 +21,7 @@ Save and restore the full grid state (sorting, filtering, grouping, paging, sele
 
 <IgbGrid @ref="grid" Data="data" PrimaryKey="Id" AutoGenerate="false"
          Width="100%" Height="500px">
+    <IgbGridState @ref="gridState"></IgbGridState>
     <IgbColumn Field="Name" Sortable="true" Filterable="true" />
     <IgbColumn Field="Department" Sortable="true" Groupable="true" />
     <IgbColumn Field="Salary" DataType="GridColumnDataType.Currency" HasSummary="true" />
@@ -32,11 +33,11 @@ Save and restore the full grid state (sorting, filtering, grouping, paging, sele
 
 @code {
     private IgbGrid grid = default!;
+    private IgbGridState gridState = default!;
 
     private async Task SaveState()
     {
-        var state = await grid.GetStateAsync();
-        var json = state.ToJson();
+        string json = await gridState.GetStateAsStringAsync(new string[0]);
         await JS.InvokeVoidAsync("localStorage.setItem", "gridState", json);
     }
 
@@ -45,8 +46,7 @@ Save and restore the full grid state (sorting, filtering, grouping, paging, sele
         var json = await JS.InvokeAsync<string>("localStorage.getItem", "gridState");
         if (!string.IsNullOrEmpty(json))
         {
-            var state = IgbGridState.FromJson(json);
-            await grid.SetStateAsync(state);
+            await gridState.ApplyStateFromStringAsync(json, new string[0]);
         }
     }
 }
@@ -69,40 +69,39 @@ Save and restore the full grid state (sorting, filtering, grouping, paging, sele
 ### Auto-save on navigation
 
 ```razor
-@implements IAsyncDisposable
+@implements IDisposable
 
-<IgbGrid @ref="grid" Data="data" PrimaryKey="Id">
+<IgbGrid @ref="grid" Data="data" PrimaryKey="Id" Rendered="OnGridRendered">
+    <IgbGridState @ref="gridState"></IgbGridState>
     ...
 </IgbGrid>
 
 @code {
     private IgbGrid grid = default!;
+    private IgbGridState gridState = default!;
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
+    void OnGridRendered()
     {
-        if (firstRender)
-        {
-            await RestoreState();
-        }
+        RestoreGridState();
     }
 
-    public async ValueTask DisposeAsync()
+    void IDisposable.Dispose()
     {
-        await SaveState();
+        SaveGridState();
     }
 
-    private async Task SaveState()
+    async void SaveGridState()
     {
-        var state = await grid.GetStateAsync();
-        await JS.InvokeVoidAsync("localStorage.setItem", "gridState", state.ToJson());
+        string state = await gridState.GetStateAsStringAsync(new string[0]);
+        await JS.InvokeVoidAsync("localStorage.setItem", "gridState", state);
     }
 
-    private async Task RestoreState()
+    async void RestoreGridState()
     {
-        var json = await JS.InvokeAsync<string>("localStorage.getItem", "gridState");
-        if (!string.IsNullOrEmpty(json))
+        string state = await JS.InvokeAsync<string>("localStorage.getItem", "gridState");
+        if (!string.IsNullOrEmpty(state))
         {
-            await grid.SetStateAsync(IgbGridState.FromJson(json));
+            await gridState.ApplyStateFromStringAsync(state, new string[0]);
         }
     }
 }
@@ -110,21 +109,33 @@ Save and restore the full grid state (sorting, filtering, grouping, paging, sele
 
 ### Selective state save/restore
 
-Save only specific parts of the state:
+Save only specific parts of the state by passing feature name strings:
 
 ```razor
 @code {
+    private IgbGridState gridState = default!;
+
     private async Task SaveSortingOnly()
     {
-        var state = await grid.GetStateAsync(new IgbGridStateOptions
+        string state = await gridState.GetStateAsStringAsync(new string[] { "sorting" });
+        await JS.InvokeVoidAsync("localStorage.setItem", "gridSorting", state);
+    }
+}
+```
+
+To disable specific features from being tracked, set `Options` on the `IgbGridState` component:
+
+```razor
+@code {
+    private IgbGridState gridState = default!;
+
+    protected override void OnInitialized()
+    {
+        gridState.Options = new IgbGridStateOptions
         {
-            Sorting = true,
-            Filtering = false,
-            Paging = false,
-            Selection = false,
-            Columns = false
-        });
-        await JS.InvokeVoidAsync("localStorage.setItem", "gridSorting", state.ToJson());
+            CellSelection = false,
+            Sorting = false
+        };
     }
 }
 ```
@@ -133,10 +144,11 @@ Save only specific parts of the state:
 
 ```razor
 @code {
+    private IgbGridState gridState = default!;
+
     private async Task SaveToServer()
     {
-        var state = await grid.GetStateAsync();
-        var json = state.ToJson();
+        string json = await gridState.GetStateAsStringAsync(new string[0]);
         await UserPreferencesApi.SaveGridStateAsync(userId, "employeesGrid", json);
     }
 
@@ -145,7 +157,7 @@ Save only specific parts of the state:
         var json = await UserPreferencesApi.GetGridStateAsync(userId, "employeesGrid");
         if (!string.IsNullOrEmpty(json))
         {
-            await grid.SetStateAsync(IgbGridState.FromJson(json));
+            await gridState.ApplyStateFromStringAsync(json, new string[0]);
         }
     }
 }
@@ -156,5 +168,6 @@ Save only specific parts of the state:
 ## Key Rules
 
 1. **`PrimaryKey` must be set on the grid** for state persistence to work reliably (especially for selection and row pinning).
-2. **State serialization is JSON** - `GetStateAsync()` returns an object that can be serialized with `ToJson()`.
-3. **Restore state in `OnAfterRenderAsync`** - the grid must be rendered before you can call `SetStateAsync`.
+2. **`IgbGridState` is a child component of the grid** - add `<IgbGridState @ref="gridState">` inside the grid markup and use its methods.
+3. **Use `GetStateAsStringAsync` / `ApplyStateFromStringAsync`** - these accept/return JSON strings directly. Pass `new string[0]` for all features, or specific feature names like `new string[] { "sorting", "filtering" }`.
+4. **Restore state in the grid's `Rendered` event** - the grid must be fully rendered before you can call `ApplyStateFromStringAsync`.