Our pure JavaScript Scheduler component


Post by frederick45 »

Hi, my code of DragHelper :

        this.Drag = new bryntum.scheduler.DragHelper (
            {

            cloneTarget        : true,
            mode               : 'translateXY',               
            dropTargetSelector : '.b-timeline-subgrid',
            targetSelector : '.b-grid-row:not(.b-group-row)',

            grid         : this.UnplannedGrid,
            schedule     : this.scheduler,
            constrain    : false,
            outerElement : this.UnplannedGrid.element,
            
            createProxy(element) {
                const
                    proxy        = document.createElement('div'),
                    task         = this.grid.getRecordFromElement(element),
                    durationInPx = this.schedule.timeAxisViewModel.getDistanceForDuration(task.duration);

                    console.log('task:'+task);
                    //task:{"id":"a105r000001GRRNAA4","name":"VI-000003"}
                    console.log('task.duration:'+task.duration);
                    //task.duration:9
                    console.log('durationInPx:'+durationInPx);
                    //durationInPx:0.000010416666666666666

                // Fake an event bar             
                proxy.classList.add('b-sch-event-wrap', 'b-sch-event', 'b-unassigned-class', 'b-sch-${schedule.mode}');
                proxy.innerHTML = `<div class="b-sch-event b-has-content b-sch-event-withicon">
                    <div class="b-sch-event-content">
                        <i class="${task.iconCls}"></i> ${task.name}
                    </div>
                </div>`;
                
                if (this.schedule.isHorizontal) {
                    proxy.style.height = `${this.schedule.rowHeight - (2 * this.schedule.resourceMargin)}px`;
                    proxy.style.width  = `${durationInPx}px`;
                }
                else {
                    proxy.style.height = `${durationInPx}px`;
                    proxy.style.width  = `${this.schedule.resourceColumnWidth}px`;
                }
                console.log('proxy.style.width:'+proxy.style.width);

    
                return proxy;
            },

during drag, the cell size is 4 days.

Another question, how to add drop event ?

BR


Post by alex.l »

how to add drop event ?

Did you mean how subscribe on drop event?

Here is the code snippet

this.Drag = new bryntum.scheduler.DragHelper({
     listeners : {
         drop : () => { console.log('drop') }
     }

Here is docs: https://bryntum.com/products/scheduler/docs/api/Core/helper/DragHelper#event-drop

Another question

What is the original question?

All the best,
Alex


Post by frederick45 »

ok, in my code :

console.log('task:'+task);
                    //task:{"id":"a105r000001GRRNAA4","name":"VI-000003"}
                    console.log('task.duration:'+task.duration);
                    //task.duration:9
                    console.log('durationInPx:'+durationInPx);
                    //durationInPx:0.000010416666666666666

during drag, the cell size is 4 days instead of 9 hours


Post by alex.l »

All the best,
Alex


Post by frederick45 »

yes , i have 16,66px for 4 hours, but always 4 days when i drag it


Post by alex.l »

Sorry I don't follow. Did you convert your duration to milliseconds? Please always post all required information to test it (code snippet in this case), it will save your time and allow us to help you fast.

All the best,
Alex


Post by frederick45 »

yes


Post by mats »

We could not reproduce this issue. To assist you with your question, please provide more details including a runnable test case (as described in our support guidelines).

To get the fastest possible support, provide a simple test case based on our standard examples.


Post Reply