diff --git a/GridBlazor.Tests/Client/ClientTests.cs b/GridBlazor.Tests/Client/ClientTests.cs index 5d197a09..41293d77 100644 --- a/GridBlazor.Tests/Client/ClientTests.cs +++ b/GridBlazor.Tests/Client/ClientTests.cs @@ -64,6 +64,9 @@ public void TestMainMethods() _client.Groupable(false); Assert.IsFalse(_client.Grid.ExtSortingEnabled); Assert.IsFalse(_client.Grid.GroupingEnabled); + + _client.RearrangeableColumns(true); + Assert.IsTrue(_client.Grid.RearrangeColumnEnabled); } } } diff --git a/GridBlazor/CGrid.cs b/GridBlazor/CGrid.cs index 0f6ba71b..0cd7ae5a 100644 --- a/GridBlazor/CGrid.cs +++ b/GridBlazor/CGrid.cs @@ -168,6 +168,8 @@ private CGrid(HttpClient httpClient, string url, public bool GroupingEnabled { get; set; } public bool ClearFiltersButtonEnabled { get; set; } = false; + + public bool RearrangeColumnEnabled { get; set; } /// /// Items, displaying in the grid view @@ -595,6 +597,26 @@ public string[] GetPrimaryKeys() return values.ToArray(); } + private static readonly Task InsertColumnSucceded = Task.FromResult(true); + private static readonly Task InsertColumnFailed = Task.FromResult(false); + /// + public Task InsertColumn(IGridColumn targetColumn, IGridColumn insertingColumn) + { + + var currentPossition = _columnsCollection.IndexOf(insertingColumn); + var targetPossition = _columnsCollection.IndexOf(targetColumn); + if (currentPossition == -1 || targetPossition == -1 || currentPossition == targetPossition) + return InsertColumnFailed; + + var index = currentPossition > targetPossition ? targetPossition : targetPossition - 1; + var removed = _columnsCollection.Remove(insertingColumn); + if (!removed) + return InsertColumnFailed; + + _columnsCollection.Insert(index, insertingColumn); + return InsertColumnSucceded; + } + /// /// Fixed column values for the grid /// diff --git a/GridBlazor/Client/GridClient.cs b/GridBlazor/Client/GridClient.cs index 3b38de1a..1108e78c 100644 --- a/GridBlazor/Client/GridClient.cs +++ b/GridBlazor/Client/GridClient.cs @@ -187,6 +187,17 @@ public IGridClient Groupable(bool enable) return this; } + public IGridClient RearrangeableColumns() + { + return RearrangeableColumns(true); + } + + public IGridClient RearrangeableColumns(bool enable) + { + _source.RearrangeColumnEnabled = enable; + return this; + } + public IGridClient ClearFiltersButton(bool enable) { _source.ClearFiltersButtonEnabled = enable; diff --git a/GridBlazor/Client/IGridClient.cs b/GridBlazor/Client/IGridClient.cs index f5fc25f1..d962e05a 100644 --- a/GridBlazor/Client/IGridClient.cs +++ b/GridBlazor/Client/IGridClient.cs @@ -100,6 +100,16 @@ public interface IGridClient /// Enable or disable grouping /// IGridClient Groupable(bool enable); + + /// + /// Enable column rearrange + /// + IGridClient RearrangeableColumns(); + + /// + /// Enable or disable column rearrange + /// + IGridClient RearrangeableColumns(bool enable); /// /// Enable or disable visibility of ClearFiltersButton diff --git a/GridBlazor/ICGrid.cs b/GridBlazor/ICGrid.cs index fa931697..0c8c4b7d 100644 --- a/GridBlazor/ICGrid.cs +++ b/GridBlazor/ICGrid.cs @@ -43,6 +43,11 @@ public interface ICGrid : IGrid, IGridOptions /// bool SubGridsOpened { get; } + /// + /// Set or get default value of rearrange column + /// + public bool RearrangeColumnEnabled { get; set; } + Type Type { get; } string Url { get; } @@ -91,6 +96,14 @@ public interface ICGrid : IGrid, IGridOptions Task DownloadExcel(IJSRuntime js, string filename); + /// + /// Changes postion of instertingColumn to appear before targetColumn + /// + /// Column which will be moved + /// Column before which it will be inserted + /// Retruns true if column was sucessfully inserted before target otherwise false + Task InsertColumn(IGridColumn targetColumn, IGridColumn insertingColumn); + /// /// Get and set export to an Excel file /// diff --git a/GridBlazor/Pages/GridComponent.razor.cs b/GridBlazor/Pages/GridComponent.razor.cs index 63e96765..179b9893 100644 --- a/GridBlazor/Pages/GridComponent.razor.cs +++ b/GridBlazor/Pages/GridComponent.razor.cs @@ -920,6 +920,28 @@ protected virtual async Task OnAfterDeleteForm() await AfterDeleteForm.Invoke(this, _item); } } + + public async Task HandleColumnRearranged(GridHeaderComponent gridHeaderComponent) + { + if (Payload == ColumnOrderValue.Null) + return; + + var payload = Payload; + Payload = ColumnOrderValue.Null; + if (gridHeaderComponent.Column.Name == payload.ColumnName) + return; + + var source = Grid.Columns.FirstOrDefault(c => c.Name == payload.ColumnName); + if (source is null) + return; + + var updated = await Grid.InsertColumn(gridHeaderComponent.Column, source); + if (!updated) + return; + + _shouldRender = true; + StateHasChanged(); + } public async Task ExcelHandler() { diff --git a/GridBlazor/Pages/GridHeaderComponent.razor b/GridBlazor/Pages/GridHeaderComponent.razor index 6dea32bc..ddbf6323 100644 --- a/GridBlazor/Pages/GridHeaderComponent.razor +++ b/GridBlazor/Pages/GridHeaderComponent.razor @@ -3,8 +3,22 @@ @typeparam T - +
+ @if (GridComponent.Grid.RearrangeColumnEnabled + && !string.IsNullOrEmpty(_dropClass)) + { +
+ + + +
+ } @if (Column.HeaderCheckbox) {
@@ -19,7 +33,7 @@ }
} - @if (Column.ParentGrid.ExtSortingEnabled) + @if (Column.ParentGrid.ExtSortingEnabled || GridComponent.Grid.RearrangeColumnEnabled) {
@if (Column.SortEnabled) diff --git a/GridBlazor/Pages/GridHeaderComponent.razor.cs b/GridBlazor/Pages/GridHeaderComponent.razor.cs index ae51d0df..d7eb5067 100644 --- a/GridBlazor/Pages/GridHeaderComponent.razor.cs +++ b/GridBlazor/Pages/GridHeaderComponent.razor.cs @@ -8,6 +8,7 @@ using GridShared.Sorting; using GridShared.Utility; using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; using Microsoft.Extensions.Primitives; using System; using System.Collections.Generic; @@ -36,6 +37,8 @@ public partial class GridHeaderComponent private bool? _allChecked = null; private bool _showAllChecked = false; + protected string _dropClass = ""; + protected string _cssStyles; protected string _cssClass; protected string _cssFilterClass; @@ -276,6 +279,37 @@ protected void HandleDragStart() _shouldRender = true; } + protected void HandleDragEnter() + { + if (!GridComponent.Grid.RearrangeColumnEnabled) + return; + + _dropClass = "grid-header-drag-over"; + _shouldRender = true; + Console.WriteLine("DragEnter"); + } + + protected void HandleDragLeave() + { + if (!GridComponent.Grid.RearrangeColumnEnabled) + return; + + _dropClass = ""; + _shouldRender = true; + Console.WriteLine("DragLeave"); + } + + protected async Task HandleDrop() + { + if (!GridComponent.Grid.RearrangeColumnEnabled) + return; + + _dropClass = ""; + _shouldRender = true; + + await GridComponent.HandleColumnRearranged(this); + } + private void HideFilter() { if (_isFilterVisible) diff --git a/GridBlazor/wwwroot/css/gridblazor.css b/GridBlazor/wwwroot/css/gridblazor.css index 36fdf4a2..86e3ca11 100644 --- a/GridBlazor/wwwroot/css/gridblazor.css +++ b/GridBlazor/wwwroot/css/gridblazor.css @@ -18,7 +18,21 @@ table.grid-table { margin: 0; } table.grid-table .grid-header > .grid-header-group > .grid-header-title > button { font-weight: bold; color: #007bff; background-color: white; border: none } table.grid-table .grid-header > .grid-header-group > .grid-header-title > button:hover { color: #0056b3; text-decoration: underline } table.grid-table .grid-header > .grid-header-group > .grid-header-title > button:focus { outline: 0; } - + + /* Grid header drag over */ + table.grid-table .grid-header.grid-header-drag-over { + border: 1px solid lightblue; + border-radius: 16px; + } + + table.grid-table .grid-header.grid-header-drag-over * { + pointer-events: none; + } + + table.grid-table .grid-header > .grid-header-group .grid-column-rearrange-insert-placeholder { + margin-left: -12px; + } + /* Grid body */ table.grid-table tr.grid-row-selected td { background: #4888C2 !important; color: white; } table.grid-table tr.grid-row-selected a { color: white; } @@ -201,10 +215,20 @@ div[dir="rtl"] button.grid-button-component { margin-left: 5px; margin-right: 0; .grid-header-checkbox-input { opacity: 0; } .grid-header-checkbox-input ~ .null-checkbox::before { position: absolute; top: 1rem; display: block; width: .9rem; height: .9rem; pointer-events: none; content: ""; border: 0.5px solid #666; border-radius: 3px; background-color: #ccc; } -div[dir="rtl"] label { display: flex; } +div[dir="rtl"] label { + display: flex; +} /* The switch - the box around the slider */ -.grid-switch { position: relative; display: inline-block; width: 50px; height: 24px; margin-left: 16px; margin-right: 16px; margin-bottom: -8px; } +.grid-switch { + position: relative; + display: inline-block; + width: 50px; + height: 24px; + margin-left: 16px; + margin-right: 16px; + margin-bottom: -8px; +} /* Hide default HTML checkbox */ .grid-switch input { display: none; } diff --git a/GridBlazor/wwwroot/css/gridblazor.min.css b/GridBlazor/wwwroot/css/gridblazor.min.css index 84faad6b..e03a2b06 100644 --- a/GridBlazor/wwwroot/css/gridblazor.min.css +++ b/GridBlazor/wwwroot/css/gridblazor.min.css @@ -1 +1 @@ -.grid-mvc:focus{outline:none}.grid-table-wrap{overflow:auto}.grid-table-head{overflow:hidden}.grid-table-body{overflow:auto}.grid-error{color:#f00}table.grid-table{margin:0}table.grid-table .grid-wrap{padding:0;position:relative}table.grid-table .grid-empty-text{color:#666}table.grid-table .grid-header{position:relative;vertical-align:top}table.grid-table .grid-header .sorted-asc .grid-sort-arrow::after{content:" ↑"}table.grid-table .grid-header .sorted-desc .grid-sort-arrow::after{content:" ↓"}table.grid-table .grid-header>.grid-header-group{display:flex}table.grid-table .grid-header>.grid-header-group>.grid-header-title{width:100%;margin-right:15px;white-space:nowrap}div[dir="rtl"] table.grid-table .grid-header>.grid-header-group>.grid-header-title{margin-left:15px;margin-right:0}table.grid-table .grid-header>.grid-header-group>.grid-header-title>button{font-weight:bold;color:#007bff;background-color:#fff;border:none}table.grid-table .grid-header>.grid-header-group>.grid-header-title>button:hover{color:#0056b3;text-decoration:underline}table.grid-table .grid-header>.grid-header-group>.grid-header-title>button:focus{outline:0}table.grid-table tr.grid-row-selected td{background:#4888c2 !important;color:#fff}table.grid-table tr.grid-row-selected a{color:#fff}table.striped>tbody>tr.grid-row:nth-of-type(odd){background-color:#f9f9f9}table.substriped>tbody>tr.grid-row:nth-of-type(4n+1){background-color:#f9f9f9}table.grid-table tr.grid-totals-row td{border-color:#aaa;background:#eee !important}input.grid-filter-input{padding:4px}table.grid-table .grid-filter{position:relative;margin-top:2px;margin-bottom:10px;float:right;width:10px}table.grid-table .grid-filter-btn{cursor:pointer;display:block;width:10px;height:12px;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJFJREFUKFNjkJSU/E8MZvj//78DMRhkoj+6bizYH2SiiIeHx2FjY+P/2DBIDqSGAQSOHTtmYWZm9hldEUgMJAdWBAJAHSzt7e056ApBYiA5qDIIAAoIhIaGroYpArFBYlBpVLB3715DmEIQGyqMCUDWwBRiWIkOYAqhXNwApMjX13c7lIsbgBQBrdWAcqGAgQEAdOGTrvsYKXIAAAAASUVORK5CYII=') no-repeat}table.grid-table .grid-filter-btn.filtered{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJNJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2ZhZmb2GV0RSAwkB1YEAkAdLO3t7TnoCkFiIDmoMggACgiEhoauhikCsUFiUGlUsHfvXkOYQhAbKowJQNbAFGJYiQ5gCqFc3ACkyNfXdzuUixuAFAGt1YByoYCBAQAUDanUpFB4UQAAAABJRU5ErkJggg==') no-repeat}table.grid-table .grid-filter-buttons{padding:0}table.grid-table .grid-filter-buttons button{margin-right:5px}div[dir="rtl"] table.grid-table .grid-filter-buttons button{margin-right:0;margin-left:5px}table.grid-table .grid-filter-buttons button:last-child{margin-right:0}div[dir="rtl"] table.grid-table .grid-filter-buttons button:last-child{margin-left:0}table.grid-table .grid-filter-datepicker table td{padding:1px!important}table.grid-table .grid-filter-datepicker .ui-datepicker{width:auto}table.grid-table .grid-dropdown-inner ul.menu-list li a.grid-filter-clear{white-space:nowrap;padding-left:23px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAARpJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2axOC/396GinP/O+vpwRVbGxl92+vluXm1kuASsEKiD5VB99aG3eTH/HxjL/A/RUPsfrqb6f7e21uutlhbRYEUwAFQskOLmun2+lND/0xxM/7dycXzd6OxoCpVGBduWLjXv4+f/v5WF+f9RbtYvfeysqlApBKhhY2Hcxsy0+xAL038nbe3/m8W4ss/Jcx2GSiPAal6uvGtczP9TFOXBHgGJ7RHlmLGOjy0UrAAGzgT7rn7urP/P3NDgv6+v73aQWAMzM+dqTtbJYAUwsNzeyuhImE8GSBHQYxpQYYYJQCcxMDAwAAB7/bt5uWh9FAAAAABJRU5ErkJggg==');background-position:3px center;background-repeat:no-repeat}div[dir="rtl"] table.grid-table .grid-dropdown-inner ul.menu-list li a.grid-filter-clear{padding-left:0;padding-right:23px;background-position:right}table.grid-table .grid-filter-choose.choose-selected{background-color:#fff!important;cursor:default;color:#999}table.grid-table .grid-popup-additional{padding:3px 0 0 0}.grid-tooltip{position:relative;margin-top:0}.grid-tooltip-dropdown{font-weight:normal;left:-102px;top:16px!important;margin-top:-5px;min-width:300px}div[dir="rtl"] .grid-tooltip-dropdown{left:0;right:-102px}.grid-dropdown{font-weight:normal;left:-102px;top:16px!important;min-width:360px}div[dir="rtl"] .grid-dropdown{left:-258px}.grid-dropdown-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAl0lEQVQoU42PMQuFMAyE6xN5gpOjjsIb/P9/o3O3zh27dY25kIPq8DBwmLT35WoQkUEVOmGec84CaW2q7+N+AdCD6M9SisQYTei1jsfyCeCu+vjFVGs1AN++94DRfUOfuNLoKUiyRC5y2F5I8NdaM4P/l0EswvBorQTnfxBhLMRih+2pklIy+eEtjQPu6MNZwIBNbwteMBd5X4ZGHcwL3QAAAABJRU5ErkJggg==") no-repeat;height:8px;left:99px;position:absolute;top:-8px;width:14px}div[dir="rtl"] .grid-dropdown-arrow{left:255px}.grid-dropdown-inner{padding:5px 7px}.grid-dropdown ul.menu-list{list-style-type:none;margin:3px 0 0 0;padding:0}.grid-dropdown ul.menu-list li a{text-decoration:none;background-position:6px center;background-repeat:no-repeat;display:flex;padding:4px 5px}.grid-dropdown ul.menu-list li a:hover{background-color:#eee;text-decoration:none}.grid-dropdown input.grid-filter-input{width:100%}.grid-dropdown select.grid-filter-type{width:100%}.grid-dropdown input.grid-filter-list{margin:5px 10px 5px 20px}div[dir="rtl"] .grid-dropdown input.grid-filter-list{margin:5px 20px 5px 10px}.grid-footer{display:inline-flex;width:100%;justify-content:space-between}.grid-itemscount{display:inline-flex;margin-top:10px}.grid-itemscount-label,.grid-itemscount-caption{margin-left:5px;margin-right:5px}.grid-pager{margin-top:20px}.grid-pager ul{padding:0}.page-link:focus{box-shadow:none}.page-item:first-child .page-link{border-radius:4px 0 0 4px}div[dir="rtl"] .page-item:first-child .page-link{border-radius:0 4px 4px 0}.page-item:last-child .page-link{border-radius:0 4px 4px 0}div[dir="rtl"] .page-item:last-child .page-link{border-radius:4px 0 0 4px}.subgrid-caret{cursor:pointer;user-select:none}.subgrid-caret::after{content:"▷"}div[dir="rtl"] .subgrid-caret::after{content:"◁"}.subgrid-caret-down{cursor:pointer;user-select:none}.subgrid-caret-down::after{content:"◢"}div[dir="rtl"] .subgrid-caret-down::after{content:"◣"}.grid-button{background-color:#333}.grid-button:hover{border-color:#666}.grid-buttons{display:inline-flex;width:100%;justify-content:space-between}.grid-header-buttons{display:inline-flex;width:100%}.grid-search{margin-top:10px;margin-bottom:10px}button.grid-button{height:34px;color:#333;border:1px solid #aaa;border-radius:4px}button.grid-search-apply{padding-left:20px;border-radius:4px 0 0 4px;background-repeat:no-repeat,no-repeat;background-position-x:8px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-search-apply{border-radius:0 4px 4px 0}button.grid-search-clear{padding-left:22px;border-radius:0 4px 4px 0;background-repeat:no-repeat,no-repeat;background-position-x:8px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-search-clear{border-radius:4px 0 0 4px}input.grid-search-input{height:34px;border-color:#ccc}.grid-change-page-size{display:inline-flex;width:250px;margin:10px 20px}.grid-change-page-size label{margin:6px 10px}.grid-change-page-size-input{display:inline;width:60px;margin-left:5px;margin-right:5px}.grid-extsort-droppable{height:42px;width:100%;margin-bottom:10px;border:1px solid #ccc;border-radius:4px}.grid-extsort-column{height:28px;display:inline-block;margin:6px 0 6px 20px;padding:5px;background-color:#efefef;border:1px solid #ccc;border-radius:4px}div[dir="rtl"] .grid-extsort-column{margin:6px 20px 6px 0}.grid-extsort-column .sorted-asc .grid-sort-arrow::after{content:" ↑"}.grid-extsort-column .sorted-desc .grid-sort-arrow::after{content:" ↓"}.grid-extsort-column a{font-weight:700}.grid-extsort-column>a{margin-left:10px;margin-right:5px}div[dir="rtl"] .grid-extsort-column>a{margin-left:5px;margin-right:10px}.grid-extsort-column button{border:none;padding:0;font-size:14px;font-weight:700}.grid-extsort-column>button{margin-left:10px;margin-right:5px}div[dir="rtl"] .grid-extsort-column>button{margin-left:5px;margin-right:10px}.grid-extsort-empty{font-size:14px;height:20px;margin:10px;color:#aaa}.grid-group-caret{margin-right:10px;cursor:pointer;user-select:none}div[dir="rtl"] .grid-group-caret{margin-left:10px;margin-right:0}.grid-group-caret::after{content:"▷"}.grid-group-caret-down{margin-right:10px;cursor:pointer;user-select:none}div[dir="rtl"] .grid-group-caret-down{margin-left:10px;margin-right:0}.grid-group-caret-down::after{content:"◢"}.grid-group-tab{margin-left:20px}div[dir="rtl"] .grid-group-tab{margin-left:0;margin-right:20px}.grid-group-row{background:#eee}.grid-crud{margin-top:10px;margin-bottom:10px;margin-left:0;margin-right:5px}div[dir="rtl"] .grid-crud{margin-left:5px;margin-right:0}.grid-crud:first-child{margin-left:0}div[dir="rtl"] .grid-crud:first-child{margin-right:0}button.grid-button-add{width:32px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:7px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-add{margin-left:5px;margin-right:0}button.grid-button-view{width:30px;height:30px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:7px,0;background-position-y:7px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-view{margin-left:5px;margin-right:0}button.grid-button-edit{width:30px;height:30px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:7px,0;background-position-y:7px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-edit{margin-left:5px;margin-right:0}button.grid-button-delete{width:30px;height:30px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:7px,0;background-position-y:7px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-delete{margin-left:5px;margin-right:0}button.grid-button-header-view{width:34px;height:34px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:8px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-header-view{margin-left:5px;margin-right:0}button.grid-button-header-edit{width:34px;height:34px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:8px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-header-edit{margin-left:5px;margin-right:0}button.grid-button-header-delete{width:34px;height:34px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:9px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-header-delete{margin-left:5px;margin-right:0}button.grid-button-label-add{height:34px;margin-right:5px}div[dir="rtl"] button.grid-button-label-add{margin-left:5px;margin-right:0}button.grid-button-label-view{height:30px;margin-right:5px}div[dir="rtl"] button.grid-button-label-view{margin-left:5px;margin-right:0}button.grid-button-label-edit{height:30px;margin-right:5px}div[dir="rtl"] button.grid-button-label-edit{margin-left:5px;margin-right:0}button.grid-button-label-delete{height:30px;margin-right:5px}div[dir="rtl"] button.grid-button-label-delete{margin-left:5px;margin-right:0}button.grid-button-header-label-view{height:34px;margin-right:5px}div[dir="rtl"] button.grid-button-header-label-view{margin-left:5px;margin-right:0}button.grid-button-header-label-edit{height:34px;margin-right:5px}div[dir="rtl"] button.grid-button-header-label-edit{margin-left:5px;margin-right:0}button.grid-button-header-label-delete{height:34px;margin-right:5px}div[dir="rtl"] button.grid-button-header-label-delete{margin-left:5px;margin-right:0}td.grid-button-cell{padding:5px 0 5px 0;width:34px}.input-validation-error{border:1px solid #f00}.field-validation-error{color:#f00}button.grid-button-input-file{border-radius:0 4px 4px 0;background-image:linear-gradient(#ddd,#eee);font-weight:bold}div[dir="rtl"] button.grid-button-input-file{border-radius:4px 0 0 4px}.grid-crud-header{font-size:2rem;margin:1rem 0 1rem 0}.grid-all-filters-clear{margin-top:10px;margin-bottom:10px;margin-left:15px;margin-right:5px}.grid-all-filters-clear:first-child{margin-left:0}div[dir="rtl"] .grid-all-filters-clear:first-child{margin-right:0}button.grid-button-all-filters-clear{width:32px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:10px,0;background-position-y:10px,0;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAARpJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2axOC/396GinP/O+vpwRVbGxl92+vluXm1kuASsEKiD5VB99aG3eTH/HxjL/A/RUPsfrqb6f7e21uutlhbRYEUwAFQskOLmun2+lND/0xxM/7dycXzd6OxoCpVGBduWLjXv4+f/v5WF+f9RbtYvfeysqlApBKhhY2Hcxsy0+xAL038nbe3/m8W4ss/Jcx2GSiPAal6uvGtczP9TFOXBHgGJ7RHlmLGOjy0UrAAGzgT7rn7urP/P3NDgv6+v73aQWAMzM+dqTtbJYAUwsNzeyuhImE8GSBHQYxpQYYYJQCcxMDAwAAB7/bt5uWh9FAAAAABJRU5ErkJggg=='),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-all-filters-clear{margin-left:5px;margin-right:0}.grid-excel{margin-top:10px;margin-bottom:10px;margin-left:15px;margin-right:5px}.grid-excel:first-child{margin-left:0}div[dir="rtl"] .grid-excel:first-child{margin-right:0}button.grid-button-excel{width:32px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:7px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-excel{margin-left:5px;margin-right:0}.grid-button-components{margin-top:10px;margin-bottom:10px;margin-left:0;margin-right:5px}div[dir="rtl"] .grid-button-components{margin-left:5px;margin-right:0}.grid-button-components:first-child{margin-left:0}div[dir="rtl"] .grid-button-components:first-child{margin-right:0}button.grid-button-component{min-width:32px;margin-right:5px;background:-o-linear-gradient(top,#ddd 0%,#eee 100%);background:-moz-linear-gradient(top,#ddd 0%,#eee 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ddd),color-stop(1,#eee))}div[dir="rtl"] button.grid-button-component{margin-left:5px;margin-right:0}.grid-header-checkbox-input{opacity:0}.grid-header-checkbox-input~.null-checkbox::before{position:absolute;top:1rem;display:block;width:.9rem;height:.9rem;pointer-events:none;content:"";border:.5px solid #666;border-radius:3px;background-color:#ccc}div[dir="rtl"] label{display:flex}.grid-switch{position:relative;display:inline-block;width:50px;height:24px;margin-left:16px;margin-right:16px;margin-bottom:-8px}.grid-switch input{display:none}.grid-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.grid-slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.grid-slider{background-color:#ccc}input:focus+.grid-slider{box-shadow:0 0 1px #ccc}input:checked+.grid-slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}.grid-slider.round{border-radius:24px}.grid-slider.round:before{border-radius:50%}.grid-spinner{margin:170px auto;border:6px solid #f3f3f3;border-top:6px solid #455a64;border-radius:50%;width:60px;height:60px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}} \ No newline at end of file +.grid-mvc:focus{outline:none}.grid-table-wrap{overflow:auto}.grid-table-head{overflow:hidden}.grid-table-body{overflow:auto}.grid-error{color:#f00}table.grid-table{margin:0}table.grid-table .grid-wrap{padding:0;position:relative}table.grid-table .grid-empty-text{color:#666}table.grid-table .grid-header{position:relative;vertical-align:top}table.grid-table .grid-header .sorted-asc .grid-sort-arrow::after{content:" ↑"}table.grid-table .grid-header .sorted-desc .grid-sort-arrow::after{content:" ↓"}table.grid-table .grid-header>.grid-header-group{display:flex}table.grid-table .grid-header>.grid-header-group>.grid-header-title{width:100%;margin-right:15px;white-space:nowrap}div[dir="rtl"] table.grid-table .grid-header>.grid-header-group>.grid-header-title{margin-left:15px;margin-right:0}table.grid-table .grid-header>.grid-header-group>.grid-header-title>button{font-weight:bold;color:#007bff;background-color:#fff;border:none}table.grid-table .grid-header>.grid-header-group>.grid-header-title>button:hover{color:#0056b3;text-decoration:underline}table.grid-table .grid-header>.grid-header-group>.grid-header-title>button:focus{outline:0}table.grid-table .grid-header.grid-header-drag-over{border:1px solid lightblue;border-radius:16px}table.grid-table .grid-header.grid-header-drag-over *{pointer-events:none}table.grid-table .grid-header > .grid-header-group .grid-column-rearrange-insert-placeholder{margin-left:-12px}table.grid-table tr.grid-row-selected td{background:#4888c2 !important;color:#fff}table.grid-table tr.grid-row-selected a{color:#fff}table.striped>tbody>tr.grid-row:nth-of-type(odd){background-color:#f9f9f9}table.substriped>tbody>tr.grid-row:nth-of-type(4n+1){background-color:#f9f9f9}table.grid-table tr.grid-totals-row td{border-color:#aaa;background:#eee !important}input.grid-filter-input{padding:4px}table.grid-table .grid-filter{position:relative;margin-top:2px;margin-bottom:10px;float:right;width:10px}table.grid-table .grid-filter-btn{cursor:pointer;display:block;width:10px;height:12px;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJFJREFUKFNjkJSU/E8MZvj//78DMRhkoj+6bizYH2SiiIeHx2FjY+P/2DBIDqSGAQSOHTtmYWZm9hldEUgMJAdWBAJAHSzt7e056ApBYiA5qDIIAAoIhIaGroYpArFBYlBpVLB3715DmEIQGyqMCUDWwBRiWIkOYAqhXNwApMjX13c7lIsbgBQBrdWAcqGAgQEAdOGTrvsYKXIAAAAASUVORK5CYII=') no-repeat}table.grid-table .grid-filter-btn.filtered{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJNJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2ZhZmb2GV0RSAwkB1YEAkAdLO3t7TnoCkFiIDmoMggACgiEhoauhikCsUFiUGlUsHfvXkOYQhAbKowJQNbAFGJYiQ5gCqFc3ACkyNfXdzuUixuAFAGt1YByoYCBAQAUDanUpFB4UQAAAABJRU5ErkJggg==') no-repeat}table.grid-table .grid-filter-buttons{padding:0}table.grid-table .grid-filter-buttons button{margin-right:5px}div[dir="rtl"] table.grid-table .grid-filter-buttons button{margin-right:0;margin-left:5px}table.grid-table .grid-filter-buttons button:last-child{margin-right:0}div[dir="rtl"] table.grid-table .grid-filter-buttons button:last-child{margin-left:0}table.grid-table .grid-filter-datepicker table td{padding:1px!important}table.grid-table .grid-filter-datepicker .ui-datepicker{width:auto}table.grid-table .grid-dropdown-inner ul.menu-list li a.grid-filter-clear{white-space:nowrap;padding-left:23px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAARpJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2axOC/396GinP/O+vpwRVbGxl92+vluXm1kuASsEKiD5VB99aG3eTH/HxjL/A/RUPsfrqb6f7e21uutlhbRYEUwAFQskOLmun2+lND/0xxM/7dycXzd6OxoCpVGBduWLjXv4+f/v5WF+f9RbtYvfeysqlApBKhhY2Hcxsy0+xAL038nbe3/m8W4ss/Jcx2GSiPAal6uvGtczP9TFOXBHgGJ7RHlmLGOjy0UrAAGzgT7rn7urP/P3NDgv6+v73aQWAMzM+dqTtbJYAUwsNzeyuhImE8GSBHQYxpQYYYJQCcxMDAwAAB7/bt5uWh9FAAAAABJRU5ErkJggg==');background-position:3px center;background-repeat:no-repeat}div[dir="rtl"] table.grid-table .grid-dropdown-inner ul.menu-list li a.grid-filter-clear{padding-left:0;padding-right:23px;background-position:right}table.grid-table .grid-filter-choose.choose-selected{background-color:#fff!important;cursor:default;color:#999}table.grid-table .grid-popup-additional{padding:3px 0 0 0}.grid-tooltip{position:relative;margin-top:0}.grid-tooltip-dropdown{font-weight:normal;left:-102px;top:16px!important;margin-top:-5px;min-width:300px}div[dir="rtl"] .grid-tooltip-dropdown{left:0;right:-102px}.grid-dropdown{font-weight:normal;left:-102px;top:16px!important;min-width:360px}div[dir="rtl"] .grid-dropdown{left:-258px}.grid-dropdown-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAl0lEQVQoU42PMQuFMAyE6xN5gpOjjsIb/P9/o3O3zh27dY25kIPq8DBwmLT35WoQkUEVOmGec84CaW2q7+N+AdCD6M9SisQYTei1jsfyCeCu+vjFVGs1AN++94DRfUOfuNLoKUiyRC5y2F5I8NdaM4P/l0EswvBorQTnfxBhLMRih+2pklIy+eEtjQPu6MNZwIBNbwteMBd5X4ZGHcwL3QAAAABJRU5ErkJggg==") no-repeat;height:8px;left:99px;position:absolute;top:-8px;width:14px}div[dir="rtl"] .grid-dropdown-arrow{left:255px}.grid-dropdown-inner{padding:5px 7px}.grid-dropdown ul.menu-list{list-style-type:none;margin:3px 0 0 0;padding:0}.grid-dropdown ul.menu-list li a{text-decoration:none;background-position:6px center;background-repeat:no-repeat;display:flex;padding:4px 5px}.grid-dropdown ul.menu-list li a:hover{background-color:#eee;text-decoration:none}.grid-dropdown input.grid-filter-input{width:100%}.grid-dropdown select.grid-filter-type{width:100%}.grid-dropdown input.grid-filter-list{margin:5px 10px 5px 20px}div[dir="rtl"] .grid-dropdown input.grid-filter-list{margin:5px 20px 5px 10px}.grid-footer{display:inline-flex;width:100%;justify-content:space-between}.grid-itemscount{display:inline-flex;margin-top:10px}.grid-itemscount-label,.grid-itemscount-caption{margin-left:5px;margin-right:5px}.grid-pager{margin-top:20px}.grid-pager ul{padding:0}.page-link:focus{box-shadow:none}.page-item:first-child .page-link{border-radius:4px 0 0 4px}div[dir="rtl"] .page-item:first-child .page-link{border-radius:0 4px 4px 0}.page-item:last-child .page-link{border-radius:0 4px 4px 0}div[dir="rtl"] .page-item:last-child .page-link{border-radius:4px 0 0 4px}.subgrid-caret{cursor:pointer;user-select:none}.subgrid-caret::after{content:"▷"}div[dir="rtl"] .subgrid-caret::after{content:"◁"}.subgrid-caret-down{cursor:pointer;user-select:none}.subgrid-caret-down::after{content:"◢"}div[dir="rtl"] .subgrid-caret-down::after{content:"◣"}.grid-button{background-color:#333}.grid-button:hover{border-color:#666}.grid-buttons{display:inline-flex;width:100%;justify-content:space-between}.grid-header-buttons{display:inline-flex;width:100%}.grid-search{margin-top:10px;margin-bottom:10px}button.grid-button{height:34px;color:#333;border:1px solid #aaa;border-radius:4px}button.grid-search-apply{padding-left:20px;border-radius:4px 0 0 4px;background-repeat:no-repeat,no-repeat;background-position-x:8px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-search-apply{border-radius:0 4px 4px 0}button.grid-search-clear{padding-left:22px;border-radius:0 4px 4px 0;background-repeat:no-repeat,no-repeat;background-position-x:8px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-search-clear{border-radius:4px 0 0 4px}input.grid-search-input{height:34px;border-color:#ccc}.grid-change-page-size{display:inline-flex;width:250px;margin:10px 20px}.grid-change-page-size label{margin:6px 10px}.grid-change-page-size-input{display:inline;width:60px;margin-left:5px;margin-right:5px}.grid-extsort-droppable{height:42px;width:100%;margin-bottom:10px;border:1px solid #ccc;border-radius:4px}.grid-extsort-column{height:28px;display:inline-block;margin:6px 0 6px 20px;padding:5px;background-color:#efefef;border:1px solid #ccc;border-radius:4px}div[dir="rtl"] .grid-extsort-column{margin:6px 20px 6px 0}.grid-extsort-column .sorted-asc .grid-sort-arrow::after{content:" ↑"}.grid-extsort-column .sorted-desc .grid-sort-arrow::after{content:" ↓"}.grid-extsort-column a{font-weight:700}.grid-extsort-column>a{margin-left:10px;margin-right:5px}div[dir="rtl"] .grid-extsort-column>a{margin-left:5px;margin-right:10px}.grid-extsort-column button{border:none;padding:0;font-size:14px;font-weight:700}.grid-extsort-column>button{margin-left:10px;margin-right:5px}div[dir="rtl"] .grid-extsort-column>button{margin-left:5px;margin-right:10px}.grid-extsort-empty{font-size:14px;height:20px;margin:10px;color:#aaa}.grid-group-caret{margin-right:10px;cursor:pointer;user-select:none}div[dir="rtl"] .grid-group-caret{margin-left:10px;margin-right:0}.grid-group-caret::after{content:"▷"}.grid-group-caret-down{margin-right:10px;cursor:pointer;user-select:none}div[dir="rtl"] .grid-group-caret-down{margin-left:10px;margin-right:0}.grid-group-caret-down::after{content:"◢"}.grid-group-tab{margin-left:20px}div[dir="rtl"] .grid-group-tab{margin-left:0;margin-right:20px}.grid-group-row{background:#eee}.grid-crud{margin-top:10px;margin-bottom:10px;margin-left:0;margin-right:5px}div[dir="rtl"] .grid-crud{margin-left:5px;margin-right:0}.grid-crud:first-child{margin-left:0}div[dir="rtl"] .grid-crud:first-child{margin-right:0}button.grid-button-add{width:32px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:7px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-add{margin-left:5px;margin-right:0}button.grid-button-view{width:30px;height:30px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:7px,0;background-position-y:7px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-view{margin-left:5px;margin-right:0}button.grid-button-edit{width:30px;height:30px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:7px,0;background-position-y:7px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-edit{margin-left:5px;margin-right:0}button.grid-button-delete{width:30px;height:30px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:7px,0;background-position-y:7px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-delete{margin-left:5px;margin-right:0}button.grid-button-header-view{width:34px;height:34px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:8px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-header-view{margin-left:5px;margin-right:0}button.grid-button-header-edit{width:34px;height:34px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:8px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-header-edit{margin-left:5px;margin-right:0}button.grid-button-header-delete{width:34px;height:34px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:9px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-header-delete{margin-left:5px;margin-right:0}button.grid-button-label-add{height:34px;margin-right:5px}div[dir="rtl"] button.grid-button-label-add{margin-left:5px;margin-right:0}button.grid-button-label-view{height:30px;margin-right:5px}div[dir="rtl"] button.grid-button-label-view{margin-left:5px;margin-right:0}button.grid-button-label-edit{height:30px;margin-right:5px}div[dir="rtl"] button.grid-button-label-edit{margin-left:5px;margin-right:0}button.grid-button-label-delete{height:30px;margin-right:5px}div[dir="rtl"] button.grid-button-label-delete{margin-left:5px;margin-right:0}button.grid-button-header-label-view{height:34px;margin-right:5px}div[dir="rtl"] button.grid-button-header-label-view{margin-left:5px;margin-right:0}button.grid-button-header-label-edit{height:34px;margin-right:5px}div[dir="rtl"] button.grid-button-header-label-edit{margin-left:5px;margin-right:0}button.grid-button-header-label-delete{height:34px;margin-right:5px}div[dir="rtl"] button.grid-button-header-label-delete{margin-left:5px;margin-right:0}td.grid-button-cell{padding:5px 0 5px 0;width:34px}.input-validation-error{border:1px solid #f00}.field-validation-error{color:#f00}button.grid-button-input-file{border-radius:0 4px 4px 0;background-image:linear-gradient(#ddd,#eee);font-weight:bold}div[dir="rtl"] button.grid-button-input-file{border-radius:4px 0 0 4px}.grid-crud-header{font-size:2rem;margin:1rem 0 1rem 0}.grid-all-filters-clear{margin-top:10px;margin-bottom:10px;margin-left:15px;margin-right:5px}.grid-all-filters-clear:first-child{margin-left:0}div[dir="rtl"] .grid-all-filters-clear:first-child{margin-right:0}button.grid-button-all-filters-clear{width:32px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:10px,0;background-position-y:10px,0;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAARpJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2axOC/396GinP/O+vpwRVbGxl92+vluXm1kuASsEKiD5VB99aG3eTH/HxjL/A/RUPsfrqb6f7e21uutlhbRYEUwAFQskOLmun2+lND/0xxM/7dycXzd6OxoCpVGBduWLjXv4+f/v5WF+f9RbtYvfeysqlApBKhhY2Hcxsy0+xAL038nbe3/m8W4ss/Jcx2GSiPAal6uvGtczP9TFOXBHgGJ7RHlmLGOjy0UrAAGzgT7rn7urP/P3NDgv6+v73aQWAMzM+dqTtbJYAUwsNzeyuhImE8GSBHQYxpQYYYJQCcxMDAwAAB7/bt5uWh9FAAAAABJRU5ErkJggg=='),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-all-filters-clear{margin-left:5px;margin-right:0}.grid-excel{margin-top:10px;margin-bottom:10px;margin-left:15px;margin-right:5px}.grid-excel:first-child{margin-left:0}div[dir="rtl"] .grid-excel:first-child{margin-right:0}button.grid-button-excel{width:32px;margin-right:5px;background-repeat:no-repeat,no-repeat;background-position-x:7px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,'),linear-gradient(#ddd,#eee)}div[dir="rtl"] button.grid-button-excel{margin-left:5px;margin-right:0}.grid-button-components{margin-top:10px;margin-bottom:10px;margin-left:0;margin-right:5px}div[dir="rtl"] .grid-button-components{margin-left:5px;margin-right:0}.grid-button-components:first-child{margin-left:0}div[dir="rtl"] .grid-button-components:first-child{margin-right:0}button.grid-button-component{min-width:32px;margin-right:5px;background:-o-linear-gradient(top,#ddd 0%,#eee 100%);background:-moz-linear-gradient(top,#ddd 0%,#eee 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ddd),color-stop(1,#eee))}div[dir="rtl"] button.grid-button-component{margin-left:5px;margin-right:0}.grid-header-checkbox-input{opacity:0}.grid-header-checkbox-input~.null-checkbox::before{position:absolute;top:1rem;display:block;width:.9rem;height:.9rem;pointer-events:none;content:"";border:.5px solid #666;border-radius:3px;background-color:#ccc}div[dir="rtl"] label{display:flex}.grid-switch{position:relative;display:inline-block;width:50px;height:24px;margin-left:16px;margin-right:16px;margin-bottom:-8px}.grid-switch input{display:none}.grid-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.grid-slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.grid-slider{background-color:#ccc}input:focus+.grid-slider{box-shadow:0 0 1px #ccc}input:checked+.grid-slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}.grid-slider.round{border-radius:24px}.grid-slider.round:before{border-radius:50%}.grid-spinner{margin:170px auto;border:6px solid #f3f3f3;border-top:6px solid #455a64;border-radius:50%;width:60px;height:60px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}} \ No newline at end of file diff --git a/GridBlazorClientSide.Client/ColumnCollections/ColumnCollections.cs b/GridBlazorClientSide.Client/ColumnCollections/ColumnCollections.cs index 3c42707d..4b1161c9 100644 --- a/GridBlazorClientSide.Client/ColumnCollections/ColumnCollections.cs +++ b/GridBlazorClientSide.Client/ColumnCollections/ColumnCollections.cs @@ -136,6 +136,38 @@ public class ColumnCollections .RenderValueAs(o => o.Customer.IsVip ? Strings.BoolTrueLabel : Strings.BoolFalseLabel); }; + public static Action> OrderColumnsRearrangeable = c => + { + /* Adding "OrderID" column: */ + c.Add(o => o.OrderID).Titled(SharedResource.Number).SetWidth(100); + + /* Adding "OrderDate" column: */ + c.Add(o => o.OrderDate, "OrderCustomDate").Titled(SharedResource.OrderCustomDate) + .SetWidth(120).RenderComponentAs(); + + /* Adding "CompanyName" column: */ + c.Add(o => o.Customer.CompanyName).Titled(SharedResource.CompanyName) + .ThenSortBy(o => o.ShipVia) + .ThenSortByDescending(o => o.Freight) + .SetWidth(250); + + /* Adding "ContactName" column: */ + c.Add(o => o.Customer.ContactName).Titled(SharedResource.ContactName); + + /* Adding "ShipVia" column: */ + c.Add(o => o.ShipVia).Titled("Via"); + + /* Adding "Freight" column: */ + c.Add(o => o.Freight) + .Titled(SharedResource.Freight) + .SetWidth(150) + .Format("{0:F}"); + + /* Adding "Vip customer" column: */ + c.Add(o => o.Customer.IsVip).Titled(SharedResource.IsVip).SetWidth(90).Css("hidden-xs") //hide on phones + .RenderValueAs(o => o.Customer.IsVip ? Strings.BoolTrueLabel : Strings.BoolFalseLabel); + }; + public static Action, IList>, object> OrderColumnsWithEdit = (c, functions, obj) => { diff --git a/GridBlazorClientSide.Client/Pages/RearrangeableColumns.razor b/GridBlazorClientSide.Client/Pages/RearrangeableColumns.razor new file mode 100644 index 00000000..ba39c249 --- /dev/null +++ b/GridBlazorClientSide.Client/Pages/RearrangeableColumns.razor @@ -0,0 +1,58 @@ +@page "/rearrangeable" +@using GridBlazorClientSide.Client.ColumnCollections +@using GridBlazorClientSide.Shared.Models +@using Microsoft.Extensions.Primitives +@using System.Globalization +@using System.Threading.Tasks +@inject NavigationManager NavigationManager +@inject HttpClient HttpClient + +

Rearrangeable Grid

+ +

+ This page contains a grid with grid clomuns rearrange. Column titles can be dragged and dropped on each other to change order. +

+ +

+ This component demonstrates a GridBlazor client-side grid. For more information, please see: https://github.com/gustavnavar/Grid.Blazor +

+ +@if (_task.IsCompleted) +{ +
+
+ +
+
+} +else +{ +

Loading...

+} + +@code +{ + private CGrid _grid; + private Task _task; + + protected override async Task OnParametersSetAsync() + { + var locale = CultureInfo.CurrentCulture; + + var query = new QueryDictionary(); + string url = NavigationManager.BaseUri + "api/SampleData/GetOrdersGridRearrangeableColumns"; + var client = new GridClient(HttpClient, url, query, false, "ordersGrid", + ColumnCollections.OrderColumnsRearrangeable, locale) + .Sortable() + .Filterable() + .SetStriped(true) + .WithMultipleFilters() + .WithGridItemsCount() + .RearrangeableColumns(true); + + _grid = client.Grid; + // Set new items to grid + _task = client.UpdateGrid(); + await _task; + } +} diff --git a/GridBlazorClientSide.Client/Shared/NavMenu.razor b/GridBlazorClientSide.Client/Shared/NavMenu.razor index 070da535..b76c51ec 100644 --- a/GridBlazorClientSide.Client/Shared/NavMenu.razor +++ b/GridBlazorClientSide.Client/Shared/NavMenu.razor @@ -47,6 +47,11 @@ Groupable +