Adjustable tooltips text on CRUD buttons (#363)

gustavnavar · Oct 12, 2022 · de8af0b · de8af0b
1 parent f3d893d
commit de8af0b
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 20 deletions.
diff --git a/GridBlazor/CGrid.cs b/GridBlazor/CGrid.cs
@@ -829,6 +829,26 @@ public virtual void AutoGenerateColumns()
         /// </summary>
         public string DeleteLabel { get; set; }
 
+        /// <summary>
+        ///     Create button tooltip
+        /// </summary>
+        public string CreateTooltip { get; set; } = Strings.CreateItem;
+
+        /// <summary>
+        ///     Read button tooltip
+        /// </summary>
+        public string ReadTooltip { get; set; } = Strings.ReadItem;
+
+        /// <summary>
+        ///     Update button tooltip
+        /// </summary>
+        public string UpdateTooltip { get; set; } = Strings.UpdateItem;
+
+        /// <summary>
+        ///     Delete button tooltip
+        /// </summary>
+        public string DeleteTooltip { get; set; } = Strings.DeleteItem;
+
         /// <summary>
         ///     Create form label
         /// </summary>

diff --git a/GridBlazor/Client/GridClient.cs b/GridBlazor/Client/GridClient.cs
@@ -393,6 +393,20 @@ public IGridClient<T> SetCrudButtonLabels(string createLabel, string readLabel,
             return this;
         }
 
+        public IGridClient<T> SetCrudButtonTooltips(string createTooltip, string readTooltip, string updateTooltip,
+            string deleteTooltip)
+        {
+            if(createTooltip != null)
+                _source.CreateTooltip = createTooltip;
+            if (readTooltip != null)
+                _source.ReadTooltip = readTooltip;
+            if (updateTooltip != null)
+                _source.UpdateTooltip = updateTooltip;
+            if (deleteTooltip != null)
+                _source.DeleteTooltip = deleteTooltip;
+            return this;
+        }
+
         public IGridClient<T> SetCrudFormLabels(string createLabel, string readLabel, string updateLabel, string deleteLabel)
         {
             _source.CreateFormLabel = createLabel;

diff --git a/GridBlazor/Client/IGridClient.cs b/GridBlazor/Client/IGridClient.cs
@@ -215,6 +215,11 @@ IGridClient<T> ODataCrud(bool createEnabled, Func<T, bool> readEnabled,
         /// </summary>
         IGridClient<T> SetCrudButtonLabels(string createLabel, string readLabel, string updateLabel, string deleteLabel);
 
+        /// <summary>
+        ///     Configure CRUD button tootips
+        /// </summary>
+        IGridClient<T> SetCrudButtonTooltips(string createTooltip, string readTooltip, string updateTooltip, string deleteTooltip);
+
         /// <summary>
         ///     Configure CRUD button labels
         /// </summary>

diff --git a/GridBlazor/ICGrid.cs b/GridBlazor/ICGrid.cs
@@ -301,6 +301,26 @@ public interface ICGrid : IGrid, IGridOptions
         /// </summary>
         string DeleteLabel { get; set; }
 
+        /// <summary>
+        ///     Create button tooltip
+        /// </summary>
+        string CreateTooltip { get; set; }
+
+        /// <summary>
+        ///     Read button tooltip
+        /// </summary>
+        string ReadTooltip { get; set; }
+
+        /// <summary>
+        ///     Update button tooltip
+        /// </summary>
+        string UpdateTooltip { get; set; }
+
+        /// <summary>
+        ///     Delete button tooltip
+        /// </summary>
+        string DeleteTooltip { get; set; }
+
         /// <summary>
         ///     Create form label
         /// </summary>

diff --git a/GridBlazor/Pages/GridComponent.razor b/GridBlazor/Pages/GridComponent.razor
@@ -100,11 +100,11 @@
                                     <div class="grid-crud">
                                         @if (string.IsNullOrWhiteSpace(Grid.CreateLabel))
                                         {
-                                            <button class="grid-button grid-button-add btn btn-sm btn-primary" type="button" title="@Strings.CreateItem" @onclick="CreateHandler" @onclick:stopPropagation></button>
+                                            <button class="grid-button grid-button-add btn btn-sm btn-primary" type="button" title="@Grid.CreateTooltip" @onclick="CreateHandler" @onclick:stopPropagation></button>
                                         }
                                         else
                                         {
-                                            <button class="grid-button-label-add btn btn-sm btn-primary" type="button" title="@Strings.CreateItem" @onclick="CreateHandler" @onclick:stopPropagation>@Grid.CreateLabel</button>
+                                            <button class="grid-button-label-add btn btn-sm btn-primary" type="button" title="@Grid.CreateTooltip" @onclick="CreateHandler" @onclick:stopPropagation>@Grid.CreateLabel</button>
                                         }
                                     </div>
                                 }
@@ -113,11 +113,11 @@
                                     <div class="grid-crud">
                                         @if (string.IsNullOrWhiteSpace(Grid.ReadLabel))
                                         {
-                                            <button class='grid-button grid-button-header-view btn btn-sm btn-primary' title="@Strings.ReadItem" @onclick="@(e => ReadSelectedHandler())" type="button" @onclick:stopPropagation></button>
+                                            <button class='grid-button grid-button-header-view btn btn-sm btn-primary' title="@Grid.ReadTooltip" @onclick="@(e => ReadSelectedHandler())" type="button" @onclick:stopPropagation></button>
                                         }
                                         else
                                         {
-                                            <button class='grid-button-header-label-view btn btn-sm btn-primary' title="@Strings.ReadItem" @onclick="@(e => ReadSelectedHandler())" type="button" @onclick:stopPropagation>@Grid.ReadLabel</button>
+                                            <button class='grid-button-header-label-view btn btn-sm btn-primary' title="@Grid.ReadTooltip" @onclick="@(e => ReadSelectedHandler())" type="button" @onclick:stopPropagation>@Grid.ReadLabel</button>
                                         }
                                     </div>
                                 }
@@ -126,11 +126,11 @@
                                     <div class="grid-crud">
                                         @if (string.IsNullOrWhiteSpace(Grid.UpdateLabel))
                                         {
-                                            <button class='grid-button grid-button-header-edit btn btn-sm btn-primary' title="@Strings.UpdateItem" @onclick="@(e => UpdateSelectedHandler())" type="button" @onclick:stopPropagation></button>
+                                            <button class='grid-button grid-button-header-edit btn btn-sm btn-primary' title="@Grid.UpdateTooltip" @onclick="@(e => UpdateSelectedHandler())" type="button" @onclick:stopPropagation></button>
                                         }
                                         else
                                         {
-                                            <button class='grid-button-header-label-edit btn btn-sm btn-primary' title="@Strings.UpdateItem" @onclick="@(e => UpdateSelectedHandler())" type="button" @onclick:stopPropagation>@Grid.UpdateLabel</button>
+                                            <button class='grid-button-header-label-edit btn btn-sm btn-primary' title="@Grid.UpdateTooltip" @onclick="@(e => UpdateSelectedHandler())" type="button" @onclick:stopPropagation>@Grid.UpdateLabel</button>
                                         }
                                     </div>
                                 }
