Adding a Search Box

Spread.Views provides a visual search box using a plug-in.

Select a column to display the search box. The search is based on the data and the data type.

Use the following steps to add a search box above the grid.

Sample Code

These steps assume that you have already initialized the grid and defined the columns. See Creating a Basic Grid and Defining Columns for additional information.

  1. Add references to use the search box plug-in.
    <link rel="stylesheet" type="text/css" href="[Your Stylesheet Path]/gc.spread.views.searchbox.10.1.1.css">
    <script src="[Your Script Path]/gc.spread.views.searchbox.10.1.1.min.js" type="text/JavaScript"></script>
    <script src="data/SalesJan.js" type="text/javascript"></script>
  2. Place a container for the search box on the page using a DIV tag.
    <div class="command-container">
        <div id="search_box"></div>
  3. Initialize the search box using the following sample code.
    var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout());
            var visualSearch = new GC.Spread.Views.Plugins.SearchBox(dataView, {
                container: '#search_box'