Search cards in EJ2 JavaScript 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.
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;
};
<!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/27.1.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-layouts/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-kanban/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>