Premium support for our pure JavaScript UI components


Post by gorakh.nath »

Hi,
I want to add the splitter as given here in example: https://bryntum.com/examples/scheduler/dragfromgrid/
What are the steps I need to do to add this splitter.

Attachments
Screenshot 2022-05-04 at 12.56.58 PM.png
Screenshot 2022-05-04 at 12.56.58 PM.png (625.09 KiB) Viewed 749 times

Post by johan.isaksson »

Hi,

Please clarify, the arrow is pointing to the collapse icon in the Unplanned Tasks grid in that demo. Are you asking about that or the splitter dividing the scheduler from the grid? And where to you want to use it?

Best regards,
Johan Isaksson

Post by gorakh.nath »

Hi,
I am looking for the arrow that is pointing to the collapse icon in the Unplanned Tasks grid in that demo.


Post by johan.isaksson »

Ok, to make a panel (Grid is a panel, Scheduler too) collapsible, use the https://bryntum.com/docs/scheduler-pro/api/Core/widget/Panel#config-collapsible config.

const grid = new Grid({
    collapsible : true
});
Best regards,
Johan Isaksson

Post by gorakh.nath »

Hi Team,
I added below config but that collapsable is not coming.

new UnplannedGrid({
  collapsible : true,
  appendTo   : 'unplannedContainer',
  title       : 'Unplanned Tasks',
  collapsible : {
  direction : 'left'
 },
  eventStore : this.props.eventStore,
  store      : {
  modelClass : Task,
  readUrl    : 'data/unplanned.json',
  autoLoad   : true
  }
});

I have attached the sample app for reference.What else I need to add?

Attachments
gridScheudler.zip
(3.13 MiB) Downloaded 38 times

Post by mats »

What version are you using?


Post by alex.l »

Please see the zip attached.
direction should be 'right' and you need to remove fixed width from App.css for #unplannedContainer and put width into grid config. I've also updated your app to 5.0.3, because in 4.2.1 you used in doesn't work.

Attachments
gridScheudler.zip
(3.21 MiB) Downloaded 39 times

All the best,
Alex


Post by gorakh.nath »

Its working, one more thing how can we add our local style's class to overide the style of the panel.

Attachments
Screenshot 2022-05-20 at 1.23.24 PM.png
Screenshot 2022-05-20 at 1.23.24 PM.png (19.17 KiB) Viewed 656 times
Screenshot 2022-05-20 at 1.25.51 PM.png
Screenshot 2022-05-20 at 1.25.51 PM.png (92.6 KiB) Viewed 656 times

Post by alex.l »

Check CSS class it uses with Chrome DOM inspector and override it. It's .b-panel-header class with background-color property.

All the best,
Alex


Post by gorakh.nath »

.b-panel-header 

we are using panel in other places also , so if I over-ride here it will effect all the places, thats why I need to add my custom class that can be applied to it.


Post Reply