Display no records found message in Gantt

Gantt
#1

Hi,

We are using DHTMLX Gantt “v.7.1.9 Professional” and our project is based on “Angular: 12.2.7”. We have provided the functionality to filter tasks in Gantt and we need to display a message when there are no matching records available with a button to clear filters (Gantt columns should be visible even though no records found). Below are the mockups for different views that can be switched by users (users can switch between grid and chart, grid only and chart only views). Could you please provide us a way to get this behavior.

image
image1920×1027 11.4 KB

Thank you.

#2

Hello Madhuka,
Gantt doesn’t have a built-in functionality for that. You need to implement a custom solution by using the Gantt API and Javascript.

The easiest way to do that is to check the number of task rows. And if there are no tasks, you can attach an image to the grid and timeline elements. If you add a new task, the previous image will disappear because the parent element will be destroyed and recreated.
Here is an example that can help you to start:
https://snippet.dhtmlx.com/5/16783de6f

1 Like
#3

Hello Madhuka,
The dev team added the feature that allows showing the empty state screen:
https://docs.dhtmlx.com/gantt/whatsnew.html#x6629x80x6630x:~:text=the%20groupBy()%20method-,Empty%20state%20screen%3A,-new%20show_empty_state%20property

You can see how it works in the following sample:
https://docs.dhtmlx.com/gantt/samples/08_api/24_empty_state_screen.html

1 Like