How can we dynamically change column & status based on array data ?

Webix JS
#1

Hello Team,

We added a Column Dropdown with value Priority & Stage.
Now on selection from Column Dropdown, When column = “Priority”

i. Priority – create silos/columns and cards for each priority – As it currtly showing on page load.
When column = “Stage”
ii. Stage – create silos/columns and cards for each Request Status or Status selected and show from left to right - 1. Intake, 2. 1B …, 3. Vote Period, 10. Executing

We tried to add it but it is not working as we required(above). Please check the below snippet and give a solution for it.

Snippet URL:https://snippet.webix.com/vi8e894q

#2

Hello @rajendra ,

There are several points that I would like to recommend as improvements.

  1. First of all, please note that the id of every view has to be unique in the pull of currently initialized views.
    As far as I can see, the add/removeView commands in your current code may receive several equal IDs, which can cause conflicts with addressing a view.
    It could be also helpful to use a debug version of the library to track the consistency of the current scope.
    Also, in some use-cases, especially if the UI is frequently changed, you can check if the needed view exists by calling it via ID:
const view = $$(id);
if (view) ... // any operation on an existing view
  1. A new collapsible panel in Kanban (accordion items) should have a full definition (including the view parameter).
    I must admit there’s a general limitation for webix layouts - while the initial collapsible UI parts can be automatically identified (by header and body properties), unfortunately, there is no way to distinguish the “nature” of a dynamically added view without an explicit configuration.

To remove all existing columns at once, you can rebuild the layout with an empty array, then add new collapsible sections (will be shown in the snippet below).

  1. If there may be too many columns, please consider embedding them to a scrollview. Considering the UI representation, the Kanban acts as a layout that can contain a structure of any complexity. To ensure that the content of the lists will be visible, please assign some minimum size limit (minWidth) to them.

With that said, an example of a dynamically changed and recreated Kanban columns may look as follows:

Code Snippet

A a side note, if some data or UI configuration objects are reused in the code, please always use a standalone copy of an original instance. If the code receives a direct reference to the original object, it may be modified during the UI initialization/data loading.

#3

Thank you so much for detail answer.