Polymer Integration Demo

79 of 122
This demo is an example 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 Full HTML CSS JS
Edit Download

Edit the grid or the text area, change themes in the dropdown, ZingGrid is reactive to attribute mutations.

Full Code

<!DOCTYPE html>
<html class="zg-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>
  <style>
    .zg-body {
      background: #FFF;
    }

    zing-grid[loading] {
      height: 767px;
    }
  </style>
</head>

<body class="zg-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>
  <script></script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-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 class="zg-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>
.zg-body { background:#FFF; }

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

Edit in Studio

Demo Gallery