[VUE] Listeners of filterable column stop working when change page by vue router in horizontal mode
Posted: Tue Sep 15, 2020 11:30 am
by sactory
Hello Bryntum team,
I have an issue with Bryntum Scheduler filtering feature.
In horizontal mode, I have configuration to use filtering bar, and assign a listener to detect when user change the input.
At the first time scheduler is loaded, everything work normally, but when I navigate away from page, then come back, the listener stop working, even though filtering still work.
Bellow is my configuration part that involve filtering
I attached sample project and video to reproduce this issue. Sample project use standard vue-cli starter template.
Bryntum version: 3.1.9
Browser: Google Chrome 85.0.4183.83 (64 bit)
OS: MacOS Catalina (10.15.6)
Please help me with this.
Thank you
Re: [VUE] Listeners of filterable column stop working when change page by vue router in horizontal mode
Posted: Tue Sep 15, 2020 3:00 pm
by saki
What is actually happening is the following:
user navigates to Scheduler page
Scheduler is created; both HTML markup and JavaScript code and variables
user navigates away from page
Vue router unconditionally destroys HTML markup of Scheduler
user navigates back to Scheduler page
new instance of Scheduler is created; HTML markup anew, some parts of JavaScript code and variables shared with step 2, some new.
The result is unpredictable and some parts of the code/markup could work and some not. Therefore, we cannot let any other code to destroy Scheduler's markup.
You intercept the routing event and you call destroy() method of the Scheduler instance before navigating away from it. This way both markup and JavaScript will be cleaned up correctly and navigating back to the scheduler page will cleanly re-create it from scratch.
Re: [VUE] Listeners of filterable column stop working when change page by vue router in horizontal mode
Posted: Wed Sep 16, 2020 6:53 am
by sactory
Thank you for your response saki.
About the two solutions you suggested:
With how we structure our project <keep-alive> is not a viable option, it mess up some of our business logic so we can not use it.
I tried to use beforeRouteLeave guard in route component to destroy scheduler instance, but an error show up. You can see it in the sample.
My component tree: App (root) > About (route component) > Schedule > BryntumScheduler
I have a ref to BryntumScheduler in Scheduler component, so I use event to make a referrer to the ref in About component, then use beforeRouteLeave at About component and destroy BryntumScheduler instance.
When I navigate away it show this error message in console
vue-router.esm.js?8c4f:2208 TypeError: Cannot read property 'map' of undefined
at ColumnStore.map (scheduler.module.js?7d42:34554)
at Scheduler.getState (scheduler.module.js?7d42:70962)
at Scheduler.getState (scheduler.module.js?7d42:108309)
at Scheduler.get state [as state] (scheduler.module.js?7d42:25885)
at Object.replacer (backend.js:315)
at encode (backend.js:3100)
at encode (backend.js:3101)
at encode (backend.js:3101)
at encode (backend.js:3101)
at encode (backend.js:3110)
What am I doing wrong here?
Re: [VUE] Listeners of filterable column stop working when change page by vue router in horizontal mode
Posted: Wed Sep 16, 2020 10:29 am
by saki
The wrapper already contains the logic to call destroy() of the instance so the following will work:
We're still investigating why it doesn't work with listeners because it should.
Re: [VUE] Listeners of filterable column stop working when change page by vue router in horizontal mode
Posted: Wed Sep 16, 2020 11:26 am
by pmiklashevich
The issue with listeners is fixed in upcoming 4.0 release. You can download 4.0 beta from the Customer Zone. Thanks!
Re: [VUE] Listeners of filterable column stop working when change page by vue router in horizontal mode
Posted: Thu Sep 17, 2020 4:04 am
by sactory
Thank you for your support.
After some trying I come up with a work around for this issue, I think the root cause can be the way configuration being initialize: configuration being exported from separate file as object then imported in Scheduler component, when we navigate away then come back it was re-used.
I changed schedulerConfig.js to export init function that return the object instead of export the object directly, then call init function in Scheduler component, this way when Scheduler is created it always use fresh configuration.
This solution solve my issue with out the need of manually call destroy method of BryntumScheduler.
Re: [VUE] Listeners of filterable column stop working when change page by vue router in horizontal mode
Posted: Thu Sep 17, 2020 7:53 am
by arcady
Ok, good to hear you're unblocked and thanks very much for sharing the solution!