---
title: "ZingGrid Web Component: `<zg-batch-edit>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-batch-edit>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/v1/api/tags/zg-batch-edit
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/v1/api/tags/zg-batch-edit.md
mode: provenance
representation: markdown
origin_response_id: 11e5380d1449a136344133150385878f
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.747Z
version_nonce: a57d50c13df066cff955e0515a154eea
generated_at_utc: 2026-10-31T09:22:21.538Z
response_nonce: c11fcc084960dc8537eed02b91f700df
```

# `<zg-batch-edit>`

Version 1

[Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/zg-batch-edit--docs)

The `<zg-batch-edit>` tag is a web component that is used to outline editable cells in batch edit mode and used as a CSS target for styling by the developer. **The `<zg-batch-edit>` web component should not be accessed specifically beyond styling.**

![Image of the DOM relationship for the zg-batch-edit web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/zg-batch-edit-web-component-dom.png "Image of the DOM relationship for the zg-batch-edit web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Generated | n/a |

#### Related Web Components

- [`<zg-control-bar>`](https://www.zinggrid.com/docs/api/tags/zg-control-bar)
- [`<zing-grid>`](https://www.zinggrid.com/docs/api/tags/zing-grid)

## Usage

The `<zg-batch-edit>` element is a generated element added to `<zg-control-bar>` when the `batch-edit` attribute is defined.

```html
<zing-grid
  batch-edit
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
</zing-grid>
```

## Attributes

There are no attributes available for the `<zg-batch-edit>` web component.

## CSS Variables
`<zg-batch-edit>` can be styled with CSS variables, like so:

```css
:root {
  --zing-grid-batch-edit-style-border: 1px solid red;
}
```

Below is a list of all the associated `<zg-batch-edit`> CSS variables. Check out the [full list of CSS variables](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Default | Description | Demo |
| --- | --- | --- | --- |
| `--zg-cell-dirty-edit-border-color` | red; | Sets the color of the dirty cell marker | [Example code](https://app.zingsoft.com/demos/embed/9DTR8P0D) |
| `--zg-cell-dirty-edit-border-width` | 7px | Sets the border width of the dirty cell marker | [Example code](https://app.zingsoft.com/demos/embed/U90FN6VL) |
| `--zg-row-dirty-delete-background-color` | gray; | Sets the background color of the dirty row on row delete | [Example code](https://app.zingsoft.com/demos/embed/QXUNHO2F) |
| `--zg-row-dirty-delete-color` |  | Sets the  color of the dirty row on row delete | [Example code](https://app.zingsoft.com/demos/embed/GHEMFKE2) |
| `--zg-row-dirty-insert-background-color` | green; | Sets the background color of the dirty row on row insert | [Example code](https://app.zingsoft.com/demos/embed/1QNVARYX) |
| `--zg-row-dirty-insert-color` |  | Sets the color of the dirty row on row insert | [Example code](https://app.zingsoft.com/demos/embed/XIUPV4FU) |
| `--zing-grid-batch-edit-style-border` | 1px solid #d6e9ff | Styles the border of the batch edit styling element | [Example code](https://app.zingsoft.com/demos/embed/TX748SB9) |
| `--zing-grid-batch-edit-style-box-shadow` | inset 0 0 6px #99caff | Styles the box-shadow of the frozen column styling element | [Example code](https://app.zingsoft.com/demos/embed/YKOH0VPL) |

## CSS Selector

`<zg-batch-edit>` can be styled by common CSS selectors, like so:

```css
zg-batch-edit {
  border: 1px solid red;
  box-shadow: inset 0 0 6px red;
}
```

## Slots

There are no slots available for the `<zg-batch-edit>` web component.