DataGrid: Support Multiple items on DataGridSelectColumn

Documentation/Blazorise.Docs/Blazorise.Docs.csproj

@@ -82,11 +82,6 @@
   <ItemGroup>
     <FrameworkReference Include="Microsoft.AspNetCore.App" />
   </ItemGroup>
-  <ItemGroup>
-    <Content Update="Pages\Docs\Components\Tables\Examples\BasicMobileTableExample.razor">
-      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
-    </Content>
-  </ItemGroup>
 
   <!--Is this a rebuild - Dont clean generated files as this breaks rebuild behaviour-->
   <Target Name="ShouldCleanGeneratedFiles" BeforeTargets="BeforeRebuild">

Documentation/Blazorise.Docs/Models/Snippets.generated.cs

@@ -9001,6 +9001,73 @@ protected override async Task OnInitializedAsync()
     }
 }";
 
+        public const string DataGridSelectColumnMultipleExample = @"<DataGrid TItem=""EmployeeActivity"" Data=""@employeeList"" PageSize=""5"" Responsive Editable>
+    <DataGridSelectColumn TItem=""EmployeeActivity"" Field=""@nameof( EmployeeActivity.Activities )""
+                          Caption=""Activity"" 
+                          Editable
+                          Multiple 
+                          Data=""activities""
+                          ValueField=""(x) => ((Activity)x).Code""
+                          TextField=""(x) => ((Activity)x).Description"" />
+    <DataGridCommandColumn />
+</DataGrid>
+
+@code {
+    [Inject]
+    public EmployeeData EmployeeData { get; set; }
+    private List<EmployeeActivity> employeeList;
+
+    protected override async Task OnInitializedAsync()
+    {
+        employeeList = (await EmployeeData.GetDataAsync()).Select(x => new EmployeeActivity(x)
+            {
+                Activities = activities
+                        .OrderBy(x => Random.Shared.Next())
+                        .Take(Random.Shared.Next(5))
+                        .Select(x => x.Code).ToArray()
+            }).ToList();
+
+        await base.OnInitializedAsync();
+    }
+
+    private List<Activity> activities = new List<Activity>
+    {
+        new Activity { Code = ""MEET"", Description = ""Meeting"" },
+        new Activity { Code = ""TRAIN"", Description = ""Training"" },
+        new Activity { Code = ""CODE"", Description = ""Coding"" },
+        new Activity { Code = ""R&D"", Description = ""Research"" },
+        new Activity { Code = ""TEST"", Description = ""Testing"" },
+    };
+
+    public class EmployeeActivity : Employee
+    {
+        public string[] Activities { get; set; }
+
+        public EmployeeActivity(Employee employee)
+        {
+            this.City = employee.City;
+            this.Email = employee.Email;
+            this.FirstName = employee.FirstName;
+            this.LastName = employee.LastName;
+            this.Salary = employee.Salary;
+            this.DateOfBirth = employee.DateOfBirth;
+            this.Gender = employee.Gender;
+            this.Childrens = employee.Childrens;
+            this.Id = employee.Id;
+            this.Zip = employee.Zip;
+            this.Tax = employee.Tax;
+            this.Salaries = employee.Salaries;
+            this.IsActive = employee.IsActive;
+        }
+    }
+
+    public class Activity
+    {
+        public string Code { get; set; }
+        public string Description { get; set; }
+    }
+}";
+
         public const string DataGridSelectingExample = @"<DataGrid TItem=""Employee""
           Data=""@employeeList""
           RowSelectable=@((x)=> x.Item.FirstName != ""John"")

Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Code/DataGridSelectColumnMultipleExampleCode.html

