• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        h4 {
          color: #fff;
          font-weight: 500;
          font-size: 1.15rem;
          margin: 0.75rem 0;
          text-align: center;
        }
    
        zing-grid {
          border: 1px #e3e3e3 solid;
          margin: 0 0 2rem;
        }
    
        button {
          background-color: #1EA3ED;
          border: none;
          border-radius: 8px;
          color: #fff;
          cursor: pointer;
          font-size: 0.85rem;
          font-weight: bold;
          height: 2.5rem;
          line-height: 1rem;
          padding: 0.5rem 0.75rem;
          text-transform: uppercase;
        }
    
        button:hover {
          background-color: #00c6ff;
        }
    
        .container--controls {
          background: #fff;
          border: 1px solid #ededed;
          border-radius: 5px;
        }
    
        .container--controls>div {
          margin: 0 1rem 1rem 1rem;
        }
    
        .container--controls h3 {
          border-bottom: 0.00624rem #e3e3e3 solid;
          padding-bottom: 1rem;
          text-align: center;
        }
    
        .container--flex {
          display: flex;
          flex-direction: column;
        }
    
        .container--shadow {
          box-shadow: 0px 8px 27px 0px rgba(0, 0, 0, 0.13);
        }
    
        .container--size {
          height: 100%;
          width: 10rem;
        }
    
        .container--log,
        #eventlog {
          flex-basis: 100%;
        }
    
        .control__item {
          display: flex;
          flex-direction: column;
          margin: 0 0 1rem;
          font-size: 1rem;
          font-weight: bold;
        }
    
        .control__item:last-child {
          border-top: 0.00624rem #e3e3e3 solid;
          margin-top: auto;
          padding-top: 1rem;
        }
    
        .demo-container {
          box-sizing: border-box;
          display: grid;
          grid-template-columns: 0fr 4fr;
          grid-gap: 2rem;
          padding: 2.5rem 3.5rem;
        }
    
        .eventlog {
          background-color: #232c2f;
          border: 1px solid #ededed;
          border-radius: 6px;
          min-height: 175px;
          height: 100%;
          overflow: hidden;
        }
    
        .eventlog__bar {
          background-color: #e6e6e6;
          border-top-right-radius: 5px;
          border-top-left-radius: 5px;
          color: #3c4244;
          font-size: 0.85rem;
          font-weight: bold;
          height: 1.5rem;
          line-height: 1.5rem;
          padding: 0.25rem 0.5rem;
          text-align: center;
          vertical-align: middle;
        }
    
        .eventlog__log {
          color: #1FFE00;
          font-size: 1.15rem;
          height: 100%;
          padding: 1rem;
          white-space: pre-wrap;
          word-wrap: break-word;
        }
    
        .eventlog__minimize {
          border-radius: 1rem;
          cursor: pointer;
          float: left;
          fill: #00394B;
          font-size: 0.5rem;
          height: 1.2rem;
          line-height: 1.2rem;
          margin-top: 0.2rem;
          width: 1.2rem;
        }
    
        .eventlog__minimize:hover {
          fill: #778C91;
        }
    
        .eventlog__title {
          padding-right: 1.7rem;
        }
    
        .control__item input[type="text"] {
          border: 2px solid rgb(226, 226, 226);
          border-radius: 5px;
          box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
          color: rgb(0, 55, 73);
          height: 2.25rem;
          font-size: 0.85rem;
          font-weight: 600;
          padding: 0 0.75rem;
        }
    
        #reset-grid {
          background-color: #DA205B;
        }
    
        #reset-grid:hover {
          background-color: #E980A4;
        }
    
        @media screen and (max-width:1080px) {
          #eventlog {
            height: 170px;
          }
          .container--controls {
            grid-column: 1 / span 4;
            grid-row: 1;
            min-width: 100%;
          }
          .container--size {
            width: inherit;
          }
          .container {
            display: grid;
            grid-column: 1 / span 4;
          }
          input {
            max-width: 100%;
          }
        }
    
        zing-grid[loading] {
          height: 360px;
        }
      </style>
    </head>
    
    <body>
    
      <div class="demo-container">
    
        <div class="container container--controls container--shadow">
          <!-- caption controls -->
          <div class="container--size container--flex">
            <h3>Caption API&nbsp;Methods</h3>
            <div class="control__item">
              <button id="get-caption">Get Caption</button>
            </div>
            <div class="control__item">
              <label for="set-caption">Set Caption</label>
              <input type="text" name="set-caption" id="set-caption">
            </div>
    
            <div class="control__item">
              <button id="reset-grid">Reset Grid/Log</button>
            </div>
          </div>
        </div>
    
    
        <div class="container container--flex">
          <h4>Live demo</h4>
          <!-- grid container -->
          <div class="container container--demo">
            <zing-grid class="container--shadow" id="myGrid" theme="default" caption="Meet The Doe Family" layout="row" data='[
                  {
                    "firstName": "John",
                    "lastName": "Doe",
                    "age": 45
                  },
                  {
                    "firstName": "Jane",
                    "lastName": "Doe",
                    "age": 44
                  },
                  {
                    "firstName": "John Jr.",
                    "lastName": "Doe",
                    "age": 15
                  },
                  {
                    "firstName": "Jane Jr.",
                    "lastName": "Doe",
                    "age": 13
                  }
                ]'></zing-grid>
          </div>
    
          <!-- log container -->
          <div class="container container--log container--flex">
            <div class="eventlog container--shadow">
              <div class="eventlog__bar">
                <svg class="eventlog__minimize" width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <defs></defs>
                    <g id="Desktop-(1400px)" stroke="none" stroke-width="1" fill-rule="evenodd">
                      <g id="Artboard" transform="translate(-2383.000000, -1404.000000)">
                        <g id="Group-3" transform="translate(2383.000000, 1404.000000)">
                          <circle id="Oval" cx="27" cy="27" r="27"></circle>
                            <g id="collapse-two-arrows-diagonal-symbol" transform="translate(13.000000, 13.000000)" fill="#FFFFFF" fill-rule="nonzero" stroke="#FFFFFF">
                              <path d="M11.777317,16.2995357 L3.73773039,16.2995357 C3.24245588,16.2995357 2.8413366,16.6994009 2.8413366,17.1934915 C2.8413366,17.6866808 3.24245588,18.0873525 3.73773039,18.0873525 L9.67756536,18.0873525 L0,27.7361167 L1.26761275,29 L10.9351797,19.3601555 L10.9071275,25.2348716 C10.9071275,25.7280608 11.3082467,26.1287326 11.8035212,26.1287326 C12.2987958,26.1287326 12.699915,25.7289623 12.699915,25.2348716 L12.699915,17.1924952 C12.699915,16.9277529 12.5903595,16.7137767 12.4165016,16.5668874 C12.2526422,16.403772 12.0271814,16.2995357 11.777317,16.2995357 Z M25.2632173,10.9126 L19.3233824,10.9126 L29,1.26378845 L27.7323399,0 L18.0656732,9.63974962 L18.0937729,3.76503347 C18.0937729,3.27184426 17.6926536,2.87112506 17.1973791,2.87112506 C16.7021046,2.87112506 16.3009853,3.27094281 16.3009853,3.76503347 L16.3009853,11.8074099 C16.3009853,12.0721522 16.4105408,12.286081 16.583451,12.4320688 C16.7464101,12.597082 16.971018,12.7013183 17.2218301,12.7013183 L25.2613693,12.7013183 C25.7566438,12.7013183 26.1578105,12.3015006 26.1578105,11.8074099 C26.1586634,11.3133192 25.7575441,10.9126 25.2632173,10.9126 Z" id="Shape"></path>
                            </g>
                          </g>
                        </g>
                      </g>
                  </svg>
                <span class="eventlog__title">Console</span>
              </div>
              <pre class="eventlog__log"></pre>
            </div>
          </div>
        </div>
    
      </div>
      <!-- end demo container -->
    
      <script>
        // GLOBAL REFERENCES
        const zingGridRef = document.querySelector('#myGrid');
        const eventLogRef = document.querySelector('.eventlog__log');
        const resetGridRef = document.querySelector('#reset-grid');
    
        // caption section
        const getCaptionRef = document.querySelector('#get-caption');
        const setCaptionRef = document.querySelector('#set-caption');
    
        /*
         * @descrption clear current event log header and text
         */
        const _clearEventLog = () => {
          if (eventLogRef) eventLogRef.innerHTML = '';
        }
    
        /**
         * @description used as replace param in JSON.stringify
         */
        function censor(key, value) {
          if (typeof(value) == "object") {
            return undefined;
          }
          return value;
        }
    
        /*
         * @description format data to be displayed in the event box
         * @param {*} logData - data to log on the screen
         * @param {String} [header] - text to define what is being shown
         */
        const _logCustomEvent = (logData, code) => {
          if (eventLogRef) {
            _clearEventLog();
            if (code) {
              eventLogRef.innerHTML += `${code}`;
            }
            if (logData) {
              var stringify = JSON.stringify(logData, censor, 2);
              if (stringify) {
                eventLogRef.innerHTML += stringify;
              } else {
                eventLogRef.innerHTML += '{{' + logData + '}}';
              }
            }
          }
        }
    
        /*
         * @description resets grid to default and clears log
         */
        const _resetGrid = () => {
          var inputs = document.querySelectorAll('.control__item input[type="text"]');
          for (var i = 0; i < inputs.length; i++) {
            inputs[i].value = '';
          }
    
          if (zingGridRef) {
            zingGridRef.setCaption('Meet The Doe Family');
            _clearEventLog();
          }
        }
    
        /*
         * @description get the current pageSize
         */
        const _getCaption = () => {
          if (zingGridRef) _logCustomEvent(zingGridRef.getCaption(), '>>> myGrid.getCaption();\n\n');
        }
    
        /*
         * @description set the grid caption value
         * @params {Event} e - native browser 'change' event
         */
        const _setCaption = (e) => {
          const mCaptionValue = e.target.value;
          if (zingGridRef) zingGridRef.setCaption(mCaptionValue);
          _logCustomEvent(null, '>>> myGrid.setCaption("' + mCaptionValue + '");')
        }
    
        // assign event listeners for inputs
        // -----------------------------------
        if (resetGridRef) resetGridRef.addEventListener('click', _resetGrid);
    
        // caption events
        if (setCaptionRef) setCaptionRef.addEventListener('keyup', _setCaption);
        if (getCaptionRef) getCaptionRef.addEventListener('click', _getCaption);
    
        _clearEventLog();
    
        // minimize event for console
        const _minimizeLog = () => {
          var consoleLog = document.querySelector('.eventlog');
          var consoleStyle = window.getComputedStyle(consoleLog, null);
          if (consoleStyle['minHeight'] === '0px') {
            consoleLog.style.height = '100%';
            consoleLog.style.minHeight = '175px';
          } else {
            consoleLog.style.height = '2rem';
            consoleLog.style.minHeight = '0px';
          }
        }
        const consoleMinimize = document.querySelector('.eventlog__minimize');
        if (consoleMinimize) consoleMinimize.addEventListener('click', _minimizeLog);
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    </head>
    
    <body>
    
      <div class="demo-container">
    
        <div class="container container--controls container--shadow">
          <!-- caption controls -->
          <div class="container--size container--flex">
            <h3>Caption API&nbsp;Methods</h3>
            <div class="control__item">
              <button id="get-caption">Get Caption</button>
            </div>
            <div class="control__item">
              <label for="set-caption">Set Caption</label>
              <input type="text" name="set-caption" id="set-caption">
            </div>
    
            <div class="control__item">
              <button id="reset-grid">Reset Grid/Log</button>
            </div>
          </div>
        </div>
    
    
        <div class="container container--flex">
          <h4>Live demo</h4>
          <!-- grid container -->
          <div class="container container--demo">
            <zing-grid class="container--shadow" id="myGrid" theme="default" caption="Meet The Doe Family" layout="row" data='[
                  {
                    "firstName": "John",
                    "lastName": "Doe",
                    "age": 45
                  },
                  {
                    "firstName": "Jane",
                    "lastName": "Doe",
                    "age": 44
                  },
                  {
                    "firstName": "John Jr.",
                    "lastName": "Doe",
                    "age": 15
                  },
                  {
                    "firstName": "Jane Jr.",
                    "lastName": "Doe",
                    "age": 13
                  }
                ]'></zing-grid>
          </div>
    
          <!-- log container -->
          <div class="container container--log container--flex">
            <div class="eventlog container--shadow">
              <div class="eventlog__bar">
                <svg class="eventlog__minimize" width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <defs></defs>
                    <g id="Desktop-(1400px)" stroke="none" stroke-width="1" fill-rule="evenodd">
                      <g id="Artboard" transform="translate(-2383.000000, -1404.000000)">
                        <g id="Group-3" transform="translate(2383.000000, 1404.000000)">
                          <circle id="Oval" cx="27" cy="27" r="27"></circle>
                            <g id="collapse-two-arrows-diagonal-symbol" transform="translate(13.000000, 13.000000)" fill="#FFFFFF" fill-rule="nonzero" stroke="#FFFFFF">
                              <path d="M11.777317,16.2995357 L3.73773039,16.2995357 C3.24245588,16.2995357 2.8413366,16.6994009 2.8413366,17.1934915 C2.8413366,17.6866808 3.24245588,18.0873525 3.73773039,18.0873525 L9.67756536,18.0873525 L0,27.7361167 L1.26761275,29 L10.9351797,19.3601555 L10.9071275,25.2348716 C10.9071275,25.7280608 11.3082467,26.1287326 11.8035212,26.1287326 C12.2987958,26.1287326 12.699915,25.7289623 12.699915,25.2348716 L12.699915,17.1924952 C12.699915,16.9277529 12.5903595,16.7137767 12.4165016,16.5668874 C12.2526422,16.403772 12.0271814,16.2995357 11.777317,16.2995357 Z M25.2632173,10.9126 L19.3233824,10.9126 L29,1.26378845 L27.7323399,0 L18.0656732,9.63974962 L18.0937729,3.76503347 C18.0937729,3.27184426 17.6926536,2.87112506 17.1973791,2.87112506 C16.7021046,2.87112506 16.3009853,3.27094281 16.3009853,3.76503347 L16.3009853,11.8074099 C16.3009853,12.0721522 16.4105408,12.286081 16.583451,12.4320688 C16.7464101,12.597082 16.971018,12.7013183 17.2218301,12.7013183 L25.2613693,12.7013183 C25.7566438,12.7013183 26.1578105,12.3015006 26.1578105,11.8074099 C26.1586634,11.3133192 25.7575441,10.9126 25.2632173,10.9126 Z" id="Shape"></path>
                            </g>
                          </g>
                        </g>
                      </g>
                  </svg>
                <span class="eventlog__title">Console</span>
              </div>
              <pre class="eventlog__log"></pre>
            </div>
          </div>
        </div>
    
      </div>
      <!-- end demo container -->
    
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    h4 {
      color: #fff;
      font-weight: 500;
      font-size: 1.15rem;
      margin: 0.75rem 0;
      text-align: center;
    }
    
    zing-grid {
      border: 1px #e3e3e3 solid;
      margin: 0 0 2rem;
    }
    
    button {
      background-color: #1EA3ED;
      border: none;
      border-radius: 8px;
      color: #fff;
      cursor: pointer;
      font-size: 0.85rem;
      font-weight: bold;
      height: 2.5rem;
      line-height: 1rem;
      padding: 0.5rem 0.75rem;
      text-transform: uppercase;
    }
    
    button:hover {
      background-color: #00c6ff;
    }
    
    .container--controls {
      background: #fff;
      border: 1px solid #ededed;
      border-radius: 5px;
    }
    
    .container--controls>div {
      margin: 0 1rem 1rem 1rem;
    }
    
    .container--controls h3 {
      border-bottom: 0.00624rem #e3e3e3 solid;
      padding-bottom: 1rem;
      text-align: center;
    }
    
    .container--flex {
      display: flex;
      flex-direction: column;
    }
    
    .container--shadow {
      box-shadow: 0px 8px 27px 0px rgba(0, 0, 0, 0.13);
    }
    
    .container--size {
      height: 100%;
      width: 10rem;
    }
    
    .container--log,
    #eventlog {
      flex-basis: 100%;
    }
    
    .control__item {
      display: flex;
      flex-direction: column;
      margin: 0 0 1rem;
      font-size: 1rem;
      font-weight: bold;
    }
    
    .control__item:last-child {
      border-top: 0.00624rem #e3e3e3 solid;
      margin-top: auto;
      padding-top: 1rem;
    }
    
    .demo-container {
      box-sizing: border-box;
      display: grid;
      grid-template-columns: 0fr 4fr;
      grid-gap: 2rem;
      padding: 2.5rem 3.5rem;
    }
    
    .eventlog {
      background-color: #232c2f;
      border: 1px solid #ededed;
      border-radius: 6px;
      min-height: 175px;
      height: 100%;
      overflow: hidden;
    }
    
    .eventlog__bar {
      background-color: #e6e6e6;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
      color: #3c4244;
      font-size: 0.85rem;
      font-weight: bold;
      height: 1.5rem;
      line-height: 1.5rem;
      padding: 0.25rem 0.5rem;
      text-align: center;
      vertical-align: middle;
    }
    
    .eventlog__log {
      color: #1FFE00;
      font-size: 1.15rem;
      height: 100%;
      padding: 1rem;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    
    .eventlog__minimize {
      border-radius: 1rem;
      cursor: pointer;
      float: left;
      fill: #00394B;
      font-size: 0.5rem;
      height: 1.2rem;
      line-height: 1.2rem;
      margin-top: 0.2rem;
      width: 1.2rem;
    }
    
    .eventlog__minimize:hover {
      fill: #778C91;
    }
    
    .eventlog__title {
      padding-right: 1.7rem;
    }
    
    .control__item input[type="text"] {
      border: 2px solid rgb(226, 226, 226);
      border-radius: 5px;
      box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
      color: rgb(0, 55, 73);
      height: 2.25rem;
      font-size: 0.85rem;
      font-weight: 600;
      padding: 0 0.75rem;
    }
    
    #reset-grid {
      background-color: #DA205B;
    }
    
    #reset-grid:hover {
      background-color: #E980A4;
    }
    
    @media screen and (max-width:1080px) {
      #eventlog {
        height: 170px;
      }
      .container--controls {
        grid-column: 1 / span 4;
        grid-row: 1;
        min-width: 100%;
      }
      .container--size {
        width: inherit;
      }
      .container {
        display: grid;
        grid-column: 1 / span 4;
      }
      input {
        max-width: 100%;
      }
    }
    // GLOBAL REFERENCES
    const zingGridRef = document.querySelector('#myGrid');
    const eventLogRef = document.querySelector('.eventlog__log');
    const resetGridRef = document.querySelector('#reset-grid');
    
    // caption section
    const getCaptionRef = document.querySelector('#get-caption');
    const setCaptionRef = document.querySelector('#set-caption');
    
    /*
     * @descrption clear current event log header and text
     */
    const _clearEventLog = () => {
      if (eventLogRef) eventLogRef.innerHTML = '';
    }
    
    /**
     * @description used as replace param in JSON.stringify
     */
    function censor(key, value) {
      if (typeof(value) == "object") {
        return undefined;
      }
      return value;
    }
    
    /*
     * @description format data to be displayed in the event box
     * @param {*} logData - data to log on the screen
     * @param {String} [header] - text to define what is being shown
     */
    const _logCustomEvent = (logData, code) => {
      if (eventLogRef) {
        _clearEventLog();
        if (code) {
          eventLogRef.innerHTML += `${code}`;
        }
        if (logData) {
          var stringify = JSON.stringify(logData, censor, 2);
          if (stringify) {
            eventLogRef.innerHTML += stringify;
          } else {
            eventLogRef.innerHTML += '{{' + logData + '}}';
          }
        }
      }
    }
    
    /*
     * @description resets grid to default and clears log
     */
    const _resetGrid = () => {
      var inputs = document.querySelectorAll('.control__item input[type="text"]');
      for (var i = 0; i < inputs.length; i++) {
        inputs[i].value = '';
      }
    
      if (zingGridRef) {
        zingGridRef.setCaption('Meet The Doe Family');
        _clearEventLog();
      }
    }
    
    /*
     * @description get the current pageSize
     */
    const _getCaption = () => {
      if (zingGridRef) _logCustomEvent(zingGridRef.getCaption(), '>>> myGrid.getCaption();\n\n');
    }
    
    /*
     * @description set the grid caption value
     * @params {Event} e - native browser 'change' event
     */
    const _setCaption = (e) => {
      const mCaptionValue = e.target.value;
      if (zingGridRef) zingGridRef.setCaption(mCaptionValue);
      _logCustomEvent(null, '>>> myGrid.setCaption("' + mCaptionValue + '");')
    }
    
    // assign event listeners for inputs
    // -----------------------------------
    if (resetGridRef) resetGridRef.addEventListener('click', _resetGrid);
    
    // caption events
    if (setCaptionRef) setCaptionRef.addEventListener('keyup', _setCaption);
    if (getCaptionRef) getCaptionRef.addEventListener('click', _getCaption);
    
    _clearEventLog();
    
    // minimize event for console
    const _minimizeLog = () => {
      var consoleLog = document.querySelector('.eventlog');
      var consoleStyle = window.getComputedStyle(consoleLog, null);
      if (consoleStyle['minHeight'] === '0px') {
        consoleLog.style.height = '100%';
        consoleLog.style.minHeight = '175px';
      } else {
        consoleLog.style.height = '2rem';
        consoleLog.style.minHeight = '0px';
      }
    }
    const consoleMinimize = document.querySelector('.eventlog__minimize');
    if (consoleMinimize) consoleMinimize.addEventListener('click', _minimizeLog);