Grid directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 26 April 2016
Angular Grid directive uses the IntegralUI Filter Service to create custom filtering operations using different built-in operators. By using this service, you can also create custom filtering operations. In this article, you will learn 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.
In this example, the '[]' operator is used, which means 'contains' and all grid rows with cell text that contain the specified value in the search box, will appear in the grid. All other rows that don't match the search criteria are excluded from the grid view.
In order to create a search box, we will use the <input> element where you can enter a string value against which the filter in the grid is applied. To make this element to appear as a search box, on the right side a <span> element is attached showing a search icon.
<!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">
<div class="search-box">
<input class="search-box" type="text" placeholder="Search..." ng-model="gridFilterValue" ng-change="applyFilter()" />
<span class="icons"></span>
</div>
<label class="options-title">by Column: <select ng-model="selOption" ng-options="option.name for option in optionList"></select></label>
<iui-grid name="{{gridName}}" columns="columns" rows="rows" allow-filter="true" show-footer="false" allow-cell-focus="false"></iui-grid>
</div>
</body>
</html>
/* 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;
}
By default, any value entered in the search box is used to filter the grid by cell values in second column, the 'Title' column. If some other column is selected (from the combo box above the grid), then the filter will be applied to cells in that column
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.
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.
To apply a filter, you can create a custom filter conditions, use some of available built-in operations or make a combination. Whenever a custom filter operation is created, in order to apply it to the grid, you need to set the filter parameters for column by which grid will filter its rows. The parameter is an object with callback field that accepts any custom created function in your application code.
Because most of filtering operations are already present in the Filter service, we only need to specify the operator that you are going to use:
// 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 = [
{
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 = '';
// Resets the filter and display all grid data
var resetFilter = function(){
$gridService.filter($scope.gridName);
}
// 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: '[]' };
// 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;
}
}
// 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 == '')
$gridService.filter($scope.gridName, $scope.columns[1], params);
else {
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);
}
Note A list of string filters that are available in IntegralUI Filter Service, is presented here: Filtering in AngularJS TreeView. This service can be used for Grid and TreeView directives or any other 3-rd party directive.
Additionally, whenever a new column is selected from the combo box, the filtering will be applied for cells in that column.
// 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();
});
By creating a custom search box and using the Filter service that comes with IntegralUI Studio for Web, you can filter the Grid directive so that only rows that match the search criteria appear in the grid. Although this sample presents one simple search operation, you can easily extend its functionality by using other filtering operations or create a custom filter, which is better suitable for your application.