Searching

The grid has an option to search its content using the JavaScript method search with search key as parameter. Also, it provides an option to integrate Search text box in grid toolbar, by adding search toolbar item in toolbarSetting.toolbarItems property.

The following code example describes the above behavior.

  • html
  • <ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true" [allowSearching]="true" [toolbarSettings]="toolbarItems" >
        <e-columns>
            <e-column field="OrderID" headerText="OrderID" width="75"></e-column>
            <e-column field="EmployeeID" headerText="EmployeeID"  width="80"></e-column>
            <e-column field="CustomerID" headerText="CustomerID" width="80"></e-column>
            <e-column field="ShipCountry" headerText="ShipCountry" width="90"></e-column>
            <e-column field="Freight" headerText="Freight" width="90" ></e-column>
        </e-columns>
     </ej-grid>
  • javascript
  • import {Component, ViewEncapsulation} from '@angular/core';
        @Component({
          selector: 'ej-app',
          templateUrl: 'app/app.component.html',  //give the path file for Grid control html file.
        })
        export class AppComponent {
            public gridData;
    		public toolbarItems;
            constructor()
            {
               //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
               this.gridData = window.gridData;
    		   this.toolbarItems = { showToolbar : true, toolbarItems : ["search"] };
    		}
         }

    The following output is displayed as a result of the above code example.

    Initial Searching

    While initializing the grid, there is an option to display only the searched data in grid. To perform initial searching, define fields, operator, key and ignoreCase in searchSettings property.

    NOTE

    key value must be passed as string.

    The following code example describes the above behavior.

  • html
  • <ej-grid id="Grid" [dataSource]="gridData" [allowPaging]="true" [allowSearching]="true" [toolbarSettings]="toolbarItems" [searchSettings]="searchItems" >
        <e-columns>
            <e-column field="OrderID" headerText="OrderID" width="75"></e-column>
            <e-column field="EmployeeID" headerText="EmployeeID"  width="80"></e-column>
            <e-column field="CustomerID" headerText="CustomerID" width="80"></e-column>
            <e-column field="ShipCountry" headerText="ShipCountry" width="90"></e-column>
            <e-column field="Freight" headerText="Freight" width="90" ></e-column>
        </e-columns>
     </ej-grid>
  • javascript
  • import {Component, ViewEncapsulation} from '@angular/core';
        @Component({
          selector: 'ej-app',
          templateUrl: 'app/app.component.html',  //give the path file for Grid control html file.
        })
        export class AppComponent {
            public gridData;
    		public toolbarItems;
            public searchItems;
            constructor()
            {
               //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
               this.gridData = window.gridData;
    		   this.toolbarItems = { showToolbar : true, toolbarItems : ["search"] };
               this.searchItems = { fields: ["CustomerID"], operator: "contains", key: "frank", ignoreCase: false };
    		}
         }

    The following output is displayed as a result of the above code example.

    List of supported operators in searching.

    ej.FilterOperators.equal
    ej.FilterOperators.notEqual
    ej.FilterOperators.startsWith
    ej.FilterOperators.endsWith
    ej.FilterOperators.contains