Search Subset of Columns

62 of 123
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 src="https://cdn.zinggrid.com/zinggrid.min.js" defer></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></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 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; }

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

Demo Gallery