Create custom button like Filter or Export

Grocery CRUD Enterprise
1

Hi. Im pretty new developing with GC. Wanted to ask if it is possible to add a button in the header tools section, next or close to “Export” and Filter, to perform custom operations. In my case, im showing to the user the list of lastes reports he has generated. I want to add a button to start something like a wizard in order to generate a new report collecting some data. Thanks for your help

2

Hello @jgct_70 and welcome to our forums :hugs:

Currently although I understand that this is a simple thing with the current implementation of Grocery CRUD Enterprise, you can only append the button with JavaScript once grocery CRUD datagrid is loaded. So for example you can add the below code (which I have tested that it works) to append a button:

window.addEventListener('gcrud.datagrid.ready', () => {
    $('.gc-header-tools').append('<div class="gc-settings-button-container floatR t5"><a class="btn btn-outline-dark r5" href="a-custom-url" role="button" target=""><i class="fa fa-pencil"></i><span>&nbsp;Something</span></a></div>');
});

Currently I am refactoring the frontend for Grocery CRUD Enterprise so developers can more easily change the frontend code if there is something they need globally. I am still not there to be honest but I am working on it so we can have an easier implementation of custom JavaScript callbacks, buttons… e.t.c. on Grocery CRUD Enterprise version 3.

Hope it helped

Regards
Johnny

1 Like
3

Thank you very much Johnny, I will test the code right away. I was trying something similar, in fact the same, but without the event listener, and becase of that i think the jquery search didn’t find the element by class. GC is a great piece of work and becomes better in each version. :wink:

1 Like
4

PS: Glad to say it worked perfectly. Thanks again!