• 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.   <zing-grid caption="Register Custom Validator" editor>
    28.     <zg-colgroup>
    29.       <zg-column index="first" validator="startsWithUpper"></zg-column>
    30.       <zg-column index="last"></zg-column>
    31.       <zg-column index="number"></zg-column>
    32.     </zg-colgroup>
    33.     <zg-data data='[
    34.         { "first": "Maria", "last": "John", "number": 123 },
    35.         { "first": "David", "last": "Smith", "number": 456 },
    36.         { "first": "Felicity", "last": "Snow", "number": 789 }
    37.       ]'></zg-data>
    38.   </zing-grid>
    39.   <script>
    40.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    41.     let customValidator = function(text) {
    42.       let firstLetter = text[0];
    43.       return firstLetter.toUpperCase() === firstLetter;
    44.     };
    45.     ZingGrid.registerValidator(customValidator, 'startsWithUpper');
    46.   </script>
    47. </body>
    48.  
    49. </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.   <zing-grid caption="Register Custom Validator" editor>
    13.     <zg-colgroup>
    14.       <zg-column index="first" validator="startsWithUpper"></zg-column>
    15.       <zg-column index="last"></zg-column>
    16.       <zg-column index="number"></zg-column>
    17.     </zg-colgroup>
    18.     <zg-data data='[
    19.         { "first": "Maria", "last": "John", "number": 123 },
    20.         { "first": "David", "last": "Smith", "number": 456 },
    21.         { "first": "Felicity", "last": "Snow", "number": 789 }
    22.       ]'></zg-data>
    23.   </zing-grid>
    24. </body>
    25.  
    26. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    1. let customValidator = function(text) {
    2.   let firstLetter = text[0];
    3.   return firstLetter.toUpperCase() === firstLetter;
    4. };
    5. ZingGrid.registerValidator(customValidator, 'startsWithUpper');