Demos Back to Demos

Polymer Integration Demo

6 of 25

Demo of ZingGrid and Polymer integration. You can find a more comprehensive demo on our github here. Note, this is an integration example. No framework-specific components are required to run ZingGrid in Polymer.

Result HTML CSS
Edit Download

Result

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
    <!-- Polyfills only needed for Firefox and Edge. -->
		<script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
  
    <!-- import zinggrid file -->
    <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js" defer></script>
  </head>
  <body>

  <script type="module">
      import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer@next/polymer-element.js?module';
      class MyComponent extends PolymerElement {
        
        // on instantiation
        constructor() {
          super();
          this.theme = 'default';
          this.datastore = [
            { "breed": "Cane Corso", "name": "Ziva"},
            { "breed": "Dachshund", "name": "Rick"},
            { "breed": "Corgi", "name": "Phillis"},
            { "breed": "Pomeranian", "name": "Koda"}
          ];
          this.stringData = JSON.stringify(this.datastore);
        }

        // on DOM mount
        connectedCallback() {
  				super.connectedCallback();
          // assign editor callback to catch data updates
          // full row edit 
          this.$.demoGrid.addEventListener('data:recordchange', this.dataChanged.bind(this));
          // single cell change (double click cell)
          this.$.demoGrid.addEventListener('data:cellchange', this.dataChanged.bind(this));
          // row insert
          this.$.demoGrid.addEventListener('data:recordinsert', this.dataInsert.bind(this));
          // row delete
          this.$.demoGrid.addEventListener('data:recorddelete', this.dataDelete.bind(this));
        }
        
        static get template() {
          return html`
          <div>
            <zing-grid
              id="demoGrid"
              caption="Two Way Data Binding"
              context-menu
              editor-controls
              layout-controls
              search
              sort
              pager
              page-size="5"
              page-size-options="2,5,15"
              data$="[[datastore]]"
              theme$="[[theme]]">
            </zing-grid>

            <br>
            <hr>
						<h3>Change Theme</h3>
            <select on-change="updateGridTheme">
              <option value="default">Default</option>
              <option value="android">Android</option>
              <option value="ios">IOS</option>
              <option value="dark">Dark</option>
              <option value="black">Black</option>
            </select>
            <h3>Edit Store Data</h3>
            <p>Edit current JSON or copy paste your <b>JSON</b> data here:</p>
            <textarea id="textareaRef" name="ds" cols="50" rows="8" value="[[stringData]]" on-keyup="updateGridData"></textarea>
            <br>
    			</div>
					`;
        }
        
        updateGridData(e) {
          console.log(arguments)
          this.datastore = JSON.parse(this.$.textareaRef.value);
        }
        
        // manager store updates
        dataChanged(e) {
          console.log(`--- data:changed fired ---`, e.detail);

          let rowIndex = e.detail.ZGData.rowIndex;
          let newValues = {
            breed: e.detail.ZGData.data.breed,
            name: e.detail.ZGData.data.name
          };

          // update the object in datastore at the correct
          // array position
          // eg) currentDataSet['name'] = 'new value'
          this.datastore[rowIndex] = newValues;
          this.stringifyData();
        }

        // manage inserting rows to store
        dataInsert(e) {        
          console.log(`--- data:insert fired ---`, e.detail);
          let newValues = {
            breed: e.detail.ZGData.data.breed,
            name: e.detail.ZGData.data.name,
          };
          // push record to our array
          this.datastore.push(newValues);
          this.stringifyData();
        }

        // manage deleting rows to store
        dataDelete(e) {        
          console.log(`--- data:delete fired ---`, e.detail);
          let recordIndex = e.detail.ZGData.data.nOriginalIndex;
          // filter deleted row from datastore containing array of objects
          this.datastore = this.datastore.filter((ele, index) => index != recordIndex);
          this.stringifyData();
        }
        
        // update store data for textarea input and grid
        stringifyData(val) {
          // must stringify data for component/HTML attributes
          this.stringData = JSON.stringify(this.datastore);
          // alternatively can use API to set data. We chose
          // to show off attribute binding first
          // this.$refs.demoGrid.setData(this.datastore);
        }
        
        // toggle theme attribute on grid
        updateGridTheme(e) {
          let newThemeValue = e.target.value;
          this.theme = newThemeValue;
        }
      }

      customElements.define('my-component', MyComponent);
    </script>
    
    <p>Edit the grid or the text area, change themes in the dropdown, ZingGrid is reactive to attribute mutations. </p>
    <!-- instantiate component -->
    <my-component></my-component>
  </body>
</html>

CSS

body { background:#FFF; }

Interested in this demo? Modify it to your needs in the ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio