Adding a Search Box to an MVC Grid or ListView

In The Portal Connector, we offer several list-type widgets for displaying lists of records, accounts for example. These list widgets all implement one of 2 Telerik KendoUI controls: Grid or ListView. While the Grid Widget allows for filtering by using the Kendo Grids built in functionality found in the header of each column, the ListView does not. Creating a search box at the top of a Grid or ListView is actually easy to implement because both controls use a Kendo dataSource to manage the data retrieval, sorting and filtering. The following instructions will reference a Grid widget but the also apply to the ListView widget as well.

The Search Box

The first step to adding a search box to a grid is to create a page and put a TPC MVC grid on it. after adding the grid, click its "Edit" link to open its designer. After the designer is open, configure it to show data for any entity you want. We will use the "Account" entity for this example.

Once configured as desired, the next step is to modify the template to add the search box. To do this the template for the grid needs to be edited. In the designer, on the first tab is a section called "Templates". Click this to expand it and you will see a template picker. Click the green "+" button to create a new template.

The template editor will have loaded the default grid template. On line 53 is a div with the class "row" assigned to it. We need to add the following HTML above that line to create another row with a text input with a button attached:


<div class="row">

  <div class="col-xs-8">&nbsp;</div>

  <div class="col-xs-4">

    <div class="input-group">

      <input type="text" id="search" class="form-control" placeholder="Search for...">

      <span class="input-group-btn">

        <button class="btn btn-primary" type="button" onclick="doFilter()">Search</button>

      </span>

    </div>

  </div>

</div>

The JavaScript

With the search box in place, we need to use it to trigger the dataSource on the grid to filter the data. in the above HTML, you might notice a call on click of the button to a function called "doFilter". this function simply gets the dataSource of the grid and passes a single filter on the "name" column to the filter() function on the dataSource. this triggers the filtering of the data currently in the dataSource.


function doFilter(){

  var dataSource = tpc.page.TpcGridModel.get_grid().dataSource;

  //dataSource.options.serverFiltering = true;

  var searchBox = $('#search');



  dataSource.filter({ field: "name", operator: "contains", value: searchBox.val() });

};

The function above will filter on a single column. The configuration is slightly different if you need to search more than 1 column.


function doFilter(){

  var dataSource = tpc.page.TpcGridModel.get_grid().dataSource;

  //dataSource.options.serverFiltering = true;

  var searchBox = $('#search');

  var filters = [

    { field: "name", operator: "contains", value: searchBox.val() },

    { field: "telephone1", operator: "contains", value: searchBox.val() },

  ];



  dataSource.filter({

    logic: "or",

    filters: filters 

  });

};

This second scripts demonstrates how to search for the input in the name column or the telephone1 column. This kind of multi-column filtering is more useful in most cases but both options are available depending on the need.

Server Filtering

So far, we have been filtering the data contained in the dataSource of the grid. Depending on the configuration of the grid, the dataSource may not contain all records found in CRM. To force the grid to call the WebService to retrieve the correct records, a property on the dataSource must me set:


dataSource.options.serverFiltering = true;

With this property set, fresh data will be retrieved each time the search button is clicked.

Conclusion

Adding a search box to a Grid or ListView adds functionality users have come to expect when dealing with long list of data. Luckily, The Portal Connector provides the flexibility to implement features like this through the Template Editor found on our widgets and the dataSource that works behind the scenes provides the needed functionality needed to perform the filtering. Download the complete MVC view here: Grid.Search View