@@ -139,11 +139,11 @@
                                     <div class="grid-crud">
                                         @if (string.IsNullOrWhiteSpace(Grid.DeleteLabel))
                                         {
-                                            <button class='grid-button grid-button-header-delete btn btn-sm btn-primary' title="@Strings.DeleteItem" @onclick="@(e => DeleteSelectedHandler())" type="button" @onclick:stopPropagation></button>
+                                            <button class='grid-button grid-button-header-delete btn btn-sm btn-primary' title="@Grid.DeleteTooltip" @onclick="@(e => DeleteSelectedHandler())" type="button" @onclick:stopPropagation></button>
                                         }
                                         else
                                         {
-                                            <button class='grid-button-header-label-delete btn btn-sm btn-primary' title="@Strings.DeleteItem" @onclick="@(e => DeleteSelectedHandler())" type="button" @onclick:stopPropagation>@Grid.DeleteLabel</button>
+                                            <button class='grid-button-header-label-delete btn btn-sm btn-primary' title="@Grid.DeleteTooltip" @onclick="@(e => DeleteSelectedHandler())" type="button" @onclick:stopPropagation>@Grid.DeleteLabel</button>
                                         }
                                     </div>
                                 }

diff --git a/GridBlazor/Pages/GridRowComponent.razor b/GridBlazor/Pages/GridRowComponent.razor
@@ -26,11 +26,11 @@
                 {
                     @if (string.IsNullOrWhiteSpace(Grid.ReadLabel))
                     {
-                        <button class='grid-button grid-button-view btn btn-sm btn-primary' title="@Strings.ReadItem" @onclick="@(e => GridComponent.ReadHandler(Item))" type="button" @onclick:stopPropagation></button>
+                        <button class='grid-button grid-button-view btn btn-sm btn-primary' title="@Grid.ReadTooltip" @onclick="@(e => GridComponent.ReadHandler(Item))" type="button" @onclick:stopPropagation></button>
                     }
                     else
                     {
-                        <button class='grid-button-label-view btn btn-sm btn-primary' title="@Strings.ReadItem" @onclick="@(e => GridComponent.ReadHandler(Item))" type="button" @onclick:stopPropagation>@Grid.ReadLabel</button>
+                        <button class='grid-button-label-view btn btn-sm btn-primary' title="@Grid.ReadTooltip" @onclick="@(e => GridComponent.ReadHandler(Item))" type="button" @onclick:stopPropagation>@Grid.ReadLabel</button>
                     }  
                 }
             </td>
