Migrate GridLite samples to v0.4.0 declarative column API

[Copilot]

Migrates all 11 GridLite samples from imperative column configuration to the new declarative API introduced in v0.4.0.

Changes

Package Updates

• IgniteUI.Blazor.GridLite: 0.0.1 → 0.4.0
• IgniteUI.Blazor.Lite (sort-config-grid): 1.0.4 → 0.0.1 (corrected to available version)

Column Configuration API

Replaced Columns parameter with declarative <IgbGridLiteColumn> child elements:

Before:

<IgbGridLite TItem="ProductInfo" Data="@products" Columns="@columns" />

@code {
    private List<IgbColumnConfiguration> columns = new()
    {
        new() { Key = "Name", HeaderText = "Product Name", Type = GridLiteColumnDataType.String, Sort = true },
        new() { Key = "Price", HeaderText = "Price", Type = GridLiteColumnDataType.Number, Width = "150px" }
    };
}

After:

<IgbGridLite TItem="ProductInfo" Data="@products">
    <IgbGridLiteColumn Field="Name" Header="Product Name" DataType="GridLiteColumnDataType.String" Sortable />
    <IgbGridLiteColumn Field="Price" Header="Price" DataType="GridLiteColumnDataType.Number" Width="150px" />
</IgbGridLite>

Property Renames

• Column: Key → Field, Type → DataType, HeaderText → Header
• Sorting: Sort = true → Sortable, Sort = new IgbColumnSortConfiguration { CaseSensitive = true } → Sortable SortingCaseSensitive
• Filtering: Filter = true → Filterable, Filter = new IgbColumnFilterConfiguration { CaseSensitive = true } → Filterable FilteringCaseSensitive

Grid-Level Sorting

• SortConfiguration → SortingOptions
• IgbGridLiteSortConfiguration → IgbGridLiteSortingOptions
• Multiple = true/false → Mode = GridLiteSortingMode.Multiple/Single
• TriState property removed (always enabled)

Dynamic Columns

Replaced UpdateColumnsAsync() with conditional rendering:

@if (showRating)
{
    <IgbGridLiteColumn Field="@nameof(ProductInfo.Rating)" Header="Customer rating" ... />
}

Fixes

• Escaped @ symbol in Razor attributes (Header="Registered @@")
• Removed unused field declarations

Original prompt

Overview

Update all Grid Lite samples in samples/grids/grid-lite/ to use the new declarative column API from IgniteUI.Blazor.GridLite version 0.4.0.

Package Update

Update BlazorClientApp.csproj in each sample folder to use IgniteUI.Blazor.GridLite version 0.4.0 (change from 0.0.1).

Breaking Changes to Apply

1. Declarative Column Configuration

Column configuration is now declarative using <IgbGridLiteColumn> child elements instead of the Columns parameter.

Before:

<IgbGridLite TItem="ProductInfo" Data="@products" Columns="@columns" />

@code {
    private List<IgbColumnConfiguration> columns = new()
    {
        new() { Key = "Name", HeaderText = "Product Name", Type = GridLiteColumnDataType.String, Sort = true },
        new() { Key = "Price", HeaderText = "Price", Type = GridLiteColumnDataType.Number, Width = "150px", Sort = true }
    };
}

After:

<IgbGridLite TItem="ProductInfo" Data="@products">
    <IgbGridLiteColumn Field="Name" Header="Product Name" DataType="GridLiteColumnDataType.String" Sortable />
    <IgbGridLiteColumn Field="Price" Header="Price" DataType="GridLiteColumnDataType.Number" Width="150px" Sortable />
</IgbGridLite>

2. Column Property Renames (on column definition only, NOT on expressions)

• Key → Field (on column definitions only)
• Type → DataType
• HeaderText → Header

IMPORTANT: The Key property in IgbGridLiteSortingExpression and IgbGridLiteFilterExpression should remain as Key - it refers to the field to filter/sort by.

3. Sort/Filter Configuration Changes

• Sort = true → Sortable attribute
• Sort = new IgbColumnSortConfiguration { CaseSensitive = true } → Sortable + SortingCaseSensitive
• Filter = true → Filterable attribute
• Filter = new IgbColumnFilterConfiguration { CaseSensitive = true } → Filterable + FilteringCaseSensitive

4. Grid-level Sorting Renames

• SortConfiguration → SortingOptions
• SortExpressions → SortingExpressions
• IgbGridLiteSortConfiguration → IgbGridLiteSortingOptions
• IgbGridLiteSortExpression → IgbGridLiteSortingExpression
• Multiple = false → Mode = GridLiteSortingMode.Single
• Multiple = true → Mode = GridLiteSortingMode.Multiple
• Remove TriState property (tri-state sorting is now always enabled)

5. Removed

• Columns parameter - use declarative <IgbGridLiteColumn> elements
• UpdateColumnsAsync() method
• IgbColumnSortConfiguration and IgbColumnFilterConfiguration classes

Files to Update

All App.razor files in samples/grids/grid-lite/*/ directories that use the old column configuration API.

Example Transformation

Before (sort-config-events/App.razor):

<IgbGridLite TItem="ProductInfo" 
             Data="@products" 
             Columns="@columns"
             Sorting="@HandleSorting"
             Sorted="@HandleSorted" />

@code {
    private List<IgbColumnConfiguration> columns = new List<IgbColumnConfiguration>
    {
        new IgbColumnConfiguration
        {
            Key = nameof(ProductInfo.Name),
            HeaderText = "Product Name",
            Type = GridLiteColumnDataType.String,
            Sort = true
        },
        new IgbColumnConfiguration
        {
            Key = nameof(ProductInfo.Price),
            HeaderText = "Price",
            Type = GridLiteColumnDataType.Number,
            Width = "150px",
            Sort = true
        }
    };
}

After:

<IgbGridLite TItem="ProductInfo" 
             Data="@products"
             Sorting="@HandleSorting"
             Sorted="@HandleSorted">
    <IgbGridLiteColumn Field="@nameof(ProductInfo.Name)" Header="Product Name" DataType="GridLiteColumnDataType.String" Sortable />
    <IgbGridLiteColumn Field="@nameof(ProductInfo.Price)" Header="Price" DataType="GridLiteColumnDataType.Number" Width="150px" Sortable />
</IgbGridLite>

@code {
    // Remove columns list - no longer needed
}

Notes

• Keep Key property unchanged in sort/filter expressions (e.g., new IgbGridLiteSortingExpression { Key = "Name", ... })
• Only rename Key to Field on column configurations
• Remove the columns field declarations since they're no longer needed
• For columns with custom templates (like Rating), you may need to use RenderFragment or set templates programmatically

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.