Docs | Update examples to have Between

Megabit · Nov 7, 2024 · f0875cb · f0875cb
1 parent d8e4bf1
commit f0875cb
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 39 deletions.
diff --git a/Documentation/Blazorise.Docs/Models/Snippets.generated.cs b/Documentation/Blazorise.Docs/Models/Snippets.generated.cs
@@ -8047,28 +8047,30 @@ protected override async Task OnInitializedAsync()
      <DataGridColumn Field=""@nameof( Employee.FirstName )"" Caption=""First Name"" Editable=""false"" FilterMethod=""DataGridColumnFilterMethod.StartsWith""></DataGridColumn>
     <DataGridColumn Field=""@nameof( Employee.LastName )"" Caption=""Last Name"" Editable=""false""></DataGridColumn>
     <DataGridSelectColumn TItem=""Employee"" Field=""@nameof( Employee.Gender )"" Caption=""Gender"" Editable Data=""EmployeeData.Genders"" ValueField=""(x) => ((Gender)x).Code"" TextField=""(x) => ((Gender)x).Description"" />
+    <DataGridNumericColumn Field=""@nameof(Employee.Childrens)"" Caption=""Children"" Editable />
 </DataGrid>
 
 @code{
     private DataGrid<Employee> dataGrid;
-    private List<Employee> employeeList = new() { new() { FirstName = ""David"", LastName = ""Moreira"", Gender = ""M"" }, new() { FirstName = ""MLaden"", LastName = ""Macanovic"", Gender=""M"" }, new() { FirstName = ""John"", LastName = ""Doe"", Gender = ""M"" }, new() { FirstName = ""Ana"", LastName = ""Chamberlain"", Gender = ""F"" }, new() { FirstName = ""Jessica"", LastName = ""Winston"", Gender=""F"" } };
+    private List<Employee> employeeList = new() { new() { FirstName = ""David"", LastName = ""Moreira"", Gender = ""M"", Childrens = 0 }, new() { FirstName = ""MLaden"", LastName = ""Macanovic"", Gender = ""M"", Childrens = 1 }, new() { FirstName = ""John"", LastName = ""Doe"", Gender = ""M"", Childrens = 2 }, new() { FirstName = ""Ana"", LastName = ""Chamberlain"", Gender = ""F"", Childrens = 5 }, new() { FirstName = ""Jessica"", LastName = ""Winston"", Gender = ""F"", Childrens = 2 } };
 }";
 
         public const string DataGridFilterModeColumnTemplateFilteringExample = @"<DataGrid @ref=""dataGrid""
           TItem=""Employee""
           Data=""@employeeList""
           Responsive
           Filterable
-           FilterMode=""DataGridFilterMode.Menu"">
-     <DataGridColumns>
-         <DataGridColumn Field=""@nameof( Employee.FirstName )"" Caption=""First Name"" Editable=""false"" FilterMethod=""DataGridColumnFilterMethod.StartsWith""></DataGridColumn>
-         <DataGridColumn Field=""@nameof( Employee.LastName )"" Caption=""Last Name"" Editable=""false""></DataGridColumn>
-         <DataGridSelectColumn TItem=""Employee"" Field=""@nameof( Employee.Gender )"" Caption=""Gender"" Editable Data=""EmployeeData.Genders"" ValueField=""(x) => ((Gender)x).Code"" TextField=""(x) => ((Gender)x).Description"" />
-     </DataGridColumns>
-     <FilterMenuTemplate>
-         <Row>
-             <Column ColumnSize=""ColumnSize.Is4"">
-                 <Select TValue=""DataGridColumnFilterMethod"" SelectedValue=""@context.GetFilterMethod()"" SelectedValueChanged=""e => { context.FilterMethodChanged.InvokeAsync(e); }"">
+          FilterMode=""DataGridFilterMode.Menu"">
+    <DataGridColumns>
+        <DataGridColumn Field=""@nameof( Employee.FirstName )"" Caption=""First Name"" Editable=""false"" FilterMethod=""DataGridColumnFilterMethod.StartsWith""></DataGridColumn>
+        <DataGridColumn Field=""@nameof( Employee.LastName )"" Caption=""Last Name"" Editable=""false""></DataGridColumn>
+        <DataGridSelectColumn TItem=""Employee"" Field=""@nameof( Employee.Gender )"" Caption=""Gender"" Editable Data=""EmployeeData.Genders"" ValueField=""(x) => ((Gender)x).Code"" TextField=""(x) => ((Gender)x).Description"" />
+        <DataGridNumericColumn Field=""@nameof(Employee.Childrens)"" Caption=""Children"" Editable />
+    </DataGridColumns>
+    <FilterMenuTemplate>
+        <Row>
+            <Column ColumnSize=""ColumnSize.Is4"">
+                <Select TValue=""DataGridColumnFilterMethod"" SelectedValue=""@context.GetFilterMethod()"" SelectedValueChanged=""e => { context.FilterMethodChanged.InvokeAsync(e); }"">
                     @{
                         var isNumericOrDate = context.Column.ColumnType == DataGridColumnType.Numeric || context.Column.ColumnType == DataGridColumnType.Date;
                     }
@@ -8087,12 +8089,23 @@ protected override async Task OnInitializedAsync()
                         <SelectItem TValue=""DataGridColumnFilterMethod"" Value=""@DataGridColumnFilterMethod.GreaterThanOrEqual"">Greater Than Or Equal</SelectItem>
                         <SelectItem TValue=""DataGridColumnFilterMethod"" Value=""@DataGridColumnFilterMethod.LessThan"">Less Than</SelectItem>
                         <SelectItem TValue=""DataGridColumnFilterMethod"" Value=""@DataGridColumnFilterMethod.LessThanOrEqual"">Less Than Or Equal</SelectItem>
+                        <SelectItem TValue=""DataGridColumnFilterMethod"" Value=""@DataGridColumnFilterMethod.Between"">Between</SelectItem>
                     }
                 </Select>
             </Column>
 
             <Column ColumnSize=""ColumnSize.Is4"">
-                <TextEdit Text=""@context.GetSearchValue()?.ToString()"" TextChanged=""@((newValue) => context.Column.Filter.SearchValue = newValue)"" />
+                <Field @key=context.GetFilterMethod()>
+                    @if ( context.GetFilterMethod() == DataGridColumnFilterMethod.Between )
+                    {
+                        <TextEdit Text=""@GetFilterValue1(context)"" TextChanged=""@((newValue) => SetFilterValue1(context.Column.Filter, newValue))"" />
+                        <TextEdit Text=""@GetFilterValue2(context)"" TextChanged=""@((newValue) => SetFilterValue2(context.Column.Filter, newValue))"" />
+                    }
+                    else
+                    {
+                        <TextEdit Text=""@context.GetSearchValue()?.ToString()"" TextChanged=""@((newValue) => context.Column.Filter.SearchValue = newValue)"" />
+                    }
+                </Field>
             </Column>
 
             <Column ColumnSize=""ColumnSize.Is4"">
@@ -8105,7 +8118,37 @@ protected override async Task OnInitializedAsync()
 
 @code {
     private DataGrid<Employee> dataGrid;
-    private List<Employee> employeeList = new() { new() { FirstName = ""David"", LastName = ""Moreira"", Gender = ""M"" }, new() { FirstName = ""MLaden"", LastName = ""Macanovic"", Gender = ""M"" }, new() { FirstName = ""John"", LastName = ""Doe"", Gender = ""M"" }, new() { FirstName = ""Ana"", LastName = ""Chamberlain"", Gender = ""F"" }, new() { FirstName = ""Jessica"", LastName = ""Winston"", Gender = ""F"" } };
+    private List<Employee> employeeList = new() { new() { FirstName = ""David"", LastName = ""Moreira"", Gender = ""M"", Childrens = 0 }, new() { FirstName = ""MLaden"", LastName = ""Macanovic"", Gender = ""M"", Childrens = 1 }, new() { FirstName = ""John"", LastName = ""Doe"", Gender = ""M"", Childrens = 2 }, new() { FirstName = ""Ana"", LastName = ""Chamberlain"", Gender = ""F"", Childrens = 5 }, new() { FirstName = ""Jessica"", LastName = ""Winston"", Gender = ""F"", Childrens = 2 } };
+
+    private string GetFilterValue1( FilterColumnContext<Employee> context )
+    {
+        return ( context.GetSearchValue() as object[] )?[0]?.ToString();
+    }
+
+    private string GetFilterValue2( FilterColumnContext<Employee> context )
+    {
+        return ( context.GetSearchValue() as object[] )?[1]?.ToString();
+    }
+
+    private void SetFilterValue1( FilterContext<Employee> context, object value1 )
+    {
+        if ( context.SearchValue is not object[] )
+        {
+            context.SearchValue = new object[2];
+        }
+
+        ( context.SearchValue as object[] )[0] = value1;
+    }
+
+    private void SetFilterValue2( FilterContext<Employee> context, object value2 )
+    {
+        if ( context.SearchValue is not object[] )
+        {
+            context.SearchValue = new object[2];
+        }
+
+        ( context.SearchValue as object[] )[1] = value2;
+    }
 }";
 
         public const string DataGridFixedColumnsExample = @"<DataGrid TItem=""Employee""

