LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular and AngularJS UI Components


Grid / Filtering with Search Box


This sample shows how to use a search box to find grid rows that match the specified string value. You can search for rows using cell values in specified column or all columns.

Whenever the search value changes, the grid is filtered showing only those rows that pass the filtering criteria. In this example, we are using the 'contains' criteria, but you can easily change it to some other built-in filtering operation, like 'begins with' or 'ends with', using '->' or '<-' symbols, or some other operation.

NOTE To simplify this example, we are only using a string matching operation: 'contains' represented by the '[]' symbol. To learn more about other filtering operations you can check out this article: Custom Filter Templates in AngularJS Tree Grid.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.css" />

<link rel="stylesheet" href="css/integralui.checkbox.css" />

<link rel="stylesheet" href="css/integralui.grid.css" />

<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.checkbox.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.lists.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.grid.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<iui-grid name="{{gridName}}" columns="columns" rows="rows" show-footer="false" grid-lines="gridLines" grouping="{ enabled: true, showColumns: true }" allow-column-reorder="true" sorting="sorting" column-click="onColumnClick(e)"></iui-grid>

</div>

</body>

</html>

angular

.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUIGridService", function($scope, $gridService){

// A uniue identifier for the grid directive

$scope.gridName = "gridSample";

// Show only vertical lines in the grid

$scope.gridLines = 'vertical';

 

// An array object that holds all grid columns

$scope.columns = [

{ id: 1, editorType: 'checkbox', contentAlignment: 'center', width: 30, fixedWidth: true },

{ id: 2, headerText: "Title", width: 280},

{ id: 3, headerText: "Year", headerAlignment: "center", contentAlignment: "center", width: 70 },

{ id: 4, headerText: "Genre", headerAlignment: "center", contentAlignment: "center", width: 250 },

{ id: 5, headerText: "Ratings", headerAlignment: "center", contentAlignment: "center", width: 80 },

{ id: 6, headerText: "Released", headerAlignment: "center", contentAlignment: "center", width: 130 }

];

 

// An array object that holds all grid rows

$scope.rows = [];

 

// An array that holds the initial data set

varoriginalRows = [

{

id: 1,

text: "Inception",

cells: [{ cid: 1, value: true }, { cid: 2, text: "Inception" }, { cid: 3, text: "2010" }, { cid: 4, text: "Action, Mystery, Sci-Fi" }, { cid: 5, text: "8.8" }, { cid: 6, text: "16 Jul 2010" } ]

},

{

id: 2,

text: "Gravity",

cells: [{ cid: 1 }, { cid: 2, text: "Gravity" }, { cid: 3, text: "2013" }, { cid: 4, text: "Sci-Fi, Thriller" }, { cid: 5, text: "7.9" }, { cid: 6, text: "04 Oct 2013" } ]

},

{

id: 3,

text: "Django Unchained",

cells: [{ cid: 1, value: true }, { cid: 2, text: "Django Unchained" }, { cid: 3, text: "2012" }, { cid: 4, text: "Western" }, { cid: 5, text: "8.5" }, { cid: 6, text: "25 Dec 2012" } ]

},

 

// ... Data for other rows goes here

 

$scope.gridFilterValue = '';

 

// Create a list of columns

$scope.optionList = [{ name: '' }];

for (var j = 1; j < $scope.columns.length; j++){

$scope.optionList.push({ name: $scope.columns[j].headerText });

}

$scope.selOption = $scope.optionList[0];

 

// Watch for any changes in selected column from combo box and apply the filter

$scope.$watch("selOption", function(newValue, oldValue){

if (newValue != oldValue)

$scope.applyFilter();

});

 

// Check whether a grid cell matches the filtering conditions

var cellFilter = function(obj, conditions){

var result = false;

 

if (obj){

if ($filterService.match(obj, conditions))

result = true;

}

 

return result;

}

 

// Resets the filter and display all grid data

var resetFilter = function(){

$scope.rows.length = 0;

for (var i = 0; i < originalRows.length; i++)

$scope.rows.push(originalRows[i]);

}

 

// Apply a filter based on selected column

$scope.applyFilter = function(){

// Suspend the grid layout to increase performance during filtering operations

$gridService.suspendLayout($scope.gridName);

 

resetFilter();

 

// Set the filtering operation to 'contains', using the [] operator

var conditions = { value: $scope.gridFilterValue, operation: '[]' };

 

// Apply the filter for specified column

// If column is not chosen, the grid data is filtered based on values in Title' column

if ($scope.selOption.name == ''){

// Apply the filter for all columns

var filteredRows = [];

for (var i = 0; i < $scope.rows.length; i++){

var pass = false;

 

for (var j = 0; j < $scope.rows[i].cells.length; j++){

var result = cellFilter($scope.rows[i].cells[j].text, conditions);

if (result){

pass = true;

break;

}

}

 

if (pass)

filteredRows.push($scope.rows[i]);

}

 

// Update the grid rows based on filtered rows

$scope.rows.length = 0;

for (var i = 0; i < filteredRows.length; i++)

$scope.rows.push(filteredRows[i]);

}

else {

// Set the filtering parameters so that a custom function is used

// Use the IntegralUIFilterService to filter the grid data

var params = {

callback: function (value) {

if (typeof value == 'string' || value instanceof String)

return $filterService.match(value, conditions);

 

return false;

}

}

 

var colIndex = $scope.optionList.indexOf($scope.selOption);

$gridService.filter($scope.gridName, $scope.columns[colIndex], params);

}

 

// Resume and update the grid layout

$gridService.resumeLayout($scope.gridName);

}

 

// At start display the initial data set

resetFilter();

}]);

/* Grid settings */

.iui-grid-column-header-cell, .iui-grid-column-footer-cell

{

padding: 2px 2px;

}

.iui-grid-row-cell-content

{

padding: 2px 2px;

}

.iui-filter-window

{

font-size: 0.75em;

}

 

/* Sample settings */

.directive

{

width: 800px;

height: 430px;

}

.search-box

{

background: white;

border: thin solid #cecece;

display: inline-block;

margin-bottom: 5px;

padding: 0 2px;

width: 250px;

}

.search-box input

{

display: inline-block;

border: thin dotted transparent;

width: 220px;

height: 100%;

}

.search-box input:focus

{

outline: none !important;

border: thin dotted #b4b4b4;

}

.search-box span

{

background-position: 0px -112px;

opacity: 0.5;

margin-left: 2px;

padding: 0;

vertical-align: middle;

}

.options-title

{

margin-left: 50px;

}