docs
Menu
Menu

jQuery Integration

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

On This Page

Usage

Include the following dependencies in the header of your HTML file:

CloseCopy Copied
<script src="path/to/zinggrid.min.js" defer></script>

Create a <zing-grid> component:

CloseCopy Copied
<zing-grid id="myGrid" caption="Hello Doggos"></zing-grid>

Use jQuery to set or change your data:

CloseCopy Copied
$(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

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

On This Page

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading