Hi there,
I found an issue in SchedulerPro with dependencies that are not re-drawn when filtering rows in tree view.
I created a reproduction in the following online example:
https://bryntum.com/products/schedulerpro/examples-scheduler/tree/
Just paste the following code in there (see reproduction below):
import { Scheduler, SchedulerResourceModel, StringHelper } from '../../build/schedulerpro.module.js';
import shared from '../_shared/shared.module.js';
class Gate extends SchedulerResourceModel {
static get fields() {
return [{
name : 'capacity',
type : 'number'
}];
}
}
const resources = [
{
id: 0,
name: '0',
expanded: true,
children: [
{
id: 3,
name: 'My Resource',
},
{
id: 4,
name: 'My Resource',
},
{
id: 5,
name: 'My Resource',
},
]
},
{
id: 1,
name: '1',
expanded: true,
children: [
{
id: 6,
name: 'My Resource',
},
{
id: 7,
name: 'My Resource',
},
{
id: 8,
name: 'My Resource',
},
]
},
{
id: 2,
name: '2',
expanded: true,
children: [
{
id: 9,
name: 'My Resource',
},
{
id: 10,
name: 'My Resource',
},
{
id: 11,
name: 'My Resource',
},
]
},
];
const events = [
{
id: '1',
name: 'My Event',
resourceId: 3,
startDate: new Date(2022, 1, 3),
endDate: new Date(2022, 1, 4),
},
{
id: '2',
name: 'My Event 2',
resourceId: 3,
startDate: new Date(2022, 1, 5),
endDate: new Date(2022, 1, 6),
},
{
id: '3',
name: 'My Event',
resourceId: 6,
startDate: new Date(2022, 1, 3),
endDate: new Date(2022, 1, 4),
},
{
id: '4',
name: 'My Event 2',
resourceId: 6,
startDate: new Date(2022, 1, 5),
endDate: new Date(2022, 1, 6),
},
{
id: '5',
name: 'My Event',
resourceId: 9,
startDate: new Date(2022, 1, 3),
endDate: new Date(2022, 1, 4),
},
{
id: '6',
name: 'My Event 2',
resourceId: 9,
startDate: new Date(2022, 1, 5),
endDate: new Date(2022, 1, 6),
},
]
const dependencies = [
{
id: 0,
from: '1',
to: '2',
lag: 1,
lagUnit: 'd'
},
{
id: 1,
from: '3',
to: '4',
lag: 1,
lagUnit: 'd'
},
{
id: 2,
from: '5',
to: '6',
lag: 1,
lagUnit: 'd'
}
]
const filterRows = (reset = false)=> {
console.log(reset);
if(reset){
scheduler.resourceStore.filter({
filters: [
{filterBy: ()=> true}
],
replace: true
})
} else {
scheduler.resourceStore.filter(
{
filters: [
{filterBy: (resource) => {
console.log(resource)
return [0,3,4,5].includes(resource.id);
},}
],
replace: true
}
)
}
}
const scheduler = new Scheduler({
appendTo : 'container',
eventColor : null,
eventStyle : null,
events,
resources,
dependencies,
features : {
timeRanges : {
showHeaderElements : false
},
tree : true,
regionResize : true,
dependencies: true,
},
rowHeight : 45,
barMargin : 5,
columns : [
{
type : 'tree',
text : 'Name',
width : 220,
field : 'name'
}, {
type : 'aggregate',
text : 'Capacity',
width : 90,
field : 'capacity'
}
],
startDate: new Date(2022, 1, 1),
endDate: new Date(2022, 2, 1),
viewPreset : 'dayAndWeek',
tbar : [
{
text : 'Filter',
icon : 'b-fa b-fa-plus',
color : 'b-green b-raised',
onClick : ()=> filterRows(false)
},
{
text : 'Reset Filter',
icon : 'b-fa b-fa-plus',
color : 'b-green b-raised',
onClick : ()=> filterRows(true)
},
],
eventRenderer({ eventRecord, resourceRecord, renderData }) {
const { isLeaf } = resourceRecord;
// Custom icon
renderData.iconCls = 'b-fa b-fa-plane';
// Add custom CSS classes to the template element data by setting property names
renderData.cls.leaf = isLeaf;
renderData.cls.group = !isLeaf;
return isLeaf ? StringHelper.encodeHtml(eventRecord.name) : '\xa0';
}
});
Reproduction:
- Click Filter button
- Collapse row 0
- Click Reset Filter button
- See that dependencies are gone (they only come up after uncollapsing row 0 again)
Thanks for looking into this.