• 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: 317px;
    22.     }
    23.   </style>
    24. </head>
    25.  
    26. <body>
    27.   <zing-grid caption="Register Custom Filterer" filter="inline">
    28.     <zg-colgroup>
    29.       <zg-column index="first" filterer="number"></zg-column>
    30.       <zg-column index="last" filterer="lettersOnly"></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 customFilter = {
    42.       afterInit(oDOMFilter) {
    43.         let oDOMInput = oDOMFilter.querySelector('input');
    44.         oDOMInput.addEventListener('keypress', (e) => {
    45.           if (!/^[a-z]$/i.test(e.key))
    46.             e.preventDefault();
    47.         });
    48.       },
    49.     };
    50.     ZingGrid.registerFilterer(customFilter, 'lettersOnly');
    51.   </script>
    52. </body>
    53.  
    54. </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 Filterer" filter="inline">
    13.     <zg-colgroup>
    14.       <zg-column index="first" filterer="number"></zg-column>
    15.       <zg-column index="last" filterer="lettersOnly"></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 customFilter = {
    2.   afterInit(oDOMFilter) {
    3.     let oDOMInput = oDOMFilter.querySelector('input');
    4.     oDOMInput.addEventListener('keypress', (e) => {
    5.       if (!/^[a-z]$/i.test(e.key))
    6.         e.preventDefault();
    7.     });
    8.   },
    9. };
    10. ZingGrid.registerFilterer(customFilter, 'lettersOnly');