Search cards in React Kanban component
27 Jan 202322 minutes to read
You can search the cards in Kanban by using the query property.
In the following sample, the searching operation starts as soon as you start typing characters in the external text box. It will search the cards based on the Id and Summary using the search query with contains operator.
[Class-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { Query } from '@syncfusion/ej2-data';
import { kanbanData } from './datasource';
class App extends React.Component {
textBoxObj;
kanbanObj;
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
searchClick(e) {
let searchValue = e.value;
let searchQuery = new Query();
if (searchValue !== '') {
searchQuery = new Query().search(searchValue, ['Id', 'Summary'], 'contains', true);
}
this.kanbanObj.query = searchQuery;
}
;
reset() {
this.textBoxObj.value = '';
this.kanbanObj.query = new Query();
}
;
render() {
return <div className='control-wrapper'>
<table>
<tbody>
<td style="width: 200px">
<TextBoxComponent id="search" ref={(kanban) => { this.textBoxObj = kanban; }} showClearButton={true} placeholder="Enter search text" input={this.searchClick.bind(this)}/>
</td>
<td>
<ButtonComponent id='reset' className="e-btn" onClick={this.reset.bind(this)}>Reset</ButtonComponent></td>
</tbody>
</table>
<KanbanComponent ref={(kanban) => { this.kanbanObj = kanban; }} id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id", showHeader: false }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open"/>
<ColumnDirective headerText="In Progress" keyField="InProgress"/>
<ColumnDirective headerText="Testing" keyField="Testing"/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>
</div>;
}
}
;
ReactDOM.render(<App />, document.getElementById('kanban'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TextBoxComponent, InputEventArgs } from '@syncfusion/ej2-react-inputs';
import { Query } from '@syncfusion/ej2-data';
import { kanbanData } from './datasource';
class App extends React.Component<{}, {}>{
private textBoxObj: TextBoxComponent;
private kanbanObj: KanbanComponent;
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
searchClick(e: InputEventArgs): void {
let searchValue: string = e.value;
let searchQuery: Query = new Query();
if (searchValue !== '') {
searchQuery = new Query().search(searchValue, ['Id', 'Summary'], 'contains', true);
}
this.kanbanObj.query = searchQuery;
};
reset(): void {
this.textBoxObj.value = '';
this.kanbanObj.query = new Query();
};
render() {
return <div className='control-wrapper'>
<table>
<tbody>
<td style="width: 200px">
<TextBoxComponent id="search" ref={(kanban) => { this.textBoxObj = kanban; }} showClearButton={true} placeholder="Enter search text" input={this.searchClick.bind(this)}/>
</td>
<td>
<ButtonComponent id='reset' className="e-btn" onClick={this.reset.bind(this)}>Reset</ButtonComponent></td>
</tbody>
</table>
<KanbanComponent ref={(kanban) => { this.kanbanObj = kanban }} id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id", showHeader: false }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
</div>
}
};
ReactDOM.render(<App />, document.getElementById('kanban'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Auto Height and Width</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban auto height and width" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<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='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>[Functional-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { Query } from '@syncfusion/ej2-data';
import { kanbanData } from './datasource';
function App() {
let textBoxObj;
let kanbanObj;
let data = extend([], kanbanData, null, true);
function searchClick(e) {
let searchValue = e.value;
let searchQuery = new Query();
if (searchValue !== '') {
searchQuery = new Query().search(searchValue, ['Id', 'Summary'], 'contains', true);
}
kanbanObj.query = searchQuery;
}
;
function reset() {
textBoxObj.value = '';
kanbanObj.query = new Query();
}
;
return (<div className='control-wrapper'>
<table>
<tbody>
<td>
<TextBoxComponent id="search" ref={(kanban) => { textBoxObj = kanban; }} showClearButton={true} placeholder="Enter search text" input={searchClick.bind(this)}/>
</td>
<td>
<ButtonComponent id='reset' className="e-btn" onClick={reset.bind(this)}>Reset</ButtonComponent></td>
</tbody>
</table>
<KanbanComponent ref={(kanban) => { kanbanObj = kanban; }} id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id", showHeader: false }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open"/>
<ColumnDirective headerText="In Progress" keyField="InProgress"/>
<ColumnDirective headerText="Testing" keyField="Testing"/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>
</div>);
}
ReactDOM.render(<App />, document.getElementById('kanban'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TextBoxComponent, InputEventArgs } from '@syncfusion/ej2-react-inputs';
import { Query } from '@syncfusion/ej2-data';
import { kanbanData } from './datasource';
function App(){
let textBoxObj: TextBoxComponent;
let kanbanObj: KanbanComponent;
let data = extend([], kanbanData, null, true);
function searchClick(e: InputEventArgs): void {
let searchValue: string = e.value;
let searchQuery: Query = new Query();
if (searchValue !== '') {
searchQuery = new Query().search(searchValue, ['Id', 'Summary'], 'contains', true);
}
kanbanObj.query = searchQuery;
};
function reset(): void {
textBoxObj.value = '';
kanbanObj.query = new Query();
};
return(
<div className='control-wrapper'>
<table>
<tbody>
<td>
<TextBoxComponent id="search" ref={(kanban) => { textBoxObj = kanban; }} showClearButton={true} placeholder="Enter search text" input={searchClick.bind(this)}/>
</td>
<td>
<ButtonComponent id='reset' className="e-btn" onClick={reset.bind(this)}>Reset</ButtonComponent></td>
</tbody>
</table>
<KanbanComponent ref={(kanban) => { kanbanObj = kanban }} id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id", showHeader: false }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('kanban'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Auto Height and Width</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban auto height and width" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<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='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>