ZingGrid - Editing Evolution

This post is the final part of a three part series where I go over all of the major improvements that have been added to ZingGrid from v.1.5.0 up to now (v.1.7.1-0) to show off all the hard work the Zing team has put in. (You can find the first part here, and the second part here).

This post in particular will be focused on Batch Editing and Enhancements that have been made to <zg-button>. If at any point you'd like to skip straight to the docs, here are links to the batch editing docs, the <zg-button> docs, and the button column docs.

Editing One Row At A Time

Before v1.6.0 was introduced editing more than a few rows (as a user) was a bit of a pain. If editor-controls were enabled, users had to click the pencil next to every row they wanted to modify one at a time. Of course you could edit the data all at once using the ZingGrid API, but this lacked user agency.

Below is a demo of a grid with only editor-controls enabled:

Batch Editing

Given how tedious single row editing can become, the team decided to add Batch Editing to solve it. Now with a single attribute you can let your users edit any number of rows all at once.

In our demo below, we’ll be looking at how we can use batch edit to perform edits, inserts, and removes.

How to Use

Add the batch-edit attribute to the <zing-grid> element. This will enable a small batch editing button at the top left of the grid. To also include insertions and deletions we’ll need one more attribute, editor-controls.

<zing-grid batch-edit editor-controls></zing-grid>

Interactable Demo

<zg-button> and Button Column Enhancements

There are many ways to include buttons in your grid, most often this is with the use of built in ones such as edit and delete. While <zg-button> has been in ZingGrid for a while, many useful features still had to be done manually. We've taken a look at the most requested and added them in:

• Customizable Borders
  • Can improve the accessibility of your grid by showing how big the clickable area is
  • If you have other non-standard <zg-button>s in your grid with a border this can help force the buttons to have a matching aesthetic.
• Click handler
  • Natively add custom click functionality to your buttons without having to wait for the grid to load and query select them by hand
• Add a tooltip
  • While the title attribute does exist (and is encouraged) this allows you to style how the text appears on screen
  • Also adds some accessibility to your button by saying what it does if it only has an icon
• Conditionally disable
  • Provide better UX for actions that aren’t allowed (still recommended to validate on the backend if connected)

How to Use

Customizable Borders

You can force the button border to show by using force-border on an individual button, or button-border on a column with buttons inside (types button, remover, editor, or duplicate) to apply it to the whole column. Similarly, to for the border to hide you set the value to disabled

<!-- To force them to show -->
<zg-button force-border>...</zg-button>
<zg-column type="button" button-border></zg-column>

<!-- To force them to hide -->
<zg-button force-border="disabled">...</zg-button>
<zg-column type="button" button-border="disabled"></zg-column>

Click Handlers

The handler attribute takes the name of a function that has been exposed on the window object. This function will be called whenever the zg-button is clicked. This function has 3 parameters that get passed to it (not all of which need to be used):

1. The record data in object form of the row the button is on
2. A reference to the <zg-cell> DOM element that the button is in
3. A reference ZingGrid's internal object representation of the zg-cell

<zing-grid>
  <zg-button handler="functionName">...</zg-button>
</zing-grid>

<script type="module">
  function functionName(recordData, cellRef, cellObj) {
    /* ... */
  }

  window.functionName = functionName;
</script>

Tooltips

A tooltip can be added to an individual button directly usingcustom-tooltip or to all buttons in a column that has buttons (types button, remover, editor, or duplicate) using type-button-tooltip

<!-- On button -->
<zg-button custom-tooltip="Tooltip text">...</zg-button>
<!-- Or column -->
<zg-column type="button" type-button-tooltip="Tooltip text"></zg-column>

Conditionally Disabling

Similar to the handler attribute, the conditional disabling attributes (custom-disabled on <zg-button> and type-button-disabled on columns with buttons) take a function name as a value. This function returns a boolean where true means the button should be disabled. This functions is run once when the data loads, and then is run again whenever a row's data changes. This function has 2 parameters that get passed to it (not all of which need to be used):

1. The record data in object form of the row the button is on
2. A reference ZingGrid's internal object representation of the zg-cell

<zg-button custom-disabled="functionName">...</zg-button>
<zg-column type="button" type-button-disabled="functionName"></zg-column>

<script type="module">
  function functionName(recordData, cellObj) {
    /* ... */
  }

  window.functionName = functionName;
</script>

Interactable Demo