Overview

DataGridHook is a highly customizable addon module to prettify all DataGrid widgets.

This module provides a set of JavaScript actions and a snippet to hook into DataGrid widgets and rewrite cell content. This allows you e.g. to replace column images with FontAwesome icons and even implement click actions on cells. Besides the JavaScript actions, a very simple widget is included that triggers an action upon page load. The provided snippet uses this widget to trigger a nanoflow which executes a JavaScript action for the datagrid hook.

Documentation

Typical usage scenario

Add this module to your project to enhance DataGrids with custom cell content, like FontAwesome icons, custom styling and even click actions.

• The provided snippet in the module executes the JavaScript action JSA_GridHook_Enum, which replaces enum image cell content with custom cell content. The JavaScript actions adds a custom CSS class "col-enum-val". This CSS class can be used to replace the enum image with e.g. a custom (FontAwesome) icon.
• The JavaScript action JSA_GridHookCustomClick replaces cell content with clickable content. 

You can see it all in action in the "DataGridHook Demo App". Login with: demo / DemoHook1234!

Features and limitations

Simple to use JavaScript actions and a snippet which can be placed on the page with a DataGrid to enhance its look & feel.

Uses JavaScript to hook into the DataGrid. The provided scripts can easily be enhanced for your own custom look & feel of the DataGrids.

Only works on DataGrid (1)

Dependencies [optional]

Uses the widget PageAction to trigger the nanoflow with JavaScript action for hooking. The widget is packaged with this module.

Installation [optional]

Add the module to your project

Configuration [optional]

See the "DataGridHook Demo App" for a working example.

To replace enum image cell content with custom content:

• Use the provided snippet and add it to the page of your DataGrid. 
• add CSS to customize the appearance of the cell. E.g. 

.col-enum-val {

   color: $brand-primary;

   .content {

      display: none;

   }

   //enum: ExampleApp.Enum_LogLevel - styling with fontawesome icons

   &.INFO:before {

      @extend .fas;

      @extend .fa-info-circle;

   }

   //etc

}