How to Bulk Edit Columns in JavaScript DataGrid
Tags: javascript, webdev, productivity, datagrid
Published: 2021-03-09 12:23:56

---
title: How to Bulk Edit Columns in JavaScript DataGrid
published: true
date: 2021-03-09 11:56:50 UTC
tags: javascript, webdev, productivity, datagrid
canonical_url: https://www.syncfusion.com/blogs/post/bulk-edit-columns-in-javascript-datagrid.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/How-to-Bulk-Edit-Columns-in-JavaScript-DataGrid-672x372.png
---

The Syncfusion JavaSript [DataGrid](https://www.syncfusion.com/javascript-ui-controls/js-data-grid "Link to the Syncfusion JavaScript DataGrid") control is a high-performance grid component that helps display and manipulate large amounts of data in a tabular format. Its feature set includes rich functionalities: data binding, sorting, grouping, editing, filtering, swiping, dragging, resizing, loading more items, pull-to-refresh, and exporting to Excel and PDF file formats. In this blog, we are going to walk you through the procedure to implement column bulk-edit support for the JavaScript DataGrid (ES5 platform) through the context menu event, also known as a right-click event.

Column bulk editing is a feature that helps us easily edit multiple cells in a column at once in JavaScript DataGrid. It saves a lot of time and reduces the workload. We’ll start this blog by creating a sample of a simple  JavaScript DataGrid project with remote data binding. Then, I’ll show you the edit dialog with the desired column type when right-clicking on a grid column.

Let’s see about them along with code examples!

## Create JS DataGrid sample

Please follow these steps to render the DataGrid in the [JavaScript platform](https://www.syncfusion.com/javascript-ui-controls/ "Link to the Syncfusion JavaScript DataGrid") (ES5).

**Step 1:** First, let’s create the **index.html** file with a JS CDN ([content delivery network](https://en.wikipedia.org/wiki/Content_delivery_network "Link to the Wikipedia article Content Delivery Network")) script reference like in the following code.

```html
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    
    <style>
        body {
            touch-action: none;
        }

        .e-grid {
            margin: 30px;
        }

        .title {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="stackblitz-container material">
        <div class="control-section">
            <div class="content-wrapper">
                <h4 class="title">Multi Column Update</h4>
                <div id="sample"></div>
            </div>

        </div>
    </div>
</body>

</html>
```

**Step 2:** Here, we will use the DataGrid to display employees’ details. So, let’s create the **employee.js** file and add the following basic grid rendering codes to it.

```js
function renderGrid() {

    gridInstance = new ej.grids.Grid({
        columns: [
            { field: "EmpID", isPrimaryKey: true, allowEditing: false },
            {
                field: "Name",
                headerText: "Employee Name",
                validationRules: { required: true }
            },
            

        ],
        dataSource: [],
        height: "auto",
        allowPaging: true,
        pageSettings: { pageSize: 15 },
        selectionSettings: { type: "Multiple", persistSelection: true }

    });
    document.body.appendChild(ej.base.createElement("div", { id: "sample" }));
    gridInstance.appendTo("#sample");
}

// event triggered when DOM load complete.
document.addEventListener('DOMContentLoaded', (event) => {
    //Render grid
    renderGrid();
});
```

**Step 3** : Then, add this **Employee.js** file as the source in the **index.html**.

![Add the Employee.js file as the source in the index.html](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Add-the-Employee.js-file-as-the-source-in-the-index.html.png)

**Step 4:** Now, open the **index.html** file **.** It will display the created grid sample with two columns, **Id** and **Employee Name,** like in the following screenshot.  
 ![open the index.html file. It will display the created grid sample with two columns, Id and Employee Name, like in the following screenshot.](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/open-the-index.html-file.-It-will-display-the-created-grid-sample-with-two-columns-Id-and-Employee-Name-like-in-the-following-screenshot..png)

**Note:** Please refer to the [Getting Started](https://ej2.syncfusion.com/javascript/documentation/grid/getting-started/ "Link to the Getting Started JavaScript DataGrid documentation") documentation to render the DataGrid in the JavaScript platform (ES5).

## API implementation and data binding

Here, I have created an ASP.NET Core application for the API implementation.

### Install the necessary NuGet packages

**Step 1:** Right-click on the project and choose the **Manage NuGet Packages** option like in the following screenshot.  
 ![Right-click on the project and choose the Manage NuGet Packages option](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Right-click-on-the-project-and-choose-the-Manage-NuGet-Packages-option.png)

**Step 2:** Now, switch to the **Browse** tab and search for the [**Syncfusion.EJ2.AspNet.Core**](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core/ "Link to the Syncfusion EJ2 AspNet Core NuGet Package") NuGet package. Then, install it in your application.  
 ![switch to the Browse tab and search for the Syncfusion.EJ2.AspNet.Core NuGet package. Then, install it in your application](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/switch-to-the-Browse-tab-and-search-for-the-Syncfusion.EJ2_.AspNet.Core-NuGet-package.-Then-install-it-in-your-application.png)

### Employee list Get API

In the ASP.NET Core application sample, no database connection is used. Employee records are stored in the static property and returned as an API response.

Refer to the following code.

```js
public static List<EmployeeDetails> GetAllRecords()
  {
      List<EmployeeDetails> empList = new List<EmployeeDetails>();
      empList.Add(new EmployeeDetails() { EmpID = 1, PhoneNumber = 412134, Name = "Raja", Designation = "Software Engineer", Reporter = "Selva", BranchLocation = "Eymard", TeamName = "Consulting", DateOfJoin = new DateTime(2018, 06, 01), EmpStatus = "Confirmed" });
      empList.Add(new EmployeeDetails() { EmpID = 2, PhoneNumber = 333111, Name = "Suresh", Designation = "Software Engineer", Reporter = "Selva", BranchLocation = "Eymard", TeamName = "Consulting", DateOfJoin = new DateTime(2020, 02, 01), EmpStatus = "Probation" });
      empList.Add(new EmployeeDetails() { EmpID = 3, PhoneNumber = 431891, Name = "Selva", Designation = "Team Lead", Reporter = "Karthik", BranchLocation = "Eymard", TeamName = "Consulting", DateOfJoin = new DateTime(2013, 02, 01), EmpStatus = "Confirmed" });
      empList.Add(new EmployeeDetails() { EmpID = 4, PhoneNumber = 312211, Name = "Guna", Designation = "Software Engineer", Reporter = "Selva", BranchLocation = "Eymard", TeamName = "Consulting", DateOfJoin = new DateTime(2015, 01, 01), EmpStatus = "Confirmed" });
      empList.Add(new EmployeeDetails() { EmpID = 5, PhoneNumber = 412134, Name = "Ravi", Designation = "Software Engineer", Reporter = "Selva", BranchLocation = "Eymard", TeamName = "Consulting", DateOfJoin = new DateTime(2019, 03, 01), EmpStatus = "Confirmed" });
      empList.Add(new EmployeeDetails() { EmpID = 6, PhoneNumber = 412135, Name = "Priya", Designation = "Software Engineer", Reporter = "Selva", BranchLocation = "Eymard", TeamName = "Consulting", DateOfJoin = new DateTime(2015, 07, 01), EmpStatus = "Confirmed" });
      empList.Add(new EmployeeDetails() { EmpID = 7, PhoneNumber = 412136, Name = "Dhana", Designation = "Software Engineer", Reporter = "Vino", BranchLocation = "Mathura", TeamName = "Consulting", DateOfJoin = new DateTime(2015, 09, 01), EmpStatus = "Confirmed" });
      empList.Add(new EmployeeDetails() { EmpID = 8, PhoneNumber = 412137, Name = "Karthik", Designation = "Manager", Reporter = "", BranchLocation = "Mathura", TeamName = "Consulting", DateOfJoin = new DateTime(2010, 02, 01), EmpStatus = "Confirmed" });
      empList.Add(new EmployeeDetails() { EmpID = 9, PhoneNumber = 411138, Name = "Vino", Designation = "Team Lead", Reporter = "Raj", BranchLocation = "Mathura", TeamName = "Consulting", DateOfJoin = new DateTime(2014, 02, 01), EmpStatus = "Confirmed" });
      empList.Add(new EmployeeDetails() { EmpID = 10,PhoneNumber = 412139, Name = "Raji", Designation = "Software Engineer", Reporter = "Vino", BranchLocation = "Mathura", TeamName = "Consulting", DateOfJoin = new DateTime(2015, 05, 01), EmpStatus = "Probation" });
      empList.Add(new EmployeeDetails() { EmpID = 11,PhoneNumber = 412140, Name = "Vijay", Designation = "Software Engineer", Reporter = "Vino", BranchLocation = "Mathura", TeamName = "Consulting", DateOfJoin = new DateTime(2020, 02, 01), EmpStatus = "Confirmed" });
      empList.Add(new EmployeeDetails() { EmpID = 12,PhoneNumber = 412141, Name = "Raj", Designation = "Manager", Reporter = "", BranchLocation = "Mathura", TeamName = "Consulting", DateOfJoin = new DateTime(2010, 02, 01), EmpStatus = "Confirmed" });
      return empList;
  }
```

Implement the Get API to return all the employee records.

```js
public IActionResult GetEmployees([FromBody]DataManagerRequest dm)
 {
      IEnumerable DataSource = Employees;
      DataOperations operation = new DataOperations();
            
      int count = DataSource.Cast<EmployeeDetails>().Count();
      if (dm.Skip != 0)
      {
         DataSource = operation.PerformSkip(DataSource, dm.Skip); //Paging
      }
      if (dm.Take != 0)
      {
         DataSource = operation.PerformTake(DataSource, dm.Take);
      }
      return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
 }
```

**Note:**

The modal object class **DataManagerRequest** is referenced from the library **using**  **Syncfusion.** EJ2.Base;

### ![The modal object class DataManagerRequest is referenced from the library using Syncfusion.EJ2.Base;](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/The-modal-object-class-DataManagerRequest-is-referenced-from-the-library-using-Syncfusion.EJ2_.Base_.png)Employee Update API

Implement the bulk-record update logic like in the following code example.

```js
public IActionResult UpdateEmployeeDetails([FromBody]CRUDModel<EmployeeDetails> batchmodel)
  {
     if (batchmodel != null && batchmodel.Changed != null)
     {
         for (var i = 0; i < batchmodel.Changed.Count(); i++)
         {
              var ord = batchmodel.Changed[i];
              EmployeeDetails val = Employees.Where(or => or.EmpID == ord.EmpID).FirstOrDefault();
              val.EmpID = ord.EmpID;
              val.Name = ord.Name;
              val.Designation = ord.Designation;
              val.BranchLocation = ord.BranchLocation;
              val.Reporter = ord.Reporter;
              val.EmpStatus = ord.EmpStatus;
              val.DateOfJoin = ord.DateOfJoin;
              val.TeamName = ord.TeamName;
              val.PhoneNumber = ord.PhoneNumber;
          }
      }
      var data = Employees.ToList();
      return Json(data);
  }
```

**Note:**

The modal object class CRUDModal is referenced from the library **using**  **Syncfusion.** EJ2.Base;

### ![The modal object class CRUDModal is referenced from the library using Syncfusion.EJ2.Base;](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/The-modal-object-class-CRUDModal-is-referenced-from-the-library-using-Syncfusion.EJ2_.Base_.png)Remote data binding

Now, follow these steps to bind the Get and Update APIs to the grid.

**Step 1:** Switch to the **Employee.js** file and create an instance of DataManager with both the Get ( **url** ) and Update ( **crudUrl** ) URLs.

```js
var hostUrl = "http://localhost:64515/";

var gridDataSource = new ej.data.DataManager({
    url: hostUrl + "Employee/GetEmployees",
    crudUrl: hostUrl + "Employee/UpdateEmployeeDetails",
    adaptor: new ej.data.UrlAdaptor()
});
```

**Note:**  We should provide the server API running the URL  as the hostUrl in the js file.

**Step 2:** Then, assign the DataManager instance to the grid’s **dataSource** property.  
 ![Assign the DataManager instance to the grid’s dataSource property](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Assign-the-DataManager-instance-to-the-grid%E2%80%99s-dataSource-property.png)

**Sample code**

```js
function renderGrid() {

    gridInstance = new ej.grids.Grid({
        columns: [
            { field: "EmpID", isPrimaryKey: true, allowEditing: false },
            {
                field: "Name",
                headerText: "Employee Name",
                validationRules: { required: true }
            },
            
        ],
        dataSource: gridDataSource,
        height: "auto",
        allowPaging: true,
        pageSettings: { pageSize: 15 },
        selectionSettings: { type: "Multiple", persistSelection: true }

    });
    document.body.appendChild(ej.base.createElement("div", { id: "sample" }));
    gridInstance.appendTo("#sample");
}
```

**Step 3:** Now, configure the grid column settings to display the employee details in the grid.

```js
function renderGrid() {

    gridInstance = new ej.grids.Grid({
        columns: [
            { field: "EmpID", isPrimaryKey: true, allowEditing: false },
            {
                field: "Name",
                headerText: "Employee Name",
                validationRules: { required: true }
            },
            {
                field: "Designation",
                headerText: "Designation"
            },
            {
                field: "TeamName",
                headerText: "Team"
            },
            {
                field: "PhoneNumber",
                headerText: "Phone",
                type: "number"
            },
            {
                field: "Reporter",
                headerText: "Reporter",
                editType: "dropdownedit",
                foreignKeyField: "ReporterId",
                foreignKeyValue: "Reporter",
                dataSource: Reporters
            },
            {
                field: "BranchLocation",
                headerText: "Branch"
            },
            {
                field: "DateOfJoin",
                headerText: "Date Of Joined",
                type: "date",
                format: { type: "date", format: "MMM dd yyyy" },
                editType: "datepickeredit",
                edit: { params: { format: "MMM dd yyyy" } }
            },
            {
                field: "EmpStatus",
                headerText: "Status",
                editType: "dropdownedit",
                foreignKeyField: "EmpStatusId",
                foreignKeyValue: "EmpStatus",
                dataSource: StatusList
            }

        ],
        dataSource: gridDataSource,
        height: "auto",
        allowPaging: true,
        pageSettings: { pageSize: 15 },
        selectionSettings: { type: "Multiple", persistSelection: true }

    });
    document.body.appendChild(ej.base.createElement("div", { id: "sample" }));
    gridInstance.appendTo("#sample");
}
```

**Step 4:** Then, save all the files and **run the server API.**

**![Save all the files and run the server API](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/save-all-the-files-and-run-the-server-API.png)Step 5:** After successfully running the API host, open the **index.html** file. It will show you the grid with the given static employee data.  
 ![Open the index.html file. It will show you the grid with the given static employee data](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/open-the-index.html-file.-It-will-show-you-the-grid-with-the-given-static-employee-data.png)

Now, we have finished the API implementation and bound the remote data to the DataGrid.

## Display edit dialog in the context menu

Now, add a reference to **Ej2GridExtendedFeature.js** in the grid page (Index.html) like in the following screenshot.  
 ![Add a reference to Ej2GridExtendedFeature.js in the grid page (Index.html)](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Add-a-reference-to-Ej2GridExtendedFeature.js-in-the-grid-page-Index.html.png)

**Note:** You can download the [script file](https://www.syncfusion.com/downloads/support/directtrac/general/ze/Ej2GridExtendedFeature1003411648 "Link to download the Script file").

## Enable bulk-edit feature

Now, we are going to invoke the **enableBulkColumnEdit()** method from the **created** event of the JavaScript DataGrid to enable the column bulk-edit feature.

Refer to the following screenshot.  
 ![Invoke the enableBulkColumnEdit() method from the created event of the grid to enable the column bulk-edit feature](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Invoke-the-enableBulkColumnEdit-method-from-the-created-event-of-the-grid-to-enable-the-column-bulk-edit-feature.png)

**Sample code**

```js
function renderGrid() {

    gridInstance = new ej.grids.Grid({
        columns: [
            { field: "EmpID", isPrimaryKey: true, allowEditing: false },
            {
                field: "Name",
                headerText: "Employee Name",
                validationRules: { required: true }
            },
            {
                field: "Designation",
                headerText: "Designation"
            },
            {
                field: "TeamName",
                headerText: "Team"
            },
            {
                field: "PhoneNumber",
                headerText: "Phone",
                type: "number"
            },
            {
                field: "Reporter",
                headerText: "Reporter",
                editType: "dropdownedit",
                foreignKeyField: "ReporterId",
                foreignKeyValue: "Reporter",
                dataSource: Reporters
            },
            {
                field: "BranchLocation",
                headerText: "Branch"
            },
            {
                field: "DateOfJoin",
                headerText: "Date Of Joined",
                type: "date",
                format: { type: "date", format: "MMM dd yyyy" },
                editType: "datepickeredit",
                edit: { params: { format: "MMM dd yyyy" } }
            },
            {
                field: "EmpStatus",
                headerText: "Status",
                editType: "dropdownedit",
                foreignKeyField: "EmpStatusId",
                foreignKeyValue: "EmpStatus",
                dataSource: StatusList
            }

        ],
        dataSource: gridDataSource,
        height: "auto",
        created: onCreated,
        allowPaging: true,
        pageSettings: { pageSize: 15 },
        selectionSettings: { type: "Multiple", persistSelection: true }

    });
    document.body.appendChild(ej.base.createElement("div", { id: "sample" }));
    gridInstance.appendTo("#sample");
}

function onCreated(args) {
    //Enable multicolumn edit.
    try {
        // pass grid instance and Data-manager instance as parameters to enable column bulk-edit feature.
        enableBulkColumnEdit(this, gridDataSource);
    }
    catch (ex) {
        console.log("Refer Ej2GridExtendedFeature.js to enable Column bulk edit. InnerException "+ ex);
    }
}
```

**Note:** Enabling the column bulk-edit feature will override the **Context Menu** event and **selection setting** of the grid.

## Logic behind the detailed view of Ej2GridExtendedFeature.js file

In this section, we are going to see the implementation logic used in the script file **Ej2GridExtendedFeature.js,** which helps developers customize the column bulk-edit feature in JavaScript DataGrid if needed.

### Create dialog

Create the edit dialog dynamically during the page rendering. This dialog will show the desired editor when right-clicking on the grid column.

Please find the logic in the **create\_InitializeEditModal()** method in the **Ej2GridExtendedFeature.js** file.

**Sample code**

```js
 function create_InitializeEditModal() {
    var modalContainerEle = document.createElement("div");
    modalContainerEle.id = "BulkEdit-dialog-container";
    var modalEle = document.createElement("div");
    modalEle.id = "dialogBulkEdit";
    var inputContainerEle = document.createElement("div");
    inputContainerEle.id = "modal-editor-container";

    modalEle.appendChild(inputContainerEle);
    modalContainerEle.appendChild(modalEle);
    document.body.appendChild(modalContainerEle);

    editDialogInstance = new ej.popups.Dialog({
        target: document.getElementById("BulkEdit-dialog-container"),
        width: '350px',
        showCloseIcon: true,
        position: { X: 'center', Y: 'center' },
        visible: false,
        buttons: [
            {
                'click': onClickSaveBtn,
                buttonModel: {
                    isPrimary: true,
                    content: 'Save'
                }
            },
            {
                'click': onClickCancelBtn,
                buttonModel: {
                    content: 'Cancel'
                }
            }
        ]

    });

    // Render/initialized Dialog
    editDialogInstance.appendTo('#dialogBulkEdit');
    modalEle.style.top = '100px';
}
```

### Bind context menu event to custom function

Here we bind the customer **gridRightClickHandler()** to the **contextmenu** event of the grid.  
 ![Bind the customer gridRightClickHandler() to the contextmenu event of the grid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Bind-the-customer-gridRightClickHandler-to-the-contextmenu-event-of-the-grid.png)

### Create dynamic editor

Right-click on the DataGrid column, create the editor element dynamically, and append it to the bulk edit modal, based on the current column data type.

Please find the dynamic editor creation logic in the **gridRightClickHandler()** method definition.

**Sample code**

```js
if (editColumnType === DATA_TYPE.STRING && editType === EDIT_TYPE.DROPDOWN_EDIT) {
                var dataSource = [];

                if (curRowInfo.column.dataSource) {
                    dataSource = curRowInfo.column.dataSource;
                }
                inputEditorInstance = new ej.dropdowns.DropDownList({
                    placeholder: "Select " + editFieldName,
                    popupHeight: "200px",
                    dataSource: dataSource,
                    fields: { text: currentEditColumn, value: currentEditColumn }
                });
            }
            else if (editColumnType === DATA_TYPE.STRING) {
                inputEditorInstance = new ej.inputs.TextBox({
                    placeholder: editFieldName
                });
            }
            else if (editColumnType === DATA_TYPE.DATE) {
                var format = "dd/MMM/yyyy";

                if (curRowInfo.column.format && curRowInfo.column.format.format) {
                    format = curRowInfo.column.format.format;
                }
                else if (curRowInfo.column.format) {
                    format = curRowInfo.column.format;
                }

                inputEditorInstance = new ej.calendars.DatePicker({
                    format: format,
                    placeholder: "Select " + editFieldName
                });
            }
            else if (editColumnType === DATA_TYPE.NUMBER) {

                inputEditorInstance = new ej.inputs.NumericTextBox({
                    placeholder: editFieldName
                });
            }
```

The editor will be displayed based on the column setting. Refer to the following table.

| **Column Setting** | **Result Screenshot** |
| **Type:** Numeric

<u>Example:</u>

```js
 gridInstance = new ej.grids.Grid({

columns: [

…

{

field: "PhoneNumber",

headerText: "Phone",

type: "number"

},

…

]

});
```
 | Numeric text box will be displayed. ![Numeric text box](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Numeric-text-box.png) |
| **Type** : string

<u>Example:</u>

```js
gridInstance = new ej.grids.Grid({

columns: [

…

{

field: "Name",

headerText: "Employee Name",

validationRules: { required: true }

}

…

]

});
```
 | Text box will be displayed. ![Text box](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Text-box.png) |

**Note:** If the type is not specified, then it will automatically set the first record value type as the column data type.

### Column validation

The bulk-edit dialog will always be created with form. If the current right-clicked column has a validation rule, then it will be added to the edit form. (If there is no validation rule, then the validation will not be applied.)

Please find the validation rule add logic in the **gridRightClickHandler()** method definition. Refer to the following sample code.

```js
if (inputEditorInstance) {
                setTimeout(function () {
                    inputEditorInstance.appendTo("#input-element");
                    /**
                     * Add validation rule to edit modal input field
                     */
                    if (curRowInfo.column.validationRules) {
                        var validationOptions = {
                            rules: {}
                        };
                        validationOptions.rules[currentEditColumn] = curRowInfo.column.validationRules;

                        formInstance = new ej.inputs.FormValidator('#' + editFormId, validationOptions);
                    }
                    // Edit dialog is displayed
                    editDialogInstance.show();
                }, 100);
            }
```

So, whenever you click on the **Save** button, the data will be validated (if form has any validation rule).

### Format and save dialog data

After successful form validation, the save object will be formatted for all the selected records and then saved using the **DataManager** instance.

Refer to the following code.

```js
function onClickSaveBtn() {
    var editableRows = gridInstance.getSelectedRecords();
    var changes = { changedRecords: [], addedRecords: [], deletedRecords: [] };

    if ((formInstance && formInstance.validate()) || (formInstance === null)) {

        if (currentEditColumn) {
            for (var k = 0; k < editableRows.length; k++) {
                var updateObj = {};
                var newValue = "";
                newValue = inputEditorInstance.value;

                updateObj = editableRows[k];
                updateObj[currentEditColumn] = newValue;
                changes.changedRecords.push(updateObj);
            }

            gridDataSource.saveChanges(changes, primaryKeyColumnField).then(e => {
                // Grid is refreshed with updated data
                gridInstance.refreshColumns();
            });

            // Previous changes are removed and dialog is hidden
            changes = { changedRecords: [], addedRecords: [], deletedRecords: [] };
            currentEditColumn = "";
            editDialogInstance.hide();
        }
    }
}
```

## Supported column edit types

In this blog, the **Ej2GridExtendedFeature.js** file has support for the following grid column edit types:

- NumericTextBox
- TextBox
- DropDownList
- DatePicker
- DateTimePicker

**Note:** Please refer to [Cell edit type and its params documentation](https://ej2.syncfusion.com/javascript/documentation/grid/edit/#cell-edit-type-and-its-params "Link to user guide documentation for JavaScript DataGird's cell edit types and its parameters").

## Points to remember

- DataGrid should contain at least one **Primary Key ** column.
- We should pass the **DataGrid instance** and **Data Manager instance**  as arguments to enable the column bulk edit feature.

## Reference

You can download the [demo video](https://www.syncfusion.com/downloads/support/directtrac/general/ze/Grid_Extended_Feature1419182514 "Link to download the Column bulk editing in JavaScript DataGrid demo video") on our website.

For further reference, you can checkout [Bulk Edit Columns in JavaScript DataGrid](https://www.syncfusion.com/downloads/support/directtrac/general/ze/Column_Bulk_Edit-_Grid_Extended_Feature-1240757637 "Link to Bulk Edit Columns in JavaScript DataGrid sample") sample.

## How to run the sample

Follow these steps to run the sample:

1. Extract the previously attached source given in the reference section.
2. Run the server source by opening **EmployeeDetailsGrid.**** sln.** Refer to the following screenshot.  
 ![Run the server source by opening EmployeeDetailsGrid.sln](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Run-the-server-source-by-opening-EmployeeDetailsGrid.sln_.png)
3. Navigate to the path **../client/Employee.js** and ensure the hosted server URL.  
 ![Navigate to the path ../client/Employee.js and ensure the hosted server URL](https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Navigate-to-the-path-and-ensure-the-hosted-server-URL.png)
4. Open the **index.html** file. Now, you can enjoy the column bulk edit feature in the JavaScript DataGrid.

![Bulk Edit Columns in JavaScript DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Bulk-Edit-Columns-in-JavaScript-DataGrid.gif)<figcaption>Bulk Edit Columns in JavaScript DataGrid</figcaption>

## Conclusion

In this blog, we have learned how to implement the column bulk edit feature in the Syncfusion  [JavaScript DataGrid](https://www.syncfusion.com/javascript-ui-controls/js-data-grid "Link to the Syncfusion JavaScript DataGrid"). With this, you can easily update multiple cells in a column at once, which saves a lot of time and reduces your workload. I hope you found this blog useful. Try out the steps given in this blog and leave your feedback in the comments section below.

Syncfusion DataGrid is also available in the [Blazor](https://www.syncfusion.com/blazor-components/blazor-datagrid "Link to Blazor DataGrid"), ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/grid "Link to ASP.NET Core DataGrid"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/grid "Link to ASP.NET MVC DataGrid"), [WebForms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/datagrid "Link to ASP.NET WebForms DataGrid")), [Angular](https://www.syncfusion.com/angular-ui-components/angular-grid "Link to Angular DataGrid"), [React](https://www.syncfusion.com/react-ui-components/react-data-grid "Link to React DataGrid") , [Vue](https://www.syncfusion.com/vue-ui-components/vue-grid "Link to Vue DataGrid"), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-datagrid "Link to Xaamarin DataGrid"), [Flutter](https://www.syncfusion.com/flutter-widgets/flutter-datagrid "Link to Flutter DataGrid"), [UWP](https://www.syncfusion.com/uwp-ui-controls/datagrid "Link to UWP DataGrid"), [WinForms](https://www.syncfusion.com/winforms-ui-controls/datagrid "Link to WinForms DataGrid"), [WPF](https://www.syncfusion.com/wpf-ui-controls/datagrid "Link to WPF DataGrid"), and [WinUI](https://www.syncfusion.com/winui-controls/datagrid "Link to WinUI DataGrid") platforms. For existing customers, the new version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out our available features.

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/javascript "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

If you liked this blog post, we think you’ll also like the following articles:

- [Formatting the Essential JavaScript Spreadsheet: Number Formatting](https://dev.to/syncfusion/formatting-the-essential-javascript-spreadsheet-number-formatting-4ghn "Link to the article Formatting the Essential JavaScript Spreadsheet: Number Formatting") [Blog]
- [Filtering Reports in JavaScript Pivot Table Using Advanced Excel-like Filters](https://dev.to/syncfusion/filtering-reports-in-javascript-pivot-table-using-advanced-excel-like-filters-27d0 "Link to the article Filtering Reports in JavaScript Pivot Table Using Advanced Excel-like Filters") [Blog]
- [Finding Your Way with JavaScript Front-End Frameworks](https://dev.to/syncfusion/make-up-with-javascript-front-end-frameworks-2klb "Link to the article Finding Your Way with JavaScript Front-End Frameworks") [Blog]
- [Top 8 JavaScript Ebooks for Coding the Future](https://www.syncfusion.com/blogs/post/top-8-javascript-e-books-for-coding-the-future.aspx "Link to the article Top 8 JavaScript Ebooks for Coding the Future") [Blog]