[ANGULAR] Column-Specific Filtering and Text Highlighting in Bryntum TaskBoard

[harish22]

Hi Team,

I’m currently working with the Bryntum TaskBoard component in an Angular application. I’m utilizing the filterBar feature for simple column-based search functionality. By default, the filter is applied to all columns, but I’d like to restrict the filtering to a specific column only (e.g., "DONE" column).

Additionally, when a search term is entered, the matching rows are filtered correctly, but I would also like the searched text to be highlighted within the task content, as shown in the attached screenshot.

Could you please guide me on:

• How to enable column-specific search using filterBar?

• How to implement text highlighting for matched search terms within the task items?

Looking forward to your guidance.

Thanks

[ghulam.ghous]

Hi,

I’m currently working with the Bryntum TaskBoard component in an Angular application. I’m utilizing the filterBar feature for simple column-based search functionality. By default, the filter is applied to all columns, but I’d like to restrict the filtering to a specific column only (e.g., "DONE" column).

Please checkout this demo: https://bryntum.com/products/taskboard/examples/column-filtering/. It is exactly what you are looking for. https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/ColumnFilter

How to implement text highlighting for matched search terms within the task items?

You can achieve this by customizing the task contents. Please check this guide:

https://bryntum.com/products/taskboard/docs/guide/TaskBoard/customization/taskcontents
https://bryntum.com/products/taskboard/docs/api/TaskBoard/view/TaskBoardBase#config-taskRenderer
https://bryntum.com/products/taskboard/examples/task-items/

[harish22]

Hi Ghulam,

Thank you for your quick response and for sharing the relevant links.

To clarify, I'm specifically looking for a search bar functionality, not a filter menu. I’d like to have a search input specifically for the “Done” column, with a free-text search bar instead of filter menus.

Currently, I have the following configuration:

filterBarFeature: {
    fields: ['id', 'name', 'equipmentMake', 'prio', 'owner', 'category'],
    keyStrokeChangeDelay: 100,
    allowRegExp: true
}

As for the text highlighting, I’ll explore the customization options you've provided. If you happen to have a working example or sample snippet for that, it would be greatly appreciated.

Thanks again for your support!

[ghulam.ghous]

To clarify, I'm specifically looking for a search bar functionality, not a filter menu. I’d like to have a search input specifically for the “Done” column, with a free-text search bar instead of filter menus.

Please check the docs and live demo here: https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/FilterBar. This is exactly what you are looking for. But my guess is you already know this and you are looking to disable the filter bar for the other columns right? This is not possible programmatically at the moment. We do have something in pipeline which is expected to be merged soon which will allow disabling it for specific columns. But you can do it with css:

.b-taskboard-column-header:not([data-column="done"]) .b-taskboard-column-filterbar {
	display: none;
}

As for the text highlighting, I’ll explore the customization options you've provided. If you happen to have a working example or sample snippet for that, it would be greatly appreciated.

We do not have an example. please give it a try and if you face blockers , let us know and we will try to help.