Our state of the art Gantt chart


Post by Bhava »

Hi ,
In our project we have two tabs a histogram and a scheduler . Using the panel show/Hide feature we have to show / hide the histogram and scheduler on toggle. I have attached the code used. The problem as we have given "isvisible" property only the visible tab is checked intially . We want both the tab to be checked initially and only when the tab is hidden the box should uncheck. What property can be used ?

{
                    text: "Histogram",
                    checked: histogram.isVisible,
                    onToggle: (toggleable) => {
                      
if (histogram.isVisible) histogram.hide(); else histogram.show(); }, }, { text: "Scheduler", checked: scheduler.isVisible, onToggle: (toggleable) => { if (scheduler.isVisible) scheduler.hide(); else scheduler.show(); }, },

Post by saki »

The above looks like configuration of checkboxes only. How are your Scheduler and Histogram configured? One of them may not be visible initially. Post please a runnable showcase.


Post by Animal »

Two checkboxes to toggle one state?

You have four state available there.

Also, can you not just use the tabs to select which to see?

If you really don't like tabs, use a simple Panel instead with layout : 'card' and switch child visibility on toggle of a checkbox.


Post by Bhava »

Hi Saki ,
yes only one will be visible either histogram or the scheduler at a time , so I need a property instead of "isvisible" which checks for the rendering property or something else other that checking for visibility, such that both the checkboxes are checked at same instance


Post by Bhava »

Hi Animal ,
hiding histogram is one check box and hiding scheduler is another checkbox. attached picture below

Attachments
toggle.PNG
toggle.PNG (5.71 KiB) Viewed 655 times

Post by saki »

Which of these apply?

  1. none shown
  2. scheduler shown
  3. histogram shown
  4. both shown

Post by Bhava »

hi,
both tabs(histogram , scheduler) present both boxes checked. I have attached the pictures of the scenario . I want both the boxes to be checked initially and not based on visibility.

Attachments
schedulervisible.png
schedulervisible.png (49.37 KiB) Viewed 651 times
histogramvisible.png
histogramvisible.png (54.22 KiB) Viewed 651 times

Post by Maxim Gorkovsky »

The problem as we have given "isvisible" property only the visible tab is checked intially . We want both the tab to be checked initially and only when the tab is hidden the box should uncheck. What property can be used ?

This is confusing. If you want both tabs to be visible initially and both checkboxes checked, you should not refer to the isVisible property:

{
  text: "Histogram",
  checked: true,
  onChange: ({ checked }) => {
    // hiding tab
    tabPanel.items[1].hidden = !checked;
  },
}

Post by Bhava »

Hi,
I tried this is working but , if I uncheck and click show hide again the box is checked even when the histogram is hidden . The state is not maintained .


Post by saki »

How does your current code look?

Notes:

  1. the control should always go from checkbox to component. I other words, checked state of the checkbox should not be determined by the visibility state of the component but solely by the user
  2. With 2 checkboxes we have 4 states: both hidden, first show, second shown, both shown, so should all be possible.

Post Reply