• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Docs Getting Started</title>
    7.   <!--Script Reference[1]-->
    8.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.  
    19.  
    20.     zing-grid[loading] {
    21.       height: 277px;
    22.     }
    23.   </style>
    24. </head>
    25.  
    26. <body>
    27.   <!--Grid Component Placement[2]-->
    28.   <zing-grid caption="Register Custom Column" editor>
    29.     <zg-data data='[{
    30.           "num": "3",
    31.           "feet": "6",
    32.           "inch": "0",
    33.           "first": "roberto",
    34.           "last": "aguayo",
    35.           "col": "florida state"
    36.       }, {
    37.           "num": "83",
    38.           "feet": "6",
    39.           "inch": "4",
    40.           "first": "braedon",
    41.           "last": "bowman",
    42.           "col": "south alabama"
    43.       }, {
    44.           "num": "67",
    45.           "feet": "6",
    46.           "inch": "6",
    47.           "first": "brett",
    48.           "last": "boyko",
    49.           "col": "nevada-las vegas"
    50.       } ]'></zg-data>
    51.     <zg-colgroup>
    52.       <zg-column index="num" header="#" type="Number"></zg-column>
    53.       <zg-column index="first, last" header="Player" type="fullname"></zg-column>
    54.       <zg-column index="col" type="upper" header="College"></zg-column>
    55.       <zg-column index="feet, inch" header="Height" type="height"></zg-column>
    56.     </zg-colgroup>
    57.   </zing-grid>
    58.   <script>
    59.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // renderer function for cell
    60.     function heightRenderer(feet, inch, cellRef, $cell) {
    61.       return feet + '"' + inch + "'";
    62.     }
    63.  
    64.     // renderer function for cell
    65.     function nameRenderer(first, last, cellRef, $cell) {
    66.       return first.toUpperCase() + ' ' + last.toUpperCase();
    67.     }
    68.  
    69.     // renderer function for cell
    70.     function upperRenderer(mRawData, cellRef, $cell) {
    71.       return mRawData.toUpperCase();
    72.     }
    73.  
    74.     // hooks for editor
    75.     let editor = {
    76.       init($cell, editorField) {
    77.         let oDOMInput = document.createElement('input');
    78.         oDOMInput.type = 'text';
    79.         oDOMInput.autoComplete = 'off';
    80.         oDOMInput.ariaInvalid = false;
    81.         editorField.appendChild(oDOMInput);
    82.       },
    83.  
    84.       onOpen($cell, editorField, mData) {
    85.         let oDOMInput = editorField.querySelector('input');
    86.         if (!mData) {
    87.           mData = editorField.value || '';
    88.         }
    89.         oDOMInput.value = String(mData);
    90.       },
    91.  
    92.       onClose(editorField) {
    93.         return 'Edited: ' + editorField.querySelector('input').value;
    94.       },
    95.     };
    96.  
    97.  
    98.     ZingGrid.registerCellType('height', {
    99.       renderer: heightRenderer,
    100.     });
    101.  
    102.     ZingGrid.registerCellType('fullname', {
    103.       renderer: nameRenderer,
    104.     });
    105.  
    106.     ZingGrid.registerCellType('upper', {
    107.       editor: editor,
    108.       renderer: upperRenderer,
    109.     });
    110.   </script>
    111. </body>
    112.  
    113. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Docs Getting Started</title>
    7.   <!--Script Reference[1]-->
    8.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <!--Grid Component Placement[2]-->
    13.   <zing-grid caption="Register Custom Column" editor>
    14.     <zg-data data='[{
    15.           "num": "3",
    16.           "feet": "6",
    17.           "inch": "0",
    18.           "first": "roberto",
    19.           "last": "aguayo",
    20.           "col": "florida state"
    21.       }, {
    22.           "num": "83",
    23.           "feet": "6",
    24.           "inch": "4",
    25.           "first": "braedon",
    26.           "last": "bowman",
    27.           "col": "south alabama"
    28.       }, {
    29.           "num": "67",
    30.           "feet": "6",
    31.           "inch": "6",
    32.           "first": "brett",
    33.           "last": "boyko",
    34.           "col": "nevada-las vegas"
    35.       } ]'></zg-data>
    36.     <zg-colgroup>
    37.       <zg-column index="num" header="#" type="Number"></zg-column>
    38.       <zg-column index="first, last" header="Player" type="fullname"></zg-column>
    39.       <zg-column index="col" type="upper" header="College"></zg-column>
    40.       <zg-column index="feet, inch" header="Height" type="height"></zg-column>
    41.     </zg-colgroup>
    42.   </zing-grid>
    43. </body>
    44.  
    45. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    1.   // renderer function for cell
    2.   function heightRenderer(feet, inch, cellRef, $cell) {
    3.     return feet + '"' + inch + "'";
    4.   }
    5.  
    6.   // renderer function for cell
    7.   function nameRenderer(first, last, cellRef, $cell) {
    8.     return first.toUpperCase() + ' ' + last.toUpperCase();
    9.   }
    10.  
    11.   // renderer function for cell
    12.   function upperRenderer(mRawData, cellRef, $cell) {
    13.     return mRawData.toUpperCase();
    14.   }
    15.  
    16.   // hooks for editor
    17.   let editor = {
    18.     init($cell, editorField) {
    19.       let oDOMInput = document.createElement('input');
    20.       oDOMInput.type = 'text';
    21.       oDOMInput.autoComplete = 'off';
    22.       oDOMInput.ariaInvalid = false;
    23.       editorField.appendChild(oDOMInput);
    24.     },
    25.  
    26.     onOpen($cell, editorField, mData) {
    27.       let oDOMInput = editorField.querySelector('input');
    28.       if (!mData) {
    29.         mData = editorField.value || '';
    30.       }
    31.       oDOMInput.value = String(mData);
    32.     },
    33.  
    34.     onClose(editorField) {
    35.       return 'Edited: ' + editorField.querySelector('input').value;
    36.     },
    37.   };
    38.  
    39.  
    40.   ZingGrid.registerCellType('height', {
    41.     renderer: heightRenderer,
    42.   });
    43.  
    44.   ZingGrid.registerCellType('fullname', {
    45.     renderer: nameRenderer,
    46.   });
    47.  
    48.   ZingGrid.registerCellType('upper', {
    49.     editor: editor,
    50.     renderer: upperRenderer,
    51.   });