Skip to content

Migrate GridLite samples to v0.4.0 declarative column API #1233

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 4 commits into
base: vnext
Choose a base branch
from
Draft

Migrate GridLite samples to v0.4.0 declarative column API #1233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
681d2c5
Initial plan
Copilot Feb 4, 2026
f6b1dba
Update all GridLite samples to version 0.4.0 with declarative column API
Copilot Feb 4, 2026
50741f9
Fix IgniteUI.Blazor.Lite package version in sort-config-grid sample
Copilot Feb 4, 2026
807e6fc
Fix Razor syntax issues in overview and data-binding samples
Copilot Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 12 additions & 61 deletions samples/grids/grid-lite/column-config-dynamic/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,81 +11,32 @@

<IgbGridLite @ref="grid"
TItem="ProductInfo"
Data="@products"
Columns="@columns"
class="grid-lite-sample" />
Data="@products"
class="grid-lite-sample">
<IgbGridLiteColumn Field="@nameof(ProductInfo.Name)" Header="Product Name" DataType="GridLiteColumnDataType.String" Resizable />
<IgbGridLiteColumn Field="@nameof(ProductInfo.Price)" Header="Price" DataType="GridLiteColumnDataType.Number" Width="150px" Resizable />
<IgbGridLiteColumn Field="@nameof(ProductInfo.Sold)" Header="Units sold" DataType="GridLiteColumnDataType.Number" Width="150px" Resizable />
<IgbGridLiteColumn Field="@nameof(ProductInfo.Total)" Header="Total sold" DataType="GridLiteColumnDataType.Number" Width="150px" Resizable />
@if (showRating)
{
<IgbGridLiteColumn Field="@nameof(ProductInfo.Rating)" Header="Customer rating" DataType="GridLiteColumnDataType.Number" Width="180px" Resizable />
}
</IgbGridLite>

</div>

@code {
private IgbGridLite<ProductInfo> grid;
private List<ProductInfo> products;
private List<IgbColumnConfiguration> columns;
private bool showRating = true;

protected override void OnInitialized()
{
products = MockDataGenerator.CreateProducts(50);
UpdateColumns();
}

private void UpdateColumns()
{
columns = new List<IgbColumnConfiguration>
{
new IgbColumnConfiguration
{
Key = nameof(ProductInfo.Name),
HeaderText = "Product Name",
Type = GridLiteColumnDataType.String,
Resizable = true
},
new IgbColumnConfiguration
{
Key = nameof(ProductInfo.Price),
HeaderText = "Price",
Type = GridLiteColumnDataType.Number,
Width = "150px",
Resizable = true
},
new IgbColumnConfiguration
{
Key = nameof(ProductInfo.Sold),
HeaderText = "Units sold",
Type = GridLiteColumnDataType.Number,
Width = "150px",
Resizable = true
},
new IgbColumnConfiguration
{
Key = nameof(ProductInfo.Total),
HeaderText = "Total sold",
Type = GridLiteColumnDataType.Number,
Width = "150px",
Resizable = true
}
};

if (showRating)
{
columns.Add(new IgbColumnConfiguration
{
Key = nameof(ProductInfo.Rating),
HeaderText = "Customer rating",
Type = GridLiteColumnDataType.Number,
Width = "180px",
Resizable = true
});
}
}

private async Task ToggleColumn()
private void ToggleColumn()
{
showRating = !showRating;
UpdateColumns();
if (grid != null)
{
await grid.UpdateColumnsAsync(columns);
}
}
}
2 changes: 1 addition & 1 deletion samples/grids/grid-lite/column-config-dynamic/BlazorClientApp.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</PropertyGroup>

<ItemGroup>
<PackageReference Include="IgniteUI.Blazor.GridLite" Version="0.0.1" />
<PackageReference Include="IgniteUI.Blazor.GridLite" Version="0.4.0" />
<PackageReference Include="Microsoft.AspNetCore.Components" Version="10.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.1" />
Expand Down
52 changes: 9 additions & 43 deletions samples/grids/grid-lite/column-config-simple/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,60 +6,26 @@

<div class="container">

