From 687d71ef5fb838893fb3f4475d4f0df717aa2683 Mon Sep 17 00:00:00 2001
From: rgentry09 <ryangentry.work@gmail.com>
Date: Thu, 28 May 2020 00:38:13 +0200
Subject: [PATCH] CRUD validation messages at field level
 (https://github.com/gustavnavar/Grid.Blazor/issues/94)

---
 GridBlazor/GridBlazor.csproj                  |  2 +-
 GridBlazor/Pages/GridCreateComponent.razor    | 27 ++++----
 GridBlazor/Pages/GridCreateComponent.razor.cs |  3 +
 GridBlazor/Pages/GridUpdateComponent.razor    | 27 ++++----
 GridBlazor/Pages/GridUpdateComponent.razor.cs |  3 +
 GridBlazor/wwwroot/css/gridblazor.css         |  2 +
 GridBlazor/wwwroot/css/gridblazor.min.css     |  2 +-
 .../GridBlazorClientSide.Client.csproj        |  3 +-
 GridBlazorClientSide.Client/OrderValidator.cs | 14 +++++
 GridBlazorClientSide.Client/Pages/Crud.razor  | 62 ++++++++++++++++++-
 .../GridBlazorOData.Client.csproj             |  3 +-
 GridBlazorOData.Client/OrderValidator.cs      | 14 +++++
 GridBlazorOData.Client/Pages/Crud.razor       | 62 ++++++++++++++++++-
 .../GridBlazorServerSide.csproj               |  2 +-
 GridBlazorServerSide/Models/OrderValidator.cs |  1 +
 GridBlazorServerSide/Pages/Crud.razor         | 12 +++-
 GridMvc/Resources/css/gridmvc.css             |  2 +
 GridMvc/Resources/css/gridmvc.min.css         |  2 +-
 docs/blazor_client/Events.md                  | 20 ++++--
 docs/blazor_odata/Events.md                   | 18 +++++-
 docs/blazor_server/Events.md                  | 13 +++-
 docs/dotnetcore_blazor/Events.md              | 13 +++-
 22 files changed, 262 insertions(+), 45 deletions(-)
 create mode 100644 GridBlazorClientSide.Client/OrderValidator.cs
 create mode 100644 GridBlazorOData.Client/OrderValidator.cs

diff --git a/GridBlazor/GridBlazor.csproj b/GridBlazor/GridBlazor.csproj
index 7ba8ad0a..22713404 100644
--- a/GridBlazor/GridBlazor.csproj
+++ b/GridBlazor/GridBlazor.csproj
@@ -6,7 +6,7 @@
     <LangVersion>8.0</LangVersion>
     <GenerateEmbeddedFilesManifest>True</GenerateEmbeddedFilesManifest>
     <EnableDefaultEmbeddedResourceItems>False</EnableDefaultEmbeddedResourceItems>
-    <Version>1.6.5</Version>
+    <Version>1.6.6</Version>
     <Title>GridBlazor</Title>
     <Description>Grid components for Blazor</Description>
     <Summary>Grid components for Blazor</Summary>
diff --git a/GridBlazor/Pages/GridCreateComponent.razor b/GridBlazor/Pages/GridCreateComponent.razor
index 94716015..cebee5fe 100644
--- a/GridBlazor/Pages/GridCreateComponent.razor
+++ b/GridBlazor/Pages/GridCreateComponent.razor
@@ -58,7 +58,7 @@
                             }
                             else if (type == typeof(string) && ((IGridColumn<T>)column).InputType == InputType.TextArea)
                             {
-                                <textarea id="@column.FieldName" name="@column.FieldName" class="form-control" rows="5" value="@column.GetFormatedValue(value)" @onchange="(e) => ChangeValue(e, column)" />
+                                <textarea id="@column.FieldName" name="@column.FieldName" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" rows="5" value="@column.GetFormatedValue(value)" @onchange="(e) => ChangeValue(e, column)" />
                             }
                             else if (type == typeof(DateTime) || type == typeof(System.DateTimeOffset))
                             {
@@ -67,60 +67,63 @@
                                 {
                                     if (GridComponent._isWeekSupported)
                                     {
-                                        <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" placeholder="yyyy-Www" class="form-control" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
+                                        <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" placeholder="yyyy-Www" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
                                     }
                                     else
                                     {
-                                        <input id="@column.FieldName" name="@column.FieldName" type="text" placeholder="yyyy-Www" class="form-control" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
+                                        <input id="@column.FieldName" name="@column.FieldName" type="text" placeholder="yyyy-Www" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
                                     }
                                 }
                                 else if (typeAttr == "month")
                                 {
                                     if (GridComponent._isMonthSupported)
                                     {
-                                        <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" placeholder="yyyy-mm" class="form-control" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
+                                        <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" placeholder="yyyy-mm" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
                                     }
                                     else
                                     {
-                                        <input id="@column.FieldName" name="@column.FieldName" type="text" placeholder="yyyy-mm" class="form-control" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
+                                        <input id="@column.FieldName" name="@column.FieldName" type="text" placeholder="yyyy-mm" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
                                     }
                                 }
                                 else if (typeAttr == "datetime-local")
                                 {
                                     if (GridComponent._isDateTimeLocalSupported)
                                     {
-                                        <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" placeholder="yyyy-mm-dd hh:mm" class="form-control" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
+                                        <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" placeholder="yyyy-mm-dd hh:mm" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
                                     }
                                     else
                                     {
-                                        <input id="@column.FieldName" name="@column.FieldName" type="text" placeholder="yyyy-mm-dd hh:mm" class="form-control" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
+                                        <input id="@column.FieldName" name="@column.FieldName" type="text" placeholder="yyyy-mm-dd hh:mm" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
                                     }
                                 }
                                 else
                                 {
-                                    <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" class="form-control" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
+                                    <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
                                 }
                             }
                             else if (type == typeof(System.TimeSpan))
                             {
                                 string typeAttr = ((IGridColumn<T>)column).InputType == InputType.None ? "time" : ((IGridColumn<T>)column).InputType.ToTypeAttr();
-                                <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" class="form-control" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column)" />
+                                <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column)" />
                             }
                             else if (type == typeof(bool))
                             {
                                 if (value != null && (bool)value == true)
                                 {
-                                    <input id="@column.FieldName" name="@column.FieldName" type="checkbox" class="form-control" checked="checked" value="true" @onchange="(e) => ChangeValue(e, column)" />
+                                    <input id="@column.FieldName" name="@column.FieldName" type="checkbox" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" checked="checked" value="true" @onchange="(e) => ChangeValue(e, column)" />
                                 }
                                 else
                                 {
-                                    <input id="@column.FieldName" name="@column.FieldName" type="checkbox" class="form-control" value="false" @onchange="(e) => ChangeValue(e, column)" />
+                                    <input id="@column.FieldName" name="@column.FieldName" type="checkbox" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="false" @onchange="(e) => ChangeValue(e, column)" />
                                 }
                             }
                             else
                             {
-                                <input id="@column.FieldName" name="@column.FieldName" class="form-control" value="@column.GetFormatedValue(value)" @onchange="(e) => ChangeValue(e, column)" />
+                                <input id="@column.FieldName" name="@column.FieldName" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@column.GetFormatedValue(value)" @onchange="(e) => ChangeValue(e, column)" />
                             }
+                            <span class="field-validation-error">
+                                <span>@ColumnErrors.Get(column.FieldName)</span>
+                            </span>
                         }
                     </div>
                 </div>
diff --git a/GridBlazor/Pages/GridCreateComponent.razor.cs b/GridBlazor/Pages/GridCreateComponent.razor.cs
index f2802c78..5454a5af 100644
--- a/GridBlazor/Pages/GridCreateComponent.razor.cs
+++ b/GridBlazor/Pages/GridCreateComponent.razor.cs
@@ -20,6 +20,7 @@ public partial class GridCreateComponent<T> : ICustomGridComponent<T>
         private IEnumerable<string> _tabGroups;
 
         public string Error { get; set; } = "";
+        public QueryDictionary<string> ColumnErrors { get; set; } = new QueryDictionary<string>();
 
         [CascadingParameter(Name = "GridComponent")]
         protected GridComponent<T> GridComponent { get; set; }
@@ -132,6 +133,8 @@ protected async Task CreateItem()
         {
             try
             {
+                Error = "";
+                ColumnErrors = new QueryDictionary<string>();
                 await GridComponent.CreateItem(this);
             }
             catch (GridException e)
diff --git a/GridBlazor/Pages/GridUpdateComponent.razor b/GridBlazor/Pages/GridUpdateComponent.razor
index 9dcbf768..1db6e25d 100644
--- a/GridBlazor/Pages/GridUpdateComponent.razor
+++ b/GridBlazor/Pages/GridUpdateComponent.razor
@@ -86,7 +86,7 @@
                             {
                                 if (type == typeof(string) && ((IGridColumn<T>)column).InputType == InputType.TextArea)
                                 {
-                                    <textarea id="@column.FieldName" name="@column.FieldName" class="form-control" rows="5" value="@column.GetFormatedValue(value)" @onchange="(e) => ChangeValue(e, column)" />
+                                    <textarea id="@column.FieldName" name="@column.FieldName" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" rows="5" value="@column.GetFormatedValue(value)" @onchange="(e) => ChangeValue(e, column)" />
                                 }
                                 else if (type == typeof(DateTime) || type == typeof(System.DateTimeOffset))
                                 {
@@ -95,60 +95,63 @@
                                     {
                                         if (GridComponent._isWeekSupported)
                                         {
-                                            <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" placeholder="yyyy-Www" class="form-control" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
+                                            <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" placeholder="yyyy-Www" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
                                         }
                                         else
                                         {
-                                            <input id="@column.FieldName" name="@column.FieldName" type="text" placeholder="yyyy-Www" class="form-control" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
+                                            <input id="@column.FieldName" name="@column.FieldName" type="text" placeholder="yyyy-Www" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
                                         }
                                     }
                                     else if (typeAttr == "month")
                                     {
                                         if (GridComponent._isMonthSupported)
                                         {
-                                            <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" placeholder="yyyy-mm" class="form-control" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
+                                            <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" placeholder="yyyy-mm" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
                                         }
                                         else
                                         {
-                                            <input id="@column.FieldName" name="@column.FieldName" type="text" placeholder="yyyy-mm" class="form-control" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
+                                            <input id="@column.FieldName" name="@column.FieldName" type="text" placeholder="yyyy-mm" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
                                         }
                                     }
                                     else if (typeAttr == "datetime-local")
                                     {
                                         if (GridComponent._isDateTimeLocalSupported)
                                         {
-                                            <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" placeholder="yyyy-mm-dd hh:mm" class="form-control" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
+                                            <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" placeholder="yyyy-mm-dd hh:mm" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
                                         }
                                         else
                                         {
-                                            <input id="@column.FieldName" name="@column.FieldName" type="text" placeholder="yyyy-mm-dd hh:mm" class="form-control" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
+                                            <input id="@column.FieldName" name="@column.FieldName" type="text" placeholder="yyyy-mm-dd hh:mm" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
                                         }
                                     }
                                     else
                                     {
-                                        <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" class="form-control" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
+                                        <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column, typeAttr)" />
                                     }
                                 }
                                 else if (type == typeof(System.TimeSpan))
                                 {
                                     string typeAttr = ((IGridColumn<T>)column).InputType == InputType.None ? "time" : ((IGridColumn<T>)column).InputType.ToTypeAttr();
-                                    <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" class="form-control" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column)" />
+                                    <input id="@column.FieldName" name="@column.FieldName" type="@typeAttr" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@(((ICGridColumn)column).GetFormatedDateTime(value, typeAttr))" @onchange="(e) => ChangeValue(e, column)" />
                                 }
                                 else if (type == typeof(bool))
                                 {
                                     if (value != null && (bool)value == true)
                                     {
-                                        <input id="@column.FieldName" name="@column.FieldName" type="checkbox" class="form-control" checked="checked" value="true" @onchange="(e) => ChangeValue(e, column)" />
+                                        <input id="@column.FieldName" name="@column.FieldName" type="checkbox" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" checked="checked" value="true" @onchange="(e) => ChangeValue(e, column)" />
                                     }
                                     else
                                     {
-                                        <input id="@column.FieldName" name="@column.FieldName" type="checkbox" class="form-control" value="false" @onchange="(e) => ChangeValue(e, column)" />
+                                        <input id="@column.FieldName" name="@column.FieldName" type="checkbox" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="false" @onchange="(e) => ChangeValue(e, column)" />
                                     }
                                 }
                                 else
                                 {
-                                    <input id="@column.FieldName" name="@column.FieldName" class="form-control" value="@column.GetFormatedValue(value)" @onchange="(e) => ChangeValue(e, column)" />
+                                    <input id="@column.FieldName" name="@column.FieldName" class="form-control @(ColumnErrors.ContainsKey(@column.FieldName) ? "input-validation-error" : "")" value="@column.GetFormatedValue(value)" @onchange="(e) => ChangeValue(e, column)" />
                                 }
+                                <span class="field-validation-error">
+                                    <span>@ColumnErrors.Get(column.FieldName)</span>
+                                </span>
                             }
                         }
                     </div>
diff --git a/GridBlazor/Pages/GridUpdateComponent.razor.cs b/GridBlazor/Pages/GridUpdateComponent.razor.cs
index bf392246..c306c862 100644
--- a/GridBlazor/Pages/GridUpdateComponent.razor.cs
+++ b/GridBlazor/Pages/GridUpdateComponent.razor.cs
@@ -21,6 +21,7 @@ public partial class GridUpdateComponent<T> : ICustomGridComponent<T>
         private IEnumerable<string> _tabGroups;
 
         public string Error { get; set; } = "";
+        public QueryDictionary<string> ColumnErrors { get; set; } = new QueryDictionary<string>();
 
         [CascadingParameter(Name = "GridComponent")]
         protected GridComponent<T> GridComponent { get; set; }
