Search

You can easily add search to your grid by setting the search attribute on your <zing-grid> tag.

Default Search

Once you add the search attribute, a search icon will appear on the caption to make the grid searchable.
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

External Input

You can use an external input and use our API method searchGrid('...') to dynamically search the grid from an external input.
CloseCopy Copied
const zgRef = document.querySelector('zing-grid');
zgRef.searchGrid('stringToSearchGrid');

You can find documentation on search API methods here.

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
You can search a subset of columns defining the search="false" attribute on columns you do not want to show up in search.
CloseCopy Copied
<zg-column search="false"></zg-column>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Server Search

Use the searchKey attribute to enable server search.
CloseCopy Copied
<zg-param name="searchKey" value="search"></zg-param>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading