Cannot read property 'getAttribute' of undefined when doing a deleteRecords()

[Gene Allen]

I don't see what I'm doing wrong...and it's works if I do the deleteRecords by hand in the Chrome console.

here is the grid:

                <ejs-grid id="UnassignedSMSsDataGrid"

                          commandClick="smsCommandClick"

                          recordClick="recordClick"

                          rowSelecting="rowSelecting"

                          dataSource="Model.SMSs">

                    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings>

                    <e-grid-selectionsettings type="Multiple" mode="Row"></e-grid-selectionsettings>

                    <e-grid-columns>

                        <e-grid-column field="Smsid" visible="false" isPrimaryKey="true"></e-grid-column>

                        <e-grid-column type="checkbox" width="50"></e-grid-column>

                        <e-grid-column field="DateSend" headerText="Date" format="MM/dd/yyyy h:mm a" width="175"></e-grid-column>

                        <e-grid-column field="FromPretty" headerText="From" textAlign="Left" width="150"></e-grid-column>

                        <e-grid-column field="Message" headerText="Message"></e-grid-column>

                        <e-grid-column headerText="" width="80" textAlign="Center" commands="commands"></e-grid-column>

                    </e-grid-columns>

                </ejs-grid>

and here is the call to deleteRecords.  I've stripped it down to just this:

function assignSMSsARama() {

    var dataGrid = null;

    dataGrid = document.getElementById("UnassignedSMSsDataGrid").ej2_instances[0];

    dataGrid.deleteRow(); // this will delete all selected records.

}

and here's the error I see in the console:

constants.js:93 Uncaught TypeError: Cannot read property 'getAttribute' of undefined

    at e.deleteRow (constants.js:93)

    at t.deleteRow (constants.js:93)

    at assignSMSsARama (Unassigned.js:137)

    at assignARama (Unassigned.js:46)

    at HTMLButtonElement.onclick (unassigned:184)

Any help would be welcomed.

[Praveenkumar Gajendiran]

Hi Gene,

Thanks for contacting Syncfusion support.

We checked your query and provided code example. Based on that you want to delete all the selected rows by using deleteRow method of Grid. For this case we need to pass the selected row element as parameter to the deleteRow method of Grid to delete the selected row. We can get selected rows by using getSelectedRows() method of Grid as demonstrated in the below code example.

Code Example: 

<ejs-button id="deletebtn" cssClass="e-flat"  isPrimary="true" iconCss="e-btn-sb-icons e-play-icon" content="Delete Row"></ejs-button> 

 

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

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" newRowPosition="Top" mode="Batch"></e-grid-editSettings> 

<e-grid-selectionsettings type="Multiple" mode="Row"></e-grid-selectionsettings> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true, number=true})" width="140"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="150"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" validationRules="@(new { required=true})" textAlign="Right" editType="numericedit" format="C2" width="140"></e-grid-column> 

        <e-grid-column field="OrderDate" headerText="Order Date" editType="datepickeredit" customFormat="@(new {type = "date", format = "M/d/y" })"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" editType="dropdownedit" width="140"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

<script> 

        document.getElementById("deletebtn").addEventListener('click', function () { 

        var grid = document.getElementById("Grid").ej2_instances[0]; // Grid Instances 

        var selectedRow = grid.getSelectedRows(); 

        if (selectedRow.length > 0) { // check row is selected or not 

            for (var i = 0; i < selectedRow.length; i++) { 

                grid.deleteRow(selectedRow[i]); 

            } 

             

        } 

         

</script> 

We have prepared a sample based on this for your reference.

Sample: https://www.syncfusion.com/downloads/support/forum/159814/ze/ASPNET_1615596724-981031803.zip

Note : “We checked your attached grid code and suspect that you are using Crud action Command Column with batch edit mode. If so, we would to like inform you that we do not the support for Crud action Command Column with batch edit mode in EJ2 Grid.”

Please get back to us if you need further assistance.

Regards,
Praveenkumar G 

[Gene Allen]

Thank you Praveenkumar.  

That works just fine.  

I was trying to use the deleteRecord method, thinking that was the preferred way.

Now I know. :)

[Sujith Kumar Rajkumar]

Hi Gene, 

We are glad to hear that the provided solution helped resolve your query. 

Please get back to us if you require any further assistance. 

Regards, 

Sujith R