@@ -148,6 +149,8 @@ protected async Task UpdateItem()
         {
             try
             {
+                Error = "";
+                ColumnErrors = new QueryDictionary<string>();
                 _tabGroups = null;
                 await GridComponent.UpdateItem(this);
             }
diff --git a/GridBlazor/wwwroot/css/gridblazor.css b/GridBlazor/wwwroot/css/gridblazor.css
index 2620684e..6c07f69b 100644
--- a/GridBlazor/wwwroot/css/gridblazor.css
+++ b/GridBlazor/wwwroot/css/gridblazor.css
@@ -103,6 +103,8 @@ button.grid-button-view { width:30px; height:30px; margin-right: 5px; background
 button.grid-button-edit { width:30px; height:30px;margin-right: 5px; background-repeat: no-repeat, no-repeat; background-position-x: 7px, 0px; background-position-y: 7px, 0px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 8 8"><path d="M6 0l-1 1 2 2 1-1-2-2zm-2 2l-4 4v2h2l4-4-2-2z"/></svg>'), linear-gradient(#ddd, #eee); }
 button.grid-button-delete { width:30px; height:30px; margin-right: 5px; background-repeat: no-repeat, no-repeat; background-position-x: 7px, 0px; background-position-y: 7px, 0px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 8 8"><path d="M3 0c-.55 0-1 .45-1 1h-1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1h-1c0-.55-.45-1-1-1h-1zm-2 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19v-4.81h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1z"/></svg>'), linear-gradient(#ddd, #eee); }
 td.grid-button-cell { padding: 5px 0px 5px 0px; }
+.input-validation-error { border: 1px solid red; }
+.field-validation-error { color: red; }
 
 /* Grid Clear Filters */
 .grid-all-filters-clear { margin-top: 10px; margin-bottom: 10px; margin-left: 15px; margin-right: 5px; }
diff --git a/GridBlazor/wwwroot/css/gridblazor.min.css b/GridBlazor/wwwroot/css/gridblazor.min.css
index 673072a3..c760144c 100644
--- a/GridBlazor/wwwroot/css/gridblazor.min.css
+++ b/GridBlazor/wwwroot/css/gridblazor.min.css
@@ -1 +1 @@
-.grid-mvc:focus{outline:none}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}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>.grid-header-title{width:100%;margin-right:15px;white-space:nowrap}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;float:right;width:10px;height:12px}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-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}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}.grid-dropdown{font-weight:normal;left:-102px;top:16px!important;min-width:360px}.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}.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:block;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}.grid-itemscount{float:right;margin-top:10px}.grid-pager{margin-top:20px}.page-link:focus{box-shadow:none}.subgrid-caret{cursor:pointer;user-select:none}.subgrid-caret::after{content:"▷"}.subgrid-caret-down{cursor:pointer;user-select:none}.subgrid-caret-down::after{content:"◢"}.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;background-repeat:no-repeat,no-repeat;background-position-x:8px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><path d="M3.5 0c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5c.59 0 1.17-.14 1.66-.41a1 1 0 0 0 .13.13l1 1a1.02 1.02 0 1 0 1.44-1.44l-1-1a1 1 0 0 0-.16-.13c.27-.49.44-1.06.44-1.66 0-1.93-1.57-3.5-3.5-3.5zm0 1c1.39 0 2.5 1.11 2.5 2.5 0 .66-.24 1.27-.66 1.72-.01.01-.02.02-.03.03a1 1 0 0 0-.13.13c-.44.4-1.04.63-1.69.63-1.39 0-2.5-1.11-2.5-2.5s1.11-2.5 2.5-2.5z"/></svg>'),linear-gradient(#ddd,#eee)}button.grid-search-clear{padding-left:22px;background-repeat:no-repeat,no-repeat;background-position-x:8px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><path d="M1.41 0l-1.41 1.41.72.72 1.78 1.81-1.78 1.78-.72.69 1.41 1.44.72-.72 1.81-1.81 1.78 1.81.69.72 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72-1.44-1.41-.69.72-1.78 1.78-1.81-1.78-.72-.72z" /></svg>'),linear-gradient(#ddd,#eee)}input.grid-search-input{height:34px;border-color:#ccc}.grid-change-page-size{margin-top:10px;margin-left:20px;margin-bottom:10px}.grid-change-page-size label{margin-top:6px;margin-left:10px;width:60px}.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}.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}.grid-extsort-column button{border:none;padding:0;font-size:14px;font-weight:700}.grid-extsort-column>button{margin-left:10px;margin-right:5px}.grid-extsort-empty{font-size:14px;height:20px;margin:10px;color:#aaa}.grid-group-caret{margin-right:10px;cursor:pointer;user-select:none}.grid-group-caret::after{content:"▷"}.grid-group-caret-down{margin-right:10px;cursor:pointer;user-select:none}.grid-group-caret-down::after{content:"◢"}.grid-group-tab{margin-left:20px}.grid-group-row{background:#eee}.grid-crud{margin-top:10px;margin-bottom:10px;margin-left:0;margin-right:5px}.grid-crud:first-child{margin-left:15px}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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><path d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"/></svg>'),linear-gradient(#ddd,#eee)}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,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 8 8"><path d="M4.03 0c-2.53 0-4.03 3-4.03 3s1.5 3 4.03 3c2.47 0 3.97-3 3.97-3s-1.5-3-3.97-3zm-.03 1c1.11 0 2 .9 2 2 0 1.11-.89 2-2 2-1.1 0-2-.89-2-2 0-1.1.9-2 2-2zm0 1c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1c0-.1-.04-.19-.06-.28-.08.16-.24.28-.44.28-.28 0-.5-.22-.5-.5 0-.2.12-.36.28-.44-.09-.03-.18-.06-.28-.06z" transform="translate(0 1)"/></svg>'),linear-gradient(#ddd,#eee)}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,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 8 8"><path d="M6 0l-1 1 2 2 1-1-2-2zm-2 2l-4 4v2h2l4-4-2-2z"/></svg>'),linear-gradient(#ddd,#eee)}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,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 8 8"><path d="M3 0c-.55 0-1 .45-1 1h-1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1h-1c0-.55-.45-1-1-1h-1zm-2 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19v-4.81h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1z"/></svg>'),linear-gradient(#ddd,#eee)}td.grid-button-cell{padding:5px 0 5px 0}.grid-all-filters-clear{margin-top:10px;margin-bottom:10px;margin-left:15px;margin-right:5px}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)}.grid-excel{margin-top:10px;margin-bottom:10px;margin-left:15px;margin-right:5px}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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><path d="M3 0v3h-2l3 3 3-3h-2v-3h-2zm-3 7v1h8v-1h-8z"/></svg>'),linear-gradient(#ddd,#eee)}.grid-button-components{margin-top:10px;margin-bottom:10px;margin-left:0;margin-right:5px}.grid-button-components:first-child{margin-left:15px}button.grid-button-component{margin-right:5px}
\ No newline at end of file
+.grid-mvc:focus{outline:none}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}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>.grid-header-title{width:100%;margin-right:15px;white-space:nowrap}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;float:right;width:10px;height:12px}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-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}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}.grid-dropdown{font-weight:normal;left:-102px;top:16px!important;min-width:360px}.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}.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:block;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}.grid-itemscount{float:right;margin-top:10px}.grid-pager{margin-top:20px}.page-link:focus{box-shadow:none}.subgrid-caret{cursor:pointer;user-select:none}.subgrid-caret::after{content:"▷"}.subgrid-caret-down{cursor:pointer;user-select:none}.subgrid-caret-down::after{content:"◢"}.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;background-repeat:no-repeat,no-repeat;background-position-x:8px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><path d="M3.5 0c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5c.59 0 1.17-.14 1.66-.41a1 1 0 0 0 .13.13l1 1a1.02 1.02 0 1 0 1.44-1.44l-1-1a1 1 0 0 0-.16-.13c.27-.49.44-1.06.44-1.66 0-1.93-1.57-3.5-3.5-3.5zm0 1c1.39 0 2.5 1.11 2.5 2.5 0 .66-.24 1.27-.66 1.72-.01.01-.02.02-.03.03a1 1 0 0 0-.13.13c-.44.4-1.04.63-1.69.63-1.39 0-2.5-1.11-2.5-2.5s1.11-2.5 2.5-2.5z"/></svg>'),linear-gradient(#ddd,#eee)}button.grid-search-clear{padding-left:22px;background-repeat:no-repeat,no-repeat;background-position-x:8px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><path d="M1.41 0l-1.41 1.41.72.72 1.78 1.81-1.78 1.78-.72.69 1.41 1.44.72-.72 1.81-1.81 1.78 1.81.69.72 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72-1.44-1.41-.69.72-1.78 1.78-1.81-1.78-.72-.72z" /></svg>'),linear-gradient(#ddd,#eee)}input.grid-search-input{height:34px;border-color:#ccc}.grid-change-page-size{margin-top:10px;margin-left:20px;margin-bottom:10px}.grid-change-page-size label{margin-top:6px;margin-left:10px;width:60px}.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}.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}.grid-extsort-column button{border:none;padding:0;font-size:14px;font-weight:700}.grid-extsort-column>button{margin-left:10px;margin-right:5px}.grid-extsort-empty{font-size:14px;height:20px;margin:10px;color:#aaa}.grid-group-caret{margin-right:10px;cursor:pointer;user-select:none}.grid-group-caret::after{content:"▷"}.grid-group-caret-down{margin-right:10px;cursor:pointer;user-select:none}.grid-group-caret-down::after{content:"◢"}.grid-group-tab{margin-left:20px}.grid-group-row{background:#eee}.grid-crud{margin-top:10px;margin-bottom:10px;margin-left:0;margin-right:5px}.grid-crud:first-child{margin-left:15px}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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><path d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"/></svg>'),linear-gradient(#ddd,#eee)}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,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 8 8"><path d="M4.03 0c-2.53 0-4.03 3-4.03 3s1.5 3 4.03 3c2.47 0 3.97-3 3.97-3s-1.5-3-3.97-3zm-.03 1c1.11 0 2 .9 2 2 0 1.11-.89 2-2 2-1.1 0-2-.89-2-2 0-1.1.9-2 2-2zm0 1c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1c0-.1-.04-.19-.06-.28-.08.16-.24.28-.44.28-.28 0-.5-.22-.5-.5 0-.2.12-.36.28-.44-.09-.03-.18-.06-.28-.06z" transform="translate(0 1)"/></svg>'),linear-gradient(#ddd,#eee)}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,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 8 8"><path d="M6 0l-1 1 2 2 1-1-2-2zm-2 2l-4 4v2h2l4-4-2-2z"/></svg>'),linear-gradient(#ddd,#eee)}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,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 8 8"><path d="M3 0c-.55 0-1 .45-1 1h-1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1h-1c0-.55-.45-1-1-1h-1zm-2 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19v-4.81h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1z"/></svg>'),linear-gradient(#ddd,#eee)}td.grid-button-cell{padding:5px 0 5px 0}.input-validation-error{border:1px solid #f00}.field-validation-error{color:#f00}.grid-all-filters-clear{margin-top:10px;margin-bottom:10px;margin-left:15px;margin-right:5px}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)}.grid-excel{margin-top:10px;margin-bottom:10px;margin-left:15px;margin-right:5px}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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><path d="M3 0v3h-2l3 3 3-3h-2v-3h-2zm-3 7v1h8v-1h-8z"/></svg>'),linear-gradient(#ddd,#eee)}.grid-button-components{margin-top:10px;margin-bottom:10px;margin-left:0;margin-right:5px}.grid-button-components:first-child{margin-left:15px}button.grid-button-component{margin-right:5px}
\ No newline at end of file
diff --git a/GridBlazorClientSide.Client/GridBlazorClientSide.Client.csproj b/GridBlazorClientSide.Client/GridBlazorClientSide.Client.csproj
index ea523706..a8de6164 100644
--- a/GridBlazorClientSide.Client/GridBlazorClientSide.Client.csproj
+++ b/GridBlazorClientSide.Client/GridBlazorClientSide.Client.csproj
@@ -3,11 +3,12 @@
   <PropertyGroup>
     <TargetFramework>netstandard2.1</TargetFramework>
     <RazorLangVersion>3.0</RazorLangVersion>
-    <Version>1.6.5</Version>
+    <Version>1.6.6</Version>
   </PropertyGroup>
 
   <ItemGroup>
     <PackageReference Include="BlazorStrap" Version="1.3.1" />
+    <PackageReference Include="FluentValidation" Version="8.6.2" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.0" PrivateAssets="all" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.0" PrivateAssets="all" /> 
diff --git a/GridBlazorClientSide.Client/OrderValidator.cs b/GridBlazorClientSide.Client/OrderValidator.cs
new file mode 100644
index 00000000..1d65d694
--- /dev/null
+++ b/GridBlazorClientSide.Client/OrderValidator.cs
@@ -0,0 +1,14 @@
+using FluentValidation;
+using GridBlazorClientSide.Shared.Models;
+
+namespace GridBlazorClientSide.Client
+{
+    public class OrderValidator : AbstractValidator<Order>
+    {
+        public OrderValidator()
+        {
+            RuleFor(p => p.Freight).NotEmpty().WithMessage("You must enter a freight");
+            RuleFor(p => p.OrderDate).NotEmpty().WithMessage("You must enter an order date");
+        }
+    }
+}
diff --git a/GridBlazorClientSide.Client/Pages/Crud.razor b/GridBlazorClientSide.Client/Pages/Crud.razor
index f19d4ec9..c4c24846 100644
--- a/GridBlazorClientSide.Client/Pages/Crud.razor
+++ b/GridBlazorClientSide.Client/Pages/Crud.razor
@@ -23,7 +23,7 @@
 {
     <div class="row">
         <div class="col-md-12">
-            <GridComponent T="Order" Grid="@_grid" Mode="_mode" Keys="_keys"></GridComponent>
+            <GridComponent T="Order" @ref="_gridComponent" Grid="@_grid" Mode="_mode" Keys="_keys"></GridComponent>
         </div>
     </div>
 }
@@ -35,6 +35,8 @@ else
 @code
 {
     private CGrid<Order> _grid;
+    private GridComponent<Order> _gridComponent;
+    private bool _areEventsLoaded = false;
     private object[] _keys;
     private GridMode _mode;
     private Task _task;
@@ -96,4 +98,62 @@ else
         _task = client.UpdateGrid();
         await _task;
     }
+
+    protected override void OnAfterRender(bool firstRender)
+    {
+        if (!_areEventsLoaded && _gridComponent != null)
+        {
+            _gridComponent.BeforeInsert += BeforeInsert;
+            _gridComponent.BeforeUpdate += BeforeUpdate;
+            _gridComponent.BeforeDelete += BeforeDelete;
+            _areEventsLoaded = true;
+        }
+    }
+
+    private async Task<bool> BeforeInsert(GridCreateComponent<Order> component, Order item)
+    {
+        var orderValidator = new OrderValidator();
+        var valid = await orderValidator.ValidateAsync(item);
+
+        if (!valid.IsValid)
+        {
+            component.Error = "Insert operation returned one or more errors";
+            foreach (var error in valid.Errors)
+            {
+                component.ColumnErrors.AddParameter(error.PropertyName, error.ErrorMessage);
+            }
+        }
+
+        return valid.IsValid;
+    }
+
+    private async Task<bool> BeforeUpdate(GridUpdateComponent<Order> component, Order item)
+    {
+        var orderValidator = new OrderValidator();
+        var valid = await orderValidator.ValidateAsync(item);
+
+        if (!valid.IsValid)
+        {
+            component.Error = "Update operation returned one or more errors";
+            foreach (var error in valid.Errors)
+            {
+                component.ColumnErrors.AddParameter(error.PropertyName, error.ErrorMessage);
+            }
+        }
+
+        return valid.IsValid;
+    }
+
+    private async Task<bool> BeforeDelete(GridDeleteComponent<Order> component, Order item)
+    {
+        var orderValidator = new OrderValidator();
+        var valid = await orderValidator.ValidateAsync(item);
+
+        if (!valid.IsValid)
+        {
+            component.Error = valid.ToString();
+        }
+
+        return valid.IsValid;
+    }
 }
