Added text & icon support #283

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/datatables/datatables-extensions.js

@@ -26,14 +26,22 @@
            targets: 0,
            rowAction: 
            {
-                text: 'My actions',
+                text: 'My actions', 
+                icon: 'bolt' //see fa icon set https://fontawesome.com/v4.7.0/icons/
                 items:
                     [
                         {
                             text: "My first action",
-                            visible: function () {
-                                return true;
-                            },
+                            icon: "thumbs-o-down", 
+                            visible: true // or you can use functions eg: function(){ return true/false;} ,
+                            action: function (data) {
+                                console.log(data.record);
+                            }
+                        },
+                         {
+                            text: "My second action",
+                            icon: "thumbs-o-up",
+                            visible: true, 
                             action: function (data) {
                                 console.log(data.record);
                             }
@@ -42,17 +50,40 @@
            }
         },
     *************************************************************************/
+    var localize = function (key) {
+        return abp.localization.getResource('AbpUi')(key);
+    }
+
     var recordActions = function () {
         if (!$.fn.dataTableExt) {
             return;
         }
 
+        var getVisibilityValue = function (visibilityField, record) {
+            if (visibilityField === undefined) {
+                return true;
+            }
+
+            if (abp.utils.isFunction(visibilityField)) {
+                return visibilityField(record);
+            } else {
+                return visibilityField;
+            }
+        }
+
         var _createDropdownItem = function (record, fieldItem) {
             var $li = $('<li/>');
             var $a = $('<a/>');
 
-            if (fieldItem.text) {
+            if (fieldItem.displayNameHtml) {
                 $a.html(fieldItem.text);
+            } else {
+                if (fieldItem.icon) {
+                    var icon = fieldItem.iconClass ? fieldItem.iconClass : "fa fa-" + fieldItem.icon;
+                    $a.append($("<i>").addClass(icon + " mr-1"));
+                }
+
+                $a.append(fieldItem.text);
             }
 
             if (fieldItem.action) {
@@ -78,25 +109,31 @@
             return $li;
         }
 
-        var getVisibilityValue = function(visibilityField, record) {
-            if (visibilityField === undefined) {
-                return true;
-            }
-
-            if (abp.utils.isFunction(visibilityField)) {
-                return visibilityField(record);
-            } else {
-                return visibilityField;
-            }
-        }
-
         var _createButtonDropdown = function (record, field) {
             var $container = $('<div/>')
                 .addClass('dropdown')
                 .addClass('action-button');
 
-            var $dropdownButton = $('<button/>')
-                .html(field.text)
+            var $dropdownButton = $('<button/>');
+
+            if (field.icon !== undefined) {
+                //setting field.icon=null will show no icon.
+                if (field.icon) {
+                    $dropdownButton.append($("<i>").addClass("fa fa-" + field.icon + " mr-1"));
+                }
+            } else if (field.iconClass) {
+                $dropdownButton.append($("<i>").addClass(field.iconClass));
+            } else {
+                $dropdownButton.append($("<i>").addClass("fa fa-cog mr-1"));
+            }
+
+            if (field.text) {
+                $dropdownButton.append(field.text);
+            } else {
+                $dropdownButton.append(localize("DatatableActionDropdownDefaultText"));
+            }
+
+            $dropdownButton
                 .addClass('btn btn-primary btn-sm dropdown-toggle')
                 .attr('data-toggle', 'dropdown')
                 .attr('aria-haspopup', 'true')
@@ -139,12 +176,13 @@
 
         var _createSingleButton = function (record, field) {
             $(field.element).data(record);
+
             var isVisible = getVisibilityValue(field.visible, record);
 
             if (isVisible) {
                 return field.element;
             }
-          
+
             return "";
         };
 
@@ -202,28 +240,31 @@
         };
 
         var _existingApiRenderRowActionsFunction = $.fn.dataTableExt.oApi.renderRowActions;
-        $.fn.dataTableExt.oApi.renderRowActions = function (tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull) {
-            if (_existingApiRenderRowActionsFunction) {
-                _existingApiRenderRowActionsFunction(tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull);
-            }
+        $.fn.dataTableExt.oApi.renderRowActions =
+            function (tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull) {
+                if (_existingApiRenderRowActionsFunction) {
+                    _existingApiRenderRowActionsFunction(tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull);
+                }
 
-            renderRowActions(tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull);
-        };
+                renderRowActions(tableInstance, nRow, aData, iDisplayIndex, iDisplayIndexFull);
+            };
 
         if (!$.fn.dataTable) {
             return;
         }
 
         var _existingDefaultFnRowCallback = $.fn.dataTable.defaults.fnRowCallback;
-        $.extend(true, $.fn.dataTable.defaults, {
-            fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
-                if (_existingDefaultFnRowCallback) {
-                    _existingDefaultFnRowCallback(this, nRow, aData, iDisplayIndex, iDisplayIndexFull);
-                }
+        $.extend(true,
+            $.fn.dataTable.defaults,
+            {
+                fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
+                    if (_existingDefaultFnRowCallback) {
+                        _existingDefaultFnRowCallback(this, nRow, aData, iDisplayIndex, iDisplayIndexFull);
+                    }
 
-                renderRowActions(this, nRow, aData, iDisplayIndex, iDisplayIndexFull);
-            }
-        });
+                    renderRowActions(this, nRow, aData, iDisplayIndex, iDisplayIndexFull);
+                }
+            });
 
     }();
 

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json

@@ -31,6 +31,7 @@
     "Submit": "Submit",
     "PagerNext": "Next",
     "PagerPrevious": "Previous",
-    "PagerInfo": "Showing {0} to {1} of {2} entries."
+    "PagerInfo": "Showing {0} to {1} of {2} entries.",
+    "DatatableActionDropdownDefaultText": "Actions"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json

@@ -28,6 +28,7 @@
     "Login": "Giriş",
     "Register": "Kaydol",
     "Logout": "Çıkış",
-    "Submit": "Gönder"
+    "Submit": "Gönder",
+    "DatatableActionDropdownDefaultText": "İşlemler"
   }
 }