Search results

Filtering Cards in React Kanban component

08 Apr 2021 / 2 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.

Source
Preview
index.jsx
index.tsx
index.html
Copied to clipboard
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 {
    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'));
Copied to clipboard
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'));
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>

<body>
        <div id='kanban'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>