@if (products != null && columns != null)
@if (products != null)
{
<IgbGridLite TItem="ProductInfo"
Data="@products"
Columns="@columns"
class="grid-lite-sample" />
Data="@products"
class="grid-lite-sample">
<IgbGridLiteColumn Field="@nameof(ProductInfo.Name)" Header="Product Name" DataType="GridLiteColumnDataType.String" />
<IgbGridLiteColumn Field="@nameof(ProductInfo.Price)" Header="Price" DataType="GridLiteColumnDataType.Number" Width="150px" />
<IgbGridLiteColumn Field="@nameof(ProductInfo.Sold)" Header="Units sold" DataType="GridLiteColumnDataType.Number" Width="150px" />
<IgbGridLiteColumn Field="@nameof(ProductInfo.Total)" Header="Total sold" DataType="GridLiteColumnDataType.Number" Width="150px" />
<IgbGridLiteColumn Field="@nameof(ProductInfo.Rating)" Header="Customer rating" DataType="GridLiteColumnDataType.Number" Width="180px" />
</IgbGridLite>
}
</div>

@code {
private List<ProductInfo> products;
private List<IgbColumnConfiguration> columns;

protected override void OnInitialized()
{
// Generate 50 products
products = MockDataGenerator.CreateProducts(50);

columns = new List<IgbColumnConfiguration>
{
new IgbColumnConfiguration
{
Key = nameof(ProductInfo.Name),
HeaderText = "Product Name",
Type = GridLiteColumnDataType.String
},
new IgbColumnConfiguration
{
Key = nameof(ProductInfo.Price),
HeaderText = "Price",
Type = GridLiteColumnDataType.Number,
Width = "150px"
},
new IgbColumnConfiguration
{
Key = nameof(ProductInfo.Sold),
HeaderText = "Units sold",
Type = GridLiteColumnDataType.Number,
Width = "150px"
},
new IgbColumnConfiguration
{
Key = nameof(ProductInfo.Total),
HeaderText = "Total sold",
Type = GridLiteColumnDataType.Number,
Width = "150px"
},
new IgbColumnConfiguration
{
Key = nameof(ProductInfo.Rating),
HeaderText = "Customer rating",
Type = GridLiteColumnDataType.Number,
Width = "180px"
}
};
}
}
2 changes: 1 addition & 1 deletion samples/grids/grid-lite/column-config-simple/BlazorClientApp.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</PropertyGroup>

<ItemGroup>
<PackageReference Include="IgniteUI.Blazor.GridLite" Version="0.0.1" />
<PackageReference Include="IgniteUI.Blazor.GridLite" Version="0.4.0" />
<PackageReference Include="Microsoft.AspNetCore.Components" Version="10.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.1" />
Expand Down
6 changes: 1 addition & 5 deletions samples/grids/grid-lite/data-binding/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,14 @@

<button class="btn btn-primary" @onclick="SwitchData">Switch Data: @(showingProducts ? "Show Users" : "Show Products")</button>

<IgbGridLite @ref="grid" Data="data" AutoGenerate="true" Columns="columns" class="grid-lite-sample" />
<IgbGridLite @ref="grid" Data="data" AutoGenerate="true" class="grid-lite-sample" />
</div>

@code {
private IgbGridLite<ProductInfo> productGrid;
private IgbGridLite<object> grid;
private List<User> users;
private List<ProductInfo> products;
private List<object> data;
private List<IgbColumnConfiguration> columns = new List<IgbColumnConfiguration>();
private bool showingProducts = true;

protected override void OnInitialized()
Expand All @@ -42,12 +40,10 @@
showingProducts = !showingProducts;
if (showingProducts)
{
this.columns = new List<IgbColumnConfiguration>();
this.data = products.ToList<object>();
}
else
{
this.columns = new List<IgbColumnConfiguration>();
this.data = users.ToList<object>();
}
}
Expand Down
2 changes: 1 addition & 1 deletion samples/grids/grid-lite/data-binding/BlazorClientApp.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</PropertyGroup>

<ItemGroup>
<PackageReference Include="IgniteUI.Blazor.GridLite" Version="0.0.1" />
<PackageReference Include="IgniteUI.Blazor.GridLite" Version="0.4.0" />
<PackageReference Include="Microsoft.AspNetCore.Components" Version="10.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.1" />
Expand Down
43 changes: 8 additions & 35 deletions samples/grids/grid-lite/filtering-config-events/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,18 @@

<div class="container">

@if (users != null && columns != null)
@if (users != null)
{
<IgbGridLite TItem="User"
Data="@users"
Columns="@columns"
Data="@users"
Filtering="@HandleFiltering"
Filtered="@HandleFiltered"
class="grid-lite-sample" />
class="grid-lite-sample">
<IgbGridLiteColumn Field="@nameof(User.FirstName)" Header="First name" Filterable />
<IgbGridLiteColumn Field="@nameof(User.LastName)" Header="Last name" Filterable />
<IgbGridLiteColumn Field="@nameof(User.Age)" Header="Age" DataType="GridLiteColumnDataType.Number" Filterable />
<IgbGridLiteColumn Field="@nameof(User.Active)" Header="Active" DataType="GridLiteColumnDataType.Boolean" Filterable />
</IgbGridLite>
}

<div class="event-log">
Expand All @@ -28,43 +32,12 @@

@code {
private List<User> users;
private List<IgbColumnConfiguration> columns;
private List<string> eventLogs = new List<string>();

protected override void OnInitialized()
{
// Generate 50 users
users = MockDataGenerator.CreateUsers(50);

columns = new List<IgbColumnConfiguration>
{
new IgbColumnConfiguration
{
Key = nameof(User.FirstName),
HeaderText = "First name",
Filter = true
},
new IgbColumnConfiguration
{
Key = nameof(User.LastName),
HeaderText = "Last name",
Filter = true
},
new IgbColumnConfiguration
{
Key = nameof(User.Age),
HeaderText = "Age",
Type = GridLiteColumnDataType.Number,
Filter = true
},
new IgbColumnConfiguration
{
Key = nameof(User.Active),
HeaderText = "Active",
Type = GridLiteColumnDataType.Boolean,
Filter = true
}
};
}

private void HandleFiltering(IgbGridLiteFilteringEventArgs e)
Expand Down
2 changes: 1 addition & 1 deletion samples/grids/grid-lite/filtering-config-events/BlazorClientApp.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</PropertyGroup>

<ItemGroup>
<PackageReference Include="IgniteUI.Blazor.GridLite" Version="0.0.1" />
<PackageReference Include="IgniteUI.Blazor.GridLite" Version="0.4.0" />
<PackageReference Include="Microsoft.AspNetCore.Components" Version="10.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.1" />
Expand Down
44 changes: 7 additions & 37 deletions samples/grids/grid-lite/filtering-config/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,55 +9,25 @@

<div class="container">

@if (users != null && columns != null)
@if (users != null)
{
<IgbGridLite TItem="User"
Data="@users"
Columns="@columns"
class="grid-lite-sample" />
class="grid-lite-sample">
<IgbGridLiteColumn Field="@nameof(User.FirstName)" Header="First name" Filterable FilteringCaseSensitive />
<IgbGridLiteColumn Field="@nameof(User.LastName)" Header="Last name" Filterable />
<IgbGridLiteColumn Field="@nameof(User.Age)" Header="Age" DataType="GridLiteColumnDataType.Number" Filterable />
<IgbGridLiteColumn Field="@nameof(User.Active)" Header="Active" DataType="GridLiteColumnDataType.Boolean" Filterable />
</IgbGridLite>
}
</div>

@code {
private List<User> users;
private List<IgbColumnConfiguration> columns;

protected override void OnInitialized()
{
// Generate 50 users
users = MockDataGenerator.CreateUsers(50);

columns = new List<IgbColumnConfiguration>
{
new IgbColumnConfiguration
{
Key = nameof(User.FirstName),
HeaderText = "First name",
Filter = new IgbColumnFilterConfiguration
{
CaseSensitive = true
}
},
new IgbColumnConfiguration
{
Key = nameof(User.LastName),
HeaderText = "Last name",
Filter = true
},
new IgbColumnConfiguration
{
Key = nameof(User.Age),
HeaderText = "Age",
Type = GridLiteColumnDataType.Number,
Filter = true
},
new IgbColumnConfiguration
{
Key = nameof(User.Active),
HeaderText = "Active",
Type = GridLiteColumnDataType.Boolean,
Filter = true
}
};
}
}
2 changes: 1 addition & 1 deletion samples/grids/grid-lite/filtering-config/BlazorClientApp.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</PropertyGroup>

<ItemGroup>
<PackageReference Include="IgniteUI.Blazor.GridLite" Version="0.0.1" />
<PackageReference Include="IgniteUI.Blazor.GridLite" Version="0.4.0" />
<PackageReference Include="Microsoft.AspNetCore.Components" Version="10.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.1" />
Expand Down
Loading