Using JavaScript with ZingGrid

As custom elements, ZingGrid tags have access to the standard JavaScript DOM API.

Element Manipulation

After the grid renders, you are able to query select any Light DOM elements and manipulate them. For example, you can update the caption either by changing the attribute value or the <zg-caption> text directly (see below).

<zing-grid id="myZingGrid" caption="Original Caption"></zing-grid>

<script>
  let zgRef = document.querySelector('#myZingGrid');
  let zgCaption = zgRef.querySelector('zg-caption');
  zgCaption.textContent = 'New Caption';
</script>

If you inspect the demo after changing the caption, you'll notice that the caption attribute on ZingGrid was not updated! As we saw in the Attribute Versus Element guide, ZingGrid has unidirectional sync controlled by the attribute, not the corresponding element. So when updating grid elements, it is recommended to update the attribute (see below), which will sync the matching elements.

<zing-grid id="myZingGrid" caption="Original Caption"></zing-grid>

<script>
  let zgRef = document.querySelector('#myZingGrid');
  zgRef.setAttribute('caption', 'New Caption');
</script>

Native Events

ZingGrid exposes many lifecycle events for you to hook into to customize the grid's behavior. Simply add an event listener to control when to execute your custom code.

For example, the grid:ready event is emitted from the <zing-grid> element when it has finished rendering. Add a listener for it and then execute your code.

record:click Grid

The record:click event is emitted when you click on a body <zg-row>. Test it out in the accompanying demo:

<zing-grid
    id="myGrid" 
    data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'
    caption="Click a row to animate the grid"
  >
  </zing-grid>

  <style>
    @keyframes BOUNCE {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-15px); }
    }
    .animate { animation:BOUNCE .5s; }
  </style>

  <script>
    let zgRef = document.querySelector('#myGrid');
    zgRef.addEventListener('record:click', e => {
      zgRef.classList.add('animate');
    });
  </script>

Custom Events

Bind normal event actions, like so:

<zing-grid data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'>
  <zg-caption onclick="handleClick">Click me</zg-caption>
</zing-grid>

<script>
  function handleClick() {
    alert('Caption clicked!');
  }
</script>

Or bind a modern event listener to separate concerns, like so:

<zing-grid id="myZingGrid" data='[{"firstName":"John", "lastName":"Doe"}, {"firstName":"Jane", "lastName":"Doe"}]'>
  <zg-caption id="myCaption">Click me</zg-caption>
</zing-grid>

<script>
  document.querySelector('#myCaption').addEventListener('click', handleClick);

  function handleClick() {
    alert('Caption clicked!');
  }
</script>

Using ZingGrid With Frameworks

ZingGrid can be used with modern frameworks like React, Vue, and Angular, just like native HTML or other Custom Elements. When using these, take note that they are abstracting and virtualizing the DOM, which can introduce considerations not normally encountered with static HTML implementations.

Please view the integration examples for your specific framework for further details and examples: