From 4dc982722dd29a85aa707b4f3610387fa9bf3283 Mon Sep 17 00:00:00 2001 From: Gustau Navarro Date: Thu, 30 Jul 2020 16:11:49 +0200 Subject: [PATCH] Right to left direction support (https://github.com/gustavnavar/Grid.Blazor/issues/187) --- GridBlazor/CGrid.cs | 5 + GridBlazor/Client/GridClient.cs | 6 + GridBlazor/Client/IGridClient.cs | 5 + GridBlazor/GridOptions.cs | 140 +++++----- GridBlazor/Pages/BooleanFilterComponent.razor | 6 +- .../Pages/BooleanFilterComponent.razor.cs | 17 +- .../Pages/DateTimeFilterComponent.razor | 24 +- .../Pages/DateTimeFilterComponent.razor.cs | 17 +- .../Pages/DateTimeLocalFilterComponent.razor | 22 +- .../DateTimeLocalFilterComponent.razor.cs | 17 +- GridBlazor/Pages/FormTooltipComponent.razor | 8 +- .../Pages/FormTooltipComponent.razor.cs | 22 +- GridBlazor/Pages/GridCellComponent.razor.cs | 6 +- GridBlazor/Pages/GridComponent.razor | 117 ++++---- GridBlazor/Pages/GridComponent.razor.cs | 2 +- GridBlazor/Pages/GridCreateComponent.razor | 12 +- GridBlazor/Pages/GridDeleteComponent.razor | 12 +- GridBlazor/Pages/GridDeleteComponent.razor.cs | 1 + GridBlazor/Pages/GridHeaderComponent.razor | 18 +- GridBlazor/Pages/GridHeaderComponent.razor.cs | 4 + GridBlazor/Pages/GridReadComponent.razor | 12 +- GridBlazor/Pages/GridReadComponent.razor.cs | 1 + GridBlazor/Pages/GridSearchComponent.razor | 4 +- GridBlazor/Pages/GridTotalsComponent.razor | 25 +- GridBlazor/Pages/GridUpdateComponent.razor | 12 +- GridBlazor/Pages/GridUpdateComponent.razor.cs | 1 + GridBlazor/Pages/HeaderTooltipComponent.razor | 8 +- .../Pages/HeaderTooltipComponent.razor.cs | 22 +- GridBlazor/Pages/ListFilterComponent.razor | 14 +- GridBlazor/Pages/ListFilterComponent.razor.cs | 17 +- GridBlazor/Pages/MonthFilterComponent.razor | 22 +- .../Pages/MonthFilterComponent.razor.cs | 17 +- GridBlazor/Pages/NumberFilterComponent.razor | 22 +- .../Pages/NumberFilterComponent.razor.cs | 17 +- GridBlazor/Pages/SubGridComponent.razor.cs | 1 + GridBlazor/Pages/TextFilterComponent.razor | 22 +- GridBlazor/Pages/TextFilterComponent.razor.cs | 17 +- GridBlazor/Pages/WeekFilterComponent.razor | 22 +- GridBlazor/Pages/WeekFilterComponent.razor.cs | 17 +- GridBlazor/wwwroot/css/gridblazor.css | 73 ++++- GridBlazor/wwwroot/css/gridblazor.min.css | 2 +- .../Pages/KeyboardNav.razor | 2 +- GridBlazorClientSide.Client/Pages/RTL.razor | 145 ++++++++++ .../Pages/Selectable.razor | 2 +- .../Shared/NavMenu.razor | 5 + .../wwwroot/css/site.css | 4 +- .../Pages/KeyboardNav.razor | 2 +- GridBlazorOData.Client/Pages/RTL.razor | 252 ++++++++++++++++++ GridBlazorOData.Client/Pages/Selectable.razor | 2 +- GridBlazorOData.Client/Shared/NavMenu.razor | 5 + GridBlazorOData.Client/wwwroot/css/site.css | 4 +- GridBlazorServerSide/Pages/KeyboardNav.razor | 2 +- GridBlazorServerSide/Pages/RTL.razor | 216 +++++++++++++++ GridBlazorServerSide/Pages/Selectable.razor | 2 +- GridBlazorServerSide/Shared/NavMenu.razor | 5 + GridBlazorServerSide/wwwroot/css/site.css | 4 +- GridMvc.Demo/Controllers/HomeController.cs | 101 +++++++ GridMvc.Demo/Views/Home/RTL.cshtml | 58 ++++ GridMvc.Demo/Views/Shared/_Layout.cshtml | 3 + .../Views/Shared/_OrdersRTLGrid.cshtml | 80 ++++++ GridMvc/Html/GridHtmlOptions.cs | 6 + GridMvc/Html/HtmlGrid.cs | 6 + GridMvc/Html/IGridHtmlOptions.cs | 5 + GridMvc/Resources/css/gridmvc.css | 73 ++++- GridMvc/Resources/css/gridmvc.min.css | 2 +- GridMvc/Resources/js/gridmvc.js | 135 ++++++---- GridMvc/Resources/js/gridmvc.min.js | 2 +- GridMvc/SGrid.cs | 5 + GridMvc/Server/GridServer.cs | 6 + GridMvc/Server/IGridServer.cs | 5 + GridMvc/Views/Shared/_Grid.cshtml | 53 ++-- GridMvc/Views/Shared/_GridCell.cshtml | 3 + .../Views/Shared/_GridExtSortHeader.cshtml | 2 +- GridMvc/Views/Shared/_GridHeader.cshtml | 16 +- GridMvc/Views/Shared/_GridSearch.cshtml | 6 +- GridMvc/Views/Shared/_GridTotals.cshtml | 39 +-- GridShared/GridDirection.cs | 27 ++ GridShared/IGrid.cs | 5 + .../blazor_client/GridBlazor_configuration.md | 1 + docs/blazor_client/Localization.md | 9 + docs/blazor_odata/GridBlazor_configuration.md | 33 +-- docs/blazor_odata/Localization.md | 9 + .../blazor_server/GridBlazor_configuration.md | 1 + docs/blazor_server/Localization.md | 9 + docs/dotnetcore/Localization.md | 8 + docs/dotnetcore/Quick_start.md | 2 + .../GridBlazor_configuration.md | 1 + docs/dotnetcore_blazor/Localization.md | 9 + 88 files changed, 1742 insertions(+), 439 deletions(-) create mode 100644 GridBlazorClientSide.Client/Pages/RTL.razor create mode 100644 GridBlazorOData.Client/Pages/RTL.razor create mode 100644 GridBlazorServerSide/Pages/RTL.razor create mode 100644 GridMvc.Demo/Views/Home/RTL.cshtml create mode 100644 GridMvc.Demo/Views/Shared/_OrdersRTLGrid.cshtml create mode 100644 GridShared/GridDirection.cs diff --git a/GridBlazor/CGrid.cs b/GridBlazor/CGrid.cs index 675ca7f2..842ab5e4 100644 --- a/GridBlazor/CGrid.cs +++ b/GridBlazor/CGrid.cs @@ -343,6 +343,11 @@ public bool EnablePaging /// public GridMode Mode { get; internal set; } + /// + /// Grid direction + /// + public GridDirection Direction { get; set; } = GridDirection.LTR; + /// /// Get and set export to an Excel file /// diff --git a/GridBlazor/Client/GridClient.cs b/GridBlazor/Client/GridClient.cs index 77cdecd9..c9fc8f7e 100644 --- a/GridBlazor/Client/GridClient.cs +++ b/GridBlazor/Client/GridClient.cs @@ -668,6 +668,12 @@ public IGridClient AddToOnAfterRender(Func, bool, Task> OnAf return this; } + public IGridClient SetDirection(GridDirection dir) + { + _source.Direction = dir; + return this; + } + /// /// Get grid object /// diff --git a/GridBlazor/Client/IGridClient.cs b/GridBlazor/Client/IGridClient.cs index f01ac1b2..0c34c292 100644 --- a/GridBlazor/Client/IGridClient.cs +++ b/GridBlazor/Client/IGridClient.cs @@ -471,6 +471,11 @@ IGridClient AddButtonComponent(string name, string label, IList IGridClient AddToOnAfterRender(Func, bool, Task> OnAfterRender); + /// + /// Setup the direction of grid + /// + IGridClient SetDirection(GridDirection dir); + /// /// Get grid object /// diff --git a/GridBlazor/GridOptions.cs b/GridBlazor/GridOptions.cs index b92bc9b7..411082eb 100644 --- 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) - { - } - - /// - /// Is multiple filters allowed - /// - public bool AllowMultipleFilters { get; set; } - - /// - /// Gets or set grid items selectable - /// - 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) + { + } + + /// + /// Is multiple filters allowed + /// + public bool AllowMultipleFilters { get; set; } + + /// + /// Gets or set grid items selectable + /// + public bool Selectable { get; set; } + /// /// Gets or sets a value indicating whether multiple grid items are selectable /// @@ -36,44 +36,44 @@ public GridOptions() /// /// /// TODO Edit XML Comment Template for MultiSelectable - public bool MultiSelectable {get;set;} - - /// - /// Gets or set init selection on selectable grids - /// - public bool InitSelection { get; set; } - - /// - /// Specify grid Id on the client side - /// - public string GridName { get; set; } - - - /// - /// Specify to render grid body only - /// - public bool RenderRowsOnly { get; set; } - - /// - /// Does items count need to show - /// - Author Jeeva J - /// - public bool ShowGridItemsCount { get; set; } - - /// - /// To show string while show grid items count - /// - Author Jeeva J - /// - public string GridCountDisplayName { get; set; } - - /// - /// Get value for striped grid - /// - public bool Striped { get; set; } - - public static GridOptions Create(string gridName) - { - return new GridOptions(gridName); - } - } + public bool MultiSelectable {get;set;} + + /// + /// Gets or set init selection on selectable grids + /// + public bool InitSelection { get; set; } + + /// + /// Specify grid Id on the client side + /// + public string GridName { get; set; } + + + /// + /// Specify to render grid body only + /// + public bool RenderRowsOnly { get; set; } + + /// + /// Does items count need to show + /// - Author Jeeva J + /// + public bool ShowGridItemsCount { get; set; } + + /// + /// To show string while show grid items count + /// - Author Jeeva J + /// + public string GridCountDisplayName { get; set; } + + /// + /// Get value for striped grid + /// + public bool Striped { get; set; } + + public static GridOptions Create(string gridName) + { + return new GridOptions(gridName); + } + } } \ No newline at end of file diff --git a/GridBlazor/Pages/BooleanFilterComponent.razor b/GridBlazor/Pages/BooleanFilterComponent.razor index c3cdfed4..edf439ce 100644 --- a/GridBlazor/Pages/BooleanFilterComponent.razor +++ b/GridBlazor/Pages/BooleanFilterComponent.razor @@ -4,8 +4,8 @@ @if (Visible) { -
-
+
0 ? "margin-left:-" + _offset.ToString() + "px;" : "")" @ref="boolFilter" @onkeyup="FilterKeyup" @onclick:stopPropagation @onkeyup:stopPropagation> +
0 ? "margin-left:" + _offset.ToString() + "px" : "")">
@@ -22,7 +22,7 @@ -
+
@if (_clearVisible) diff --git a/GridBlazor/Pages/BooleanFilterComponent.razor.cs b/GridBlazor/Pages/BooleanFilterComponent.razor.cs index 3a3ff727..62960c01 100644 --- 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("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 index fccda55f..1d8abfb7 100644 --- a/GridBlazor/Pages/DateTimeFilterComponent.razor +++ b/GridBlazor/Pages/DateTimeFilterComponent.razor @@ -4,8 +4,8 @@ @if (Visible) { -
-
+
0 ? "margin-left:-" + _offset.ToString() + "px;" : "")" @ref="dateTimeFilter" @onkeyup="FilterKeyup" @onclick:stopPropagation @onkeyup:stopPropagation> +
0 ? "margin-left:" + _offset.ToString() + "px" : "")">
@@ -14,8 +14,8 @@ int j = i; if (j == 1) { -
-
+
+
@@ -85,26 +85,26 @@
} -
-
+
+
-
+
@if (_filters.Length > 1) { - + }
-
+
@if (_clearVisible) { -