Search cards in EJ2 TypeScript Kanban control

18 Apr 20235 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.
index.ts
index.html
import { Kanban } from '@syncfusion/ej2-kanban';
import { TextBox } from '@syncfusion/ej2-inputs';
import { Query } from '@syncfusion/ej2-data';
import { kanbanData } from './datasource.ts';

let kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'Backlog', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Testing', keyField: 'Testing' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    }
});
kanbanObj.appendTo('#Kanban');

let textObj: TextBox = new TextBox({
    placeholder: 'Enter search text',
    showClearButton: true,
    width: 180
});
textObj.appendTo('#search');
document.getElementById('reset').onclick = () => {
    textObj.value = '';
    kanbanObj.query = new Query();
};
document.getElementById('search').onkeyup = (e: KeyboardEvent) => {
    let searchValue: string = (<HTMLInputElement>e.target).value;
    let searchQuery: Query = new Query();
    if (searchValue !== '') {
        searchQuery = new Query().search(searchValue, ['Id', 'Summary'], 'contains', true);
    }
    kanbanObj.query = searchQuery;
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Kanban Card without Header</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Kanban card without header" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.2.3/ej2-kanban/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="content-wrapper">
            <table>
                <tbody>
                    <td style="width: 200px">
                        <input id="search" class="e-input" placeholder="Enter search text" required />
                    </td>
                    <td><button class="e-btn" id="reset">Reset</button></td>
                </tbody>
            </table>
            <div id="Kanban"></div>
        </div>
    </div>
</body>

</html>