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. In order to enable it you will need to change the configuration value publish_events to true.

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_form', () => {
    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_form', ({detail}) => {
    console.log('edit_form triggered', detail);
});

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

window.addEventListener('gcrud.form.read_form', ({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.ready",
    "gcrud.filtering.form-submit",
    "gcrud.filtering.modal-open",
    "gcrud.form.edit",
    "gcrud.form.edit-load",
    "gcrud.form.modal-close",
    "gcrud.form.read",
    "gcrud.form.read-load",
    "gcrud.form.update",
    "gcrud.form.update-success",
    "gcrud.search-async.search",
]