DataGrid: Auto Generate Columns (#5232)

* DataGrid | Make it so the DataGrid is able to programatically add columns correctly * DataGrid | AutoGenerateColumns based on model properties * try crlf * AutoGenerateColumns | NullCheck Columns | Generate even if Command Or MultiSelect columns are defined. * DataGridColumn | Fix defaults initialization | It needs to be OnInitialized after parameters are set * ResolveCaption | PascalCaseToFriendlyName * PascalCaseToFriendlyName_Returns_FriendlyFormat | Add null case * Generate Select for enum | Editable If setter available * Add demo page for Auto Generate Columns * Dashboard revert to original * Docs : Add example page
Megabit · Jan 25, 2024 · 5c58cf8 · 5c58cf8
1 parent 7b705df
commit 5c58cf8
Show file tree

Hide file tree

Showing 16 changed files with 449 additions and 20 deletions.
diff --git a/Demos/Blazorise.Demo/Components/SideMenu.razor b/Demos/Blazorise.Demo/Components/SideMenu.razor
@@ -101,6 +101,10 @@
                             Aggregates
                         </BarDropdownItem>
 
+                        <BarDropdownItem To="tests/datagrid/auto-generate-columns">
+                            Auto Generate Columns
+                        </BarDropdownItem>
+
                         <BarDropdownItem To="tests/datagrid/columns">
                             Columns
                         </BarDropdownItem>

diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGrid/AutoGenerateColumnsPage.razor b/Demos/Blazorise.Demo/Pages/Tests/DataGrid/AutoGenerateColumnsPage.razor
@@ -0,0 +1,55 @@
+@page "/tests/datagrid/auto-generate-columns"
+@using System.ComponentModel.DataAnnotations
+<Row>
+    <Column>
+        <Card Margin="Margin.Is4.OnY">
+            <CardHeader>
+                <CardTitle>Datagrid: Auto Generate Columns</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <DataGrid TItem="Example"
+                          Data="data"
+                          Responsive
+                          ShowPager
+                          ShowPageSizes Editable>
+                    <DataGridCommandColumn TItem="Example" />
+                </DataGrid>
+            </CardBody>
+        </Card>
+    </Column>
+</Row>
+
+@code {
+
+    public class Example
+    {
+        [DisplayAttribute(Name = "Name")]
+        public string FirstName { get; set; }
+
+        public string LastName { get; set; }
+
+
+        public int Age { get; set; }
+
+        public decimal Balance { get; set; }
+
+        public Status Status { get; set; }
+    }
+
+    public enum Status
+    {
+        Active,
+        Inactive
+    }
+
+    private IEnumerable<Example> data = new List<Example>()
+    {
+        new(){ FirstName = "John", LastName = "Doe", Age = 30, Balance = 1000, Status = Status.Active },
+        new(){ FirstName = "Jane", LastName = "Doe", Age = 28, Balance = 2000, Status = Status.Active },
+        new(){ FirstName = "Joe", LastName = "Doe", Age = 26, Balance = 3000, Status = Status.Inactive },
+        new(){ FirstName = "Jill", LastName = "Doe", Age = 24, Balance = 4000, Status = Status.Inactive },
+        new(){ FirstName = "Jack", LastName = "Doe", Age = 22, Balance = 5000, Status = Status.Active },
+        new(){ FirstName = "Jen", LastName = "Doe", Age = 20, Balance = 6000, Status = Status.Active },
+    };
+
+}
diff --git a/Documentation/Blazorise.Docs/Layouts/DocsLayout.razor b/Documentation/Blazorise.Docs/Layouts/DocsLayout.razor
@@ -176,6 +176,7 @@
                                                     <BarDropdownItem To="docs/extensions/datagrid/features/editing">Editing</BarDropdownItem>
                                                     <BarDropdownItem To="docs/extensions/datagrid/features/filtering">Filtering</BarDropdownItem>
                                                     <BarDropdownItem To="docs/extensions/datagrid/features/resizing">Resizing</BarDropdownItem>
+                                                    <BarDropdownItem To="docs/extensions/datagrid/features/auto-generate-columns">Auto Generate Columns</BarDropdownItem>
                                                     <BarDropdownItem To="docs/extensions/datagrid/features/fixed-columns">Fixed Columns</BarDropdownItem>
                                                     <BarDropdownItem To="docs/extensions/datagrid/features/fixed-header">Fixed Header</BarDropdownItem>
                                                     <BarDropdownItem To="docs/extensions/datagrid/features/context-menu">Context Menu</BarDropdownItem>

diff --git a/Documentation/Blazorise.Docs/Models/Snippets.generated.cs b/Documentation/Blazorise.Docs/Models/Snippets.generated.cs
@@ -6390,6 +6390,51 @@ private Task OnPredefinedClicked() => dataGrid.ApplySorting(
         new DataGridSortColumnInfo(nameof(Employee.Childrens), SortDirection.Descending),
         new DataGridSortColumnInfo(nameof(Employee.Gender), SortDirection.Ascending)
         );
+}";
+
+        public const string DataGridAutoGenerateColumnsExample = @"@using System.ComponentModel.DataAnnotations
+
+<DataGrid TItem=""Example""
+            Data=""data""
+            Responsive
+            ShowPager
+            ShowPageSizes Editable>
+    <DataGridCommandColumn TItem=""Example"" />
+</DataGrid>
+
+@code {
+
+    public class Example
+    {
+        [Display( Name = ""Name"" )]
+        public string FirstName { get; set; }
+
+        public string LastName { get; set; }
+
+
+        public int Age { get; set; }
+
+        public decimal Balance { get; set; }
+
+        public Status Status { get; set; }
+    }
+
+    public enum Status
+    {
+        Active,
+        Inactive
+    }
+
+    private IEnumerable<Example> data = new List<Example>()
+    {
+        new(){ FirstName = ""John"", LastName = ""Doe"", Age = 30, Balance = 1000, Status = Status.Active },
+        new(){ FirstName = ""Jane"", LastName = ""Doe"", Age = 28, Balance = 2000, Status = Status.Active },
+        new(){ FirstName = ""Joe"", LastName = ""Doe"", Age = 26, Balance = 3000, Status = Status.Inactive },
+        new(){ FirstName = ""Jill"", LastName = ""Doe"", Age = 24, Balance = 4000, Status = Status.Inactive },
+        new(){ FirstName = ""Jack"", LastName = ""Doe"", Age = 22, Balance = 5000, Status = Status.Active },
+        new(){ FirstName = ""Jen"", LastName = ""Doe"", Age = 20, Balance = 6000, Status = Status.Active },
+    };
+
 }";
 
         public const string DataGridBatchEditExample = @"<Field>

diff --git a/...rise.Docs/Pages/Docs/Extensions/DataGrid/Code/DataGridAutoGenerateColumnsExampleCode.html b/...rise.Docs/Pages/Docs/Extensions/DataGrid/Code/DataGridAutoGenerateColumnsExampleCode.html
@@ -0,0 +1,49 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="atSign">&#64;</span>using System.ComponentModel.DataAnnotations
+
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGrid</span> <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Example</span><span class="quot">&quot;</span>
+            <span class="htmlAttributeName">Data</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">data</span><span class="quot">&quot;</span>
+            <span class="htmlAttributeName">Responsive</span>
+            <span class="htmlAttributeName">ShowPager</span>
+            <span class="htmlAttributeName">ShowPageSizes</span> <span class="htmlAttributeName">Editable</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGridCommandColumn</span> <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Example</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">DataGrid</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+<div class="csharp"><pre>
+<span class="atSign">&#64;</span>code {
+
+    <span class="keyword">public</span> <span class="keyword">class</span> Example
+    {
+        [Display( Name = <span class="string">&quot;Name&quot;</span> )]
+        <span class="keyword">public</span> <span class="keyword">string</span> FirstName { <span class="keyword">get</span>; <span class="keyword">set</span>; }
+
+        <span class="keyword">public</span> <span class="keyword">string</span> LastName { <span class="keyword">get</span>; <span class="keyword">set</span>; }
+
+
+        <span class="keyword">public</span> <span class="keyword">int</span> Age { <span class="keyword">get</span>; <span class="keyword">set</span>; }
+
+        <span class="keyword">public</span> <span class="keyword">decimal</span> Balance { <span class="keyword">get</span>; <span class="keyword">set</span>; }
+
+        <span class="keyword">public</span> Status Status { <span class="keyword">get</span>; <span class="keyword">set</span>; }
+    }
+
+    <span class="keyword">public</span> <span class="keyword">enum</span> Status
+    {
+        Active,
+        Inactive
+    }
+
+    <span class="keyword">private</span> IEnumerable&lt;Example&gt; data = <span class="keyword">new</span> List&lt;Example&gt;()
+    {
+        <span class="keyword">new</span>(){ FirstName = <span class="string">&quot;John&quot;</span>, LastName = <span class="string">&quot;Doe&quot;</span>, Age = <span class="number">30</span>, Balance = <span class="number">1000</span>, Status = Status.Active },
+        <span class="keyword">new</span>(){ FirstName = <span class="string">&quot;Jane&quot;</span>, LastName = <span class="string">&quot;Doe&quot;</span>, Age = <span class="number">28</span>, Balance = <span class="number">2000</span>, Status = Status.Active },
+        <span class="keyword">new</span>(){ FirstName = <span class="string">&quot;Joe&quot;</span>, LastName = <span class="string">&quot;Doe&quot;</span>, Age = <span class="number">26</span>, Balance = <span class="number">3000</span>, Status = Status.Inactive },
+        <span class="keyword">new</span>(){ FirstName = <span class="string">&quot;Jill&quot;</span>, LastName = <span class="string">&quot;Doe&quot;</span>, Age = <span class="number">24</span>, Balance = <span class="number">4000</span>, Status = Status.Inactive },
+        <span class="keyword">new</span>(){ FirstName = <span class="string">&quot;Jack&quot;</span>, LastName = <span class="string">&quot;Doe&quot;</span>, Age = <span class="number">22</span>, Balance = <span class="number">5000</span>, Status = Status.Active },
+        <span class="keyword">new</span>(){ FirstName = <span class="string">&quot;Jen&quot;</span>, LastName = <span class="string">&quot;Doe&quot;</span>, Age = <span class="number">20</span>, Balance = <span class="number">6000</span>, Status = Status.Active },
+    };
+
+}
+</pre></div>
+</div>
diff --git a/...ise.Docs/Pages/Docs/Extensions/DataGrid/Examples/DataGridAutoGenerateColumnsExample.razor b/...ise.Docs/Pages/Docs/Extensions/DataGrid/Examples/DataGridAutoGenerateColumnsExample.razor
@@ -0,0 +1,45 @@
+@namespace Blazorise.Docs.Docs.Examples
+@using System.ComponentModel.DataAnnotations
+
+<DataGrid TItem="Example"
+            Data="data"
+            Responsive
+            ShowPager
+            ShowPageSizes Editable>
+    <DataGridCommandColumn TItem="Example" />
+</DataGrid>
+
+@code {
+
+    public class Example
+    {
+        [Display( Name = "Name" )]
+        public string FirstName { get; set; }
+
+        public string LastName { get; set; }
+
+
+        public int Age { get; set; }
+
+        public decimal Balance { get; set; }
+
+        public Status Status { get; set; }
+    }
+
+    public enum Status
+    {
+        Active,
+        Inactive
+    }
+
+    private IEnumerable<Example> data = new List<Example>()
+    {
+        new(){ FirstName = "John", LastName = "Doe", Age = 30, Balance = 1000, Status = Status.Active },
+        new(){ FirstName = "Jane", LastName = "Doe", Age = 28, Balance = 2000, Status = Status.Active },
+        new(){ FirstName = "Joe", LastName = "Doe", Age = 26, Balance = 3000, Status = Status.Inactive },
+        new(){ FirstName = "Jill", LastName = "Doe", Age = 24, Balance = 4000, Status = Status.Inactive },
+        new(){ FirstName = "Jack", LastName = "Doe", Age = 22, Balance = 5000, Status = Status.Active },
+        new(){ FirstName = "Jen", LastName = "Doe", Age = 20, Balance = 6000, Status = Status.Active },
+    };
+
+}
diff --git a/...tion/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Features/AutoGenerateColumnsPage.razor b/...tion/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Features/AutoGenerateColumnsPage.razor
@@ -0,0 +1,34 @@
+@page "/docs/extensions/datagrid/features/auto-generate-columns"
+
+<Seo Canonical="/docs/extensions/datagrid/features/auto-generate-columns" Title="Blazorise DataGrid Auto Generate Columns" Description="Learn Blazorise by the example. The DataGrid can automatically generate columns based on the TItem type." />
+
+<DocsPageTitle Path="Extensions/DataGrid/Features/Auto Generate Columns">
+    Blazorise DataGrid: Auto Generate Columns
+</DocsPageTitle>
+
+<DocsPageLead>
+    The DataGrid can automatically generate columns based on the TItem type.
+</DocsPageLead>
+
+<DocsPageSubtitle>
+    Overview
+</DocsPageSubtitle>
+
+<DocsPageParagraph>
+    If no columns are defined, the DataGrid will automatically generate columns based on the TItem type.
+</DocsPageParagraph>
+
+<DocsPageSubtitle>
+    Example
+</DocsPageSubtitle>
+
+<DocsPageSection>
+    <DocsPageSectionContent FullWidth Outlined>
+        <DataGridAutoGenerateColumnsExample />
+    </DocsPageSectionContent>
+    <DocsPageSectionSource Code="DataGridAutoGenerateColumnsExample" />
+</DocsPageSection>
+
+<DocsPageApi>
+    <DocsPageApiItem Url="docs/extensions/datagrid/api" Name="<DataGrid />" />
+</DocsPageApi>
diff --git a/Shared/Blazorise.Shared/Data/PageEntryData.cs b/Shared/Blazorise.Shared/Data/PageEntryData.cs
@@ -105,6 +105,7 @@ private Task<PageEntry[]> LoadData( ICacheEntry cacheEntry )
                 new PageEntry( "docs/extensions/datagrid/features/context-menu", "DataGrid Context Menu", "Right-click on any row to access options such as editing, deleting, and custom actions." ),
                 new PageEntry( "docs/extensions/datagrid/features/editing", "DataGrid Editing", "The DataGrid can perform some basic CRUD operations on the supplied Data collection." ),
                 new PageEntry( "docs/extensions/datagrid/features/filtering", "DataGrid Filtering", "Quickly search and filter by any column, or customize filter options to fit your needs." ),
+                new PageEntry( "docs/extensions/datagrid/features/auto-generate-columns", "DataGrid Auto Generate Columns", "The DataGrid can automatically generate columns based on the TItem type." ),
                 new PageEntry( "docs/extensions/datagrid/features/fixed-columns", "DataGrid Fixed Columns", "The table columns remains visible as you scroll, making it easy to identify and reference the data in your grid." ),
                 new PageEntry( "docs/extensions/datagrid/features/fixed-header", "DataGrid Fixed Header", "The table header remains visible as you scroll, making it easy to identify and reference the data in your grid." ),
                 new PageEntry( "docs/extensions/datagrid/features/grouping", "DataGrid Grouping", "Grouping feature for Blazorise DataGrid allows you to easily group and organize your data by specific columns." ),

diff --git a/Shared/Blazorise.Shared/Models/Employee.cs b/Shared/Blazorise.Shared/Models/Employee.cs
@@ -28,6 +28,7 @@ public Employee( Employee other )
         Zip = other.Zip;
     }
 
+    [Display( Name = "Id" )]
     public int Id { get; set; }
 
     [Required]
@@ -38,14 +39,28 @@ public Employee( Employee other )
 
     [Required]
     [EmailAddress]
+    [Display( Name = "Email" )]
     public string Email { get; set; }
 
+    [Display( Name = "City" )]
     public string City { get; set; }
+
+    [Display( Name = "Zip" )]
     public string Zip { get; set; }
+
+    [Display( Name = "DOB" )]
     public DateTime? DateOfBirth { get; set; }
+
+    [Display( Name = "Childrens" )]
     public int? Childrens { get; set; }
+
+    [Display( Name = "Gender" )]
     public string Gender { get; set; }
+
+    [Display( Name = "Salary" )]
     public decimal Salary { get; set; }
+
+    [Display( Name = "Tax" )]
     public decimal Tax
     {
         get
@@ -56,6 +71,8 @@ public decimal Tax
         }
         set { tax = value; }
     }
+
+    [Display( Name = "Active" )]
     public bool IsActive { get; set; }
 
     public List<Salary> Salaries { get; set; } = new();
@@ -68,4 +85,6 @@ public decimal ChildrensPerSalary
     public decimal TaxPercentage = 0.25m;
 
     private decimal tax;
-}
+}
+
+
diff --git a/Source/Blazorise/Utilities/Formaters.cs b/Source/Blazorise/Utilities/Formaters.cs
@@ -1,6 +1,7 @@
 #region Using directives
 using System;
 using System.Globalization;
+using System.Text;
 #endregion
 
 namespace Blazorise.Utilities;
@@ -114,4 +115,34 @@ public static string ToFileSize( long source )
             return string.Concat( bytes, " Bytes" );
         }
     }
+
+    /// <summary>
+    /// Formats the supplied Pascal Case value to a friendly name with spaces.
+    /// </summary>
+    /// <param name="input"></param>
+    /// <returns></returns>
+    public static string PascalCaseToFriendlyName( string input )
+    {
+        if ( string.IsNullOrWhiteSpace( input ) )
+            return input;
+
+        StringBuilder result = new StringBuilder();
+        var firstUpperChar = true;
+        foreach ( char c in input )
+        {
+            if ( char.IsUpper( c ) && result.Length > 0 && !firstUpperChar )
+            {
+                result.Append( ' ' );
+            }
+
+            if ( char.IsUpper( c ) )
+            {
+                firstUpperChar = false;
+            }
+
+            result.Append( c );
+        }
+
+        return result.ToString();
+    }
 }