How to Search and Filter Vue Kanban with Remote Data?
This article provides guidance on how to implement search and filter functionalities for cards in a Kanban board using Vue. The approach involves handling search and filter actions during the initial data loading process.
Kanban Board Setup
The kanban component sets up the board with different columns representing task statuses: “To Do”, “In Progress”, “Testing”, and "Done
<ejs-kanban
id="kanban"
ref="KanbanObj"
keyField="Subject"
:dataSource="data"
:cardSettings="cardSettings"
:allowDragAndDrop="true"
:dialogOpen="dialogOpen"
:cardClick="cardClick"
:dataBinding="dataBinding">
<e-columns>
<e-column headerText="To Do" keyField="Open"></e-column>
<e-column headerText="In Progress" keyField="InProgress"></e-column>
<e-column headerText="Testing" keyField="Testing"></e-column>
<e-column headerText="Done" keyField="Close"></e-column>
</e-columns>
</ejs-kanban>
Filtering and Searching
Allows users to filter tasks by selecting a status from the dropdown. The :select attribute binds the filter change event to statusSelect method.
<p class="property-panel-header">Filtering</p>
<div>Status</div>
<div>
<ejs-dropdownlist
ref="StatusDrop"
id="status_filter"
:dataSource="statusData"
:select="statusSelect"
value="None"
:fields="statusFields"
placeholder="Select a status"
>
</ejs-dropdownlist>
</div>
Search Component
Users can enter text to search for specific tasks. The id attribute search_text helps in attaching event listeners in JavaScript.
<p class="property-panel-header">Searching</p>
<div>
<ejs-textbox
ref="SearchText"
id="search_text"
placeholder="Enter search text"
showClearButton="true"
></ejs-textbox>
</div>
Mounted Lifecycle Hook
For the search functionality, an event listener is added to the search_text input field, and it triggers a search query on each keystroke:
mounted: function () {
this.kanbanObj = this.$refs.KanbanObj.ej2Instances;
this.statusObj = this.$refs.StatusDrop.ej2Instances;
document.getElementById('search_text').addEventListener('focus', (e) => {
if (e.target.value === '') {
this.reset();
}
});
this.textObj = this.$refs.SearchText.ej2Instances;
var emptyValue = true;
document.getElementById('search_text').addEventListener('keyup', (e) => {
if (
e.code === 'Tab' ||
e.code === 'Escape' ||
e.code === 'ShiftLeft' ||
(e.code === 'Backspace' && emptyValue)
) {
return;
}
let searchValue = e.target.value;
searchValue.length === 0 ? (emptyValue = true) : (emptyValue = false);
let searchQuery = new Query();
if (searchValue !== '') {
searchQuery = new Query().search(
searchValue,
['Id', 'Summary'],
'contains',
true
);
}
this.kanbanObj.query = searchQuery;
this.kanbanObj.query.addParams('searchString', searchValue);
});
},
Interaction Methods
dialogOpen: A placeholder for managing events when a Kanban dialog opens.
cardClick: Enhances card selection by organizing a data array when a card is clicked.
BtnClick: Mimics an update for the chosen cards, altering their status to “InProgress.”
dataBinding: Links data to a local array when synchronizing with Kanban.
reset: Returns the filtering to its initial state when invoked.
statusSelect: Sorts cards according to the status selected from the dropdown menu.
resetClick: Removes search terms and restores any filters to default.
methods: {
dialogOpen: function (args) {},
cardClick: function (args) {
this.dataArr = [];
setTimeout(() => {
var data = document.querySelectorAll('.e-card.e-selection');
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < this.datas.length; j++) {
if (
this.datas[j].Id ==
data[i].querySelectorAll('.e-card-header-title')[0].innerText
) {
this.dataArr.push(this.datas[j]);
}
}
}
});
},
BtnClick: function () {
for (var i = 0; i < this.dataArr.length; i++) {
this.dataArr[i].Subject = 'InProgress';
}
this.$refs.kanbanObj.updateCard(this.dataArr);
},
dataBinding: function (args) {
this.datas = args.actual;
},
reset: function () {
this.statusObj.value = 'None';
this.kanbanObj.query = new Query();
},
statusSelect: function (args) {
let filterQuery = new Query();
if (args.itemData.value !== 'None') {
filterQuery = new Query().where('Status', 'equal', args.itemData.value);
}
this.kanbanObj.query = filterQuery;
var filterValue = args.itemData.value;
this.kanbanObj.query.addParams('filterValues', filterValue);
},
resetClick: function () {
this.textObj.value = '';
this.reset();
},
}
Server-side Implementation
On the server side, you will need to handle the incoming search and filter parameters. Below is an example of how to implement this in a controller:
public JsonResult LoadData(Params param)
{
var data = db.ScheduleEventDatas.ToList(); // Load all event data
if (param.searchString != null)
{
var model = db.ScheduleEventDatas.Where(s => s.Description.Contains(param.searchString));
return Json(model.ToList());
}
if (param.filterValues != null)
{
var model = from r in data orderby r.Subject where r.Subject == param.filterValues select r;
return Json(model.ToList());
}
else
{
return Json(data, JsonRequestBehavior.AllowGet);
}
}
Conclusion
By following the above steps, you can effectively implement search and filter functionalities for cards in a Kanban board using Vue.js. This allows for a more dynamic and user-friendly experience when managing tasks.
I hope you enjoyed learning about how to search and filter Vue Kanban with remote data.
You can refer to our Vue Kanban feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue Kanban example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
