Demos Back to Docs

Filtering by External Input

62 of 124
You can use an external input and use our API method filterColumn('...') to dynamically search the grid from an external input.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body .controls--container {
      padding: 1rem;
    }


    zing-grid[loading] {
      height: 653px;
    }
  </style>
</head>

<body class="zg-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>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // 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"></script>
	</head>
	<body class="zg-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>
.zg-body .controls--container {
  padding: 1rem;
}
// 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);
});

Related Docs

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Related Docs

Demo Gallery