Filter cards in React Kanban component
27 Jan 202320 minutes to read
You can filter the collection of cards from the dataSource and display it on the Kanban board by using the query property.
In the below sample, you can filter the cards based on the ‘where’ query and display the filtered data to the Kanban board.
[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 { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { Query } from '@syncfusion/ej2-data';
import { kanbanData } from './datasource';
class App extends React.Component {
kanbanObj;
priorityObj;
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
this.priorityData = ['None', 'High', 'Normal', 'Low'];
this.value = 'None';
}
change(args) {
let filterQuery = new Query();
if (args.value !== 'None') {
if (args.element.id === 'priority') {
filterQuery = new Query().where('Priority', 'equal', args.value);
}
}
this.kanbanObj.query = filterQuery;
}
;
render() {
return <div className='control-wrapper'>
<DropDownListComponent id='priority' ref={(kanban) => { this.priorityObj = kanban; }} dataSource={this.priorityData} change={this.change.bind(this)} value={this.value} placeholder='Select a priority'></DropDownListComponent>
<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 { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import { Query } from '@syncfusion/ej2-data';
import { kanbanData } from './datasource';
class App extends React.Component<{}, {}>{
private kanbanObj: KanbanComponent;
private priorityObj: DropDownListComponent;
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
this.priorityData = ['None', 'High', 'Normal', 'Low'];
this.value = 'None';
}
change(args: ChangeEventArgs): void {
let filterQuery: Query = new Query();
if (args.value !== 'None') {
if (args.element.id === 'priority') {
filterQuery = new Query().where('Priority', 'equal', args.value);
}
}
this.kanbanObj.query = filterQuery;
};
render() {
return <div className='control-wrapper'>
<DropDownListComponent id='priority' ref={(kanban) => { this.priorityObj = kanban; }} dataSource={this.priorityData} change={this.change.bind(this)} value={this.value} placeholder='Select a priority'></DropDownListComponent>
<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/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/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 { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { Query } from '@syncfusion/ej2-data';
import { kanbanData } from './datasource';
function App() {
let kanbanObj;
let priorityObj;
let data = extend([], kanbanData, null, true);
let priorityData = ['None', 'High', 'Normal', 'Low'];
let value = 'None';
function change(args) {
let filterQuery = new Query();
if (args.value !== 'None') {
if (args.element.id === 'priority') {
filterQuery = new Query().where('Priority', 'equal', args.value);
}
}
kanbanObj.query = filterQuery;
}
;
return (<div className='control-wrapper'>
<DropDownListComponent id='priority' ref={(kanban) => { priorityObj = kanban; }} dataSource={priorityData} change={change.bind(this)} value={value} placeholder='Select a priority'></DropDownListComponent>
<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 { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import { Query } from '@syncfusion/ej2-data';
import { kanbanData } from './datasource';
function App(){
let kanbanObj: KanbanComponent;
let priorityObj: DropDownListComponent;
let data = extend([], kanbanData, null, true);
let priorityData = ['None', 'High', 'Normal', 'Low'];
let value = 'None';
function change(args: ChangeEventArgs): void {
let filterQuery: Query = new Query();
if (args.value !== 'None') {
if (args.element.id === 'priority') {
filterQuery = new Query().where('Priority', 'equal', args.value);
}
}
kanbanObj.query = filterQuery;
};
return(
<div className='control-wrapper'>
<DropDownListComponent id='priority' ref={(kanban) => { priorityObj = kanban; }} dataSource={priorityData} change={change.bind(this)} value={value} placeholder='Select a priority'></DropDownListComponent>
<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/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/25.1.35/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>