diff --git a/...ocs/Pages/Docs/Extensions/DataGrid/Code/DataGridFilterModeColumnFilteringExampleCode.html b/...ocs/Pages/Docs/Extensions/DataGrid/Code/DataGridFilterModeColumnFilteringExampleCode.html
@@ -9,12 +9,13 @@
      <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="htmlAttributeName">Editable</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="keyword">false</span><span class="quot">&quot;</span> <span class="htmlAttributeName">FilterMethod</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">DataGridColumnFilterMethod</span><span class="enumValue">.StartsWith</span><span class="quot">&quot;</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.LastName )</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Caption</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Last Name</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Editable</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="keyword">false</span><span class="quot">&quot;</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">DataGridSelectColumn</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">Field</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>nameof( Employee.Gender )</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Caption</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Gender</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Editable</span> <span class="htmlAttributeName">Data</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">EmployeeData</span><span class="enumValue">.Genders</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; ((Gender)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; ((Gender)x).Description</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DataGridNumericColumn</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.Childrens)</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Caption</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Children</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Editable</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">private</span> DataGrid&lt;Employee&gt; dataGrid;
-    <span class="keyword">private</span> List&lt;Employee&gt; employeeList = <span class="keyword">new</span>() { <span class="keyword">new</span>() { FirstName = <span class="string">&quot;David&quot;</span>, LastName = <span class="string">&quot;Moreira&quot;</span>, Gender = <span class="string">&quot;M&quot;</span> }, <span class="keyword">new</span>() { FirstName = <span class="string">&quot;MLaden&quot;</span>, LastName = <span class="string">&quot;Macanovic&quot;</span>, Gender=<span class="string">&quot;M&quot;</span> }, <span class="keyword">new</span>() { FirstName = <span class="string">&quot;John&quot;</span>, LastName = <span class="string">&quot;Doe&quot;</span>, Gender = <span class="string">&quot;M&quot;</span> }, <span class="keyword">new</span>() { FirstName = <span class="string">&quot;Ana&quot;</span>, LastName = <span class="string">&quot;Chamberlain&quot;</span>, Gender = <span class="string">&quot;F&quot;</span> }, <span class="keyword">new</span>() { FirstName = <span class="string">&quot;Jessica&quot;</span>, LastName = <span class="string">&quot;Winston&quot;</span>, Gender=<span class="string">&quot;F&quot;</span> } };
+    <span class="keyword">private</span> List&lt;Employee&gt; employeeList = <span class="keyword">new</span>() { <span class="keyword">new</span>() { FirstName = <span class="string">&quot;David&quot;</span>, LastName = <span class="string">&quot;Moreira&quot;</span>, Gender = <span class="string">&quot;M&quot;</span>, Childrens = <span class="number">0</span> }, <span class="keyword">new</span>() { FirstName = <span class="string">&quot;MLaden&quot;</span>, LastName = <span class="string">&quot;Macanovic&quot;</span>, Gender = <span class="string">&quot;M&quot;</span>, Childrens = <span class="number">1</span> }, <span class="keyword">new</span>() { FirstName = <span class="string">&quot;John&quot;</span>, LastName = <span class="string">&quot;Doe&quot;</span>, Gender = <span class="string">&quot;M&quot;</span>, Childrens = <span class="number">2</span> }, <span class="keyword">new</span>() { FirstName = <span class="string">&quot;Ana&quot;</span>, LastName = <span class="string">&quot;Chamberlain&quot;</span>, Gender = <span class="string">&quot;F&quot;</span>, Childrens = <span class="number">5</span> }, <span class="keyword">new</span>() { FirstName = <span class="string">&quot;Jessica&quot;</span>, LastName = <span class="string">&quot;Winston&quot;</span>, Gender = <span class="string">&quot;F&quot;</span>, Childrens = <span class="number">2</span> } };
 }
 </pre></div>
 </div>