Searching in React Gantt component
2 Feb 202324 minutes to read
You can search for records in the Gantt component by using the search
method with search key as a parameter. The Gantt component provides an option to integrate the search text box in the toolbar by adding the search item to the toolbar
property.
To search records, inject the Filter
module into the Gantt component.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Filter, Toolbar} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = ['Search'];
return <GanttComponent dataSource={data} taskFields={taskFields}
allowFiltering={true} toolbar={toolbarOptions} height = '450px'>
<Inject services={[Filter, Toolbar]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Filter, Toolbar, ToolbarItem } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['Search'];
return <GanttComponent dataSource={data} taskFields={taskFields}
allowFiltering={true} toolbar={toolbarOptions} height = '450px'>
<Inject services={[Filter, Toolbar]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Initial search
In the Gantt component, you can load a task with some search criteria by using the searchSettings
property.
To apply a search at initial rendering, set the value for fields
, operator
, key
, and ignoreCase
in the searchSettings
property.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Filter, Toolbar} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions = ['Search'];
const searchSettings = {
fields: ['TaskName'], operator: 'contains', key: 'Soil', ignoreCase: true
};
return <GanttComponent dataSource={data} taskFields={taskFields}
allowFiltering={true} toolbar={toolbarOptions} searchSettings={searchSettings}
height = '450px'>
<Inject services={[Filter, Toolbar]} />
</GanttComponent>
}
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Filter, Toolbar, ToolbarItem, SearchSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['Search'];
const searchSettings: SearchSettingsModel = {
fields: ['TaskName'], operator: 'contains', key: 'Soil', ignoreCase: true
};
return <GanttComponent dataSource={data} taskFields={taskFields}
allowFiltering={true} toolbar={toolbarOptions} searchSettings={searchSettings}
height = '450px'>
<Inject services={[Filter, Toolbar]} />
</GanttComponent>
}
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
By default, Gantt searches all the bound column values. To customize this behavior, define the
searchSettings.fields
property.
Search operators
The search operator can be defined in the searchSettings.operator
property to configure specific searching.
The following operators are supported in searching:
Operator | Description |
---|---|
startsWith | Checks whether a value begins with the specified value. |
endsWith | Checks whether a value ends with the specified value. |
contains | Checks whether a value contains the specified value. |
equal | Checks whether a value is equal to the specified value. |
notEqual | Checks for the values that are not equal to the specified value. |
By default, the
searchSettings.operator
value iscontains
.
Search by external button
To search the Gantt records from an external button, invoke the search
method.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Filter } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
let ganttInstance;
let textInput;
const inputStyle={
width:"250px"
};
function clickHandler(){
ganttInstance.search(textInput.value);
}
return(<div>
<div className='e-float-input' style={inputStyle}>
<input type="text" className="searchtext" ref={(input) => textInput = input} />
<span className="e-float-line"></span>
<label className="e-float-text">Search text</label>
</div>
<ButtonComponent onClick= { clickHandler}>Search</ButtonComponent>
<GanttComponent dataSource={data} ref={gantt =>ganttInstance = gantt} taskFields={taskFields}
allowFiltering={true} height = '450px'>
<Inject services={[Filter]} />
</GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Filter } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
let ganttInstance:any;
let textInput:any;
const inputStyle={
width:"250px"
};
function clickHandler(){
ganttInstance.search(textInput.value);
}
return(<div>
<div className='e-float-input' style={inputStyle}>
<input type="text" className="searchtext" ref={(input) => textInput = input} />
<span className="e-float-line"></span>
<label className="e-float-text">Search text</label>
</div>
<ButtonComponent onClick= { clickHandler}>Search</ButtonComponent>
<GanttComponent dataSource={data} ref={gantt =>ganttInstance = gantt} taskFields={taskFields}
allowFiltering={true} height = '450px'>
<Inject services={[Filter]} />
</GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Note: You should set the
allowFiltering
property totrue
for searching the content externally.
Search specific columns
By default, the Gantt component searches all the columns. You can search specific columns by defining the specific column’s field names in the searchSettings.fields
property.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Filter, Toolbar} from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions= ['Search'];
let searchSettings = {fields: ['TaskName','Duration']};
return <GanttComponent dataSource={data} taskFields={taskFields}
allowFiltering={true} searchSettings={searchSettings} toolbar={toolbarOptions}
height = '450px'>
<Inject services={[Filter, Toolbar]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Filter, Toolbar, ToolbarItem, SearchSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['Search'];
let searchSettings: SearchSettingsModel = {fields: ['TaskName','Duration']};
return <GanttComponent dataSource={data} taskFields={taskFields}
allowFiltering={true} searchSettings={searchSettings} toolbar={toolbarOptions}
height = '450px'>
<Inject services={[Filter, Toolbar]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
In above sample, you can search only TaskName and Duration column values.
Clear search by external button
You can set searchSettings.key
property as empty
string, to clear the searched Gantt records from external button.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Filter } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
let ganttInstance;
const searchSettings = {
fields: ['TaskName'], operator: 'contains', key: 'Perform', ignoreCase: true
};
function clickHandler() {
ganttInstance.searchSettings.key = "";
}
return (<div>
<ButtonComponent onClick={clickHandler}>Clear Search</ButtonComponent>
<GanttComponent dataSource={data} ref={gantt => ganttInstance = gantt} taskFields={taskFields} allowFiltering={true} height='450px' searchSettings={searchSettings}>
<Inject services={[Filter]}/>
</GanttComponent></div>);
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Filter } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
let ganttInstance:any;
const searchSettings = {
fields: ['TaskName'], operator: 'contains', key: 'Perform', ignoreCase: true
};
function clickHandler() {
ganttInstance.searchSettings.key = "";
}
return (<div>
<ButtonComponent onClick={clickHandler}>Clear Search</ButtonComponent>
<GanttComponent dataSource={data} ref={gantt => ganttInstance = gantt} taskFields={taskFields} allowFiltering={true} height='450px' searchSettings={searchSettings}>
<Inject services={[Filter]}/>
</GanttComponent></div>);
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>