Cannot delete row from grid with selection mode "Cell"

[TaeWook Kang]

Hi,

Cannot delete the row when I set cell Selection Mode to "Box" and mode to "Cell".

Is there any way to delete a row when it's in "Cell" mode?

<e-grid-selectionsettings checkboxMode="Default" cellSelectionMode="Box" mode="Cell" type="Multiple"></e-grid-selectionsettings>

[Santhosh Iruthayaraj]

Hi TaeWook Kang,

Greetings from Syncfusion Support!

You can delete selected cell records when the selection mode is set to "Cell" by obtaining the selected records and manually deleting them using “deleteRecord” method. This can be accomplished by rendering a custom delete button in the toolbar. Additionally, if your waned to delete records on a delete key press, you can achieve this by utilizing the "keyPressed" event of the Grid. Below is a code snippet and sample for your reference:

[CSHTML]

 

@{

    List<object> toolbarItems = new List<object>{

        "Add",

        "Edit",

        @* custom delete toolbar item *@

        new { text = "Delete", tooltipText = "Delete", prefixIcon = "e-delete", id = "delete_btn" },

        "Update",

        "Cancel"

    };

}

 

 

<ejs-grid id="Grid" toolbar=toolbarItems created="created" toolbarClick="toolbarClick" keyPressed="keyPressed">

.  .  .  .  .

 

<script>

    let gridInstance;

 

    created = () => {

        gridInstance = document.getElementById('Grid').ej2_instances[0];

    }

 

    toolbarClick = (args) => {

        if (args.item.id === 'delete_btn') {

            deleteSelectedRecords();

        }

    };

 

    keyPressed = (args) => {

        if (args.code === 'Delete') {

            args.cancel = true;

            deleteSelectedRecords();

        }

    };

 

    deleteSelectedRecords = () => {

        gridInstance

            .getSelectedRowCellIndexes()

            .forEach((o) =>

                gridInstance.deleteRecord(

                    'YourPrimaryKeyFieldName',

                    gridInstance.currentViewData[o.rowIndex]

                )

            );

    }

</script>

 

 

API references:

• deleteRecord method: https://ej2.syncfusion.com/javascript/documentation/api/grid/#deleterecord
• currentViewData property: https://ej2.syncfusion.com/javascript/documentation/api/grid/#currentviewdata
• toolbarClick event: https://ej2.syncfusion.com/javascript/documentation/api/grid/#toolbarclick
• keyPressed event: https://ej2.syncfusion.com/javascript/documentation/api/grid/#keypressed

Please feel free to reach out if you have any further queries.

Regards,

Santhosh I