@@ -42,11 +42,11 @@
                 {
                     @if (string.IsNullOrWhiteSpace(Grid.UpdateLabel))
                     {
-                        <button class='grid-button grid-button-edit btn btn-sm btn-primary' title="@Strings.UpdateItem" @onclick="@(e => GridComponent.UpdateHandler(Item))" type="button" @onclick:stopPropagation></button>
+                        <button class='grid-button grid-button-edit btn btn-sm btn-primary' title="@Grid.UpdateTooltip" @onclick="@(e => GridComponent.UpdateHandler(Item))" type="button" @onclick:stopPropagation></button>
                     }
                     else
                     {
-                        <button class='grid-button-label-edit btn btn-sm btn-primary' title="@Strings.UpdateItem" @onclick="@(e => GridComponent.UpdateHandler(Item))" type="button" @onclick:stopPropagation>@Grid.UpdateLabel</button>
+                        <button class='grid-button-label-edit btn btn-sm btn-primary' title="@Grid.UpdateTooltip" @onclick="@(e => GridComponent.UpdateHandler(Item))" type="button" @onclick:stopPropagation>@Grid.UpdateLabel</button>
                     } 
                 }
             </td>
@@ -60,11 +60,11 @@
                     {
                         @if (string.IsNullOrWhiteSpace(Grid.DeleteLabel))
                         {
-                            <button class='grid-button grid-button-delete btn btn-sm btn-primary' title="@Strings.DeleteItem" @onclick="@(e => GridComponent.DeleteHandler(Item))" type="button" @onclick:stopPropagation></button>
+                            <button class='grid-button grid-button-delete btn btn-sm btn-primary' title="@Grid.DeleteTooltip" @onclick="@(e => GridComponent.DeleteHandler(Item))" type="button" @onclick:stopPropagation></button>
                         }
                         else
                         {
-                            <button class='grid-button-label-delete btn btn-sm btn-primary' title="@Strings.DeleteItem" @onclick="@(e => GridComponent.DeleteHandler(Item))" type="button" @onclick:stopPropagation>@Grid.DeleteLabel</button>
+                            <button class='grid-button-label-delete btn btn-sm btn-primary' title="@Grid.DeleteTooltip" @onclick="@(e => GridComponent.DeleteHandler(Item))" type="button" @onclick:stopPropagation>@Grid.DeleteLabel</button>
                         }
                     }
                 }
