Premium support for our pure JavaScript UI components


Post by rocketreading »

Hi Team,

Could you please help me recognize what I am doing wrong here?

I am trying to enable the infinite scroll with data loading in chunks.
Infinite scroll do work but I am unable to fetch more data.
Attaching the attachment of my LWC js for your reference.

Regards,
rocketreading

Attachments
bryntumsupport.js
(15.33 KiB) Downloaded 21 times

Post by Animal »

Of course I cannot run that code, but I can take an overview of it.

Listening for scroll is not a good idea because it fires constantly during scrolling.

Listen for this event: https://bryntum.com/products/gantt/docs/api/Scheduler/data/EventStore#event-loadDateRange and load new data when the changed flag in the event is set.


Post by rocketreading »

https://bryntum.com/products/scheduler/examples/infinite-scroll/
Hi I am referring this link, when I tried implementing the same in Salesforce, getting couple of issues.

  1. UserAction event is not getting in listeners.
  2. If i am listening it on the basis of value change, then scrollToDate is not defined.

Post by alex.l »

Could you please re-phrase these 2 points? It's not clear what did you mean in "UserAction event is not getting in listeners", and "then scrollToDate is not defined.".

All the best,
Alex


Post by rocketreading »

Hi Alex,

  1. UserAction event is not getting in listeners.

    scrollTo : {
                                label      : 'Scroll to date',
                                inputWidth : '7em',
                                width      : 'auto',
                                type       : 'datefield',
                                value      : this.startDate,
                                format : 'DD/MM/YYYY',
                                disabled   : true,
                                step       : '1d',
                                listeners  : {
                                    change({userAction, value }) {
                                        if (userAction) {
                                            console.log(value);
                                            bryntum.scheduler.scrollToDate(bryntum.scheduler.DateHelper.set(value, 'hour', 12), { block : 'center', animate : 500 });
                                        }
                                    }
                                },
                            

    So, It is not coming inside the userAction block.

  2. If I am only capturing the change event on the basis of value change then it is going inside the block but scrollToDate is not defined error is getting popped up.


Post by alex.l »

I tried to apply this code in our SalesForce example and I see userAction is defined and has valid value when I change value of that picker.
Btw, I am not sure what is bryntum.scheduler.scrollToDate? Did you try to call the method on scheduler instance or on scheduler class?
Please try it with our examples code, apply required changes to reproduce the problem you faced and post the code here, so we will be able to help you.

All the best,
Alex


Post by rocketreading »

Hi Alex,

Thanks for the revert. Could you please attach that salesforce example to which you are referring?


Post by alex.l »

You have it, please check examples/salesforce folder of sources you downloaded from CustomerZone.

All the best,
Alex


Post by rocketreading »

Hi Alex,

Can we connect over a call?
As of now on the scrollToDate function, I am getting the error - Date.getTime() is not defined.
Also, I am not using this Date.getTime() anywhere in my function.

items : {
                        scrollTo : {
                            label      : 'Scroll to date',
                            inputWidth : '7em',
                            width      : 'auto',
                            type       : 'datefield',
                            value      : this.startDate,
                            format : 'DD/MM/YYYY',
                            //disabled   : true,
                            step       : '1d',
                            listeners  : {
                                change({userAction, value }) {
                                    if (userAction) {
                                        console.log(value);
                                            scheduler.scrollToDate(bryntum.scheduler.DateHelper.format(value, 'hour',12), { block : 'center', animate : 500 });
                                    }
                                }
                            },
                            highlightExternalChange : false
                        },
                    

Post by Animal »

Do not pass bryntum.scheduler.DateHelper.format(value, 'hour',12)

That string will of course not have a function called getTime.

Pass the Date as documented: https://www.bryntum.com/products/scheduler/docs/api/Scheduler/view/Scheduler#function-scrollToDate


Post Reply