diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..f72666a --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,204 @@ +# Changelog + +All notable changes to this project will be documented in this file. + +## [Unreleased] + +### Breaking Changes - Migration from igniteui-grid-lite 0.0.1 to 0.3.1 + +This release updates the wrapper to use `igniteui-grid-lite` version `0.3.1`, which includes several breaking changes to align with the new declarative column API. + +#### 1. Declarative Columns (CRITICAL CHANGE) + +**Old API (0.0.1):** +```razor + + +@code { + private List columns = new() + { + new() { Key = "Id", HeaderText = "ID", Type = GridLiteColumnDataType.Number } + }; +} +``` + +**New API (0.3.1):** +```razor + + + +``` + +- Column configuration is now **declarative** using `` child elements +- The `Columns` parameter is now **obsolete** (marked with `[Obsolete]` attribute) +- `UpdateColumnsAsync()` method has been **removed** - columns can be updated declaratively using conditional rendering + +#### 2. Column Property Renames + +| Old Property | New Property | Notes | +|--------------|--------------|-------| +| `Key` | `Field` | The field from the data that the column references | +| `Type` | `DataType` | The data type of the column's values | +| `HeaderText` | `Header` | The header text of the column | + +#### 3. Sort/Filter Property Changes + +**Column Sort Configuration:** +- Old: `Sort` property (object or bool) +- New: `Sortable` (bool) and `SortingCaseSensitive` (bool?) + +**Before:** +```csharp +new IgbColumnConfiguration { + Sort = new IgbColumnSortConfiguration { CaseSensitive = false } +} +``` + +**After:** +```razor + +``` + +**Column Filter Configuration:** +- Old: `Filter` property (object or bool) +- New: `Filterable` (bool) and `FilteringCaseSensitive` (bool?) + +**Before:** +```csharp +new IgbColumnConfiguration { + Filter = new IgbColumnFilterConfiguration { CaseSensitive = false } +} +``` + +**After:** +```razor + +``` + +#### 4. Sorting API Renames + +| Old Type/Property | New Type/Property | Notes | +|-------------------|-------------------|-------| +| `IgbGridLiteSortConfiguration` | `IgbGridLiteSortingOptions` | Class renamed | +| `IgbGridLiteSortExpression` | `IgbGridLiteSortingExpression` | Class renamed | +| `SortConfiguration` parameter | `SortingOptions` parameter | Grid parameter renamed | +| `SortExpressions` parameter | `SortingExpressions` parameter | Grid parameter renamed | +| `Multiple` property (bool) | `Mode` property (string) | Use "single" or "multiple" | +| `TriState` property | *Removed* | Tri-state sorting is always enabled | +| Expression `Key` property | Expression `Field` property | Property renamed | + +**Before:** +```csharp +var sortConfig = new IgbGridLiteSortConfiguration { + Multiple = true, + TriState = false +}; + +var expression = new IgbGridLiteSortExpression { + Key = "Name", + Direction = GridLiteSortingDirection.Ascending +}; +``` + +**After:** +```csharp +var sortingOptions = new IgbGridLiteSortingOptions { + Mode = "multiple" +}; + +var expression = new IgbGridLiteSortingExpression { + Field = "Name", + Direction = GridLiteSortingDirection.Ascending +}; +``` + +#### 5. Filter Expression Changes + +| Old Property | New Property | +|--------------|--------------| +| `Key` | `Field` | + +**Before:** +```csharp +new IgbGridLiteFilterExpression { + Key = "Name", + Condition = "contains", + SearchTerm = "value" +} +``` + +**After:** +```csharp +new IgbGridLiteFilterExpression { + Field = "Name", + Condition = "contains", + SearchTerm = "value" +} +``` + +#### 6. Removed Types + +The following types have been removed as they are no longer needed: +- `IgbColumnSortConfiguration` - replaced by boolean properties on column +- `IgbColumnFilterConfiguration` - replaced by boolean properties on column + +#### 7. Removed Methods + +- `UpdateColumnsAsync()` - columns are now declarative and can be updated using conditional rendering + +### Migration Guide + +1. **Replace column configuration with declarative syntax:** + - Remove the `Columns` parameter from `` + - Add `` child elements inside `` + - Update property names: `Key`→`Field`, `Type`→`DataType`, `HeaderText`→`Header` + +2. **Update sort/filter configuration:** + - Replace `Sort = true` with `Sortable` attribute + - Replace `Filter = true` with `Filterable` attribute + - Replace `Sort = new IgbColumnSortConfiguration { CaseSensitive = false }` with `Sortable SortingCaseSensitive="@false"` + - Replace `Filter = new IgbColumnFilterConfiguration { CaseSensitive = false }` with `Filterable FilteringCaseSensitive="@false"` + +3. **Update sorting configuration:** + - Rename `IgbGridLiteSortConfiguration` to `IgbGridLiteSortingOptions` + - Rename `IgbGridLiteSortExpression` to `IgbGridLiteSortingExpression` + - Change `SortConfiguration` parameter to `SortingOptions` + - Change `SortExpressions` parameter to `SortingExpressions` + - Replace `Multiple = true` with `Mode = "multiple"` + - Remove `TriState` property usage + +4. **Update expression field names:** + - In all sort/filter expressions, rename `Key` property to `Field` + +5. **Dynamic columns:** + - Instead of calling `UpdateColumnsAsync()`, use conditional rendering with `@if` statements around `` elements + +### Added + +- New `IgbGridLiteColumn` component for declarative column definition +- `ChildContent` parameter on `IgbGridLite` for declarative columns +- Updated to `igniteui-grid-lite` version `~0.3.1` + +### Changed + +- `IgbColumnConfiguration`: Renamed `Key`→`Field`, `Type`→`DataType`, `HeaderText`→`Header` +- `IgbColumnConfiguration`: Replaced `Sort` object with `Sortable` (bool) and `SortingCaseSensitive` (bool?) +- `IgbColumnConfiguration`: Replaced `Filter` object with `Filterable` (bool) and `FilteringCaseSensitive` (bool?) +- Renamed `IgbGridLiteSortConfiguration` to `IgbGridLiteSortingOptions` +- Renamed `IgbGridLiteSortExpression` to `IgbGridLiteSortingExpression` +- `IgbGridLiteSortingOptions`: Replaced `Multiple` (bool) with `Mode` (string - "single" or "multiple") +- `IgbGridLiteSortingExpression`: Renamed `Key` to `Field` +- `IgbGridLiteFilterExpression`: Renamed `Key` to `Field` +- Grid parameters: `SortConfiguration`→`SortingOptions`, `SortExpressions`→`SortingExpressions` +- Event args: Updated to use new `IgbGridLiteSortingExpression` type + +### Removed + +- `IgbGridLiteSortingOptions.TriState` property +- `IgbColumnSortConfiguration` class +- `IgbColumnFilterConfiguration` class +- `UpdateColumnsAsync()` method from `IgbGridLite` + +### Deprecated + +- `Columns` parameter on `IgbGridLite` is now obsolete - use declarative `` elements instead diff --git a/README.md b/README.md index 0b38c32..8a8a3be 100644 --- a/README.md +++ b/README.md @@ -51,24 +51,19 @@ In your `App.razor` or layout file, include one of the available themes: ```razor @using IgniteUI.Blazor.Controls - + + + + + + @code { private List employees = new(); - private List columns = new(); protected override void OnInitialized() { employees = GetEmployees(); - - columns = new List - { - new() { Key = nameof(Employee.Id), HeaderText = "ID", Width = "100px", Type = GridLiteColumnDataType.Number }, - new() { Key = nameof(Employee.Name), HeaderText = "Employee Name", Type = GridLiteColumnDataType.String }, - new() { Key = nameof(Employee.Department), HeaderText = "Department", Type = GridLiteColumnDataType.String }, - new() { Key = nameof(Employee.Salary), HeaderText = "Salary", Width = "150px", Type = GridLiteColumnDataType.Number } - }; } } ``` @@ -76,20 +71,23 @@ In your `App.razor` or layout file, include one of the available themes: ### With Initial Sort and Filter ```razor - + + + + + @code { - private List initialSort = new() + private List initialSort = new() { - new() { Key = nameof(Employee.Name), Direction = GridLiteSortingDirection.Ascending } + new() { Field = "Name", Direction = GridLiteSortingDirection.Ascending } }; private List initialFilter = new() { - new() { Key = nameof(Employee.Department), Condition = "contains", SearchTerm = "Sales" } + new() { Field = "Department", Condition = "contains", SearchTerm = "Sales" } }; } ``` @@ -100,30 +98,22 @@ In your `App.razor` or layout file, include one of the available themes: Enable sorting on specific columns: -```csharp -new IgbColumnConfiguration -{ - Key = nameof(Employee.Name), - HeaderText = "Name", - Resizable = true, - Sort = true // Enable sorting -} +```razor + ``` ### Filtering Enable filtering on columns: -```csharp -new IgbColumnConfiguration -{ - Key = nameof(Employee.Department), - HeaderText = "Department", - Filter = new IgbColumnFilterConfiguration - { - CaseSensitive = false - } -} +```razor + ``` ### Event Handling @@ -131,12 +121,14 @@ new IgbColumnConfiguration Handle sorting and filtering events: ```razor - + Filtered="@HandleFiltered"> + + + @code { private void HandleSorting(IgbGridLiteSortingEventArgs e) @@ -163,16 +155,18 @@ Handle sorting and filtering events: ## Column Configuration -The `IgbColumnConfiguration` class supports: +The `IgbGridLiteColumn` component supports: -- `Key`: Property name to bind to (use `nameof()` for type safety) -- `HeaderText`: Column header display text +- `Field`: Property name to bind to (use `nameof()` for type safety) +- `Header`: Column header display text - `Width`: Column width (CSS value) -- `Type`: Data type (String, Number, Boolean, Date) +- `DataType`: Data type (String, Number, Boolean, Date) - `Hidden`: Hide column - `Resizable`: Allow column resizing -- `Sort`: Enable/configure sorting -- `Filter`: Enable/configure filtering +- `Sortable`: Enable sorting +- `SortingCaseSensitive`: Make sorting case sensitive +- `Filterable`: Enable filtering +- `FilteringCaseSensitive`: Make filtering case sensitive ## Building from Source diff --git a/demo/GridLite.DemoApp/Components/Pages/Home.razor b/demo/GridLite.DemoApp/Components/Pages/Home.razor index 714f867..3a36b3e 100644 --- a/demo/GridLite.DemoApp/Components/Pages/Home.razor +++ b/demo/GridLite.DemoApp/Components/Pages/Home.razor @@ -1,12 +1,17 @@ @page "/" - + + + @if (showUnitColumns) + { + + + } @@ -15,13 +20,12 @@ @code { public IgbGridLite grid; - private IgbGridLiteSortConfiguration sortConfiguration = new IgbGridLiteSortConfiguration() + private IgbGridLiteSortingOptions sortingOptions = new IgbGridLiteSortingOptions() { - Multiple = true, - TriState = false + Mode = "multiple" }; - private List initialSort; + private List initialSort; private List initialFilter; private bool showUnitColumns = false; @@ -31,23 +35,23 @@ { new IgbGridLiteFilterExpression { - Key = nameof(NwindDataItem.ProductName), + Field = nameof(NwindDataItem.ProductName), Condition = "contains", SearchTerm = "a" }, new IgbGridLiteFilterExpression { - Key = nameof(NwindDataItem.ProductName), + Field = nameof(NwindDataItem.ProductName), Condition = "contains", SearchTerm = "b" } }; - initialSort = new List + initialSort = new List { - new IgbGridLiteSortExpression + new IgbGridLiteSortingExpression { - Key = nameof(NwindDataItem.ProductName), + Field = nameof(NwindDataItem.ProductName), Direction = GridLiteSortingDirection.Ascending } }; @@ -55,9 +59,9 @@ public async Task BtnClick() { - await this.grid.SortAsync(new List + await this.grid.SortAsync(new List { - new IgbGridLiteSortExpression() { Key = nameof(NwindDataItem.ProductName), Direction = GridLiteSortingDirection.Descending } + new IgbGridLiteSortingExpression() { Field = nameof(NwindDataItem.ProductName), Direction = GridLiteSortingDirection.Descending } } ); } @@ -67,35 +71,17 @@ showUnitColumns = !showUnitColumns; if (showUnitColumns) { - cols = [ - .. cols, - new IgbColumnConfiguration { - Key = nameof(NwindDataItem.QuantityPerUnit), - Type = GridLiteColumnDataType.String, - Sort = true, - Filter = true, - Resizable = true - }, - new IgbColumnConfiguration { - Key = nameof(NwindDataItem.UnitPrice), - Type = GridLiteColumnDataType.Number, - Sort = true, - Filter = true, - Resizable = true - } - ]; initialSort = [ .. initialSort, - new IgbGridLiteSortExpression + new IgbGridLiteSortingExpression { - Key = nameof(NwindDataItem.QuantityPerUnit), + Field = nameof(NwindDataItem.QuantityPerUnit), Direction = GridLiteSortingDirection.Ascending } ]; } else { - cols = cols.SkipLast(2).ToList(); initialSort = initialSort.SkipLast(1).ToList(); } } @@ -132,23 +118,4 @@ { } - - public List cols = new List { - new IgbColumnConfiguration { - Key = nameof(NwindDataItem.ProductID), - Type = GridLiteColumnDataType.Number, - Sort = new IgbColumnSortConfiguration { - CaseSensitive = false - }, - Filter = true, - Resizable = true - }, - new IgbColumnConfiguration { - Key = nameof(NwindDataItem.ProductName), - Type = GridLiteColumnDataType.String, - Sort = true, - Filter = true, - Resizable = true - }, - }; } diff --git a/src/IgniteUI.Blazor.GridLite/IgbGridLite.razor b/src/IgniteUI.Blazor.GridLite/IgbGridLite.razor index 0f0cdab..47acb30 100644 --- a/src/IgniteUI.Blazor.GridLite/IgbGridLite.razor +++ b/src/IgniteUI.Blazor.GridLite/IgbGridLite.razor @@ -1,4 +1,6 @@ @typeparam TItem @namespace IgniteUI.Blazor.Controls - \ No newline at end of file + + @ChildContent + \ No newline at end of file diff --git a/src/IgniteUI.Blazor.GridLite/IgbGridLite.razor.cs b/src/IgniteUI.Blazor.GridLite/IgbGridLite.razor.cs index 019c8f9..829c322 100644 --- a/src/IgniteUI.Blazor.GridLite/IgbGridLite.razor.cs +++ b/src/IgniteUI.Blazor.GridLite/IgbGridLite.razor.cs @@ -22,9 +22,19 @@ public partial class IgbGridLite : ComponentBase, IDisposable where TItem /// /// Column configurations for the grid /// + /// + /// This parameter is obsolete. Use declarative columns with IgbGridLiteColumn instead. + /// [Parameter] + [Obsolete("Use declarative columns with IgbGridLiteColumn instead. This property will be removed in a future version.")] public List? Columns { get; set; } + /// + /// Child content for declarative column definitions + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + /// /// The options to customize the grid with /// @@ -42,16 +52,16 @@ public partial class IgbGridLite : ComponentBase, IDisposable where TItem public bool AutoGenerate { get; set; } = false; /// - /// Sort configuration property for the grid. + /// Sort options property for the grid. /// [Parameter] - public IgbGridLiteSortConfiguration? SortConfiguration { get; set; } + public IgbGridLiteSortingOptions? SortingOptions { get; set; } /// /// Initial sort expressions to apply when the grid is rendered /// [Parameter] - public IEnumerable? SortExpressions { get; set; } + public IEnumerable? SortingExpressions { get; set; } /// /// Initial filter expressions to apply when the grid is rendered @@ -189,16 +199,16 @@ public override async Task SetParametersAsync(ParameterView parameters) updateConfig["autoGenerate"] = newAutoGenerate; } - if (parameters.TryGetValue(nameof(SortConfiguration), out var newSortConfig) - && !ReferenceEquals(SortConfiguration, newSortConfig)) + if (parameters.TryGetValue(nameof(SortingOptions), out var newSortOptions) + && !ReferenceEquals(SortingOptions, newSortOptions)) { - updateConfig["sortConfiguration"] = newSortConfig; + updateConfig["sortingOptions"] = newSortOptions; } - if (parameters.TryGetValue?>(nameof(SortExpressions), out var newSortExpressions) - && !ReferenceEquals(SortExpressions, newSortExpressions)) + if (parameters.TryGetValue?>(nameof(SortingExpressions), out var newSortingExpressions) + && !ReferenceEquals(SortingExpressions, newSortingExpressions)) { - updateConfig["sortExpressions"] = newSortExpressions; + updateConfig["sortingExpressions"] = newSortingExpressions; } if (parameters.TryGetValue?>(nameof(FilterExpressions), out var newFilterExpressions) @@ -240,8 +250,8 @@ private async Task RenderGridAsync() data = Data, columns = Columns?.Select(c => c.ToJsConfig()).ToList() ?? [], autoGenerate = AutoGenerate, - sortConfiguration = SortConfiguration, - sortExpressions = SortExpressions, + sortingOptions = SortingOptions, + sortingExpressions = SortingExpressions, filterExpressions = FilterExpressions }; @@ -284,22 +294,11 @@ public virtual async Task UpdateDataAsync(IEnumerable newData) await InvokeVoidJsAsync("blazor_igc_grid_lite.updateData", gridId, json); } - /// - /// Updates the column configurations for the grid. - /// - /// The new column configurations - public virtual async Task UpdateColumnsAsync(List newColumns) - { - Columns = newColumns; - var json = JsonSerializer.Serialize(newColumns.Select(c => c.ToJsConfig()), GridJsonSerializerOptions); - await InvokeVoidJsAsync("blazor_igc_grid_lite.updateColumns", gridId, json); - } - /// /// Performs a sort operation in the grid based on the passed expression(s). /// /// The sort expression(s) to apply - public virtual async Task SortAsync(IgbGridLiteSortExpression expressions) + public virtual async Task SortAsync(IgbGridLiteSortingExpression expressions) { var json = JsonSerializer.Serialize(expressions, GridJsonSerializerOptions); await InvokeVoidJsAsync("blazor_igc_grid_lite.sort", gridId, json); @@ -309,7 +308,7 @@ public virtual async Task SortAsync(IgbGridLiteSortExpression expressions) /// Performs a sort operation in the grid based on the passed expression(s). /// /// The sort expression(s) to apply - public virtual async Task SortAsync(List expressions) + public virtual async Task SortAsync(List expressions) { var json = JsonSerializer.Serialize(expressions, GridJsonSerializerOptions); await InvokeVoidJsAsync("blazor_igc_grid_lite.sort", gridId, json); @@ -356,13 +355,13 @@ public virtual async Task ClearFilterAsync(string key = null) } /// - /// Returns a column configuration for a given column. + /// Returns a column configuration for a given column field. /// - /// The column key to retrieve + /// The column field to retrieve /// The column configuration if found, otherwise null - public virtual IgbColumnConfiguration GetColumn(string key) + public virtual IgbColumnConfiguration GetColumn(string field) { - return Columns?.FirstOrDefault(c => c.Key == key); + return Columns?.FirstOrDefault(c => c.Field == field); } /// diff --git a/src/IgniteUI.Blazor.GridLite/IgbGridLiteColumn.razor b/src/IgniteUI.Blazor.GridLite/IgbGridLiteColumn.razor new file mode 100644 index 0000000..34c89d5 --- /dev/null +++ b/src/IgniteUI.Blazor.GridLite/IgbGridLiteColumn.razor @@ -0,0 +1,14 @@ +@namespace IgniteUI.Blazor.Controls + + diff --git a/src/IgniteUI.Blazor.GridLite/IgbGridLiteColumn.razor.cs b/src/IgniteUI.Blazor.GridLite/IgbGridLiteColumn.razor.cs new file mode 100644 index 0000000..d7d2677 --- /dev/null +++ b/src/IgniteUI.Blazor.GridLite/IgbGridLiteColumn.razor.cs @@ -0,0 +1,69 @@ +using Microsoft.AspNetCore.Components; + +namespace IgniteUI.Blazor.Controls; + +/// +/// Column component for IgbGridLite. Used declaratively to define columns. +/// +public partial class IgbGridLiteColumn : ComponentBase +{ + /// + /// The field from the data that the column references. + /// + [Parameter] + public string? Field { get; set; } + + /// + /// The header text of the column. + /// + [Parameter] + public string? Header { get; set; } + + /// + /// The data type of the column's values. + /// + [Parameter] + public GridLiteColumnDataType? DataType { get; set; } + + /// + /// The width of the column (CSS value). + /// + [Parameter] + public string? Width { get; set; } + + /// + /// Whether the column is hidden. + /// + [Parameter] + public bool Hidden { get; set; } + + /// + /// Whether the column is resizable. + /// + [Parameter] + public bool Resizable { get; set; } + + /// + /// Whether the column is sortable. + /// + [Parameter] + public bool Sortable { get; set; } + + /// + /// Whether sorting should be case sensitive for this column. + /// + [Parameter] + public bool? SortingCaseSensitive { get; set; } + + /// + /// Whether the column is filterable. + /// + [Parameter] + public bool Filterable { get; set; } + + /// + /// Whether filtering should be case sensitive for this column. + /// + [Parameter] + public bool? FilteringCaseSensitive { get; set; } +} diff --git a/src/IgniteUI.Blazor.GridLite/Internal/JSHandler.cs b/src/IgniteUI.Blazor.GridLite/Internal/JSHandler.cs index 7c35508..4751dd2 100644 --- a/src/IgniteUI.Blazor.GridLite/Internal/JSHandler.cs +++ b/src/IgniteUI.Blazor.GridLite/Internal/JSHandler.cs @@ -39,7 +39,7 @@ public async Task JSSorting(JsonElement sortExpression) try { - var expression = JsonSerializer.Deserialize( + var expression = JsonSerializer.Deserialize( sortExpression.GetRawText()); var eventArgs = new IgbGridLiteSortingEventArgs @@ -74,7 +74,7 @@ public void JSSorted(JsonElement sortExpression) try { - var expression = JsonSerializer.Deserialize( + var expression = JsonSerializer.Deserialize( sortExpression.GetRawText()); var eventArgs = new IgbGridLiteSortedEventArgs diff --git a/src/IgniteUI.Blazor.GridLite/Models/Events/IgbGridLiteSortedEventArgs.cs b/src/IgniteUI.Blazor.GridLite/Models/Events/IgbGridLiteSortedEventArgs.cs index 3f304a8..36b9c26 100644 --- a/src/IgniteUI.Blazor.GridLite/Models/Events/IgbGridLiteSortedEventArgs.cs +++ b/src/IgniteUI.Blazor.GridLite/Models/Events/IgbGridLiteSortedEventArgs.cs @@ -11,5 +11,5 @@ public class IgbGridLiteSortedEventArgs /// The sort expression used for the operation. /// [JsonPropertyName("expression")] - public IgbGridLiteSortExpression Expression { get; set; } + public IgbGridLiteSortingExpression Expression { get; set; } } \ No newline at end of file diff --git a/src/IgniteUI.Blazor.GridLite/Models/Events/IgbGridLiteSortingEventArgs.cs b/src/IgniteUI.Blazor.GridLite/Models/Events/IgbGridLiteSortingEventArgs.cs index a75cf2d..6982526 100644 --- a/src/IgniteUI.Blazor.GridLite/Models/Events/IgbGridLiteSortingEventArgs.cs +++ b/src/IgniteUI.Blazor.GridLite/Models/Events/IgbGridLiteSortingEventArgs.cs @@ -11,7 +11,7 @@ public class IgbGridLiteSortingEventArgs /// The sort expression which will be used for the operation. /// [JsonPropertyName("expression")] - public IgbGridLiteSortExpression Expression { get; set; } + public IgbGridLiteSortingExpression Expression { get; set; } /// /// Set to true to cancel the operation. diff --git a/src/IgniteUI.Blazor.GridLite/Models/IgbColumnConfiguration.cs b/src/IgniteUI.Blazor.GridLite/Models/IgbColumnConfiguration.cs index 5ccc68a..5a4e537 100644 --- a/src/IgniteUI.Blazor.GridLite/Models/IgbColumnConfiguration.cs +++ b/src/IgniteUI.Blazor.GridLite/Models/IgbColumnConfiguration.cs @@ -5,16 +5,16 @@ namespace IgniteUI.Blazor.Controls; public class IgbColumnConfiguration { - [JsonPropertyName("key")] - public string Key { get; set; } + [JsonPropertyName("field")] + public string Field { get; set; } - [JsonPropertyName("type")] + [JsonPropertyName("dataType")] [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public GridLiteColumnDataType? Type { get; set; } + public GridLiteColumnDataType? DataType { get; set; } - [JsonPropertyName("headerText")] + [JsonPropertyName("header")] [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string HeaderText { get; set; } + public string Header { get; set; } [JsonPropertyName("width")] [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] @@ -28,13 +28,21 @@ public class IgbColumnConfiguration [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingDefault)] public bool Resizable { get; set; } - [JsonPropertyName("sort")] + [JsonPropertyName("sortable")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingDefault)] + public bool Sortable { get; set; } + + [JsonPropertyName("sortingCaseSensitive")] [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public object Sort { get; set; } + public bool? SortingCaseSensitive { get; set; } + + [JsonPropertyName("filterable")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingDefault)] + public bool Filterable { get; set; } - [JsonPropertyName("filter")] + [JsonPropertyName("filteringCaseSensitive")] [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public object Filter { get; set; } + public bool? FilteringCaseSensitive { get; set; } [JsonIgnore] internal Func, object> HeaderTemplate { get; set; } @@ -50,45 +58,18 @@ internal object ToJsConfig() { return new { - key = Key, - type = Type?.ToString().ToLower(), - headerText = HeaderText, + field = Field, + dataType = DataType?.ToString().ToLower(), + header = Header, width = Width, hidden = Hidden, resizable = Resizable, - sort = ConvertSortConfig(Sort), - filter = ConvertFilterConfig(Filter) + sortable = Sortable, + sortingCaseSensitive = SortingCaseSensitive, + filterable = Filterable, + filteringCaseSensitive = FilteringCaseSensitive }; } - - private static object ConvertSortConfig(object sort) - { - if (sort == null) return null; - if (sort is bool b) return b; - if (sort is IgbColumnSortConfiguration config) - { - return new - { - caseSensitive = config.CaseSensitive - // Note: Comparer functions cannot be serialized - }; - } - return sort; - } - - private static object ConvertFilterConfig(object filter) - { - if (filter == null) return null; - if (filter is bool b) return b; - if (filter is IgbColumnFilterConfiguration config) - { - return new - { - caseSensitive = config.CaseSensitive - }; - } - return filter; - } } /// diff --git a/src/IgniteUI.Blazor.GridLite/Models/IgbColumnFilterConfiguration.cs b/src/IgniteUI.Blazor.GridLite/Models/IgbColumnFilterConfiguration.cs deleted file mode 100644 index 9e71480..0000000 --- a/src/IgniteUI.Blazor.GridLite/Models/IgbColumnFilterConfiguration.cs +++ /dev/null @@ -1,16 +0,0 @@ -using System.Text.Json.Serialization; - -namespace IgniteUI.Blazor.Controls; - -/// -/// Extended filter configuration for a column. -/// -public class IgbColumnFilterConfiguration -{ - /// - /// Whether the filter operations will be case sensitive. - /// - [JsonPropertyName("caseSensitive")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public bool? CaseSensitive { get; set; } -} \ No newline at end of file diff --git a/src/IgniteUI.Blazor.GridLite/Models/IgbColumnSortConfiguration.cs b/src/IgniteUI.Blazor.GridLite/Models/IgbColumnSortConfiguration.cs deleted file mode 100644 index 177b1b0..0000000 --- a/src/IgniteUI.Blazor.GridLite/Models/IgbColumnSortConfiguration.cs +++ /dev/null @@ -1,23 +0,0 @@ -using System.Text.Json.Serialization; - -namespace IgniteUI.Blazor.Controls; - -/// -/// Extended sort configuration for a column. -/// -public class IgbColumnSortConfiguration -{ - /// - /// Whether the sort operations will be case sensitive. - /// - [JsonPropertyName("caseSensitive")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public bool? CaseSensitive { get; set; } - - /// - /// Custom comparer function for sort operations for this column. - /// Note: This is not directly supported in Blazor and would need JavaScript interop. - /// - [JsonIgnore] - internal Func Comparer { get; set; } -} \ No newline at end of file diff --git a/src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteFilterExpression.cs b/src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteFilterExpression.cs index dfdbe18..b81951f 100644 --- a/src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteFilterExpression.cs +++ b/src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteFilterExpression.cs @@ -8,10 +8,10 @@ namespace IgniteUI.Blazor.Controls; public class IgbGridLiteFilterExpression { /// - /// The target column for the filter operation. + /// The target column field for the filter operation. /// - [JsonPropertyName("key")] - public string Key { get; set; } + [JsonPropertyName("field")] + public string Field { get; set; } /// /// The filter condition to apply. Can be a condition name (string) or a FilterOperation // TODO diff --git a/src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteSortConfiguration.cs b/src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteSortConfiguration.cs deleted file mode 100644 index b882c9e..0000000 --- a/src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteSortConfiguration.cs +++ /dev/null @@ -1,21 +0,0 @@ -using System.Text.Json.Serialization; - -namespace IgniteUI.Blazor.Controls; - -/// -/// Configures the sort behavior for the grid. -/// -public class IgbGridLiteSortConfiguration -{ - /// - /// Whether multiple sorting is enabled. - /// - [JsonPropertyName("multiple")] - public bool Multiple { get; set; } = true; - - /// - /// Whether tri-state sorting is enabled. - /// - [JsonPropertyName("triState")] - public bool TriState { get; set; } = true; -} \ No newline at end of file diff --git a/src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteSortExpression.cs b/src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteSortingExpression.cs similarity index 91% rename from src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteSortExpression.cs rename to src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteSortingExpression.cs index cfab65c..293c495 100644 --- a/src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteSortExpression.cs +++ b/src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteSortingExpression.cs @@ -6,13 +6,13 @@ namespace IgniteUI.Blazor.Controls; /// /// Represents a sort operation for a given column. /// -public class IgbGridLiteSortExpression +public class IgbGridLiteSortingExpression { /// - /// The target column. + /// The target column field. /// - [JsonPropertyName("key")] - public string Key { get; set; } + [JsonPropertyName("field")] + public string Field { get; set; } /// /// Sort direction for this operation. diff --git a/src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteSortingOptions.cs b/src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteSortingOptions.cs new file mode 100644 index 0000000..f3ff5a5 --- /dev/null +++ b/src/IgniteUI.Blazor.GridLite/Models/IgbGridLiteSortingOptions.cs @@ -0,0 +1,15 @@ +using System.Text.Json.Serialization; + +namespace IgniteUI.Blazor.Controls; + +/// +/// Configures the sort behavior for the grid. +/// +public class IgbGridLiteSortingOptions +{ + /// + /// The sorting mode. Can be "single" or "multiple". + /// + [JsonPropertyName("mode")] + public string Mode { get; set; } = "multiple"; +} \ No newline at end of file diff --git a/src/IgniteUI.Blazor.GridLite/igc-grid-lite-entry.js b/src/IgniteUI.Blazor.GridLite/igc-grid-lite-entry.js index 18a6bdc..1d1f4f3 100644 --- a/src/IgniteUI.Blazor.GridLite/igc-grid-lite-entry.js +++ b/src/IgniteUI.Blazor.GridLite/igc-grid-lite-entry.js @@ -24,18 +24,22 @@ window.blazor_igc_grid_lite = { this.destroyGrid(config.id); gridElement.data = config.data; - gridElement.columns = config.columns; + + // Only set columns if using the old API (backwards compatibility) + if (config.columns && config.columns.length > 0) { + gridElement.columns = config.columns; + } if (config.autoGenerate !== undefined) { gridElement.autoGenerate = config.autoGenerate; } - if (config.sortConfiguration) { - gridElement.sortConfiguration = config.sortConfiguration; + if (config.sortingOptions) { + gridElement.sortingOptions = config.sortingOptions; } - if (config.sortExpressions) { - gridElement.sortExpressions = config.sortExpressions; + if (config.sortingExpressions) { + gridElement.sortingExpressions = config.sortingExpressions; } if (config.filterExpressions) { @@ -98,12 +102,12 @@ window.blazor_igc_grid_lite = { grid.autoGenerate = config.autoGenerate; } - if (config.sortConfiguration !== undefined) { - grid.sortConfiguration = config.sortConfiguration; + if (config.sortingOptions !== undefined) { + grid.sortingOptions = config.sortingOptions; } - if (config.sortExpressions !== undefined) { - grid.sortExpressions = config.sortExpressions; + if (config.sortingExpressions !== undefined) { + grid.sortingExpressions = config.sortingExpressions; } if (config.filterExpressions !== undefined) { @@ -122,13 +126,6 @@ window.blazor_igc_grid_lite = { } }, - updateColumns(id, columns) { - const grid = this.grids.get(id); - if (grid) { - grid.columns = JSON.parse(columns); - } - }, - sort(id, expressions) { const grid = this.grids.get(id); if (grid) { diff --git a/src/IgniteUI.Blazor.GridLite/package-lock.json b/src/IgniteUI.Blazor.GridLite/package-lock.json index 446842a..9378251 100644 --- a/src/IgniteUI.Blazor.GridLite/package-lock.json +++ b/src/IgniteUI.Blazor.GridLite/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.0", "license": "MIT", "dependencies": { - "igniteui-grid-lite": "~0.0.1" + "igniteui-grid-lite": "~0.3.1" }, "devDependencies": { "terser": "^5.44.1", @@ -991,9 +991,9 @@ } }, "node_modules/igniteui-grid-lite": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/igniteui-grid-lite/-/igniteui-grid-lite-0.0.1.tgz", - "integrity": "sha512-QR+yu3lW8jtF5tfR+HChw+ksnTbMz8vIAEbPv0kJyNR0Dk2nCQSuw8z531psgl6ket2o1OoGDpkZJNgNNQ9T2g==", + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/igniteui-grid-lite/-/igniteui-grid-lite-0.3.1.tgz", + "integrity": "sha512-8uZNutfNtuqEmDtoCCqLBFSm6s7zpKbMX47kxgItq3T52u+JyUcKyloG+GGr4ywPKGdy1WwQlqT/B7nxFBbZjQ==", "license": "MIT", "dependencies": { "@lit-labs/virtualizer": "~2.1.0", diff --git a/src/IgniteUI.Blazor.GridLite/package.json b/src/IgniteUI.Blazor.GridLite/package.json index 5c9b7eb..4fd7e1f 100644 --- a/src/IgniteUI.Blazor.GridLite/package.json +++ b/src/IgniteUI.Blazor.GridLite/package.json @@ -16,6 +16,6 @@ "vite": "^7.2.2" }, "dependencies": { - "igniteui-grid-lite": "~0.0.1" + "igniteui-grid-lite": "~0.3.1" } }