@@ -105,11 +105,11 @@ else
                 {
                     @if (string.IsNullOrWhiteSpace(Grid.ReadLabel))
                     {
-                        <button class='grid-button grid-button-view btn btn-sm btn-primary' title="@Strings.ReadItem" @onclick="@(e => GridComponent.ReadHandler(Item))" type="button" @onclick:stopPropagation></button>
+                        <button class='grid-button grid-button-view btn btn-sm btn-primary' title="@Grid.ReadTooltip" @onclick="@(e => GridComponent.ReadHandler(Item))" type="button" @onclick:stopPropagation></button>
                     }
                     else
                     {
-                        <button class='grid-button-label-view btn btn-sm btn-primary' title="@Strings.ReadItem" @onclick="@(e => GridComponent.ReadHandler(Item))" type="button" @onclick:stopPropagation>@Grid.ReadLabel</button>
+                        <button class='grid-button-label-view btn btn-sm btn-primary' title="@Grid.ReadTooltip" @onclick="@(e => GridComponent.ReadHandler(Item))" type="button" @onclick:stopPropagation>@Grid.ReadLabel</button>
                     } 
                 }
             </td>
@@ -123,11 +123,11 @@ else
                     {
                         @if (string.IsNullOrWhiteSpace(Grid.UpdateLabel))
                         {
-                            <button class='grid-button grid-button-edit btn btn-sm btn-primary' title="@Strings.UpdateItem" @onclick="@(e => GridComponent.UpdateHandler(Item))" type="button" @onclick:stopPropagation></button>
+                            <button class='grid-button grid-button-edit btn btn-sm btn-primary' title="@Grid.UpdateTooltip" @onclick="@(e => GridComponent.UpdateHandler(Item))" type="button" @onclick:stopPropagation></button>
                         }
                         else
                         {
-                            <button class='grid-button-label-edit btn btn-sm btn-primary' title="@Strings.UpdateItem" @onclick="@(e => GridComponent.UpdateHandler(Item))" type="button" @onclick:stopPropagation>@Grid.UpdateLabel</button>
+                            <button class='grid-button-label-edit btn btn-sm btn-primary' title="@Grid.UpdateTooltip" @onclick="@(e => GridComponent.UpdateHandler(Item))" type="button" @onclick:stopPropagation>@Grid.UpdateLabel</button>
                         }
                     }
                 }
@@ -140,11 +140,11 @@ else
                 {
                     @if (string.IsNullOrWhiteSpace(Grid.DeleteLabel))
                     {
-                        <button class='grid-button grid-button-delete btn btn-sm btn-primary' title="@Strings.DeleteItem" @onclick="@(e => GridComponent.DeleteHandler(Item))" type="button" @onclick:stopPropagation></button>
+                        <button class='grid-button grid-button-delete btn btn-sm btn-primary' title="@Grid.DeleteTooltip" @onclick="@(e => GridComponent.DeleteHandler(Item))" type="button" @onclick:stopPropagation></button>
                     }
                     else
                     {
-                        <button class='grid-button-label-delete btn btn-sm btn-primary' title="@Strings.DeleteItem" @onclick="@(e => GridComponent.DeleteHandler(Item))" type="button" @onclick:stopPropagation>@Grid.DeleteLabel</button>
+                        <button class='grid-button-label-delete btn btn-sm btn-primary' title="@Grid.DeleteTooltip" @onclick="@(e => GridComponent.DeleteHandler(Item))" type="button" @onclick:stopPropagation>@Grid.DeleteLabel</button>
                     }
                 }
             </td>

