Docs

jQuery Integration

Below, we show you how ZingGrid works out-of-the-box with jQuery in three simple steps.

Usage

  1. Include the following dependencies in the header of your HTML file:
<script src="path/to/zinggrid.min.js" defer></script>
  1. Create a <zing-grid> component:
<zing-grid id="myGrid" caption="Hello Doggos"></zing-grid>
  1. Use jQuery to set or change your data:
$(document).ready(function() {
  const $gridRef = $('#myGrid');
  let datastore = [
    { "breed": "Dachshund", "name": "Sousage"},
    { "breed": "Corgi", "name": "Plop"},
    { "breed": "Pomeranian", "name": "Floof"}
  ];
  $gridRef.attr('data', JSON.stringify(datastore));
});

Example

Top

On This Page