Button Type GroceryCrud

Grocery CRUD Enterprise
1

Hello @johnny ,

I have a few ideas to add features to digrocery crud to make it more powerful and beneficial for programmers. Perhaps if you don’t mind, you could consider disregarding my ideas. I’ve actually implemented these ideas in Grocery CRUD, but I mixed them up with less clean code. So, if these features were to be included in the official Grocery, it would certainly be better.

Variations of button types in the grid:

  1. Prompt: If a button is created with this category, when the user clicks the button, a prompt will appear with yes and no buttons, similar to the delete button that is already present in digrocery crud. I usually use this for actions like setting active or inactive for a particular record/multiple records.

  2. Modal: If the user clicks this button, a modal iframe will appear, another page within the project.

    button 2
    button 21622×849 42.7 KB

  3. Ajax: If the user clicks this button, an ajax form will appear, allowing the user to input specific data for the selected row.

    button 1
    button 11423×741 57.7 KB

For each of these types, it would be good to have an option to refresh the grid after the modal/prompt disappears.

Regards
Nasrul

2

Hello @nasrul ,

Quick edit is a very good idea and the modal as well. Since it’s been a while that I would like to have quick edit on the datagrid what do you think is the best idea? For disable/enable I guess a single click to enable/disable and double click for quick editing a field? Like phpmyadmin has? Or quick edit per row?

These are lot of ideas that I had in past to do but not time to brainstorm them to be honest.

And what about the modals? Where you thinking something in JavaScript?

Regards
Johnny

3

hello @johnny
Thank you very much, Johnny, for responding well.

I think quick edit sounds better.

As for the modal, I usually use it for tables that have multiple details within one master detail table. What I currently use for modals is a plugin from GitHub - shaack/bootstrap-show-modal: A Bootstrap plugin, to create modals dynamically in JavaScript.

function emodalIframe(title_form, url) {
        var iframe = document.createElement("iframe");
        // Set the src attribute to the URL you want to load
        iframe.src = url;
        iframe.className = "embed-responsive-item w-100";
        iframe.setAttribute("allowfullscreen", "true");
        iframe.setAttribute("frameborder", 0);
        iframe.style.minHeight = "600px";
        var modal = bootstrap.showModal({
            modalDialogClass: 'modal-xl .modal-fullscreen',
            title: title_form,
            body: 'test',
            onCreate: function (modal) {
                var modalBody = modal.element.querySelector(".modal-body");
                modalBody.style.minHeight = "600px";
                modalBody.innerHTML = '';
                var divWrapper = document.createElement("div");
                divWrapper.className =
                    "embed-responsive embed-responsive-16by9"; // Replace with your desired class name
                divWrapper.appendChild(iframe);
                modalBody.appendChild(divWrapper);

            },
            onDispose: function () {
                reloadGrid(reload_grid);
            }
        });
    }

    function reloadGrid(status) {
        if (status) {
            $('.fa-sync-alt').click();
        }
    }

regards
Nasrul