• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     .zg-body .controls--container {
    10.       padding: 1rem;
    11.     }
    12.  
    13.  
    14.     zing-grid[loading] {
    15.       height: 653px;
    16.     }
    17.   </style>
    18. </head>
    19.  
    20. <body class="zg-body">
    21.   <div class="inner--container">
    22.     <!-- toggle controls -->
    23.     <div class="controls--container">
    24.       <div>
    25.         <label for="filter1">Filter By Genre (Crime): </label>
    26.         <input type="checkbox" id="filter1" data-filter-index="genre" data-filter="Crime">
    27.         <br>
    28.         <label for="filter2">Filter By Year (1994): </label>
    29.         <input type="checkbox" id="filter2" data-filter-index="year" data-filter="1994">
    30.       </div>
    31.     </div>
    32.     <zing-grid caption="HTML filter Ex" filter viewport-stop>
    33.       <zg-data data=' [{
    34.           "title": "The Shawshank Redemption", 
    35.           "year": "1994", 
    36.           "genre": "Crime, Drama"
    37.         }, {
    38.           "title": "The Godfather", 
    39.           "year": "1972", 
    40.           "genre": "Crime, Drama"
    41.         }, {
    42.           "title": "Forest Gump", 
    43.           "year": "1994", 
    44.           "genre": "Comedy, Drama, Romance"
    45.         }, {
    46.           "title": "The Matrix", 
    47.           "year": "1999", 
    48.           "genre": "Action, Sci-Fi"
    49.         }, {
    50.           "title": "Inception", 
    51.           "year": "2010", 
    52.           "genre": "Action, Adventure, Sci-Fi"
    53.         }, {
    54.           "title": "Pulp Fiction", 
    55.           "year": "1994", 
    56.           "genre": "Crime, Drama"
    57.         }, {
    58.           "title": "Django Unchained", 
    59.           "year": "2012", 
    60.           "genre": "Drama, Western"
    61.         }, {
    62.           "title": "The Prestige", 
    63.           "year": "2006", 
    64.           "genre": "Drama, Mystery, Sci-Fi"
    65.         }, {
    66.           "title": "Memento", 
    67.           "year": "2000", 
    68.           "genre": "Mystery, Thriller"
    69.         }, {
    70.           "title": "Gone Girl", 
    71.           "year": "2014", 
    72.           "genre":"Crime, Drama, Mystery"
    73.         }]'>
    74.       </zg-data>
    75.     </zing-grid>
    76.   </div>
    77.   <script>
    78.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // element references
    79.     const filterInputs = document.querySelectorAll('input[type="checkbox"]');
    80.     const zgRef = document.querySelector('zing-grid');
    81.  
    82.     // function declarations
    83.     function _filterGrid(e) {
    84.       let columnIndex = e.target.getAttribute('data-filter-index');
    85.       let columnFilterValue = e.target.getAttribute('data-filter');
    86.       let filterOn = e.target.checked;
    87.  
    88.       // if checked off, make sure to turn off filter 
    89.       if (!filterOn) columnFilterValue = '';
    90.  
    91.       // API method to actually filter
    92.       zgRef.filterColumn(columnIndex, columnFilterValue);
    93.     }
    94.  
    95.     // add event listeners
    96.     [...filterInputs].forEach(filterInput => {
    97.       filterInput.addEventListener('change', _filterGrid);
    98.     });
    99.   </script>
    100. </body>
    101.  
    102. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body class="zg-body">
    11.   <div class="inner--container">
    12.     <!-- toggle controls -->
    13.     <div class="controls--container">
    14.       <div>
    15.         <label for="filter1">Filter By Genre (Crime): </label>
    16.         <input type="checkbox" id="filter1" data-filter-index="genre" data-filter="Crime">
    17.         <br>
    18.         <label for="filter2">Filter By Year (1994): </label>
    19.         <input type="checkbox" id="filter2" data-filter-index="year" data-filter="1994">
    20.       </div>
    21.     </div>
    22.     <zing-grid caption="HTML filter Ex" filter viewport-stop>
    23.       <zg-data data=' [{
    24.           "title": "The Shawshank Redemption", 
    25.           "year": "1994", 
    26.           "genre": "Crime, Drama"
    27.         }, {
    28.           "title": "The Godfather", 
    29.           "year": "1972", 
    30.           "genre": "Crime, Drama"
    31.         }, {
    32.           "title": "Forest Gump", 
    33.           "year": "1994", 
    34.           "genre": "Comedy, Drama, Romance"
    35.         }, {
    36.           "title": "The Matrix", 
    37.           "year": "1999", 
    38.           "genre": "Action, Sci-Fi"
    39.         }, {
    40.           "title": "Inception", 
    41.           "year": "2010", 
    42.           "genre": "Action, Adventure, Sci-Fi"
    43.         }, {
    44.           "title": "Pulp Fiction", 
    45.           "year": "1994", 
    46.           "genre": "Crime, Drama"
    47.         }, {
    48.           "title": "Django Unchained", 
    49.           "year": "2012", 
    50.           "genre": "Drama, Western"
    51.         }, {
    52.           "title": "The Prestige", 
    53.           "year": "2006", 
    54.           "genre": "Drama, Mystery, Sci-Fi"
    55.         }, {
    56.           "title": "Memento", 
    57.           "year": "2000", 
    58.           "genre": "Mystery, Thriller"
    59.         }, {
    60.           "title": "Gone Girl", 
    61.           "year": "2014", 
    62.           "genre":"Crime, Drama, Mystery"
    63.         }]'>
    64.       </zg-data>
    65.     </zing-grid>
    66.   </div>
    67. </body>
    68.  
    69. </html>
    1. .zg-body .controls--container {
    2.   padding: 1rem;
    3. }
    1. // element references
    2. const filterInputs = document.querySelectorAll('input[type="checkbox"]');
    3. const zgRef = document.querySelector('zing-grid');
    4.  
    5. // function declarations
    6. function _filterGrid(e) {
    7.   let columnIndex = e.target.getAttribute('data-filter-index');
    8.   let columnFilterValue = e.target.getAttribute('data-filter');
    9.   let filterOn = e.target.checked;
    10.  
    11.   // if checked off, make sure to turn off filter 
    12.   if (!filterOn) columnFilterValue = '';
    13.  
    14.   // API method to actually filter
    15.   zgRef.filterColumn(columnIndex, columnFilterValue);
    16. }
    17.  
    18. // add event listeners
    19. [...filterInputs].forEach(filterInput => {
    20.   filterInput.addEventListener('change', _filterGrid);
    21. });