Restricting the addition of records using buttons other than the Add button on the toolbar.

[Keita Okamura]

Hi, 

I am creating a web page using ASP.NET Core.

I have the following two problems with the grid.

 I want a new record to be added only when the Add button on the toolbar is pressed. However, the problem arises when a new record is added by pressing the tab key in the bottom right-most cell of the grid.

 I have tried to cancel the Keydown event by stopImmediatePropagation and toggle allowAdding, but could not restrict record addition.

[Aishwarya Rameshbabu]

Hi Keita Okamura,

Greetings from Syncfusion support.

In the Syncfusion Grid, when batch editing mode is enabled, a new row is added by default when pressing the tab key from the last cell of the last row. However, you wanted to prevent this and allow the addition of a new row only through the toolbar 'Add' button click. We have achieved this requirement using a global variable which is enabled in the toolbarClick event only when the toolbar 'Add' button is clicked. Consequently, the addition of a new row is canceled based on this variable in the beforeBatchAdd event of the Grid. Please refer to the attached code example, sample, and video demonstration for more detailed information.

Index.cshtml

    <div class="control-section">

        <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowSorting="true" allowFiltering="true" toolbar="@(new List<string>() { "Add","Delete","Update","Cancel" })" allowPaging="true" beforeBatchAdd="beforeBatchAdd" toolbarClick="toolbarClick">

                    …………………………

            <e-grid-columns>

                      …………………………

             </e-grid-columns>

        </ejs-grid>

    </div>

<script>

    var addButtonClicked = false; // Global variable

    function beforeBatchAdd(args) {

        if (!addButtonClicked) { // Prevented the action based on the global variable

            args.cancel = true;

        }

        addButtonClicked = false;

    }

    function toolbarClick(args) {

        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];

        if (args.item.id === `${grid.element.id}_add`) {

            addButtonClicked = true; // Enabling the global variable only when the add button in the toolbar is clicked.

        }

    }

</script>

 

Sample and video demonstration: Please find in the attachment.

API Reference:

beforeBatchAdd

toolbarClick

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R

Attachment: 194965SampleAndVideo_aeaab195.zip