JavaScript Events

Grocery CRUD Enterprise is dispatching some events on some actions. For performance and security reasons the external events are not enabled by default on Grocery CRUD Enterprise version 3.

Important note: To enable JavaScript events, please be aware that you need to set the configuration value "publish_events" to true. If this value is left as the default false, the events will not be triggered, so make sure to update it accordingly.

Datagrid Update Event

"Datagrid Ready" event is triggered when the first load of the datagrid has been completed. With simple words all the data load has been completed, and you are ready to add your custom stuff in the datagrid. Please keep in mind that this event will triggerred only once per refresh and not in every datagrid refresh/update.

window.addEventListener('gcrud.datagrid.ready', () => {
    console.log('datagrid ready triggered');
});

Add Form Event

The add form event is triggered when the add/insert form is loaded.

window.addEventListener('gcrud.form.add', () => {
    console.log('Add Form triggered');
});

Edit, Clone and Read Form

All the below events are very similar, and I guess they are self-explanatory. The only main difference is that you are also getting some extra details from this event. The most common info is the primary key value for the event.

window.addEventListener('gcrud.form.edit', ({detail}) => {
    console.log('edit form triggered', detail);
});

window.addEventListener('gcrud.form.clone', ({detail}) => {
    console.log('clone form triggered', detail);
});

window.addEventListener('gcrud.form.read', ({detail}) => {
    console.log('read form triggered', detail);
});

All the events that we have so far

All the events that we have so far are listed below ordered alphabetically for the latest current version of Grocery CRUD Enterprise.


[
    "gcrud.column-width.change-width",
    "gcrud.column-width.reset-column-width",
    "gcrud.columns.modal",
    "gcrud.columns.modal-close",
    "gcrud.columns.ordering-change",
    "gcrud.columns.reset-ordering",
    "gcrud.columns.toggle-visible-column",
    "gcrud.configuration.init",
    "gcrud.configuration.init-fetch",
    "gcrud.configuration.main-configuration",
    "gcrud.datagrid.clear-cache",
    "gcrud.datagrid.clear-filtering",
    "gcrud.datagrid.data-fetch",
    "gcrud.datagrid.data-render",
    "gcrud.datagrid.ordering-reset",
    "gcrud.datagrid.page-change",
    "gcrud.datagrid.ready",
    "gcrud.filtering.form-submit",
    "gcrud.filtering.modal-open",
    "gcrud.form.add",
    "gcrud.form.add-load",
    "gcrud.form.edit",
    "gcrud.form.edit-load",
    "gcrud.form.insert",
    "gcrud.form.insert-success",
    "gcrud.form.modal-close",
    "gcrud.form.read",
    "gcrud.form.read-load",
    "gcrud.form.update",
    "gcrud.form.update-success",
    "gcrud.search-async.search",
]

Set Quick Search Value

groceryCrudSetQuickSearchValue('columnName', 'columnValue')

The groceryCrudSetQuickSearchValue function is a JavaScript utility that allows you to programmatically set the value of a quick search field in Grocery CRUD Enterprise. This function is particularly useful when you need to implement custom filter buttons or other advanced filtering mechanisms.

Parameters:

columnName: The name of the column in the datagrid that you want to filter.
columnValue: The value that you want to set for the quick search field.

Here's an example of how to use the groceryCrudSetQuickSearchValue function:

An external button sets the quick search value for the department_id column to '3' upon being clicked:

<button id="setSearchValue">Marketing Department</button>

And in the JavaScript file:

document.getElementById('setSearchValue').addEventListener('click', () => {
    groceryCrudSetQuickSearchValue('department_id', '3');
});

In this example, the function sets the quick search value for the department_id column to '3' when the button with the ID setSearchValue is clicked.

Set Form Field Value

groceryCrudSetFieldValue('fieldName', 'fieldValue')

groceryCrudSetFieldValue function is a JavaScript utility that allows you to set the value of a form field in Grocery CRUD Enterprise. This function is particularly useful when you need to dynamically fill form fields in add or edit forms.

Parameters:

fieldName: The name of the form field that you want to set.
fieldValue: The value that you want to set for the form field.

Usage:

Here's an example of how to use the groceryCrudSetFieldValue function:

An external button sets the value for the department_name field to 'Marketing' upon being clicked:

<button id="setFieldValue">Marketing Department</button>

And in the JavaScript file:

document.getElementById('setFieldValue').addEventListener('click', () => {
    groceryCrudSetFieldValue('department_name', 'Marketing');
});

In this example, the function sets the value for the department_name field to 'Marketing' when the button with the ID setFieldValue is clicked.