Right to left direction support (#187)

gustavnavar · Jul 30, 2020 · 4dc9827 · 4dc9827
1 parent 9818529
commit 4dc9827
Show file tree

Hide file tree

Showing 88 changed files with 1,742 additions and 439 deletions.
diff --git a/GridBlazor/CGrid.cs b/GridBlazor/CGrid.cs
@@ -343,6 +343,11 @@ public bool EnablePaging
         /// </summary>
         public GridMode Mode { get; internal set; }
 
+        /// <summary>
+        ///     Grid direction
+        /// </summary>
+        public GridDirection Direction { get; set; } = GridDirection.LTR;
+
         /// <summary>
         ///     Get and set export to an Excel file
         /// </summary>

diff --git a/GridBlazor/Client/GridClient.cs b/GridBlazor/Client/GridClient.cs
@@ -668,6 +668,12 @@ public IGridClient<T> AddToOnAfterRender(Func<GridComponent<T>, bool, Task> OnAf
             return this;
         }
 
+        public IGridClient<T> SetDirection(GridDirection dir)
+        {
+            _source.Direction = dir;
+            return this;
+        }
+
         /// <summary>
         ///     Get grid object
         /// </summary>

diff --git a/GridBlazor/Client/IGridClient.cs b/GridBlazor/Client/IGridClient.cs
@@ -471,6 +471,11 @@ IGridClient<T> AddButtonComponent<TComponent>(string name, string label, IList<A
         /// </summary>
         IGridClient<T> AddToOnAfterRender(Func<GridComponent<T>, bool, Task> OnAfterRender);
 
+        /// <summary>
+        ///    Setup the direction of grid
+        /// </summary>
+        IGridClient<T> SetDirection(GridDirection dir);
+
         /// <summary>
         ///    Get grid object
         /// </summary>

diff --git a/GridBlazor/GridOptions.cs b/GridBlazor/GridOptions.cs
@@ -1,33 +1,33 @@
-namespace GridBlazor
-{
-    public class GridOptions
-    {
-        public GridOptions(string gridName)
-        {
-            GridName = gridName;
-            Selectable = false;
-            MultiSelectable = false;
-            AllowMultipleFilters = false;
-            ShowGridItemsCount = false;
-            RenderRowsOnly = false;
-            Striped = false;
-        }
-
-        public GridOptions()
-            : this(string.Empty)
-        {
-        }
-
-        /// <summary>
-        ///     Is multiple filters allowed
-        /// </summary>
-        public bool AllowMultipleFilters { get; set; }
-
-        /// <summary>
-        ///     Gets or set grid items selectable
-        /// </summary>
-        public bool Selectable { get; set; }
-
+namespace GridBlazor
+{
+    public class GridOptions
+    {
+        public GridOptions(string gridName)
+        {
+            GridName = gridName;
+            Selectable = false;
+            MultiSelectable = false;
+            AllowMultipleFilters = false;
+            ShowGridItemsCount = false;
+            RenderRowsOnly = false;
+            Striped = false;
+        }
+
+        public GridOptions()
+            : this(string.Empty)
+        {
+        }
+
+        /// <summary>
+        ///     Is multiple filters allowed
+        /// </summary>
+        public bool AllowMultipleFilters { get; set; }
+
+        /// <summary>
+        ///     Gets or set grid items selectable
+        /// </summary>
+        public bool Selectable { get; set; }
+
         /// <summary>
         /// Gets or sets a value indicating whether multiple grid items are selectable
         /// </summary>
@@ -36,44 +36,44 @@ public GridOptions()
         /// </value>
         /// <autogeneratedoc />
         /// TODO Edit XML Comment Template for MultiSelectable
-        public bool MultiSelectable {get;set;}
-
-        /// <summary>
-        ///      Gets or set init selection on selectable grids 
-        /// </summary>
-        public bool InitSelection { get; set; }
-
-        /// <summary>
-        ///     Specify grid Id on the client side
-        /// </summary>
-        public string GridName { get; set; }
-
-
-        /// <summary>
-        ///     Specify to render grid body only
-        /// </summary>
-        public bool RenderRowsOnly { get; set; }
-
-        /// <summary>
-        ///     Does items count need to show
-        ///     - Author Jeeva J
-        /// </summary>
-        public bool ShowGridItemsCount { get; set; }
-
-        /// <summary>
-        ///     To show string while show grid items count
-        ///     - Author Jeeva J
-        /// </summary>
-        public string GridCountDisplayName { get; set; }
-
-        /// <summary>
-        ///     Get value for striped grid
-        /// </summary>
-        public bool Striped { get; set; }
-
-        public static GridOptions Create(string gridName)
-        {
-            return new GridOptions(gridName);
-        }
-    }
+        public bool MultiSelectable {get;set;}
+
+        /// <summary>
+        ///      Gets or set init selection on selectable grids 
+        /// </summary>
+        public bool InitSelection { get; set; }
+
+        /// <summary>
+        ///     Specify grid Id on the client side
+        /// </summary>
+        public string GridName { get; set; }
+
+
+        /// <summary>
+        ///     Specify to render grid body only
+        /// </summary>
+        public bool RenderRowsOnly { get; set; }
+
+        /// <summary>
+        ///     Does items count need to show
+        ///     - Author Jeeva J
+        /// </summary>
+        public bool ShowGridItemsCount { get; set; }
+
+        /// <summary>
+        ///     To show string while show grid items count
+        ///     - Author Jeeva J
+        /// </summary>
+        public string GridCountDisplayName { get; set; }
+
+        /// <summary>
+        ///     Get value for striped grid
+        /// </summary>
+        public bool Striped { get; set; }
+
+        public static GridOptions Create(string gridName)
+        {
+            return new GridOptions(gridName);
+        }
+    }
 }
diff --git a/GridBlazor/Pages/BooleanFilterComponent.razor b/GridBlazor/Pages/BooleanFilterComponent.razor
@@ -4,8 +4,8 @@
 
 @if (Visible)
 {
-    <div class="dropdown dropdown-menu grid-dropdown opened" style="display:block;@(_offset > 0 ? "margin-left:-" + _offset.ToString() + "px;" : "")" @ref="boolFilter" @onkeyup="FilterKeyup" @onclick:stopPropagation @onkeyup:stopPropagation tabindex="-1">
-        <div class="grid-dropdown-arrow" style="@(_offset > 0 ? "margin-left:" + _offset.ToString() + "px" : "")"></div>
+    <div class="dropdown dropdown-menu grid-dropdown opened" style="display:block;@(GridHeaderComponent.GridComponent.Grid.Direction == GridShared.GridDirection.RTL ? _offset > 0 ? "margin-right:-" + _offset.ToString() + "px;" : "" : _offset > 0 ? "margin-left:-" + _offset.ToString() + "px;" : "")" @ref="boolFilter" @onkeyup="FilterKeyup" @onclick:stopPropagation @onkeyup:stopPropagation>
+        <div class="grid-dropdown-arrow" style="@(GridHeaderComponent.GridComponent.Grid.Direction == GridShared.GridDirection.RTL ? _offset > 0 ? "margin-right:" + _offset.ToString() + "px" : "" : _offset > 0 ? "margin-left:" + _offset.ToString() + "px" : "")"></div>
         <div class="grid-dropdown-inner">
             <div class="grid-popup-widget">
                 <div class="grid-filter-body">
@@ -22,7 +22,7 @@
                             </a>
                         </li>
                     </ul>
-                </div>  
+                </div>
             </div>
             <div class="grid-popup-additional">
                 @if (_clearVisible)

diff --git a/GridBlazor/Pages/BooleanFilterComponent.razor.cs b/GridBlazor/Pages/BooleanFilterComponent.razor.cs
@@ -44,10 +44,21 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             {
                 await jSRuntime.InvokeVoidAsync("gridJsFunctions.focusElement", boolFilter);
                 ScreenPosition sp = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", boolFilter);
-                if (sp != null && sp.X + sp.Width > sp.InnerWidth)
+                if (GridHeaderComponent.GridComponent.Grid.Direction == GridShared.GridDirection.RTL)
                 {
-                    _offset = sp.X + sp.Width - sp.InnerWidth + 25;
-                    StateHasChanged();
+                    if (sp != null && sp.X < 0)
+                    {
+                        _offset = -sp.X + 25;
+                        StateHasChanged();
+                    }
+                }
+                else
+                {
+                    if (sp != null && sp.X + sp.Width > sp.InnerWidth)
+                    {
+                        _offset = sp.X + sp.Width - sp.InnerWidth + 25;
+                        StateHasChanged();
+                    }
                 }
             }
         }

diff --git a/GridBlazor/Pages/DateTimeFilterComponent.razor b/GridBlazor/Pages/DateTimeFilterComponent.razor
@@ -4,8 +4,8 @@
 
 @if (Visible)
 {
-    <div class="dropdown dropdown-menu grid-dropdown opened" style="display:block;@(_offset > 0 ? "margin-left:-" + _offset.ToString() + "px;" : "")" @ref="dateTimeFilter" @onkeyup="FilterKeyup" @onclick:stopPropagation @onkeyup:stopPropagation>
-        <div class="grid-dropdown-arrow" style="@(_offset > 0 ? "margin-left:" + _offset.ToString() + "px" : "")"></div>
+    <div class="dropdown dropdown-menu grid-dropdown opened" style="display:block;@(GridHeaderComponent.GridComponent.Grid.Direction == GridShared.GridDirection.RTL ? _offset > 0 ? "margin-right:-" + _offset.ToString() + "px;" : "" : _offset > 0 ? "margin-left:-" + _offset.ToString() + "px;" : "")" @ref="dateTimeFilter" @onkeyup="FilterKeyup" @onclick:stopPropagation @onkeyup:stopPropagation>
+        <div class="grid-dropdown-arrow" style="@(GridHeaderComponent.GridComponent.Grid.Direction == GridShared.GridDirection.RTL ? _offset > 0 ? "margin-right:" + _offset.ToString() + "px" : "" : _offset > 0 ? "margin-left:" + _offset.ToString() + "px" : "")"></div>
         <div class="grid-dropdown-inner">
             <div class="grid-popup-widget">
                 <div class="grid-filter-body">
@@ -14,8 +14,8 @@
                         int j = i;
                         if (j == 1)
                         {
-                            <div class="form-group row">
-                                <div class="col-md-4 col-md-offset-4 offset-md-4">
+                            <div class="form-group" style="display:flex;justify-content:center;">
+                                <div>
                                     <select class="grid-filter-cond form-control" @bind="_condition">
                                         <option value="1">@Strings.And</option>
                                         <option value="2">@Strings.Or</option>
@@ -25,8 +25,8 @@
                         }
                         else if (j > 1)
                         {
-                            <div class="form-group row">
-                                <div class="col-md-4 col-md-offset-4 offset-md-4">
+                            <div class="form-group" style="display:flex;justify-content:center;">
+                                <div>
                                     <select class="grid-filter-cond form-control" disabled="disabled" value="@_condition">
                                         <option value="1">@Strings.And</option>
                                         <option value="2">@Strings.Or</option>
@@ -85,26 +85,26 @@
                             </div>
                         </div>
                     }
-                    <div class="form-group row" style="display:block;">
-                        <div class="grid-filter-buttons" style="float:left;margin-left:15px;">
+                    <div class="grid-buttons">
+                        <div class="grid-filter-buttons">
                             <button type="button" class="btn btn-primary" @onclick="ApplyButtonClicked">
                                 @Strings.ApplyFilterButtonText
                             </button>
                         </div>
-                        <div class="grid-filter-buttons" style="float:right;margin-right:15px;">
+                        <div class="grid-filter-buttons">
                             <button type="button" class="btn btn-primary" @onclick="() => AddColumnFilterValue()"><b>+</b></button>
                             @if (_filters.Length > 1)
                             {
-                                <button type="button" class="btn btn-primary" style="margin-left:10px;" @onclick="() => RemoveColumnFilterValue()"><b>-</b></button>
+                                <button type="button" class="btn btn-primary" @onclick="() => RemoveColumnFilterValue()"><b>-</b></button>
                             }
                         </div>
                     </div>
-                </div> 
+                </div>
             </div>
             <div class="grid-popup-additional">
                 @if (_clearVisible)
                 {
-                    <ul class="menu-list" style="margin-top:40px;">
+                    <ul class="menu-list">
                         <li>
                             <a class="grid-filter-clear" href="javascript:void(0);" @onclick="ClearButtonClicked">
                                 @Strings.ClearFilterLabel

diff --git a/GridBlazor/Pages/DateTimeFilterComponent.razor.cs b/GridBlazor/Pages/DateTimeFilterComponent.razor.cs
@@ -58,10 +58,21 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             {
                 await jSRuntime.InvokeVoidAsync("gridJsFunctions.focusElement", firstSelect);
                 ScreenPosition sp = await jSRuntime.InvokeAsync<ScreenPosition>("gridJsFunctions.getPosition", dateTimeFilter);
-                if (sp != null && sp.X + sp.Width > sp.InnerWidth)
+                if (GridHeaderComponent.GridComponent.Grid.Direction == GridShared.GridDirection.RTL)
                 {
-                    _offset = sp.X + sp.Width - sp.InnerWidth + 25;
-                    StateHasChanged();
+                    if (sp != null && sp.X < 0)
+                    {
+                        _offset = -sp.X + 25;
+                        StateHasChanged();
+                    }
+                }
+                else
+                {
+                    if (sp != null && sp.X + sp.Width > sp.InnerWidth)
+                    {
+                        _offset = sp.X + sp.Width - sp.InnerWidth + 25;
+                        StateHasChanged();
+                    }
                 }
             }
         }

diff --git a/GridBlazor/Pages/DateTimeLocalFilterComponent.razor b/GridBlazor/Pages/DateTimeLocalFilterComponent.razor
@@ -4,8 +4,8 @@
 
 @if (Visible)
 {
-    <div class="dropdown dropdown-menu grid-dropdown opened" style="display:block;@(_offset > 0 ? "margin-left:-" + _offset.ToString() + "px;" : "")" @ref="dateTimeFilter" @onkeyup="FilterKeyup" @onclick:stopPropagation @onkeyup:stopPropagation>
-        <div class="grid-dropdown-arrow" style="@(_offset > 0 ? "margin-left:" + _offset.ToString() + "px" : "")"></div>
+    <div class="dropdown dropdown-menu grid-dropdown opened" style="display:block;@(GridHeaderComponent.GridComponent.Grid.Direction == GridShared.GridDirection.RTL ? _offset > 0 ? "margin-right:-" + _offset.ToString() + "px;" : "" : _offset > 0 ? "margin-left:-" + _offset.ToString() + "px;" : "")" @ref="dateTimeFilter" @onkeyup="FilterKeyup" @onclick:stopPropagation @onkeyup:stopPropagation>
+        <div class="grid-dropdown-arrow" style="@(GridHeaderComponent.GridComponent.Grid.Direction == GridShared.GridDirection.RTL ? _offset > 0 ? "margin-right:" + _offset.ToString() + "px" : "" : _offset > 0 ? "margin-left:" + _offset.ToString() + "px" : "")"></div>
         <div class="grid-dropdown-inner">
             <div class="grid-popup-widget">
                 <div class="grid-filter-body">
@@ -14,8 +14,8 @@
                         int j = i;
                         if (j == 1)
                         {
-                            <div class="form-group row">
-                                <div class="col-md-4 col-md-offset-4 offset-md-4">
+                            <div class="form-group" style="display:flex;justify-content:center;">
+                                <div>
                                     <select class="grid-filter-cond form-control" @bind="_condition">
                                         <option value="1">@Strings.And</option>
                                         <option value="2">@Strings.Or</option>
@@ -25,8 +25,8 @@
                         }
                         else if (j > 1)
                         {
-                            <div class="form-group row">
-                                <div class="col-md-4 col-md-offset-4 offset-md-4">
+                            <div class="form-group" style="display:flex;justify-content:center;">
+                                <div>
                                     <select class="grid-filter-cond form-control" disabled="disabled" value="@_condition">
                                         <option value="1">@Strings.And</option>
                                         <option value="2">@Strings.Or</option>
@@ -92,17 +92,17 @@
                             </div>
                         </div>
                     }
-                    <div class="form-group row" style="display:block;">
-                        <div class="grid-filter-buttons" style="float:left;margin-left:15px;">
+                    <div class="grid-buttons">
+                        <div class="grid-filter-buttons">
                             <button type="button" class="btn btn-primary" @onclick="ApplyButtonClicked">
                                 @Strings.ApplyFilterButtonText
                             </button>
                         </div>
-                        <div class="grid-filter-buttons" style="float:right;margin-right:15px;">
+                        <div class="grid-filter-buttons">
                             <button type="button" class="btn btn-primary" @onclick="() => AddColumnFilterValue()"><b>+</b></button>
                             @if (_filters.Length > 1)
                             {
-                                <button type="button" class="btn btn-primary" style="margin-left:10px;" @onclick="() => RemoveColumnFilterValue()"><b>-</b></button>
+                                <button type="button" class="btn btn-primary" @onclick="() => RemoveColumnFilterValue()"><b>-</b></button>
                             }
                         </div>
                     </div>
@@ -111,7 +111,7 @@
             <div class="grid-popup-additional">
                 @if (_clearVisible)
                 {
-                    <ul class="menu-list" style="margin-top:40px;">
+                    <ul class="menu-list">
                         <li>
                             <a class="grid-filter-clear" href="javascript:void(0);" @onclick="ClearButtonClicked">
                                 @Strings.ClearFilterLabel