diff --git a/docs/blazor_client/Crud.md b/docs/blazor_client/Crud.md
@@ -469,6 +469,18 @@ You can also use text labels for the header buttons. In this the configuration i
         .SetCrudButtonLabels("Add", "View", "Edit", "Delete");
 ```
 
+## CRUD button tooltips
+
+You can change the default CRUD button tooltips using the ```SetCrudButtonTooltips``` method of the ```GridClient``` object for this:
+```c#
+    var client = new GridClient<Order>(HttpClient, url, query, false, "ordersGrid", ColumnCollections.OrderColumnsWithCustomCrud, locale)
+        .Crud(true, orderService)
+        .SetCrudButtonTooltips("Add Order", "View Order", "Edit Order", "Delete Order");
+```
+
+If any of the passed values is null, then the tooltip text will be the default one. 
+If any of the passed values is empty (""), then there will not be a tooltipfor it. 
+
 ## Custom forms (Optional)
 
 If you want to use custom forms you can enable them using the **SetCreateComponent**, **SetReadComponent**, **SetUpdateComponent** and **SetDeleteComponent**  methods of the **GridClient** object:

diff --git a/docs/blazor_grpc/Crud.md b/docs/blazor_grpc/Crud.md
@@ -505,6 +505,18 @@ You can also use text labels for the header buttons. In this the configuration i
         .SetCrudButtonLabels("Add", "View", "Edit", "Delete");
 ```
 
+## CRUD button tooltips
+
+You can change the default CRUD button tooltips using the ```SetCrudButtonTooltips``` method of the ```GridClient``` object for this:
+```c#
+    var client = new GridClient<Order>(gridClientService.OrderColumnsWithCrud, query, false, "ordersGrid", ColumnCollections.OrderColumnsWithCustomCrud, locale)
+        .Crud(true, orderService)
+        .SetCrudButtonTooltips("Add Order", "View Order", "Edit Order", "Delete Order");
+```
+
+If any of the passed values is null, then the tooltip text will be the default one. 
+If any of the passed values is empty (""), then there will not be a tooltipfor it. 
+
 ## Custom forms (Optional)
 
 If you want to use custom forms you can enable them using the **SetCreateComponent**, **SetReadComponent**, **SetUpdateComponent** and **SetDeleteComponent**  methods of the **GridClient** object:

diff --git a/docs/blazor_local/Crud.md b/docs/blazor_local/Crud.md
@@ -362,6 +362,18 @@ You can also use text labels for the header buttons. In this the configuration i
         .SetCrudButtonLabels("Add", "View", "Edit", "Delete");
 ```
 
+## CRUD button tooltips
+
+You can change the default CRUD button tooltips using the ```SetCrudButtonTooltips``` method of the ```GridClient``` object for this:
+```c#
+    var client = new GridClient<Order>(gridClientService.OrderColumnsWithCrud, query, false, "ordersGrid", ColumnCollections.OrderColumnsWithCustomCrud, locale)
+        .Crud(true, orderService)
+        .SetCrudButtonTooltips("Add Order", "View Order", "Edit Order", "Delete Order");
+```
+
+If any of the passed values is null, then the tooltip text will be the default one. 
+If any of the passed values is empty (""), then there will not be a tooltipfor it. 
+
 ## Custom forms (Optional)
 
 If you want to use custom forms you can enable them using the **SetCreateComponent**, **SetReadComponent**, **SetUpdateComponent** and **SetDeleteComponent**  methods of the **GridClient** object:

diff --git a/docs/blazor_odata/Crud.md b/docs/blazor_odata/Crud.md
@@ -405,6 +405,18 @@ You can also use text labels for the header buttons. In this the configuration i
         .SetCrudButtonLabels("Add", "View", "Edit", "Delete");
 ```
 
+## CRUD button tooltips
+
+You can change the default CRUD button tooltips using the ```SetCrudButtonTooltips``` method of the ```GridClient``` object for this:
+```c#
+    var client = new GridODataClient<Order>(HttpClient, url, query, false, "ordersGrid", columns, 10, locale)
+        .Crud(true, orderService)
+        .SetCrudButtonTooltips("Add Order", "View Order", "Edit Order", "Delete Order");
+```
+
+If any of the passed values is null, then the tooltip text will be the default one. 
+If any of the passed values is empty (""), then there will not be a tooltipfor it. 
+
 ## Custom forms (Optional)
 
 If you want to use custom forms you can enable them using the **SetCreateComponent**, **SetReadComponent**, **SetUpdateComponent** and **SetDeleteComponent**  methods of the **GridODataClient** object: