Using JavaScript with ZingGrid

ZingGrid tags as Custom Elements have access to the standard JavaScript DOM API.

Element Manipulation

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

<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 section, ZingGrid has unidirectional sync controlled by the attribute, not the corresponding element. So when updating grid elements, it is recommended to update the attribute, 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.


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:

<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 a modern event listener to separate concerns:

<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 may introduce considerations not normally encountered with static HTML implementations.

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

If you do not see your framework listed above, please let us know.