Open taauntik opened 9 months ago
Forum post
Reproducible here https://bryntum.com/products/scheduler/examples/tree/ With this code
import { StringHelper, ResourceModel, Scheduler } from '../../build/scheduler.module.js?474079'; import shared from '../_shared/shared.module.js?474079'; class Gate extends ResourceModel { static get fields() { return [ { name : 'capacity', type : 'number' }, { name : 'waiting', type : 'number' }, { name : 'domestic', type : 'boolean' } ]; } } const // Group by capacity, in steps of 50 sizeGrouper = ({ capacity }) => `Capacity ${Math.floor(capacity / 50) * 50} - ${(Math.floor(capacity / 50) + 1) * 50 - 1}`, // Group by waiting time, None, Less than an hour or More than an hour waitingTimeGrouper = ({ waiting }) => waiting === 0 ? 'None' : waiting < 60 ? 'Less than an hour' : 'More than an hour', // Group by domestic or international domesticGrouper = ({ domestic }) => domestic ? 'Domestic' : 'International'; const scheduler = new Scheduler({ appendTo : 'container', eventColor : null, eventStyle : null, features : { tree : true, // Enable the TreeGroup feature, which can transform the tree's structure treeGroup : { // Initially transformed with a single parent level based on capacity levels : [sizeGrouper] }, filterBar:true }, rowHeight : 45, barMargin : 5, columns : [ { type : 'tree', text : 'Name', width : 220, field : 'name' }, { type : 'number', text : 'Capacity', width : 90, field : 'capacity', align : 'right' }, { type : 'number', text : 'Waiting time', width : 90, field : 'waiting', align : 'right' }, { text : 'Domestic', width : 90, field : 'domestic', align : 'center', editor : null, renderer({ value }) { if (value) { return { tag : 'i', className : 'b-fa b-fa-times' }; } return ''; } } ], startDate : new Date(2022, 8, 12, 8), viewPreset : 'hourAndDay', crudManager : { autoLoad : true, resourceStore : { modelClass : Gate }, loadUrl : 'data/data.json' }, // Custom eventRenderer, used to colorize the flights depending on the waiting time at the gate eventRenderer({ eventRecord, resourceRecord, renderData }) { renderData.cls.add( resourceRecord.waiting > 60 ? 'purple' : resourceRecord.waiting > 30 ? 'apricot' : resourceRecord.waiting > 5 ? 'cyan' : 'green' ); return StringHelper.encodeHtml(eventRecord.name); }, tbar : [ { type : 'buttongroup', ref : 'buttons', toggleGroup : true, items : [ { text : 'Capacity', pressed : true, async onToggle({ pressed }) { if (pressed) { await scheduler.resourceStore.clearFilters(); // The buttons are disabled during grouping, since it is an async operation buttons.disable(); await scheduler.group([sizeGrouper]); buttons.enable(); } } }, { text : 'Waiting time', async onToggle({ pressed }) { if (pressed) { await scheduler.resourceStore.clearFilters(); buttons.disable(); await scheduler.group([waitingTimeGrouper]); buttons.enable(); } } }, { text : 'Domestic + capacity', async onToggle({ pressed }) { if (pressed) { await scheduler.resourceStore.clearFilters(); buttons.disable(); await scheduler.group([domesticGrouper, sizeGrouper]); buttons.enable(); } } }, ] } ] }); const { buttons } = scheduler.widgetMap;
Here is a video on how to reproduce it
https://github.com/bryntum/support/assets/75997756/2452f202-b8c8-4429-9508-073c11876994
Should document that while Scheduler is treegrouped, the store on the scheduler is the one to use for clearing filters
store
Forum post
Reproducible here https://bryntum.com/products/scheduler/examples/tree/ With this code
Here is a video on how to reproduce it
https://github.com/bryntum/support/assets/75997756/2452f202-b8c8-4429-9508-073c11876994