Font Size:

Delete Row Record in Form Grid without Confirmation

Introduction

To enhance data integrity and prevent accidental deletions, the Form Grid employs a pop-up confirmation dialog before removing a row record. This safeguard ensures that users have an opportunity to verify their actions before proceeding.

However, when handling bulk deletions, repeatedly confirming each removal can become inefficient and disrupt workflow productivity. In this article, we explore an optimized approach for deleting multiple row records seamlessly, bypassing individual confirmation prompts while maintaining operational efficiency.

How does it work?

This demonstration showcases a streamlined approach using HTML to modify the delete button behavior in the Form Grid, bypassing the confirmation prompt for instant row deletion upon click.

To implement this, follow these steps:

In Form Builder, add a Form Grid element. After configuring the Form Grid properties, take note of the Form Grid element's ID, as you will need it in step 2.

Add a Custom HTML element and copy the below script into its configuration. Take note that "FG" in the script below is the Form Grid element's ID in step 1.

<script>
$('body').on('page_loaded', function () {
    var grid = FormUtil.getField("FG");    // FG is the Form Grid element's ID in Step 1

    var silentRowDelete = function() {
        function updateRowIndex(row, rowIndex) {
            const $row = $(row);
            const id = $row.closest("table").parent().attr('id');
            $row.attr("id", id + "_row_" + rowIndex);
            $row.find("textarea").each(function () {
                $(this).attr("name", $(this).attr("id") + "_" + rowIndex);
            });
            $row.find("span.grid-cell.rowNumber").text(rowIndex + 1);
            $row.removeClass("odd even").addClass(rowIndex % 2 === 0 ? "even" : "odd");
        }
    
        function updateAllRowIndex(table) {
            $(table).find(".grid-row").each(function(i, row) {
                updateRowIndex(row, i);
            });
        }
    
        function disabledMoveAction(table) {
            $(table).find('a.grid-action-moveup').removeClass("disabled");
            $(table).find('a.grid-action-moveup:eq(0)').addClass("disabled");
    
            $(table).find('a.grid-action-movedown').removeClass("disabled");
            $(table).find('a.grid-action-movedown:last').addClass("disabled");
        }
    
        function showHidePlusIcon(container) {
            const $container = $(container);
            const maxRow = $container.find('#validateMaxRow').val();
            if (maxRow) {
                const rowCount = $container.find("tr.grid-row").length;
                if (rowCount >= parseInt(maxRow)) {
                    $container.find(".grid-action-add").hide();
                } else {
                    $container.find(".grid-action-add").show();
                }
            }
        }
    
        // Bind silent delete to all delete buttons
        $('.grid-action-delete', grid).off('click').on('click', function(e) {
            e.preventDefault();
            const $row = $(this).closest("tr");
            const $table = $row.closest("table");
            const $container = $table.parent();
    
            $row.remove();
            updateAllRowIndex($table);
            disabledMoveAction($table);
            $container.trigger("change");
            showHidePlusIcon($container);
        });
    };
    
    // override existing delete buttons
    silentRowDelete();
    
    // override newly created delete buttons
    const observer = new MutationObserver(() => {
        silentRowDelete();
    });
    
    observer.observe(document.body, { childList: true, subtree: true });
})
</script>

The final Custom HTML element configuration should look similar as below.