Skip to content

Commit 5cdb017

Browse files
Copilotdamyanpetev
Copilot
and
damyanpetev
authored
feat!: update to igniteui-grid-lite 0.3.1 with declarative column API (#12)
BREAKING CHANGES: - Column configuration now uses declarative <IgbGridLiteColumn> child elements instead of Columns parameter - Column property renames: Key→Field, Type→DataType, HeaderText→Header - Simplified sort/filter configuration with boolean properties - Renamed sort-related types and parameters - Removed Columns parameter, UpdateColumnsAsync(), and TriState property --------- Co-authored-by: damyanpetev <damyanpetev@users.noreply.github.com>
1 parent e22d7ce commit 5cdb017

19 files changed

Lines changed: 324 additions & 263 deletions

‎CHANGELOG.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [Unreleased]
9+
10+
This release updates to `igniteui-grid-lite` version `0.3.1` with a new declarative column API.
11+
12+
### Added
13+
14+
- New `IgbGridLiteColumn` component for declarative column definition
15+
- Updated to `igniteui-grid-lite` version `~0.3.1`
16+
17+
### Changed
18+
19+
- **BREAKING**: Column configuration is now declarative using `<IgbGridLiteColumn>` child elements instead of the `Columns` parameter
20+
```razor
21+
<!-- Before -->
22+
<IgbGridLite Data="@data" Columns="@columns" />
23+
@code {
24+
private List<IgbColumnConfiguration> columns = new()
25+
{
26+
new() { Key = "Id", HeaderText = "ID", Type = GridLiteColumnDataType.Number }
27+
};
28+
}
29+
30+
<!-- After -->
31+
<IgbGridLite Data="@data">
32+
<IgbGridLiteColumn Field="Id" Header="ID" DataType="GridLiteColumnDataType.Number" />
33+
</IgbGridLite>
34+
```
35+
- **BREAKING**: Column property renames:
36+
- `Key`→`Field`
37+
- `Type`→`DataType`
38+
- `HeaderText`→`Header`
39+
- **BREAKING**: Column sort/filter configuration simplified:
40+
- `Sort` object → `Sortable` (bool) and `SortingCaseSensitive` (bool)
41+
- `Filter` object → `Filterable` (bool) and `FilteringCaseSensitive` (bool)
42+
- **BREAKING**: Renamed `IgbGridLiteSortConfiguration` → `IgbGridLiteSortingOptions`
43+
- **BREAKING**: Renamed `IgbGridLiteSortExpression` → `IgbGridLiteSortingExpression`
44+
- **BREAKING**: Grid parameter renames:
45+
- `SortConfiguration`→`SortingOptions`
46+
- `SortExpressions`→`SortingExpressions`
47+
- **BREAKING**: `IgbGridLiteSortingOptions.Multiple` (bool) → `Mode` (enum: `GridLiteSortingMode.Single` or `GridLiteSortingMode.Multiple`)
48+
49+
### Removed
50+
51+
- **BREAKING**: `Columns` parameter and `UpdateColumnsAsync()` method - use declarative `<IgbGridLiteColumn>` elements with conditional rendering instead
52+
- **BREAKING**: `IgbColumnSortConfiguration` and `IgbColumnFilterConfiguration` classes
53+
- **BREAKING**: `IgbGridLiteSortingOptions.TriState` property. Tri-state sorting is always enabled
54+
55+
[Unreleased]: https://github.com/IgniteUI/IgniteUI.Blazor.GridLite/compare/v0.3.1...HEAD
56+
[0.3.1]: https://github.com/IgniteUI/IgniteUI.Blazor.GridLite/releases/tag/v0.3.1

‎README.md‎

Lines changed: 37 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -51,38 +51,36 @@ In your `App.razor` or layout file, include one of the available themes:
5151
```razor
5252
@using IgniteUI.Blazor.Controls
5353
54-
<IgbGridLite Data="@employees"
55-
Columns="@columns" />
54+
<IgbGridLite Data="@employees">
55+
<IgbGridLiteColumn Field="@nameof(Employee.Id)" Header="ID" DataType="GridLiteColumnDataType.Number" Width="100px" />
56+
<IgbGridLiteColumn Field="@nameof(Employee.Name)" Header="Employee Name" DataType="GridLiteColumnDataType.String" />
57+
<IgbGridLiteColumn Field="@nameof(Employee.Department)" Header="Department" DataType="GridLiteColumnDataType.String" />
58+
<IgbGridLiteColumn Field="@nameof(Employee.Salary)" Header="Salary" DataType="GridLiteColumnDataType.Number" Width="150px" />
59+
</IgbGridLite>
5660
5761
@code {
5862
private List<Employee> employees = new();
59-
private List<IgbColumnConfiguration> columns = new();
6063
6164
protected override void OnInitialized()
6265
{
6366
employees = GetEmployees();
64-
65-
columns = new List<IgbColumnConfiguration>
66-
{
67-
new() { Key = nameof(Employee.Id), HeaderText = "ID", Width = "100px", Type = GridLiteColumnDataType.Number },
68-
new() { Key = nameof(Employee.Name), HeaderText = "Employee Name", Type = GridLiteColumnDataType.String },
69-
new() { Key = nameof(Employee.Department), HeaderText = "Department", Type = GridLiteColumnDataType.String },
70-
new() { Key = nameof(Employee.Salary), HeaderText = "Salary", Width = "150px", Type = GridLiteColumnDataType.Number }
71-
};
7267
}
7368
}
7469
```
7570

7671
### With Initial Sort and Filter
7772

7873
```razor
79-
<IgbGridLite Data="@employees"
80-
Columns="@columns"
81-
SortExpressions="@initialSort"
82-
FilterExpressions="@initialFilter" />
74+
<IgbGridLite Data="@employees"
75+
SortingExpressions="@initialSort"
76+
FilterExpressions="@initialFilter">
77+
<IgbGridLiteColumn Field="@nameof(Employee.Id)" Header="ID" DataType="GridLiteColumnDataType.Number" />
78+
<IgbGridLiteColumn Field="@nameof(Employee.Name)" Header="Name" Sortable Filterable />
79+
<IgbGridLiteColumn Field="@nameof(Employee.Department)" Header="Department" Sortable Filterable />
80+
</IgbGridLite>
8381
8482
@code {
85-
private List<IgbGridLiteSortExpression> initialSort = new()
83+
private List<IgbGridLiteSortingExpression> initialSort = new()
8684
{
8785
new() { Key = nameof(Employee.Name), Direction = GridLiteSortingDirection.Ascending }
8886
};
@@ -100,43 +98,37 @@ In your `App.razor` or layout file, include one of the available themes:
10098

10199
Enable sorting on specific columns:
102100

103-
```csharp
104-
new IgbColumnConfiguration
105-
{
106-
Key = nameof(Employee.Name),
107-
HeaderText = "Name",
108-
Resizable = true,
109-
Sort = true // Enable sorting
110-
}
101+
```razor
102+
<IgbGridLiteColumn Field="@nameof(Employee.Name)"
103+
Header="Name"
104+
Sortable
105+
Resizable />
111106
```
112107

113108
### Filtering
114109

115110
Enable filtering on columns:
116111

117-
```csharp
118-
new IgbColumnConfiguration
119-
{
120-
Key = nameof(Employee.Department),
121-
HeaderText = "Department",
122-
Filter = new IgbColumnFilterConfiguration
123-
{
124-
CaseSensitive = false
125-
}
126-
}
112+
```razor
113+
<IgbGridLiteColumn Field="Department"
114+
Header="Department"
115+
Filterable
116+
FilteringCaseSensitive="@false" />
127117
```
128118

129119
### Event Handling
130120

131121
Handle sorting and filtering events:
132122

133123
```razor
134-
<IgbGridLite Data="@employees"
135-
Columns="@columns"
124+
<IgbGridLite Data="@employees"
136125
Sorting="@HandleSorting"
137126
Sorted="@HandleSorted"
138127
Filtering="@HandleFiltering"
139-
Filtered="@HandleFiltered" />
128+
Filtered="@HandleFiltered">
129+
<IgbGridLiteColumn Field="Name" Sortable Filterable />
130+
<IgbGridLiteColumn Field="Department" Sortable Filterable />
131+
</IgbGridLite>
140132
141133
@code {
142134
private void HandleSorting(IgbGridLiteSortingEventArgs e)
@@ -163,16 +155,18 @@ Handle sorting and filtering events:
163155

164156
## Column Configuration
165157

166-
The `IgbColumnConfiguration` class supports:
158+
The `IgbGridLiteColumn` component supports:
167159

168-
- `Key`: Property name to bind to (use `nameof()` for type safety)
169-
- `HeaderText`: Column header display text
160+
- `Field`: Property name to bind to (use `nameof()` for type safety)
161+
- `Header`: Column header display text
170162
- `Width`: Column width (CSS value)
171-
- `Type`: Data type (String, Number, Boolean, Date)
163+
- `DataType`: Data type (String, Number, Boolean, Date)
172164
- `Hidden`: Hide column
173165
- `Resizable`: Allow column resizing
174-
- `Sort`: Enable/configure sorting
175-
- `Filter`: Enable/configure filtering
166+
- `Sortable`: Enable sorting
167+
- `SortingCaseSensitive`: Make sorting case sensitive
168+
- `Filterable`: Enable filtering
169+
- `FilteringCaseSensitive`: Make filtering case sensitive
176170

177171
## Building from Source
178172

‎demo/GridLite.DemoApp/Components/Pages/Home.razor‎

Lines changed: 51 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
11
@page "/"
22

33
<IgbGridLite @ref=grid TItem="NwindDataItem" Data="NwindData" class="grid" home-scope
4-
SortConfiguration="@sortConfiguration" Columns="cols"
5-
SortExpressions="@initialSort"
4+
SortingOptions="@sortingOptions"
5+
SortingExpressions="@initialSort"
66
FilterExpressions="@initialFilter"
77
Sorting="HandleSorting" Sorted="HandleSorted"
88
Filtering="HandleFiltering" Filtered="HandleFiltered">
9-
9+
@foreach (var col in cols)
10+
{
11+
<IgbGridLiteColumn
12+
Field="@col.Field"
13+
Header="@col.Header"
14+
DataType="@col.DataType"
15+
Sortable="@col.Sortable"
16+
SortingCaseSensitive="@col.SortingCaseSensitive"
17+
Filterable="@col.Filterable"
18+
Resizable="@col.Resizable" />
19+
}
20+
@if (showUnitColumns)
21+
{
22+
<IgbGridLiteColumn
23+
Field="@nameof(NwindDataItem.UnitsOnOrder)"
24+
Header="Units On Order"
25+
DataType="GridLiteColumnDataType.Number"
26+
Sortable Filterable Resizable />
27+
}
1028
</IgbGridLite>
1129

1230
<button @onclick="BtnClick">Sort</button>
@@ -15,13 +33,12 @@
1533
@code {
1634
public IgbGridLite<NwindDataItem> grid;
1735

18-
private IgbGridLiteSortConfiguration sortConfiguration = new IgbGridLiteSortConfiguration()
36+
private IgbGridLiteSortingOptions sortingOptions = new IgbGridLiteSortingOptions()
1937
{
20-
Multiple = true,
21-
TriState = false
38+
Mode = GridLiteSortingMode.Multiple
2239
};
2340

24-
private List<IgbGridLiteSortExpression> initialSort;
41+
private List<IgbGridLiteSortingExpression> initialSort;
2542
private List<IgbGridLiteFilterExpression> initialFilter;
2643
private bool showUnitColumns = false;
2744

@@ -43,9 +60,9 @@
4360
}
4461
};
4562

46-
initialSort = new List<IgbGridLiteSortExpression>
63+
initialSort = new List<IgbGridLiteSortingExpression>
4764
{
48-
new IgbGridLiteSortExpression
65+
new IgbGridLiteSortingExpression
4966
{
5067
Key = nameof(NwindDataItem.ProductName),
5168
Direction = GridLiteSortingDirection.Ascending
@@ -55,9 +72,9 @@
5572

5673
public async Task BtnClick()
5774
{
58-
await this.grid.SortAsync(new List<IgbGridLiteSortExpression>
75+
await this.grid.SortAsync(new List<IgbGridLiteSortingExpression>
5976
{
60-
new IgbGridLiteSortExpression() { Key = nameof(NwindDataItem.ProductName), Direction = GridLiteSortingDirection.Descending }
77+
new IgbGridLiteSortingExpression() { Key = nameof(NwindDataItem.ProductName), Direction = GridLiteSortingDirection.Descending }
6178
}
6279
);
6380
}
@@ -70,23 +87,25 @@
7087
cols = [
7188
.. cols,
7289
new IgbColumnConfiguration {
73-
Key = nameof(NwindDataItem.QuantityPerUnit),
74-
Type = GridLiteColumnDataType.String,
75-
Sort = true,
76-
Filter = true,
90+
Field = nameof(NwindDataItem.QuantityPerUnit),
91+
Header="Quantity Per Unit",
92+
DataType = GridLiteColumnDataType.String,
93+
Sortable = true,
94+
Filterable = true,
7795
Resizable = true
7896
},
7997
new IgbColumnConfiguration {
80-
Key = nameof(NwindDataItem.UnitPrice),
81-
Type = GridLiteColumnDataType.Number,
82-
Sort = true,
83-
Filter = true,
98+
Field = nameof(NwindDataItem.UnitPrice),
99+
Header="Unit Price",
100+
DataType = GridLiteColumnDataType.Number,
101+
Sortable = true,
102+
Filterable = true,
84103
Resizable = true
85104
}
86105
];
87106
initialSort = [
88107
.. initialSort,
89-
new IgbGridLiteSortExpression
108+
new IgbGridLiteSortingExpression
90109
{
91110
Key = nameof(NwindDataItem.QuantityPerUnit),
92111
Direction = GridLiteSortingDirection.Ascending
@@ -135,19 +154,20 @@
135154

136155
public List<IgbColumnConfiguration> cols = new List<IgbColumnConfiguration> {
137156
new IgbColumnConfiguration {
138-
Key = nameof(NwindDataItem.ProductID),
139-
Type = GridLiteColumnDataType.Number,
140-
Sort = new IgbColumnSortConfiguration {
141-
CaseSensitive = false
142-
},
143-
Filter = true,
144-
Resizable = true
157+
Field = nameof(NwindDataItem.ProductID),
158+
Header="Product ID",
159+
DataType = GridLiteColumnDataType.Number,
160+
Sortable = true,
161+
SortingCaseSensitive = false,
162+
Filterable = true,
163+
Resizable = false
145164
},
146165
new IgbColumnConfiguration {
147-
Key = nameof(NwindDataItem.ProductName),
148-
Type = GridLiteColumnDataType.String,
149-
Sort = true,
150-
Filter = true,
166+
Field = nameof(NwindDataItem.ProductName),
167+
Header="Product Name",
168+
DataType = GridLiteColumnDataType.String,
169+
Sortable = true,
170+
Filterable = true,
151171
Resizable = true
152172
},
153173
};

‎src/IgniteUI.Blazor.GridLite/IgbGridLite.razor‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
@typeparam TItem
22
@namespace IgniteUI.Blazor.Controls
33

4-
<igc-grid-lite @ref="grid" id="@gridId" @attributes="AdditionalAttributes"></igc-grid-lite>
4+
<igc-grid-lite @ref="grid" id="@gridId" @attributes="AdditionalAttributes">
5+
@ChildContent
6+
</igc-grid-lite>

0 commit comments

Comments
 (0)