879 filter textbox width unit fix (vikramlearning#1058)

* Added Filter Textbox width unit property to make it configurable

* Updated example to show the box is configurable

---------

Co-authored-by: Raj Kumar Sri Ramulu <rajkumar.sriramulu@willowglensystems.com>

Author: rajraku

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor

@@ -14,7 +14,7 @@
         <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
             @context.Id
         </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
+        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" FilterTextboxWidth="50" FilterTextboxWidthUnit="Unit.Percentage" SortKeySelector="item => item.Name">
             @context.Name
         </GridColumn>
         <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">

blazorbootstrap/Components/Grid/Grid.razor

@@ -69,7 +69,7 @@
                                                       GridColumnFilterChanged="async args => await column.OnFilterChangedAsync(args, column)"
                                                       PropertyType="@column.GetPropertyType()"
                                                       PropertyTypeName="@column.GetPropertyTypeName()"
-                                                      Unit="@Unit" />
+                                                      Unit="@column.FilterTextboxWidthUnit" />
                                 }
                             </th>
                         }

blazorbootstrap/Components/Grid/GridColumn.razor.cs

@@ -248,6 +248,15 @@ private async Task OnSortClickAsync()
     [Parameter]
     public int FilterTextboxWidth { get; set; }
 
+    /// <summary>
+    /// Gets or sets the filter textbox width units.
+    /// </summary>
+    /// <remarks>
+    /// Default value is <see cref="Unit.Px" />.
+    /// </remarks>
+    [Parameter]
+    public Unit FilterTextboxWidthUnit { get; set; } = Unit.Px;
+
     /// <summary>
     /// Gets or sets the filter value.
     /// </summary>

blazorbootstrap/Components/Grid/GridColumnFilter.razor.cs

@@ -183,7 +183,7 @@ or StringConstants.PropertyTypeNameDecimal
     [Parameter]
     public GridFiltersTranslationDelegate FiltersTranslationProvider { get; set; } = default!;
 
-    private string filterStyle => FilterWidth > 0 ? $"width:{FilterWidth.ToString(CultureInfo.InvariantCulture)}{Unit.ToString().ToLower()};" : "";
+    private string filterStyle => FilterWidth > 0 ? $"width:{FilterWidth.ToString(CultureInfo.InvariantCulture)}{Unit.ToCssString()};" : "";
 
     /// <summary>
     /// Gets or sets filter value.