@@ -0,0 +1,71 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<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">EmployeeActivity</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Data</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>employeeList</span><span class="quot">&quot;</span> <span class="htmlAttributeName">PageSize</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">5</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Responsive</span> <span class="htmlAttributeName">Editable</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGridSelectColumn</span> <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">EmployeeActivity</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Field</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>nameof( EmployeeActivity.Activities )</span><span class="quot">&quot;</span>
+                          <span class="htmlAttributeName">Caption</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Activity</span><span class="quot">&quot;</span> 
+                          <span class="htmlAttributeName">Editable</span>
+                          <span class="htmlAttributeName">Multiple</span> 
+                          <span class="htmlAttributeName">Data</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">activities</span><span class="quot">&quot;</span>
+                          <span class="htmlAttributeName">ValueField</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">(x) =&gt; ((Activity)x).Code</span><span class="quot">&quot;</span>
+                          <span class="htmlAttributeName">TextField</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">(x) =&gt; ((Activity)x).Description</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGridCommandColumn</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 {
+    [Inject]
+    <span class="keyword">public</span> EmployeeData EmployeeData { <span class="keyword">get</span>; <span class="keyword">set</span>; }
+    <span class="keyword">private</span> List&lt;EmployeeActivity&gt; employeeList;
+
+    <span class="keyword">protected</span> <span class="keyword">override</span> <span class="keyword">async</span> Task OnInitializedAsync()
+    {
+        employeeList = (<span class="keyword">await</span> EmployeeData.GetDataAsync()).Select(x =&gt; <span class="keyword">new</span> EmployeeActivity(x)
+            {
+                Activities = activities
+                        .OrderBy(x =&gt; Random.Shared.Next())
+                        .Take(Random.Shared.Next(<span class="number">5</span>))
+                        .Select(x =&gt; x.Code).ToArray()
+            }).ToList();
+
+        <span class="keyword">await</span> <span class="keyword">base</span>.OnInitializedAsync();
+    }
+
+    <span class="keyword">private</span> List&lt;Activity&gt; activities = <span class="keyword">new</span> List&lt;Activity&gt;
+    {
+        <span class="keyword">new</span> Activity { Code = <span class="string">&quot;MEET&quot;</span>, Description = <span class="string">&quot;Meeting&quot;</span> },
+        <span class="keyword">new</span> Activity { Code = <span class="string">&quot;TRAIN&quot;</span>, Description = <span class="string">&quot;Training&quot;</span> },
+        <span class="keyword">new</span> Activity { Code = <span class="string">&quot;CODE&quot;</span>, Description = <span class="string">&quot;Coding&quot;</span> },
+        <span class="keyword">new</span> Activity { Code = <span class="string">&quot;R&amp;D&quot;</span>, Description = <span class="string">&quot;Research&quot;</span> },
+        <span class="keyword">new</span> Activity { Code = <span class="string">&quot;TEST&quot;</span>, Description = <span class="string">&quot;Testing&quot;</span> },
+    };
+
+    <span class="keyword">public</span> <span class="keyword">class</span> EmployeeActivity : Employee
+    {
+        <span class="keyword">public</span> <span class="keyword">string</span>[] Activities { <span class="keyword">get</span>; <span class="keyword">set</span>; }
+
+        <span class="keyword">public</span> EmployeeActivity(Employee employee)
+        {
+            <span class="keyword">this</span>.City = employee.City;
+            <span class="keyword">this</span>.Email = employee.Email;
+            <span class="keyword">this</span>.FirstName = employee.FirstName;
+            <span class="keyword">this</span>.LastName = employee.LastName;
+            <span class="keyword">this</span>.Salary = employee.Salary;
+            <span class="keyword">this</span>.DateOfBirth = employee.DateOfBirth;
+            <span class="keyword">this</span>.Gender = employee.Gender;
+            <span class="keyword">this</span>.Childrens = employee.Childrens;
+            <span class="keyword">this</span>.Id = employee.Id;
+            <span class="keyword">this</span>.Zip = employee.Zip;
+            <span class="keyword">this</span>.Tax = employee.Tax;
+            <span class="keyword">this</span>.Salaries = employee.Salaries;
+            <span class="keyword">this</span>.IsActive = employee.IsActive;
+        }
+    }
+
+    <span class="keyword">public</span> <span class="keyword">class</span> Activity
+    {
+        <span class="keyword">public</span> <span class="keyword">string</span> Code { <span class="keyword">get</span>; <span class="keyword">set</span>; }
+        <span class="keyword">public</span> <span class="keyword">string</span> Description { <span class="keyword">get</span>; <span class="keyword">set</span>; }
+    }
+}
+</pre></div>
+</div>

Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/ColumnsPage.razor

@@ -87,6 +87,17 @@
     <DocsPageSectionSource Code="DataGridSelectColumnExample" />
 </DocsPageSection>
 
