Hi Team
I have several columns in a taskboard, and I want to enable a search functionality specifically for the particular[UNASSIGNED] column. The functionality was implemented using the processItems method within the columnToolbar feature, and it works as expected for the designated column.
However, for the other columns where search functionality is not required, an empty columnToolbar space appears in the column headers, which is unnecessary and impacts the layout.
Could you guide me on how to resolve this issue? I've attached the code snippet and screenshots for reference.
columnToolbarsFeature: {
topItems: {
// Define a custom text input and search button
searchInput: {
type: 'textfield',
clearable : true,
placeholder: 'Search by EQP and status', //🔍
cls: 'b-search-input',
listeners: {
input({ source }) {
// Capture the input text
const value = source.value.trim().toLowerCase();
const column = source.columnRecord;
const taskBoard = column.taskBoard;
// Iterate through the tasks in the column and highlight matches
column.tasks.forEach((task : any) => {
const taskElement = taskBoard.getTaskElement(task);
if (taskElement) {
// Check all relevant fields for matches
const isMatch = [
task.name,
task.Status,
task.Id,
task.Model,
task.estimatedTime,
].some(field => field?.toString().toLowerCase().includes(value));
if (value && isMatch) {
taskElement.classList.add('highlight');
} else {
taskElement.classList.remove('highlight');
}
}
});
},
clear() {
document.querySelectorAll('.highlight').forEach(element => {
element.classList.remove('highlight');
});
}
}
},
},
bottomItems: {
addTask : null
},
processItems({items,columnRecord } : any) {
if (columnRecord.id !== 'UNASSIGNED') {
items.searchInput = true
}
},
},
