Demos Back to Docs

Polymer Integration Demo

81 of 124
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 nonce="undefined" src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
  <!-- import zinggrid file -->
  <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
  <style>
    .zg-body {
      background: #FFF;
    }

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

<body class="zg-body">

  <script nonce="undefined" 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>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </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"></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; }
// No JS code

Related Docs

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

Related Docs

Demo Gallery