Search Subset of Columns

56 of 116
You can search a subset of columns defining the search="disabled" attribute on columns you do not want to show up in 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: 510px;
    }
  </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