Docs: DetailRow samples update (#5940)

* Adds example code for distinguishing between opened and closed detail rows, and displays an icon when a detail row can be expanded. * format * ubuntu latest to ubuntu 22.04 * compile example --------- Co-authored-by: Mladen Macanovic <[email protected]>
Megabit · Jan 22, 2025 · b74fc76 · b74fc76
1 parent 25a2844
commit b74fc76
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 7 deletions.
diff --git a/.github/workflows/blazorise-ci-basic.yml b/.github/workflows/blazorise-ci-basic.yml
@@ -5,7 +5,7 @@ on: [push]
 jobs:
   build:
 
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
 
     steps:
     - uses: actions/checkout@v3

diff --git a/Documentation/Blazorise.Docs/Models/Snippets.generated.cs b/Documentation/Blazorise.Docs/Models/Snippets.generated.cs
@@ -7743,15 +7743,26 @@ protected override async Task OnInitializedAsync()
         public const string DataGridDetailRowTemplateExample = @"<DataGrid TItem=""Employee""
           Data=""@employeeList""
           @bind-SelectedRow=""@selectedEmployee""
-          DetailRowTrigger=""@((e) => e.Item.Salaries?.Count > 0 && e.Item.Id == selectedEmployee?.Id)""
+          RowClicked=""RowClicked""
+          DetailRowTrigger=""@(e => DisplayDetailRow(e.Item) && e.Item.Id == selectedEmployee?.Id)""
           Responsive>
     <DataGridColumns>
         <DataGridCommandColumn />
+        <DataGridColumn TItem=Employee >
+            <DisplayTemplate>
+                @if ( DisplayDetailRow( context ) )
+                {
+                    <Button>
+                        <Icon Name=""@(rowsWithDetail.Contains( context.Id ) ? IconName.ExpandLess : IconName.ExpandMore)""/>
+                    </Button>
+                }
+            </DisplayTemplate>
+        </DataGridColumn>
         <DataGridColumn Field=""@nameof(Employee.FirstName)"" Caption=""First Name"" />
     </DataGridColumns>
     <DetailRowTemplate>
         @{
-            var salaries = ( context as Employee ).Salaries;
+            var salaries = context.Salaries;
 
             <DataGrid TItem=""Salary""
                       Data=""salaries""
@@ -7770,6 +7781,16 @@ protected override async Task OnInitializedAsync()
     public EmployeeData EmployeeData { get; set; }
     private List<Employee> employeeList;
     private Employee selectedEmployee;
+    private HashSet<int> rowsWithDetail = [];
+
+    void RowClicked(DataGridRowMouseEventArgs<Employee> clickedRow)
+    {
+        var id = clickedRow.Item.Id;
+        if ( !rowsWithDetail.Add( id ) )
+            rowsWithDetail.Remove( id );
+    }
+
+    bool DisplayDetailRow(Employee employee) => employee.Salaries?.Count > 0;
 
     protected override async Task OnInitializedAsync()
     {

diff --git a/...zorise.Docs/Pages/Docs/Extensions/DataGrid/Code/DataGridDetailRowTemplateExampleCode.html b/...zorise.Docs/Pages/Docs/Extensions/DataGrid/Code/DataGridDetailRowTemplateExampleCode.html
@@ -3,15 +3,26 @@
 <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">Employee</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"><span class="atSign">&#64;</span>bind-SelectedRow</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>selectedEmployee</span><span class="quot">&quot;</span>
-          <span class="htmlAttributeName">DetailRowTrigger</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>((e) =&gt; e.Item.Salaries?.Count &gt; 0 &amp;&amp; e.Item.Id == selectedEmployee?.Id)</span><span class="quot">&quot;</span>
+          <span class="htmlAttributeName">RowClicked</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">RowClicked</span><span class="quot">&quot;</span>
+          <span class="htmlAttributeName">DetailRowTrigger</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>(e =&gt; DisplayDetailRow(e.Item) &amp;&amp; e.Item.Id == selectedEmployee?.Id)</span><span class="quot">&quot;</span>
           <span class="htmlAttributeName">Responsive</span><span class="htmlTagDelimiter">&gt;</span>
     <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGridColumns</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">DataGridColumn</span> <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="htmlAttributeValue">Employee</span> <span class="htmlTagDelimiter">&gt;</span>
+            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DisplayTemplate</span><span class="htmlTagDelimiter">&gt;</span>
+                <span class="atSign">&#64;</span>if ( DisplayDetailRow( context ) )
+                {
+                    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Button</span><span class="htmlTagDelimiter">&gt;</span>
+                        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Icon</span> <span class="htmlAttributeName">Name</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>(rowsWithDetail.Contains( context.Id ) ? IconName.ExpandLess : IconName.ExpandMore)</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">/&gt;</span>
+                    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Button</span><span class="htmlTagDelimiter">&gt;</span>
+                }
+            <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">DisplayTemplate</span><span class="htmlTagDelimiter">&gt;</span>
+        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">DataGridColumn</span><span class="htmlTagDelimiter">&gt;</span>
         <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGridColumn</span> <span class="htmlAttributeName">Field</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>nameof(Employee.FirstName)</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Caption</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">First Name</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
     <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">DataGridColumns</span><span class="htmlTagDelimiter">&gt;</span>
     <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DetailRowTemplate</span><span class="htmlTagDelimiter">&gt;</span>
         <span class="atSign">&#64;</span>{
-            var salaries = ( context as Employee ).Salaries;
+            var salaries = context.Salaries;
 
             <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">Salary</span><span class="quot">&quot;</span>
                       <span class="htmlAttributeName">Data</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">salaries</span><span class="quot">&quot;</span>
@@ -31,6 +42,16 @@
     <span class="keyword">public</span> EmployeeData EmployeeData { <span class="keyword">get</span>; <span class="keyword">set</span>; }
     <span class="keyword">private</span> List&lt;Employee&gt; employeeList;
     <span class="keyword">private</span> Employee selectedEmployee;
+    <span class="keyword">private</span> HashSet&lt;<span class="keyword">int</span>&gt; rowsWithDetail = [];
+
+    <span class="keyword">void</span> RowClicked(DataGridRowMouseEventArgs&lt;Employee&gt; clickedRow)
+    {
+        <span class="keyword">var</span> id = clickedRow.Item.Id;
+        <span class="keyword">if</span> ( !rowsWithDetail.Add( id ) )
+            rowsWithDetail.Remove( id );
+    }
+
+    <span class="keyword">bool</span> DisplayDetailRow(Employee employee) =&gt; employee.Salaries?.Count &gt; <span class="number">0</span>;
 
     <span class="keyword">protected</span> <span class="keyword">override</span> <span class="keyword">async</span> Task OnInitializedAsync()
     {

diff --git a/...orise.Docs/Pages/Docs/Extensions/DataGrid/Examples/DataGridDetailRowTemplateExample.razor b/...orise.Docs/Pages/Docs/Extensions/DataGrid/Examples/DataGridDetailRowTemplateExample.razor
@@ -3,15 +3,26 @@
 <DataGrid TItem="Employee"
           Data="@employeeList"
           @bind-SelectedRow="@selectedEmployee"
-          DetailRowTrigger="@((e) => e.Item.Salaries?.Count > 0 && e.Item.Id == selectedEmployee?.Id)"
+          RowClicked="RowClicked"
+          DetailRowTrigger="@(e => DisplayDetailRow(e.Item) && e.Item.Id == selectedEmployee?.Id)"
           Responsive>
     <DataGridColumns>
         <DataGridCommandColumn />
+        <DataGridColumn TItem=Employee >
+            <DisplayTemplate>
+                @if ( DisplayDetailRow( context ) )
+                {
+                    <Button>
+                        <Icon Name="@(rowsWithDetail.Contains( context.Id ) ? IconName.ExpandLess : IconName.ExpandMore)"/>
+                    </Button>
+                }
+            </DisplayTemplate>
+        </DataGridColumn>
         <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" />
     </DataGridColumns>
     <DetailRowTemplate>
         @{
-            var salaries = ( context as Employee ).Salaries;
+            var salaries = context.Salaries;
 
             <DataGrid TItem="Salary"
                       Data="salaries"
@@ -30,6 +41,16 @@
     public EmployeeData EmployeeData { get; set; }
     private List<Employee> employeeList;
     private Employee selectedEmployee;
+    private HashSet<int> rowsWithDetail = [];
+
+    void RowClicked(DataGridRowMouseEventArgs<Employee> clickedRow)
+    {
+        var id = clickedRow.Item.Id;
+        if ( !rowsWithDetail.Add( id ) )
+            rowsWithDetail.Remove( id );
+    }
+
+    bool DisplayDetailRow(Employee employee) => employee.Salaries?.Count > 0;
 
     protected override async Task OnInitializedAsync()
     {
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,7 @@ on: [push] @@
     jobs:
       build:
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-22.04
         steps:
         - uses: actions/checkout@v3
@@ Expand Down @@