Our blazing fast Grid component built with pure JavaScript


Post by d.salvati »

Hello I was trying to change a type:button into type:slidetoggle but not getting the same functionality as the slidetoggle only works once, with the first click.
Can you suggest something?
The original code:

   onToggle: ({pressed}) => {
                    addButton.disabled = saveButton.disabled = removeButton.disabled = grid.current.readOnly = pressed;
                    if(!pressed){ Toast.show({html: "you can edit",
                        showProgress: false,
                    })
                    }
                    if(pressed){
                        Toast.hideAll()
                    }
                },

and changed code:

   onAction: ({checked}) => {
                    addButton.disabled = saveButton.disabled = removeButton.disabled = grid.current.readOnly = checked;
                    if(!checked){ Toast.show({html: "you can edit",
                        showProgress: false,
                    })
                    }
                    if(checked){
                        Toast.hideAll()
                    }
                },

is in pictures attached.

Thanks

Attachments
slidetoggle.png
slidetoggle.png (356.35 KiB) Viewed 555 times
readonly.png
readonly.png (374.51 KiB) Viewed 555 times

Post by Maxim Gorkovsky »

Hello.
It happens because you're setting grid.readOnly = pressed. Slide toggle is a widget with readOnly property inside a container widget (which is grid), and when you set readOnly to the parent widget, it propagates readOnly to all other widgets.
You can either move slide toggle out from Grid, e.g. into another container, or extend Slidetoggle class and override updateReadOnly method. I'd recommend first approach:

{
  type : 'container',
  items : [
    {
      type : 'container',
      items : [{ type : 'slidetoggle' }]
    },
    {
      type : 'gridpanel'
    }
  ]
}

Post by d.salvati »

thanks a lot!


Post Reply