• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid: Docs Getting Started</title>
      <!--Script Reference[1]-->
      <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        zing-grid[loading] {
          height: 277px;
        }
      </style>
    </head>
    
    <body>
      <!--Grid Component Placement[2]-->
      <zing-grid caption="Register Custom Column" editor>
        <zg-data data='[{
              "num": "3",
              "feet": "6",
              "inch": "0",
              "first": "roberto",
              "last": "aguayo",
              "col": "florida state"
          }, {
              "num": "83",
              "feet": "6",
              "inch": "4",
              "first": "braedon",
              "last": "bowman",
              "col": "south alabama"
          }, {
              "num": "67",
              "feet": "6",
              "inch": "6",
              "first": "brett",
              "last": "boyko",
              "col": "nevada-las vegas"
          } ]'></zg-data>
        <zg-colgroup>
          <zg-column index="num" header="#" type="Number"></zg-column>
          <zg-column index="first, last" header="Player" type="fullname"></zg-column>
          <zg-column index="col" type="upper" header="College"></zg-column>
          <zg-column index="feet, inch" header="Height" type="height"></zg-column>
        </zg-colgroup>
      </zing-grid>
      <script>
        // renderer function for cell
        function heightRenderer(feet, inch, cellRef, $cell) {
          return feet + '"' + inch + "'";
        }
    
        // renderer function for cell
        function nameRenderer(first, last, cellRef, $cell) {
          return first.toUpperCase() + ' ' + last.toUpperCase();
        }
    
        // renderer function for cell
        function upperRenderer(mRawData, cellRef, $cell) {
          return mRawData.toUpperCase();
        }
    
        // hooks for editor
        let editor = {
          init($cell, editorField) {
            let oDOMInput = document.createElement('input');
            oDOMInput.type = 'text';
            oDOMInput.autoComplete = 'off';
            oDOMInput.ariaInvalid = false;
            editorField.appendChild(oDOMInput);
          },
    
          onOpen($cell, editorField, mData) {
            let oDOMInput = editorField.querySelector('input');
            if (!mData) {
              mData = editorField.value || '';
            }
            oDOMInput.value = String(mData);
          },
    
          onClose(editorField) {
            return 'Edited: ' + editorField.querySelector('input').value;
          },
        };
    
    
        ZingGrid.registerCellType('height', {
          renderer: heightRenderer,
        });
    
        ZingGrid.registerCellType('fullname', {
          renderer: nameRenderer,
        });
    
        ZingGrid.registerCellType('upper', {
          editor: editor,
          renderer: upperRenderer,
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid: Docs Getting Started</title>
      <!--Script Reference[1]-->
      <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    </head>
    
    <body>
      <!--Grid Component Placement[2]-->
      <zing-grid caption="Register Custom Column" editor>
        <zg-data data='[{
              "num": "3",
              "feet": "6",
              "inch": "0",
              "first": "roberto",
              "last": "aguayo",
              "col": "florida state"
          }, {
              "num": "83",
              "feet": "6",
              "inch": "4",
              "first": "braedon",
              "last": "bowman",
              "col": "south alabama"
          }, {
              "num": "67",
              "feet": "6",
              "inch": "6",
              "first": "brett",
              "last": "boyko",
              "col": "nevada-las vegas"
          } ]'></zg-data>
        <zg-colgroup>
          <zg-column index="num" header="#" type="Number"></zg-column>
          <zg-column index="first, last" header="Player" type="fullname"></zg-column>
          <zg-column index="col" type="upper" header="College"></zg-column>
          <zg-column index="feet, inch" header="Height" type="height"></zg-column>
        </zg-colgroup>
      </zing-grid>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
      // renderer function for cell
      function heightRenderer(feet, inch, cellRef, $cell) {
        return feet + '"' + inch + "'";
      }
    
      // renderer function for cell
      function nameRenderer(first, last, cellRef, $cell) {
        return first.toUpperCase() + ' ' + last.toUpperCase();
      }
    
      // renderer function for cell
      function upperRenderer(mRawData, cellRef, $cell) {
        return mRawData.toUpperCase();
      }
    
      // hooks for editor
      let editor = {
        init($cell, editorField) {
          let oDOMInput = document.createElement('input');
          oDOMInput.type = 'text';
          oDOMInput.autoComplete = 'off';
          oDOMInput.ariaInvalid = false;
          editorField.appendChild(oDOMInput);
        },
    
        onOpen($cell, editorField, mData) {
          let oDOMInput = editorField.querySelector('input');
          if (!mData) {
            mData = editorField.value || '';
          }
          oDOMInput.value = String(mData);
        },
    
        onClose(editorField) {
          return 'Edited: ' + editorField.querySelector('input').value;
        },
      };
    
    
      ZingGrid.registerCellType('height', {
        renderer: heightRenderer,
      });
    
      ZingGrid.registerCellType('fullname', {
        renderer: nameRenderer,
      });
    
      ZingGrid.registerCellType('upper', {
        editor: editor,
        renderer: upperRenderer,
      });