[BUG REPORT] Datatable Pro column filters are not rendered with Multiview and Custom component

Webix JS
#1

Hi,

The Datatable’s Pro-column filters are not rendered by default when using the datatable view as a custom component inside a multiview cell.

Please refer the snippet:
https://snippet.webix.com/7wzx1cv6

Click on the Table segment.

Observe:

  1. The richSelectFilter, multiSelectFilter and multiComboFilter are not displayed by default (Pro).
  2. The textFilter is rendered as expected in the first column (standard filter).

Click the Refresh button at the bottom of the page to apply table.refreshColumns(), which renders the Pro-filters again.

Please let me know how to resolve the issue.

https://docs.webix.com/datatable__filtering.html

https://docs.webix.com/desktop__custom_component.html

#2

@maksim Could you please take a look at this?

#3

Hello @pnam ,

The mentioned behaviour is not a bug, as such way of view init is not valid.

The way of init for pro-filters has something in common, so most probably they interfere as such rigid chain of views inside containers (within the views inside containers, etc.) is not supported in Webix, as it will annihilate a part of views rendering, interaction and sizing logic.

In general, container is a property that should be used only on the top level of UI in order to place Webix widgets in a certain html element on a page.

Could you please explain the reasons for such configuration? According to the snippet, I would say that a simple JSON config will do the same (but in a correct way), so we will need some details on the use-case in order to suggest a feasible solution.

#4

Thanks for the input @Listopad

Use-case: Using Webix with React following the sample at https://docs.webix.com/desktop__react.html#creatingcustomwebixreactcomponent

Each cell in the multiview is an independent React Component running its own life cycle with datatables/pivot grids and pro-filters.

The multiview should simply display these components inside its cells and provide switching/tabbing functionality.

Please suggest an optimal way to achieve this.

#5

In case of react integration, the situation is a bit different - your initial config will work as needed, but with an important requirement.

When a component is shown for the first time, it will be resized to the actual sizes. Usually, all nested views (nested = declared as regular JSON config in UI) will be resized with their parent view.

The point is that this.$view is a plain HTML, i.e. a DOM container with no relation to Webix sizing logic. To restore proper sizing within such container, resize should be triggered additionally on the nested UI - it will result in the above valid scenario.
To imitate the default logic, all you need to do is to call onViewShow event manually:

https://snippet.webix.com/tu7s0xv2