jQuery Integration

ZingGrid works with your development stack, including jQuery! In this guide, we'll walk you through how to add ZingGrid to your jQuery project.

Usage

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

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

2. Create a <zing-grid> component, like so:

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

3. Use jQuery to set or change your data, like so:

   $(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));
   });

jQuery Integrated Grid

Here is our complete grid that is successfully integrated with jQuery: