How to check if there are no rows visible to display another component.

Asked by Sam
1 year ago.

My app is written in React. I have filters for my scheduler, and when changing them, the rows are filtered and made invisible (with onRowFilter in config).
When there are no rows visible, I want to display another component (noResults component).

The only solution I found was to use a workaround and create a variable:

const noRows = scheduler?.rows.all().filter(row => row.displayY !== undefined).length === 0

However even if the value changes from false to true correctly, it is not displaying my NoResult component and I always have an error:
"TypeError: Cannot read properties of null (reading 'clientWidth')"

Here is how it looks like:

 {noRows ? (
            <NoResults />
          ) : (
              <DayPilotScheduler {...config} globalHolidays={holidays} ref={component => setScheduler(component && component.control)} />
)

Thank you in advance for the help!

Answer posted by Dan Letecky [DayPilot]
1 year ago.

This logic destroys the component when noRows if false and makes the scheduler instance invalid.

You can try using the "visible" attribute instead, something like this:

<DayPilotScheduler {...config} visible={!noRows} globalHolidays={holidays} ref={component => setScheduler(component && component.control)} />

Comment posted by Dan Letecky [DayPilot]
1 year ago.

And to get a list of visible rows, you can use rows.visible():

const noRows = scheduler?.rows.visible().length === 0;

Comment posted by Sam
1 year ago.

Thank you for the very fast reply!
I have no more error using the "visible" attribute. However for some reasons my "noRows" variable stays "false" when I set some filters, and turns "true" very fast when I clear them, before turning back to false, so the Scheduler always stays visible. It is like I have to wait for the scheduler to be fully loaded before setting the noRows variable? Or it could be a React problem on my side...

Comment posted by Dan Letecky [DayPilot]
1 year ago.

If you call rows.update() the Scheduler will be updated immediately. Just make sure that noRows is updated after this call - you also need to save the updated value in the state so that React can detect the change.

Comment posted by Sam
1 year ago.

Thank you! finally I didn't need to use it and I simplified the code, this way worked for me:

      {isLoading ? <Loading /> : null}

      {scheduler?.rows.visible().length === 0 ? <NoResults /> : null}

      <DayPilotScheduler
        visible={!isLoading && scheduler?.rows.visible().length !== 0}
        {...config}
        globalHolidays={holidays}
        ref={component => setScheduler(component && component.control)}
      />

Comment posted by Dan Letecky [DayPilot]
1 year ago.

Great, thanks for posting your solution!

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

How to check if there are no rows visible to display another component.

Products

Learn

Get Support

DayPilot Pro