• 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 template" editor="modal">
    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" editor-template="editFullName"></zg-column>
    54.       <zg-column index="col" header="College"></zg-column>
    55.       <zg-column index="feet, inch" header="Height" editor-template="editHeight">
    56.         [[index.feet]]" [[index.inch]]'
    57.       </zg-column>
    58.     </zg-colgroup>
    59.   </zing-grid>
    60.  
    61.   <template id="editFullName">
    62.     First Name: <input type="text" value="[[index.first]]"><br><br>
    63.     Last Name: <input type="text" value="[[index.last]]"><br>
    64.   </template>
    65.  
    66.   <template id="editHeight">
    67.     Feet: <input type="text" value="[[index.feet]]"><br><br>
    68.     Inches: <input type="text" value="[[index.inch]]"><br>
    69.   </template>
    70.   <script>
    71.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    72.     // because this Javascript is injected into the document head
    73.     window.addEventListener('load', () => {
    74.       // Javascript code to execute after DOM content
    75.     });
    76.   </script>
    77. </body>
    78.  
    79. </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 template" editor="modal">
    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" editor-template="editFullName"></zg-column>
    39.       <zg-column index="col" header="College"></zg-column>
    40.       <zg-column index="feet, inch" header="Height" editor-template="editHeight">
    41.         [[index.feet]]" [[index.inch]]'
    42.       </zg-column>
    43.     </zg-colgroup>
    44.   </zing-grid>
    45.  
    46.   <template id="editFullName">
    47.     First Name: <input type="text" value="[[index.first]]"><br><br>
    48.     Last Name: <input type="text" value="[[index.last]]"><br>
    49.   </template>
    50.  
    51.   <template id="editHeight">
    52.     Feet: <input type="text" value="[[index.feet]]"><br><br>
    53.     Inches: <input type="text" value="[[index.inch]]"><br>
    54.   </template>
    55. </body>
    56.  
    57. </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. });