Demos Back to Docs

Search Subset of Columns

63 of 124
You can search a subset of columns by defining the search="disabled" attribute on columns you do not want to show up in the search. This is useful for turning off search on image columns. Try searching for "storage" in the following demo:
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 {
      background: #e6e6e6;
    }

    zg-cell img {
      width: 100px;
      height: 100px;
    }

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

<body class="zg-body">
  <zing-grid caption="Actors/Actresses" src="https://cdn.zinggrid.com/datasets/users.json" search pager page-size="4">
    <zg-colgroup>
      <zg-column index="name"></zg-column>
      <zg-column index="actor"></zg-column>
      <zg-column index="job"></zg-column>
      <zg-column index="origin"></zg-column>
      <!-- excluded columns from search -->
      <zg-column type="image" index="img" search="disabled"></zg-column>
      <!-- column so you can view the string for the image url -->
      <zg-column index="img" search="disabled"></zg-column>
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </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">
    <zing-grid 
      caption="Actors/Actresses"
      src="https://cdn.zinggrid.com/datasets/users.json"
      search pager page-size="4">
      <zg-colgroup>
        <zg-column index="name"></zg-column>
        <zg-column index="actor"></zg-column>
        <zg-column index="job"></zg-column>
        <zg-column index="origin"></zg-column>
        <!-- excluded columns from search -->
        <zg-column type="image" index="img" search="disabled"></zg-column>
        <!-- column so you can view the string for the image url -->
        <zg-column index="img" search="disabled"></zg-column>
      </zg-colgroup>
    </zing-grid>
	</body>
</html>
.zg-body {background:#e6e6e6;}

zg-cell img { width:100px; height:100px; }
// No JS code

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