diff --git a/GridBlazorOData.Client/GridBlazorOData.Client.csproj b/GridBlazorOData.Client/GridBlazorOData.Client.csproj
index b658e370..f12c9bdc 100644
--- a/GridBlazorOData.Client/GridBlazorOData.Client.csproj
+++ b/GridBlazorOData.Client/GridBlazorOData.Client.csproj
@@ -3,11 +3,12 @@
   <PropertyGroup>
     <TargetFramework>netstandard2.1</TargetFramework>
     <RazorLangVersion>3.0</RazorLangVersion>
-    <Version>1.6.5</Version>
+    <Version>1.6.6</Version>
   </PropertyGroup>
 
   <ItemGroup>
     <PackageReference Include="BlazorStrap" Version="1.3.1" />
+    <PackageReference Include="FluentValidation" Version="8.6.2" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.0" PrivateAssets="all" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.0" PrivateAssets="all" />
diff --git a/GridBlazorOData.Client/OrderValidator.cs b/GridBlazorOData.Client/OrderValidator.cs
new file mode 100644
index 00000000..7efeeed9
--- /dev/null
+++ b/GridBlazorOData.Client/OrderValidator.cs
@@ -0,0 +1,14 @@
+using FluentValidation;
+using GridBlazorOData.Shared.Models;
+
+namespace GridBlazorOData.Client
+{
+    public class OrderValidator : AbstractValidator<Order>
+    {
+        public OrderValidator()
+        {
+            RuleFor(p => p.Freight).NotEmpty().WithMessage("You must enter a freight");
+            RuleFor(p => p.OrderDate).NotEmpty().WithMessage("You must enter an order date");
+        }
+    }
+}
diff --git a/GridBlazorOData.Client/Pages/Crud.razor b/GridBlazorOData.Client/Pages/Crud.razor
index e7d8a2fd..b046fd10 100644
--- a/GridBlazorOData.Client/Pages/Crud.razor
+++ b/GridBlazorOData.Client/Pages/Crud.razor
@@ -24,7 +24,7 @@
 {
     <div class="row">
         <div class="col-md-12">
-            <GridComponent T="Order" Grid="@_grid" Mode="_mode" Keys="_keys"></GridComponent>
+            <GridComponent T="Order" @ref="_gridComponent" Grid="@_grid" Mode="_mode" Keys="_keys"></GridComponent>
         </div>
     </div>
 }
@@ -36,6 +36,8 @@ else
 @code
 {
     private CGrid<Order> _grid;
+    private GridComponent<Order> _gridComponent;
+    private bool _areEventsLoaded = false;
     private object[] _keys;
     private GridMode _mode;
     private Task _task;
@@ -120,6 +122,64 @@ else
         await _task;
     }
 
+    protected override void OnAfterRender(bool firstRender)
+    {
+        if (!_areEventsLoaded && _gridComponent != null)
+        {
+            _gridComponent.BeforeInsert += BeforeInsert;
+            _gridComponent.BeforeUpdate += BeforeUpdate;
+            _gridComponent.BeforeDelete += BeforeDelete;
+            _areEventsLoaded = true;
+        }
+    }
+
+    private async Task<bool> BeforeInsert(GridCreateComponent<Order> component, Order item)
+    {
+        var orderValidator = new OrderValidator();
+        var valid = await orderValidator.ValidateAsync(item);
+
+        if (!valid.IsValid)
+        {
+            component.Error = "Insert operation returned one or more errors";
+            foreach (var error in valid.Errors)
+            {
+                component.ColumnErrors.AddParameter(error.PropertyName, error.ErrorMessage);
+            }
+        }
+
+        return valid.IsValid;
+    }
+
+    private async Task<bool> BeforeUpdate(GridUpdateComponent<Order> component, Order item)
+    {
+        var orderValidator = new OrderValidator();
+        var valid = await orderValidator.ValidateAsync(item);
+
+        if (!valid.IsValid)
+        {
+            component.Error = "Update operation returned one or more errors";
+            foreach (var error in valid.Errors)
+            {
+                component.ColumnErrors.AddParameter(error.PropertyName, error.ErrorMessage);
+            }
+        }
+
+        return valid.IsValid;
+    }
+
+    private async Task<bool> BeforeDelete(GridDeleteComponent<Order> component, Order item)
+    {
+        var orderValidator = new OrderValidator();
+        var valid = await orderValidator.ValidateAsync(item);
+
+        if (!valid.IsValid)
+        {
+            component.Error = valid.ToString();
+        }
+
+        return valid.IsValid;
+    }
+
     Func<string, Task<IEnumerable<SelectItem>>> GetAllCustomers = async (baseUri) =>
     {
         string url = baseUri + $"odata/Customers?$select=CustomerID,CompanyName";
diff --git a/GridBlazorServerSide/GridBlazorServerSide.csproj b/GridBlazorServerSide/GridBlazorServerSide.csproj
index 9dbe270f..08790490 100644
--- a/GridBlazorServerSide/GridBlazorServerSide.csproj
+++ b/GridBlazorServerSide/GridBlazorServerSide.csproj
@@ -2,7 +2,7 @@
 
   <PropertyGroup>
     <TargetFramework>netcoreapp3.1</TargetFramework>
-    <Version>1.6.5</Version>
+    <Version>1.6.6</Version>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/GridBlazorServerSide/Models/OrderValidator.cs b/GridBlazorServerSide/Models/OrderValidator.cs
index bbb7015c..d5774b12 100644
--- a/GridBlazorServerSide/Models/OrderValidator.cs
+++ b/GridBlazorServerSide/Models/OrderValidator.cs
@@ -7,6 +7,7 @@ public class OrderValidator : AbstractValidator<Order>
         public OrderValidator()
         {
             RuleFor(p => p.Freight).NotEmpty().WithMessage("You must enter a freight");
+            RuleFor(p => p.OrderDate).NotEmpty().WithMessage("You must enter an order date");
         }
     }
 }
diff --git a/GridBlazorServerSide/Pages/Crud.razor b/GridBlazorServerSide/Pages/Crud.razor
index e473f71c..a70bcf86 100644
--- a/GridBlazorServerSide/Pages/Crud.razor
+++ b/GridBlazorServerSide/Pages/Crud.razor
@@ -120,7 +120,11 @@ else
 
         if (!valid.IsValid)
         {
-            component.Error = valid.ToString();
+            component.Error = "Insert operation returned one or more errors";
+            foreach (var error in valid.Errors)
+            {
+                component.ColumnErrors.AddParameter(error.PropertyName, error.ErrorMessage);
+            }
         }
 
         return valid.IsValid;
@@ -133,7 +137,11 @@ else
 
         if (!valid.IsValid)
         {
-            component.Error = valid.ToString();
+            component.Error = "Update operation returned one or more errors";
+            foreach (var error in valid.Errors)
+            {
+                component.ColumnErrors.AddParameter(error.PropertyName, error.ErrorMessage);
+            }
         }
 
         return valid.IsValid;
diff --git a/GridMvc/Resources/css/gridmvc.css b/GridMvc/Resources/css/gridmvc.css
index 2620684e..6c07f69b 100644
--- a/GridMvc/Resources/css/gridmvc.css
+++ b/GridMvc/Resources/css/gridmvc.css
@@ -103,6 +103,8 @@ button.grid-button-view { width:30px; height:30px; margin-right: 5px; background
 button.grid-button-edit { width:30px; height:30px;margin-right: 5px; background-repeat: no-repeat, no-repeat; background-position-x: 7px, 0px; background-position-y: 7px, 0px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 8 8"><path d="M6 0l-1 1 2 2 1-1-2-2zm-2 2l-4 4v2h2l4-4-2-2z"/></svg>'), linear-gradient(#ddd, #eee); }
 button.grid-button-delete { width:30px; height:30px; margin-right: 5px; background-repeat: no-repeat, no-repeat; background-position-x: 7px, 0px; background-position-y: 7px, 0px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 8 8"><path d="M3 0c-.55 0-1 .45-1 1h-1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1h-1c0-.55-.45-1-1-1h-1zm-2 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19v-4.81h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1z"/></svg>'), linear-gradient(#ddd, #eee); }
 td.grid-button-cell { padding: 5px 0px 5px 0px; }
+.input-validation-error { border: 1px solid red; }
+.field-validation-error { color: red; }
 
 /* Grid Clear Filters */
 .grid-all-filters-clear { margin-top: 10px; margin-bottom: 10px; margin-left: 15px; margin-right: 5px; }
diff --git a/GridMvc/Resources/css/gridmvc.min.css b/GridMvc/Resources/css/gridmvc.min.css
index 673072a3..c760144c 100644
--- a/GridMvc/Resources/css/gridmvc.min.css
+++ b/GridMvc/Resources/css/gridmvc.min.css
@@ -1 +1 @@
-.grid-mvc:focus{outline:none}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}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>.grid-header-title{width:100%;margin-right:15px;white-space:nowrap}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;float:right;width:10px;height:12px}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-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}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}.grid-dropdown{font-weight:normal;left:-102px;top:16px!important;min-width:360px}.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}.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:block;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}.grid-itemscount{float:right;margin-top:10px}.grid-pager{margin-top:20px}.page-link:focus{box-shadow:none}.subgrid-caret{cursor:pointer;user-select:none}.subgrid-caret::after{content:"▷"}.subgrid-caret-down{cursor:pointer;user-select:none}.subgrid-caret-down::after{content:"◢"}.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;background-repeat:no-repeat,no-repeat;background-position-x:8px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><path d="M3.5 0c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5c.59 0 1.17-.14 1.66-.41a1 1 0 0 0 .13.13l1 1a1.02 1.02 0 1 0 1.44-1.44l-1-1a1 1 0 0 0-.16-.13c.27-.49.44-1.06.44-1.66 0-1.93-1.57-3.5-3.5-3.5zm0 1c1.39 0 2.5 1.11 2.5 2.5 0 .66-.24 1.27-.66 1.72-.01.01-.02.02-.03.03a1 1 0 0 0-.13.13c-.44.4-1.04.63-1.69.63-1.39 0-2.5-1.11-2.5-2.5s1.11-2.5 2.5-2.5z"/></svg>'),linear-gradient(#ddd,#eee)}button.grid-search-clear{padding-left:22px;background-repeat:no-repeat,no-repeat;background-position-x:8px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><path d="M1.41 0l-1.41 1.41.72.72 1.78 1.81-1.78 1.78-.72.69 1.41 1.44.72-.72 1.81-1.81 1.78 1.81.69.72 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72-1.44-1.41-.69.72-1.78 1.78-1.81-1.78-.72-.72z" /></svg>'),linear-gradient(#ddd,#eee)}input.grid-search-input{height:34px;border-color:#ccc}.grid-change-page-size{margin-top:10px;margin-left:20px;margin-bottom:10px}.grid-change-page-size label{margin-top:6px;margin-left:10px;width:60px}.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}.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}.grid-extsort-column button{border:none;padding:0;font-size:14px;font-weight:700}.grid-extsort-column>button{margin-left:10px;margin-right:5px}.grid-extsort-empty{font-size:14px;height:20px;margin:10px;color:#aaa}.grid-group-caret{margin-right:10px;cursor:pointer;user-select:none}.grid-group-caret::after{content:"▷"}.grid-group-caret-down{margin-right:10px;cursor:pointer;user-select:none}.grid-group-caret-down::after{content:"◢"}.grid-group-tab{margin-left:20px}.grid-group-row{background:#eee}.grid-crud{margin-top:10px;margin-bottom:10px;margin-left:0;margin-right:5px}.grid-crud:first-child{margin-left:15px}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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><path d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"/></svg>'),linear-gradient(#ddd,#eee)}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,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 8 8"><path d="M4.03 0c-2.53 0-4.03 3-4.03 3s1.5 3 4.03 3c2.47 0 3.97-3 3.97-3s-1.5-3-3.97-3zm-.03 1c1.11 0 2 .9 2 2 0 1.11-.89 2-2 2-1.1 0-2-.89-2-2 0-1.1.9-2 2-2zm0 1c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1c0-.1-.04-.19-.06-.28-.08.16-.24.28-.44.28-.28 0-.5-.22-.5-.5 0-.2.12-.36.28-.44-.09-.03-.18-.06-.28-.06z" transform="translate(0 1)"/></svg>'),linear-gradient(#ddd,#eee)}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,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 8 8"><path d="M6 0l-1 1 2 2 1-1-2-2zm-2 2l-4 4v2h2l4-4-2-2z"/></svg>'),linear-gradient(#ddd,#eee)}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,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 8 8"><path d="M3 0c-.55 0-1 .45-1 1h-1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1h-1c0-.55-.45-1-1-1h-1zm-2 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19v-4.81h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1z"/></svg>'),linear-gradient(#ddd,#eee)}td.grid-button-cell{padding:5px 0 5px 0}.grid-all-filters-clear{margin-top:10px;margin-bottom:10px;margin-left:15px;margin-right:5px}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)}.grid-excel{margin-top:10px;margin-bottom:10px;margin-left:15px;margin-right:5px}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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><path d="M3 0v3h-2l3 3 3-3h-2v-3h-2zm-3 7v1h8v-1h-8z"/></svg>'),linear-gradient(#ddd,#eee)}.grid-button-components{margin-top:10px;margin-bottom:10px;margin-left:0;margin-right:5px}.grid-button-components:first-child{margin-left:15px}button.grid-button-component{margin-right:5px}
\ No newline at end of file
+.grid-mvc:focus{outline:none}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}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>.grid-header-title{width:100%;margin-right:15px;white-space:nowrap}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;float:right;width:10px;height:12px}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-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}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}.grid-dropdown{font-weight:normal;left:-102px;top:16px!important;min-width:360px}.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}.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:block;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}.grid-itemscount{float:right;margin-top:10px}.grid-pager{margin-top:20px}.page-link:focus{box-shadow:none}.subgrid-caret{cursor:pointer;user-select:none}.subgrid-caret::after{content:"▷"}.subgrid-caret-down{cursor:pointer;user-select:none}.subgrid-caret-down::after{content:"◢"}.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;background-repeat:no-repeat,no-repeat;background-position-x:8px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><path d="M3.5 0c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5c.59 0 1.17-.14 1.66-.41a1 1 0 0 0 .13.13l1 1a1.02 1.02 0 1 0 1.44-1.44l-1-1a1 1 0 0 0-.16-.13c.27-.49.44-1.06.44-1.66 0-1.93-1.57-3.5-3.5-3.5zm0 1c1.39 0 2.5 1.11 2.5 2.5 0 .66-.24 1.27-.66 1.72-.01.01-.02.02-.03.03a1 1 0 0 0-.13.13c-.44.4-1.04.63-1.69.63-1.39 0-2.5-1.11-2.5-2.5s1.11-2.5 2.5-2.5z"/></svg>'),linear-gradient(#ddd,#eee)}button.grid-search-clear{padding-left:22px;background-repeat:no-repeat,no-repeat;background-position-x:8px,0;background-position-y:8px,0;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><path d="M1.41 0l-1.41 1.41.72.72 1.78 1.81-1.78 1.78-.72.69 1.41 1.44.72-.72 1.81-1.81 1.78 1.81.69.72 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72-1.44-1.41-.69.72-1.78 1.78-1.81-1.78-.72-.72z" /></svg>'),linear-gradient(#ddd,#eee)}input.grid-search-input{height:34px;border-color:#ccc}.grid-change-page-size{margin-top:10px;margin-left:20px;margin-bottom:10px}.grid-change-page-size label{margin-top:6px;margin-left:10px;width:60px}.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}.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}.grid-extsort-column button{border:none;padding:0;font-size:14px;font-weight:700}.grid-extsort-column>button{margin-left:10px;margin-right:5px}.grid-extsort-empty{font-size:14px;height:20px;margin:10px;color:#aaa}.grid-group-caret{margin-right:10px;cursor:pointer;user-select:none}.grid-group-caret::after{content:"▷"}.grid-group-caret-down{margin-right:10px;cursor:pointer;user-select:none}.grid-group-caret-down::after{content:"◢"}.grid-group-tab{margin-left:20px}.grid-group-row{background:#eee}.grid-crud{margin-top:10px;margin-bottom:10px;margin-left:0;margin-right:5px}.grid-crud:first-child{margin-left:15px}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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><path d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"/></svg>'),linear-gradient(#ddd,#eee)}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,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 8 8"><path d="M4.03 0c-2.53 0-4.03 3-4.03 3s1.5 3 4.03 3c2.47 0 3.97-3 3.97-3s-1.5-3-3.97-3zm-.03 1c1.11 0 2 .9 2 2 0 1.11-.89 2-2 2-1.1 0-2-.89-2-2 0-1.1.9-2 2-2zm0 1c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1c0-.1-.04-.19-.06-.28-.08.16-.24.28-.44.28-.28 0-.5-.22-.5-.5 0-.2.12-.36.28-.44-.09-.03-.18-.06-.28-.06z" transform="translate(0 1)"/></svg>'),linear-gradient(#ddd,#eee)}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,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 8 8"><path d="M6 0l-1 1 2 2 1-1-2-2zm-2 2l-4 4v2h2l4-4-2-2z"/></svg>'),linear-gradient(#ddd,#eee)}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,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 8 8"><path d="M3 0c-.55 0-1 .45-1 1h-1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1h-1c0-.55-.45-1-1-1h-1zm-2 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19v-4.81h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1z"/></svg>'),linear-gradient(#ddd,#eee)}td.grid-button-cell{padding:5px 0 5px 0}.input-validation-error{border:1px solid #f00}.field-validation-error{color:#f00}.grid-all-filters-clear{margin-top:10px;margin-bottom:10px;margin-left:15px;margin-right:5px}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)}.grid-excel{margin-top:10px;margin-bottom:10px;margin-left:15px;margin-right:5px}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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8"><path d="M3 0v3h-2l3 3 3-3h-2v-3h-2zm-3 7v1h8v-1h-8z"/></svg>'),linear-gradient(#ddd,#eee)}.grid-button-components{margin-top:10px;margin-bottom:10px;margin-left:0;margin-right:5px}.grid-button-components:first-child{margin-left:15px}button.grid-button-component{margin-right:5px}
\ No newline at end of file
diff --git a/docs/blazor_client/Events.md b/docs/blazor_client/Events.md
index 75a6fe3f..506ff35d 100644
--- a/docs/blazor_client/Events.md
+++ b/docs/blazor_client/Events.md
@@ -32,7 +32,8 @@ And these events are provided to allow running tasks before and after grid is re
 
 If you want to handle an event you have to create a reference to the ```GridCompoment```. 
 
-The ```GridCompoment``` object has an attribute named ```Error``` that can be set to show an error on the CRUD form.
+The ```GridCompoment``` object has an attribute named ```Error``` that can be set to show an error on the CRUD form. 
+There is also another property named ```ColumnErrors``` to show errors specific to each each form field. ```ColumnErrors``` is a ```QueryDictionary``` to store the error message for each field.
 
 Then you have to add the events that you want to handle in the ```OnAfterRender``` method.
 
@@ -46,11 +47,12 @@ You can see here an example handling all component events that writes some grid
     @code
     {
         private GridComponent<Order> _gridComponent;
+        private bool _areEventsLoaded = false;
         ...
 
         protected override void OnAfterRender(bool firstRender)
         {
-            if (firstRender)
+            if (!_areEventsLoaded && _gridComponent != null)
             {
                 _gridComponent.PagerChanged += PagerChanged;
                 _gridComponent.SortChanged += SortChanged;
@@ -65,6 +67,8 @@ You can see here an example handling all component events that writes some grid
 
                 _gridComponent.BeforeRefreshGrid += BeforeRefreshGrid;
                 _gridComponent.AfterRefreshGrid += AfterRefreshGrid;
+                
+                _areEventsLoaded = true;
             }
         }
 
@@ -139,7 +143,11 @@ You can see here an example handling all component events that writes some grid
 
             if (!valid.IsValid)
             {
-                component.Error = valid.ToString();
+                component.Error = "Insert operation returned one or more errors";
+                foreach (var error in valid.Errors)
+                {
+                    component.ColumnErrors.AddParameter(error.PropertyName, error.ErrorMessage);
+                }
             }
 
             return valid.IsValid;
@@ -152,7 +160,11 @@ You can see here an example handling all component events that writes some grid
 
             if (!valid.IsValid)
             {
-                component.Error = valid.ToString();
+                component.Error = "Update operation returned one or more errors";
+                foreach (var error in valid.Errors)
+                {
+                    component.ColumnErrors.AddParameter(error.PropertyName, error.ErrorMessage);
+                }
             }
 
             return valid.IsValid;
diff --git a/docs/blazor_odata/Events.md b/docs/blazor_odata/Events.md
index 77f7c5ff..969f8c38 100644
--- a/docs/blazor_odata/Events.md
+++ b/docs/blazor_odata/Events.md
@@ -33,6 +33,7 @@ And these events are provided to allow running tasks before and after grid is re
 If you want to handle an event you have to create a reference to the ```GridCompoment```. 
 
 The ```GridCompoment``` object has an attribute named ```Error``` that can be set to show an error on the CRUD form.
+There is also another property named ```ColumnErrors``` to show errors specific to each each form field. ```ColumnErrors``` is a ```QueryDictionary``` to store the error message for each field.
 
 Then you have to add the events that you want to handle in the ```OnAfterRender``` method.
 
@@ -46,11 +47,12 @@ You can see here an example handling all component events that writes some grid
     @code
     {
         private GridComponent<Order> _gridComponent;
+        private bool _areEventsLoaded = false;
         ...
 
         protected override void OnAfterRender(bool firstRender)
         {
-            if (firstRender)
+            if (!_areEventsLoaded && _gridComponent != null)
             {
                 _gridComponent.PagerChanged += PagerChanged;
                 _gridComponent.SortChanged += SortChanged;
@@ -65,6 +67,8 @@ You can see here an example handling all component events that writes some grid
 
                 _gridComponent.BeforeRefreshGrid += BeforeRefreshGrid;
                 _gridComponent.AfterRefreshGrid += AfterRefreshGrid;
+
+                _areEventsLoaded = true;
             }
         }
 
@@ -139,7 +143,11 @@ You can see here an example handling all component events that writes some grid
 
             if (!valid.IsValid)
             {
-                component.Error = valid.ToString();
+                component.Error = "Insert operation returned one or more errors";
+                foreach (var error in valid.Errors)
+                {
+                    component.ColumnErrors.AddParameter(error.PropertyName, error.ErrorMessage);
+                }
             }
 
             return valid.IsValid;
@@ -152,7 +160,11 @@ You can see here an example handling all component events that writes some grid
 
             if (!valid.IsValid)
             {
-                component.Error = valid.ToString();
+                component.Error = "Update operation returned one or more errors";
+                foreach (var error in valid.Errors)
+                {
+                    component.ColumnErrors.AddParameter(error.PropertyName, error.ErrorMessage);
+                }
             }
 
             return valid.IsValid;
diff --git a/docs/blazor_server/Events.md b/docs/blazor_server/Events.md
index f286edf1..a86b60e7 100644
--- a/docs/blazor_server/Events.md
+++ b/docs/blazor_server/Events.md
@@ -33,6 +33,7 @@ And these events are provided to allow running tasks before and after grid is re
 If you want to handle an event you have to create a reference to the ```GridCompoment```. 
 
 The ```GridCompoment``` object has an attribute named ```Error``` that can be set to show an error on the CRUD form.
+There is also another property named ```ColumnErrors``` to show errors specific to each each form field. ```ColumnErrors``` is a ```QueryDictionary``` to store the error message for each field.
 
 Then you have to add the events that you want to handle in the ```OnAfterRender``` method.
 
@@ -139,7 +140,11 @@ You can see here an example handling all component events that writes some grid
 
             if (!valid.IsValid)
             {
-                component.Error = valid.ToString();
+                component.Error = "Insert operation returned one or more errors";
+                foreach (var error in valid.Errors)
+                {
+                    component.ColumnErrors.AddParameter(error.PropertyName, error.ErrorMessage);
+                }
             }
 
             return valid.IsValid;
@@ -152,7 +157,11 @@ You can see here an example handling all component events that writes some grid
 
             if (!valid.IsValid)
             {
-                component.Error = valid.ToString();
+                component.Error = "Update operation returned one or more errors";
+                foreach (var error in valid.Errors)
+                {
+                    component.ColumnErrors.AddParameter(error.PropertyName, error.ErrorMessage);
+                }
             }
 
             return valid.IsValid;
diff --git a/docs/dotnetcore_blazor/Events.md b/docs/dotnetcore_blazor/Events.md
index 927a481d..01758ef9 100644
--- a/docs/dotnetcore_blazor/Events.md
+++ b/docs/dotnetcore_blazor/Events.md
@@ -33,6 +33,7 @@ And these events are provided to allow running tasks before and after grid is re
 If you want to handle an event you have to create a reference to the ```GridCompoment```. 
 
 The ```GridCompoment``` object has an attribute named ```Error``` that can be set to show an error on the CRUD form.
+There is also another property named ```ColumnErrors``` to show errors specific to each each form field. ```ColumnErrors``` is a ```QueryDictionary``` to store the error message for each field.
 
 Then you have to add the events that you want to handle in the ```OnAfterRender``` method.
 
@@ -139,7 +140,11 @@ You can see here an example handling all component events that writes some grid
 
             if (!valid.IsValid)
             {
-                component.Error = valid.ToString();
+                component.Error = "Insert operation returned one or more errors";
+                foreach (var error in valid.Errors)
+                {
+                    component.ColumnErrors.AddParameter(error.PropertyName, error.ErrorMessage);
+                }
             }
 
             return valid.IsValid;
@@ -152,7 +157,11 @@ You can see here an example handling all component events that writes some grid
 
             if (!valid.IsValid)
             {
-                component.Error = valid.ToString();
+                component.Error = "Update operation returned one or more errors";
+                foreach (var error in valid.Errors)
+                {
+                    component.ColumnErrors.AddParameter(error.PropertyName, error.ErrorMessage);
+                }
             }
 
             return valid.IsValid;