Edit button is not working in the Top menu - Edit mode : Batch

[Mani]

Hi, 

I have implemented the Grid with Edit Mode as Batch. But Edit button which is present in the Top menu tool bar is not functioning. I will provide the code below, Please help  me to resolve this issue.

<ejs-grid id="Grid" enableHover="true" allowPaging="false" allowSorting="true"

                  toolbar="@(new List<string>() { "Edit","Update","Cancel","Search" })">

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

            <e-data-manager url=@(string.Format("/Data/Get?id={0}&view={1}",Model.ModuleID,Model.View))

                            batchUrl="@(string.Format("/Data/BatchUpdate?id={0}&view={1}",Model.ModuleID,Model.View))" data="@Model.ModuleID" adaptor="UrlAdaptor"></e-data-manager>

            <e-grid-columns>

                <e-grid-column field="Key" headerText="@Localizer["Key"].Value" isPrimaryKey="true"></e-grid-column>

                <e-grid-column field="Value" headerText="@Localizer["Value"].Value" allowEditing="true" editType="StringEdit" 

                    validationRules='@(new Dictionary<string,object> { {"required",true}})'></e-grid-column>

            </e-grid-columns>

        </ejs-grid>

Thanks in advance,

Mani

[Hariharan J V]

Hi Mani, 

Greeting from Syncfusion. 

By default, while using batch edit mode then it perform editing based on the cell so that default edit toolbar does not work for batch edit in Grid. If you want to perform editing while clicking the toolbar then we suggest you to use custom toolbar and edit cell using editCell method of Grid in custom toolbar click event. 

Please refer the below code example for more information and help documentation for more information.  

@{ 

 

    List<object> toolbarItems = new List<object>(); 

    toolbarItems.Add("Add"); 

    toolbarItems.Add("Delete"); 

    toolbarItems.Add("Update"); 

    toolbarItems.Add("Cancel"); 

    // create custom toolbar 

    toolbarItems.Add(new { text = "Edit", tooltipText = "Edit", id = "Edit" }); 

} 

<ejs-grid id="Grid" allowPaging="true" allowFiltering="true" toolbar=toolbarItems toolbarClick="toolbarClick"> 

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

    <e-data-manager url="/home/UrlDatasource" batchUrl="/Home/BatchUpdate" adaptor="UrlAdaptor"></e-data-manager> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column> 

       . . . . 

    </e-grid-columns> 

</ejs-grid> 

 

 

<script> 

    function toolbarClick(args) { 

        args.originalEvent.stopPropagation(); 

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

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

            // check row is selected or not 

            if (grid.getSelectedRecords().length === 0) { 

                grid.selectRow(0) // if no row selected then select first row 

            } 

            // edit cell using editCell Method  

            grid.editModule.editCell(Math.min(...grid.getSelectedRowIndexes()), "CustomerID"); 

        } 

    } 

</script> 

Help documentation :  

https://ej2.syncfusion.com/aspnetcore/documentation/grid/tool-bar/#built-in-and-custom-items-in-toolbar 

https://ej2.syncfusion.com/documentation/api/grid/edit/#editcell 

Regards, 

Hariharan 

[Mani]

Hi,

Thanks for the reply it works fine. I need one more thing to do. 

Can we do edit entire row instead column by column for the same example?

Can we do edit entire grid?

Thanks, 

Mani

[Hariharan J V]

Hi Mani, 

Thanks for your update. 

 

Query: Can we do edit entire row instead column by column for the same example? 

As per your suggestion we have modified the code. In the below code example, we have edit the cell based on the selected row target elements(td) instead of editing the same column(always as CustomerID provided in previous update). Please refer the below code example for more information. 

@{ 

 

    List<object> toolbarItems = new List<object>(); 

    toolbarItems.Add("Add"); 

    toolbarItems.Add("Delete"); 

    toolbarItems.Add("Update"); 

    toolbarItems.Add("Cancel"); 

    toolbarItems.Add(new { text = "Edit", tooltipText = "Edit", id = "Edit" }); 

} 

<ejs-grid id="Grid" allowPaging="true" allowFiltering="true" toolbar=toolbarItems toolbarClick="toolbarClick"> 

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

    <e-data-manager url="/home/UrlDatasource" batchUrl="/Home/BatchUpdate" adaptor="UrlAdaptor"></e-data-manager> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column> 

        <e-grid-column field="EmployeeID" headerText="Employee ID" width="130" textAlign="Right"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="ShipCity" width="120"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

 

<script> 

    function toolbarClick(args) { 

        args.originalEvent.stopPropagation(); 

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

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

            if (grid.getSelectedRecords().length > 0 && grid.selectionModule.target.nodeName === "TD") { 

                // based on the target we have edit the column 

                grid.editModule.editCell(Math.min(...grid.getSelectedRowIndexes()), grid.getColumns()[parseInt(grid.selectionModule.target.getAttribute('aria-colindex'))].field); 

            } 

        } 

    } 

</script> 

If the provided solution does not meet your requirement then provide more details it will be more helpful for us to validate and provide a better solution as soon as possible. 

Regards, 

Hariharan 

[Mani]

Thanks for the help hariharan.

[Hariharan J V]

Hi Mani, 

 

Thanks for your update.  

  

We are happy to hear that the provided solution helped you.   

  

Please contact us if you need any further assistance. As always, we will be happy to assist you.   

  

Regards, 

Hariharan