• 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 Editor" 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="#"></zg-column>
    53.       <zg-column index="first, last" header="Player"></zg-column>
    54.       <zg-column index="col" header="College"></zg-column>
    55.       <zg-column index="feet, inch" header="Height">
    56.         [[index.feet]]" [[index.inch]]'
    57.       </zg-column>
    58.     </zg-colgroup>
    59.   </zing-grid>
    60.   <script>
    61.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    62.     // because this Javascript is injected into the document head
    63.     window.addEventListener('load', () => {
    64.       // Javascript code to execute after DOM content
    65.       // hooks for editor
    66.       let editor = {
    67.         init($cell, editorField) {
    68.           let oDOMInput = document.createElement('input');
    69.           oDOMInput.type = 'text';
    70.           oDOMInput.autoComplete = 'off';
    71.           oDOMInput.ariaInvalid = false;
    72.           editorField.appendChild(oDOMInput);
    73.         },
    74.         onOpen($cell, editorField, mData) {
    75.           let oDOMInput = editorField.querySelector('input');
    76.           if (!mData) {
    77.             mData = editorField.value || '';
    78.           }
    79.           oDOMInput.value = String(mData);
    80.         },
    81.         onClose(editorField) {
    82.           console.log('close');
    83.           return 'Edited: ' + editorField.querySelector('input').value;
    84.         },
    85.       };
    86.       // Register Editor
    87.       ZingGrid.registerEditor(editor, 'prependEdited');
    88.       // Assign Editor
    89.       let zgRef = document.querySelector('zing-grid');
    90.       zgRef.executeOnLoad(() => {
    91.         let zgColRef = document.querySelector('zg-column[index="col"]');
    92.         zgColRef.editor = 'prependEdited';
    93.       });
    94.     });
    95.   </script>
    96. </body>
    97.  
    98. </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 Editor" 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="#"></zg-column>
    38.       <zg-column index="first, last" header="Player"></zg-column>
    39.       <zg-column index="col" header="College"></zg-column>
    40.       <zg-column index="feet, inch" header="Height">
    41.         [[index.feet]]" [[index.inch]]'
    42.       </zg-column>
    43.     </zg-colgroup>
    44.   </zing-grid>
    45. </body>
    46.  
    47. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4.   // Javascript code to execute after DOM content
    5.   // hooks for editor
    6.   let editor = {
    7.     init($cell, editorField) {
    8.       let oDOMInput = document.createElement('input');
    9.       oDOMInput.type = 'text';
    10.       oDOMInput.autoComplete = 'off';
    11.       oDOMInput.ariaInvalid = false;
    12.       editorField.appendChild(oDOMInput);
    13.     },
    14.     onOpen($cell, editorField, mData) {
    15.       let oDOMInput = editorField.querySelector('input');
    16.       if (!mData) {
    17.         mData = editorField.value || '';
    18.       }
    19.       oDOMInput.value = String(mData);
    20.     },
    21.     onClose(editorField) {
    22.       console.log('close');
    23.       return 'Edited: ' + editorField.querySelector('input').value;
    24.     },
    25.   };
    26.   // Register Editor
    27.   ZingGrid.registerEditor(editor, 'prependEdited');
    28.   // Assign Editor
    29.   let zgRef = document.querySelector('zing-grid');
    30.   zgRef.executeOnLoad(() => {
    31.     let zgColRef = document.querySelector('zg-column[index="col"]');
    32.     zgColRef.editor = 'prependEdited';
    33.   });
    34. });