diff --git a/docs/en/UI/AspNetCore/Data-Tables.md b/docs/en/UI/AspNetCore/Data-Tables.md index b7c4dd3b43..023c61ad87 100644 --- a/docs/en/UI/AspNetCore/Data-Tables.md +++ b/docs/en/UI/AspNetCore/Data-Tables.md @@ -97,6 +97,84 @@ Here, the all configuration options; * `dom`: Default value is `<"dataTable_filters"f>rt<"row dataTable_footer"<"col-auto"l><"col-auto"i><"col"p>>`. * `language`: A function that returns the localization text using the current language. +### Row Actions + +`rowAction` is an option defined by the ABP Framework to the column definitions to show a drop down button to take actions for a row in the table. + +The example screenshot below shows the actions for each user in the user management table: + +![datatables-example](../../images/datatables-row-actions.png) + +`rowAction` is defined as a part of a column definition: + +````csharp +{ + title: l('Actions'), + rowAction: { + //TODO: CONFIGURATION + } +}, +```` + +**Example: Show *Edit* and *Delete* actions for a book row** + +````js +{ + title: l('Actions'), + rowAction: { + items: + [ + { + text: l('Edit'), + action: function (data) { + //TODO: Open a modal to edit the book + } + }, + { + text: l('Delete'), + confirmMessage: function (data) { + return "Are you sure to delete the book " + data.record.name; + }, + action: function (data) { + acme.bookStore.books.book + .delete(data.record.id) + .then(function() { + abp.notify.info("Successfully deleted!"); + data.table.ajax.reload(); + }); + } + } + ] + } +}, +```` + +#### Action Items + +`items` is an array of action definitions. An action definition can have the following options; + +* `text`: The text (a `string`) for this action to be shown in the actions drop down. +* `action`: A `function` that is executed when the user clicks to the action. The function takes a `data` argument that has the following fields; + * `data.record`: This is the data object related to the row. You can access the data fields like `data.record.id`, `data.record.name`... etc. + * `data.table`: The DataTables instance. +* `confirmMessage`: A function (see the example above) that returns a message (`string`) to show a dialog to get a confirmation from the user before executing the `action`. Example confirmation dialog: + +![datatables-row-actions-confirmation](D:\Github\abp\docs\en\images\datatables-row-actions-confirmation.png) + +You can use the [localization](JavaScript-API/Localization.md) system to show a localized message. + +* `visible`: A `bool` or a `function` that returns a `bool`. If the result is `false`, then the action is not shown in the actions dropdown. This is generally combined by the [authorization](JavaScript-API/Auth.md) system to hide the action if the user has no permission to take this action. Example: + +````js +visible: abp.auth.isGranted('BookStore.Books.Delete'); +```` + +If you define a `function`, then the `function` has two arguments: `record` (the data object of the related row) and the `table` (the DataTable instance). So, you can decide to show/hide the action dynamically, based on the row data and other conditions. + +* `iconClass`: Can be used to show a font-icon, like a [Font-Awesome](https://fontawesome.com/) icon (ex: `fas fa-trash-alt`), near to the action text. +* `enabled`: A `function` that returns a `bool` to disable the action. The `function` takes a `data` object with two fields: `data.record` is the data object related to the row and `data.table` is the DataTables instance. +* `displayNameHtml`: An alternative to use `text` and/or `icon`. You can directly set an HTML content as the display name of the action. + ## Other Data Grids You can use any library you like. For example, [see this article](https://community.abp.io/articles/using-devextreme-components-with-the-abp-framework-zb8z7yqv) to learn how to use DevExtreme Data Grid in your applications. \ No newline at end of file diff --git a/docs/en/images/datatables-row-actions-confirmation.png b/docs/en/images/datatables-row-actions-confirmation.png new file mode 100644 index 0000000000..9be8433f9c Binary files /dev/null and b/docs/en/images/datatables-row-actions-confirmation.png differ diff --git a/docs/en/images/datatables-row-actions.png b/docs/en/images/datatables-row-actions.png new file mode 100644 index 0000000000..4eae0f098a Binary files /dev/null and b/docs/en/images/datatables-row-actions.png differ