+<DocsPageSection>
+    <DocsPageSectionHeader Title="Select Column Multiple">
+        Column template for selectable values. Allow multiple values support by setting Multiple to true. Bind a string or value type array.
+    </DocsPageSectionHeader>
+
+    <DocsPageSectionContent FullWidth>
+        <DataGridSelectColumnMultipleExample />
+    </DocsPageSectionContent>
+    <DocsPageSectionSource Code="DataGridSelectColumnMultipleExample" />
+</DocsPageSection>
+
 <DocsPageApi>
     <DocsPageApiItem Url="docs/extensions/datagrid/api" Name="<DataGrid />" />
 </DocsPageApi>

Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/Examples/DataGridSelectColumnMultipleExample.razor

@@ -0,0 +1,68 @@
+@namespace Blazorise.Docs.Docs.Examples
+
+<DataGrid TItem="EmployeeActivity" Data="@employeeList" PageSize="5" Responsive Editable>
+    <DataGridSelectColumn TItem="EmployeeActivity" Field="@nameof( EmployeeActivity.Activities )"
+                          Caption="Activity" 
+                          Editable
+                          Multiple 
+                          Data="activities"
+                          ValueField="(x) => ((Activity)x).Code"
+                          TextField="(x) => ((Activity)x).Description" />
+    <DataGridCommandColumn />
+</DataGrid>
+
+@code {
+    [Inject]
+    public EmployeeData EmployeeData { get; set; }
+    private List<EmployeeActivity> employeeList;
+
+    protected override async Task OnInitializedAsync()
+    {
+        employeeList = (await EmployeeData.GetDataAsync()).Select(x => new EmployeeActivity(x)
+            {
+                Activities = activities
+                        .OrderBy(x => Random.Shared.Next())
+                        .Take(Random.Shared.Next(5))
+                        .Select(x => x.Code).ToArray()
+            }).ToList();
+
+        await base.OnInitializedAsync();
+    }
+
+    private List<Activity> activities = new List<Activity>
+    {
+        new Activity { Code = "MEET", Description = "Meeting" },
+        new Activity { Code = "TRAIN", Description = "Training" },
+        new Activity { Code = "CODE", Description = "Coding" },
+        new Activity { Code = "R&D", Description = "Research" },
+        new Activity { Code = "TEST", Description = "Testing" },
+    };
+
+    public class EmployeeActivity : Employee
+    {
+        public string[] Activities { get; set; }
+
+        public EmployeeActivity(Employee employee)
+        {
+            this.City = employee.City;
+            this.Email = employee.Email;
+            this.FirstName = employee.FirstName;
+            this.LastName = employee.LastName;
+            this.Salary = employee.Salary;
+            this.DateOfBirth = employee.DateOfBirth;
+            this.Gender = employee.Gender;
+            this.Childrens = employee.Childrens;
+            this.Id = employee.Id;
+            this.Zip = employee.Zip;
+            this.Tax = employee.Tax;
+            this.Salaries = employee.Salaries;
+            this.IsActive = employee.IsActive;
+        }
+    }
+
+    public class Activity
+    {
+        public string Code { get; set; }
+        public string Description { get; set; }
+    }
+}

Documentation/Blazorise.Docs/Pages/News/2025-05-01-release-notes-200.razor

@@ -0,0 +1,107 @@
+@page "/news/release-notes/200"
+
+<Seo Canonical="news/release-notes/200" Title="Blazorise v2.0" Description="Welcome to the Blazorise 2.0 release, packed with exciting new features, optimizations, and support for the latest .NET framework." ImageUrl="img/news/200/v200.png" />
+
+<NewsPageImage Source="img/news/200/v200.png" Text="Blazorise v2.0" />
+
+<NewsPageTitle>
+    Announcing Blazorise 2.0 - [CodeName]
+</NewsPageTitle>
+
+<Paragraph>
+    Welcome to the Blazorise 2.0 release, packed with exciting new features, optimizations, and support for the latest .NET framework. Dive into the highlights below to explore how Blazorise 2.0 can enhance your applications.
+</Paragraph>
+
+<NewsPageSubtitle>
+    Key Blazorise 1.0 Highlights 💡
+</NewsPageSubtitle>
+
+<Paragraph>
+    Here's a summary of what's new in this release:
+</Paragraph>
+
+<UnorderedList>
+    <UnorderedListItem>
+        <Paragraph>
+            <Strong>DataGridSelectColumn</Strong>: Multiple support
+        </Paragraph>
+    </UnorderedListItem>
+</UnorderedList>
+
+<Paragraph>
+    Dive into each section for a comprehensive overview of these features and learn how they can enhance your projects. We value your feedback and encourage you to share your thoughts as we continue to refine and improve Blazorise.
+</Paragraph>
+
+<NewsPageSubtitle>
+    Upgrading from 1.7.x to 2.0 👨‍🔧
+</NewsPageSubtitle>
+
+<Paragraph>
+    Upgrade your Blazorise application seamlessly with the following steps:
+</Paragraph>
+
+<OrderedList>
+    <OrderedListItem>
+        <Paragraph>
+            Update all <Strong>Blazorise.*</Strong> package references to <Strong>2.0</Strong>.
+        </Paragraph>
+    </OrderedListItem>
+    <OrderedListItem>
+        <Paragraph>
+            Blazorise should now work without any major breaking change to the API, but there are some necessary changes that we had to do to make Blazorise better. Continue reading the Migration section for more details.
+        </Paragraph>
+    </OrderedListItem>
+</OrderedList>
+
+<NewsPageSubtitle>
+    Migration Notes 🛠
+</NewsPageSubtitle>
+
+<Paragraph>
+    A few API changes and behavior updates have been introduced in Blazorise 2.0 to improve consistency and functionality. Here’s a summary:
+</Paragraph>
+
+<Paragraph>
+    <OrderedList>
+        <OrderedListItem>
+            <Paragraph>
+            </Paragraph>
+            <UnorderedList>
+                <UnorderedListItem>
+                    <Paragraph>
+                    </Paragraph>
+                </UnorderedListItem>
+            </UnorderedList>
+        </OrderedListItem>
+    </OrderedList>
+</Paragraph>
+
+<NewsPageSubtitle>
+    New Features & Enhancements 🚀
+</NewsPageSubtitle>
+
+<Heading Size="HeadingSize.Is3">
+    DataGrid
+</Heading>
+
+<Heading Size="HeadingSize.Is4">
+    DataGridSelectColumn Multiple support
+</Heading>
+
+<Paragraph>
+    You may now allow multiple values to be selected in the <Code>DataGridSelectColumn</Code>. Set the new <Code>Multiple</Code> parameter to <Code>true</Code> to enable this feature. Please bind the corresponding array to successfully bind the multiple values.
+</Paragraph>
+
+<NewsPageSubtitle>
+    Final Notes
+</NewsPageSubtitle>
+
+<Paragraph>
+
+</Paragraph>
+
+<Paragraph>
+    As always, your feedback is invaluable in guiding future Blazorise development. We encourage you to try out the new features and let us know your thoughts. Thank you for your continued support and enthusiasm for Blazorise, and we look forward to bringing you even more enhancements in future updates!
+</Paragraph>
+
+<NewsPagePostInfo UserName="Mladen Macanović" ImageName="mladen" PostedOn="" Read="7 min" />

Shared/Blazorise.Shared/Data/EmployeeData.cs

@@ -56,8 +56,8 @@ public EmployeeData( IMemoryCache memoryCache )
 
     public async Task<List<Employee>> 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<List<Employee>> LoadData( ICacheEntry cacheEntry )
     {

Shared/Blazorise.Shared/Models/Employee.cs

@@ -8,7 +8,6 @@ public class Employee
 {
     public Employee()
     {
-
     }
 
     public Employee( Employee other )
@@ -85,6 +84,4 @@ public decimal ChildrensPerSalary
     public decimal TaxPercentage = 0.25m;
 
     private decimal tax;
-}
-
-
+}

Source/Extensions/Blazorise.DataGrid/BaseDataGridColumn.cs

@@ -16,9 +16,9 @@ public class BaseDataGridColumn<TItem> : BaseDataGridComponent
     /// </summary>
     /// <param name="value">Item the contains the value to format.</param>
     /// <returns>Formatted display value.</returns>
-    public string FormatDisplayValue( object value )
+    public virtual string FormatDisplayValue( object value )
     {
-        if ( DisplayFormat != null )
+        if ( DisplayFormat is not null )
         {
             return string.Format( DisplayFormatProvider ?? CultureInfo.CurrentCulture, DisplayFormat, value );
         }