Demos Back to Docs

Filter Column on Render

4 of 124
A ZingGrid that allows the users to filter column values on render.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Blank Grid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    /* hide filter row */
    /* zg-row[type="filter"] { display: none; } */
    zing-grid[loading] {
      height: 367px;
    }
  </style>
</head>

<body class="zg-body">

  <zing-grid caption="Filter on Render" filter layout="card">
    <zg-data data='[
				{ "breed": "Pug", "name": "Ziva"},
				{ "breed": "Pug", "name": "Doug"},
				{ "breed": "Corgi", "name": "Jenny"},
				{ "breed": "Pomeranian", "name": "Koda"}
    	]'></zg-data>
    <zg-column index="breed"></zg-column>
    <zg-column index="name"></zg-column>
  </zing-grid>

  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    const zgRef = document.querySelector('zing-grid');

    window.addEventListener('load', function() {
      zgRef.executeOnLoad(() => {
        zgRef.filterColumn('breed', 'Pug')
      });
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
    
    <zing-grid
      caption="Filter on Render"
      filter
      layout="card">
      <zg-data data='[
				{ "breed": "Pug", "name": "Ziva"},
				{ "breed": "Pug", "name": "Doug"},
				{ "breed": "Corgi", "name": "Jenny"},
				{ "breed": "Pomeranian", "name": "Koda"}
    	]'></zg-data>
      <zg-column index="breed"></zg-column>
      <zg-column index="name"></zg-column>
    </zing-grid>
    
  </body>
</html>
.zg-body{background:#e6e6e6;}

/* hide filter row */
/* zg-row[type="filter"] { display: none; } */
const zgRef = document.querySelector('zing-grid');

window.addEventListener('load', function() {
  zgRef.executeOnLoad(() => {  zgRef.filterColumn('breed', 'Pug')
  });
});

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