From 2d2420feccc30bace576f1a83e958810c1642bb3 Mon Sep 17 00:00:00 2001 From: David Moreira Date: Mon, 18 Nov 2024 00:08:35 +0000 Subject: [PATCH 01/18] DataGridSelectColumn | Initial support for Multiple --- Demos/Blazorise.Demo/Pages/Dashboard.razor | 216 ++++-------------- .../Blazorise.Docs/NewFilesToBuild.txt | 1 - .../Blazorise.DataGrid/BaseDataGridColumn.cs | 5 + .../DataGridSelectColumn.cs | 6 + .../_DataGridCellSelectEdit.razor | 4 +- .../_DataGridCellSelectEdit.razor.cs | 9 +- 6 files changed, 60 insertions(+), 181 deletions(-) diff --git a/Demos/Blazorise.Demo/Pages/Dashboard.razor b/Demos/Blazorise.Demo/Pages/Dashboard.razor index 3bea177226..c567b29333 100644 --- a/Demos/Blazorise.Demo/Pages/Dashboard.razor +++ b/Demos/Blazorise.Demo/Pages/Dashboard.razor @@ -1,185 +1,47 @@ @page "/" @inject IVersionProvider VersionProvider - - Blazorise UI Components for Blazor - - - - Blazorise is a component library built on top of Blazor and CSS frameworks like Bootstrap, Tailwind, Bulma, Ant Design, and Material. It can be used to build responsive, single-page web applications. - - - - This demo app is designed to showcase a variety of UI elements and how they behave in different scenarios. With the demo app, you can explore the features and functionality of Blazorise, a component library for building modern web applications with Blazor. You'll find a range of UI elements, including buttons, forms, tables, and more, all of which are fully interactive and responsive. - - - - Whether you're new to Blazorise or an experienced developer, this demo app is a great way to get a feel for how the components work and how they can be used in your own projects. So go ahead and start exploring – we hope you find the demo app useful and informative! - + + + + + + + + + + + + + - - Most popular Blazor components - - - - - - - - - - - - Blazor DataGrid - - - An incredibly quick and responsive grid component that allows users to display and manipulate data in a grid format within a Blazor application. - - - - - - - - - - - - - - Blazor Charts - - - The chart component offers various options for presenting data and is efficient and lightweight. - - - - - - - - - - - - - - Blazor Editors - - - UI elements that allow users to enter and submit data in a form, such as text boxes, dropdown lists, and checkboxes. - - - - - - - - - - - - - - Blazor Upload - - - An intuitive Blazor UI element created to track and control the file upload procedure in real time. - - - - - - - - - - - - - - Blazor Validation - - - Validation is a component that provides support for form validation in Blazor applications. - - - - - - - - - - - - - - Blazor Modal - - - Displays content in a separate window or overlay on top of the current page, often used to display additional information or to prompt the user for input. - - - - - - - - - - - - - - Blazor Autocomplete - - - Provides suggestions as the user types, based on a pre-defined list of options, in order to help the user quickly find and select the desired item. - - - - - - - - - - - - - - Blazor QRCode - - - Generates and displays a QR code image, which can be scanned by a QR code reader to access information or a website URL. - - - - - - - - - Where can I find the code? - - - - Full source code for this demo application can be found on GitHub. - - - - If you wish to learn more about Blazorise please go to the official documentation. - - - - - - Demo application for: Blazorise @($"v{VersionProvider.MilestoneVersion}") - - - \ No newline at end of file +@code { + + [Inject] EmployeeData EmployeeData { get; set; } + + private List inMemoryData; + private DataGridEditMode editMode = DataGridEditMode.Form; + + protected override async Task OnInitializedAsync() + { + inMemoryData = (await EmployeeData.GetDataAsync().ConfigureAwait(false)).Take(25).Select(x => new Test() { Id = x.Id, FirstName = x.FirstName, Values = new string[] { "M" } }).ToList(); + await base.OnInitializedAsync(); + } + public class Test + { + public int Id { get; set; } + public string FirstName { get; set; } + public string[] Values { get; set; } + } +} \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/NewFilesToBuild.txt b/Documentation/Blazorise.Docs/NewFilesToBuild.txt index 4b1438bcb0..e69de29bb2 100644 --- a/Documentation/Blazorise.Docs/NewFilesToBuild.txt +++ b/Documentation/Blazorise.Docs/NewFilesToBuild.txt @@ -1 +0,0 @@ -D:\Projects\UI\Blazorise\Documentation\Blazorise.Docs\Pages\Docs\Extensions\DataGrid\Code\DataGridSortComparerExampleCode.html diff --git a/Source/Extensions/Blazorise.DataGrid/BaseDataGridColumn.cs b/Source/Extensions/Blazorise.DataGrid/BaseDataGridColumn.cs index 5f3704ac0a..7390b51cae 100644 --- a/Source/Extensions/Blazorise.DataGrid/BaseDataGridColumn.cs +++ b/Source/Extensions/Blazorise.DataGrid/BaseDataGridColumn.cs @@ -18,6 +18,11 @@ public class BaseDataGridColumn : BaseDataGridComponent /// Formatted display value. public string FormatDisplayValue( object value ) { + if (value is string[] values ) + { + return string.Join( ',', values ); + } + if ( DisplayFormat != null ) { return string.Format( DisplayFormatProvider ?? CultureInfo.CurrentCulture, DisplayFormat, value ); diff --git a/Source/Extensions/Blazorise.DataGrid/DataGridSelectColumn.cs b/Source/Extensions/Blazorise.DataGrid/DataGridSelectColumn.cs index aa774f9000..09a525a20e 100644 --- a/Source/Extensions/Blazorise.DataGrid/DataGridSelectColumn.cs +++ b/Source/Extensions/Blazorise.DataGrid/DataGridSelectColumn.cs @@ -81,6 +81,12 @@ public class DataGridSelectColumn : DataGridColumn /// [Parameter] public bool Disabled { get; set; } + /// + /// Specifies that multiple items can be selected. + /// + [Parameter] + public bool Multiple { get; set; } + /// /// Captures all the custom attribute that are not part of Blazorise component. /// diff --git a/Source/Extensions/Blazorise.DataGrid/_DataGridCellSelectEdit.razor b/Source/Extensions/Blazorise.DataGrid/_DataGridCellSelectEdit.razor index 7345ba5b22..a80995d82f 100644 --- a/Source/Extensions/Blazorise.DataGrid/_DataGridCellSelectEdit.razor +++ b/Source/Extensions/Blazorise.DataGrid/_DataGridCellSelectEdit.razor @@ -1,7 +1,7 @@ @typeparam TItem @inherits ComponentBase - @if ( Column.DefaultItemText is not null ) { diff --git a/Source/Extensions/Blazorise.DataGrid/_DataGridCellSelectEdit.razor.cs b/Source/Extensions/Blazorise.DataGrid/_DataGridCellSelectEdit.razor.cs index 698032a4f2..b3db1a0b6a 100644 --- a/Source/Extensions/Blazorise.DataGrid/_DataGridCellSelectEdit.razor.cs +++ b/Source/Extensions/Blazorise.DataGrid/_DataGridCellSelectEdit.razor.cs @@ -1,4 +1,5 @@ #region Using directives +using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Blazorise.Modules; @@ -73,6 +74,11 @@ private void OnSelectedValueChanged( object value ) } } + private async Task OnSelectedValuesChanged( IReadOnlyList values ) + { + await CellValueChanged.InvokeAsync( values?.Select( x => x.ToString() )?.ToArray() ); + } + protected override async Task OnAfterRenderAsync( bool firstRender ) { if ( firstRender ) @@ -107,7 +113,8 @@ public async Task Select() { await JSUtilitiesModule.Select( default, elementId, true ); } - + public object[] GetSelectedValues + => CellValue as object[]; #endregion #region Properties From 5b4fecbc5357e955c7ce0d9c6838e95f90aef873 Mon Sep 17 00:00:00 2001 From: David Moreira Date: Thu, 21 Nov 2024 22:54:08 +0000 Subject: [PATCH 02/18] Select Column | Multiple | Support value types --- Demos/Blazorise.Demo/Pages/Dashboard.razor | 47 +++++++++--- Shared/Blazorise.Shared/Data/EmployeeData.cs | 11 ++- .../Blazorise.DataGrid/BaseDataGridColumn.cs | 18 ++++- .../_DataGridCellSelectEdit.razor | 2 +- .../_DataGridCellSelectEdit.razor.cs | 71 ++++++++++++++++++- 5 files changed, 131 insertions(+), 18 deletions(-) diff --git a/Demos/Blazorise.Demo/Pages/Dashboard.razor b/Demos/Blazorise.Demo/Pages/Dashboard.razor index c567b29333..46adffab55 100644 --- a/Demos/Blazorise.Demo/Pages/Dashboard.razor +++ b/Demos/Blazorise.Demo/Pages/Dashboard.razor @@ -7,18 +7,27 @@ + Data="inMemoryData" + Responsive + ShowPager + ShowPageSizes + Editable + EditMode="editMode"> - - + + + + + + @@ -35,13 +44,31 @@ protected override async Task OnInitializedAsync() { - inMemoryData = (await EmployeeData.GetDataAsync().ConfigureAwait(false)).Take(25).Select(x => new Test() { Id = x.Id, FirstName = x.FirstName, Values = new string[] { "M" } }).ToList(); + inMemoryData = (await EmployeeData.GetDataAsync().ConfigureAwait(false)).Take(25).Select(x => new Test() + { + Id = x.Id, + FirstName = x.FirstName, + Gender = "M", + Values = new string[] { "M" }, + IntValues = new int[] { 2 }, + ShortValues = new short[] { 2 }, + DecimalValues = new decimal[] { 2 }, + DoubleValues = new double[] { 2 }, + FloatValues = new float[] { 2 } + } + ).ToList(); await base.OnInitializedAsync(); } public class Test { public int Id { get; set; } public string FirstName { get; set; } + public string Gender { get; set; } public string[] Values { get; set; } + public int[] IntValues { get; set; } + public short[] ShortValues { get; set; } + public decimal[] DecimalValues { get; set; } + public double[] DoubleValues { get; set; } + public float[] FloatValues { get; set; } } } \ No newline at end of file diff --git a/Shared/Blazorise.Shared/Data/EmployeeData.cs b/Shared/Blazorise.Shared/Data/EmployeeData.cs index bb54f2c9cd..e0bb8cc345 100644 --- a/Shared/Blazorise.Shared/Data/EmployeeData.cs +++ b/Shared/Blazorise.Shared/Data/EmployeeData.cs @@ -1,4 +1,5 @@ #region Using directives + using System.Collections.Generic; using System.IO; using System.Linq; @@ -7,12 +8,14 @@ using System.Threading.Tasks; using Blazorise.Shared.Models; using Microsoft.Extensions.Caching.Memory; + #endregion namespace Blazorise.Shared.Data; public class Gender { + public int Id { get; set; } public string Code { get; set; } public string Description { get; set; } } @@ -34,21 +37,25 @@ public EmployeeData( IMemoryCache memoryCache ) { new() { + Id = 1 , Code = null, Description = string.Empty }, new() { + Id = 2 , Code = "M", Description = "Male" }, new() { + Id = 3 , Code = "F", Description = "Female" }, new() { + Id = 4 , Code = "D", Description = "Diverse" } @@ -56,8 +63,8 @@ public EmployeeData( IMemoryCache memoryCache ) public async Task> GetDataAsync() => ( await cache.GetOrCreateAsync( employeesCacheKey, LoadData ) ) - .Select( x => new Employee(x) ) //new() is used so we make sure that we are not returning the same item references avoiding an application wide "data corruption". - .ToList(); + .Select( x => new Employee( x ) ) //new() is used so we make sure that we are not returning the same item references avoiding an application wide "data corruption". + .ToList(); private Task> LoadData( ICacheEntry cacheEntry ) { diff --git a/Source/Extensions/Blazorise.DataGrid/BaseDataGridColumn.cs b/Source/Extensions/Blazorise.DataGrid/BaseDataGridColumn.cs index 7390b51cae..f6f0fcc2c2 100644 --- a/Source/Extensions/Blazorise.DataGrid/BaseDataGridColumn.cs +++ b/Source/Extensions/Blazorise.DataGrid/BaseDataGridColumn.cs @@ -1,5 +1,6 @@ #region Using directives using System; +using System.Collections; using System.Globalization; using Microsoft.AspNetCore.Components; #endregion @@ -18,9 +19,22 @@ public class BaseDataGridColumn : BaseDataGridComponent /// Formatted display value. public string FormatDisplayValue( object value ) { - if (value is string[] values ) + if (value is not string && value is IEnumerable values ) { - return string.Join( ',', values ); + var collectionDisplayValue = string.Empty; + var firstIteration = true; + foreach ( var item in values ) + { + if ( firstIteration ) + { + collectionDisplayValue = item?.ToString(); + firstIteration = false; + continue; + } + + collectionDisplayValue += $",{item}"; + } + return collectionDisplayValue; } if ( DisplayFormat != null ) diff --git a/Source/Extensions/Blazorise.DataGrid/_DataGridCellSelectEdit.razor b/Source/Extensions/Blazorise.DataGrid/_DataGridCellSelectEdit.razor index a80995d82f..2a7ca6b80f 100644 --- a/Source/Extensions/Blazorise.DataGrid/_DataGridCellSelectEdit.razor +++ b/Source/Extensions/Blazorise.DataGrid/_DataGridCellSelectEdit.razor @@ -1,6 +1,6 @@ @typeparam TItem @inherits ComponentBase -