JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Searching Cards in JavaScript (ES5) Kanban control

23 Mar 2023 / 1 minute 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.

Source
Preview
index.js
index.html
Copied to clipboard
var kanbanObj = new ej.kanban.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');

var textObj = new ej.inputs.TextBox({
    placeholder: 'Enter search text',
    showClearButton: true,
    width: 180
});
textObj.appendTo('#search');
document.getElementById('reset').onclick = function () {
    textObj.value = '';
    kanbanObj.query = new ej.data.Query();
};
document.getElementById('search').onkeyup = function (e) => {
    var searchValue = e.target.value;
    var searchQuery = new ej.data.Query();
    if (searchValue !== '') {
        searchQuery = new ej.data.Query().search(searchValue, ['Id', 'Summary'], 'contains', true);
    }
    kanbanObj.query = searchQuery;
};
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-layouts/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-kanban/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="content-wrapper">
            <table>
                <tbody>
                    <tr><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>
                </tr></tbody>
            </table>
            <div id="Kanban"></div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Previous
Next