Docs

<zg-batch-edit>

Interactive Storybook Playground

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

ZGBatchEdit Relationships
Component Relationship Type Ancestor
ZingGrid Parent Generated n/a

Related Web Components

Usage

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

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

Attributes

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

Top

CSS Variables

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

: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 or our Styling Basics guide to learn more about styling the grid.

ZGBatchEdit CSS Variables and Default Values
Name Default Description Demo CSS Ref
--zg-cell-dirty-edit-border-color red; Sets the color of the dirty cell marker
--zg-cell-dirty-edit-border-width 7px Sets the border width of the dirty cell marker
--zg-row-dirty-delete-background-color gray; Sets the background color of the dirty row on row delete
--zg-row-dirty-delete-color Sets the color of the dirty row on row delete
--zg-row-dirty-insert-background-color green; Sets the background color of the dirty row on row insert
--zg-row-dirty-insert-color Sets the color of the dirty row on row insert
--zing-grid-batch-edit-style-border 1px solid #d6e9ff Styles the border of the batch edit styling element
--zing-grid-batch-edit-style-box-shadow inset 0 0 6px #99caff Styles the box-shadow of the frozen column styling element
Top

CSS Selector

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

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

Slots

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

Top

[api: <zg-batch-edit>]