• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        zing-grid[loading] {
          height: 653px;
        }
      </style>
    </head>
    
    <body>
      <div class="inner--container">
        <!-- toggle controls -->
        <div class="controls--container">
          <div>
            <label for="filter1">Filter By Genre (Crime): </label>
            <input type="checkbox" id="filter1" data-filter-index="genre" data-filter="Crime">
            <br>
            <label for="filter2">Filter By Year (1994): </label>
            <input type="checkbox" id="filter2" data-filter-index="year" data-filter="1994">
          </div>
        </div>
        <zing-grid caption="HTML filter Ex" filter viewport-stop>
          <zg-data data=' [{
              "title": "The Shawshank Redemption", 
              "year": "1994", 
              "genre": "Crime, Drama"
            }, {
              "title": "The Godfather", 
              "year": "1972", 
              "genre": "Crime, Drama"
            }, {
              "title": "Forest Gump", 
              "year": "1994", 
              "genre": "Comedy, Drama, Romance"
            }, {
              "title": "The Matrix", 
              "year": "1999", 
              "genre": "Action, Sci-Fi"
            }, {
              "title": "Inception", 
              "year": "2010", 
              "genre": "Action, Adventure, Sci-Fi"
            }, {
              "title": "Pulp Fiction", 
              "year": "1994", 
              "genre": "Crime, Drama"
            }, {
              "title": "Django Unchained", 
              "year": "2012", 
              "genre": "Drama, Western"
            }, {
              "title": "The Prestige", 
              "year": "2006", 
              "genre": "Drama, Mystery, Sci-Fi"
            }, {
              "title": "Memento", 
              "year": "2000", 
              "genre": "Mystery, Thriller"
            }, {
              "title": "Gone Girl", 
              "year": "2014", 
              "genre":"Crime, Drama, Mystery"
            }]'>
          </zg-data>
        </zing-grid>
      </div>
      <script>
        // element references
        const filterInputs = document.querySelectorAll('input[type="checkbox"]');
        const zgRef = document.querySelector('zing-grid');
    
        // function declarations
        function _filterGrid(e) {
          let columnIndex = e.target.getAttribute('data-filter-index');
          let columnFilterValue = e.target.getAttribute('data-filter');
          let filterOn = e.target.checked;
    
          // if checked off, make sure to turn off filter 
          if (!filterOn) columnFilterValue = '';
    
          // API method to actually filter
          zgRef.filterColumn(columnIndex, columnFilterValue);
        }
    
        // add event listeners
        [...filterInputs].forEach(filterInput => {
          filterInput.addEventListener('change', _filterGrid);
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingGrid Demo</title>
    		<script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    	</head>
    	<body>		
        <div class="inner--container">
           <!-- toggle controls -->
           <div class="controls--container">
             <div>
              <label for="filter1">Filter By Genre (Crime): </label>
              <input type="checkbox" id="filter1" data-filter-index="genre" data-filter="Crime">
              <br>
              <label for="filter2">Filter By Year (1994): </label>
              <input type="checkbox" id="filter2" data-filter-index="year" data-filter="1994">
             </div>
           </div>
          <zing-grid 
            caption="HTML filter Ex"
            filter
            viewport-stop>
            <zg-data data=' [{
              "title": "The Shawshank Redemption", 
              "year": "1994", 
              "genre": "Crime, Drama"
            }, {
              "title": "The Godfather", 
              "year": "1972", 
              "genre": "Crime, Drama"
            }, {
              "title": "Forest Gump", 
              "year": "1994", 
              "genre": "Comedy, Drama, Romance"
            }, {
              "title": "The Matrix", 
              "year": "1999", 
              "genre": "Action, Sci-Fi"
            }, {
              "title": "Inception", 
              "year": "2010", 
              "genre": "Action, Adventure, Sci-Fi"
            }, {
              "title": "Pulp Fiction", 
              "year": "1994", 
              "genre": "Crime, Drama"
            }, {
              "title": "Django Unchained", 
              "year": "2012", 
              "genre": "Drama, Western"
            }, {
              "title": "The Prestige", 
              "year": "2006", 
              "genre": "Drama, Mystery, Sci-Fi"
            }, {
              "title": "Memento", 
              "year": "2000", 
              "genre": "Mystery, Thriller"
            }, {
              "title": "Gone Girl", 
              "year": "2014", 
              "genre":"Crime, Drama, Mystery"
            }]'>
            </zg-data>
          </zing-grid>
        </div>
    	</body>
    </html>
    html, body {
    	height:100%;
    	width:100%;
    	margin:0;
    	padding:0;
    }
    // element references
    const filterInputs = document.querySelectorAll('input[type="checkbox"]');
    const zgRef = document.querySelector('zing-grid');
    
    // function declarations
    function _filterGrid(e) {
      let columnIndex = e.target.getAttribute('data-filter-index');
      let columnFilterValue = e.target.getAttribute('data-filter');
      let filterOn = e.target.checked;
    
      // if checked off, make sure to turn off filter 
      if (!filterOn) columnFilterValue = '';
    
      // API method to actually filter
      zgRef.filterColumn(columnIndex, columnFilterValue);
    }
    
    // add event listeners
    [...filterInputs].forEach(filterInput => {
      filterInput.addEventListener('change', _filterGrid);
    });