Bryntum Support Forums

Posted: **Fri May 29, 2020 12:30 pm**

Am working with one of your react example in the scheduler Drag from Grid.. Just wanted to check if it is covered under our license.?

Posted: **Fri May 29, 2020 8:15 pm**

Grid is a separate product, needing its own license. It's mentioned in the demo (bottom right corner). https://bryntum.com/examples/scheduler/react/javascript/drag-from-grid/build/index.html

Posted: **Mon Jun 01, 2020 4:09 pm**

thanks yes I noticed that. Though I need to know if there is any other workaround you might suggest to use drag a task to the scheduler.. Because we don't want to use the complete features of the Grid.. we are interested only on the feature shown in the demo.

Posted: **Mon Jun 01, 2020 6:37 pm**

Hello,

You don't need to create a grid to render your target elements. You can subclass https://www.bryntum.com/docs/scheduler/#Core/helper/DragHelper class available in Scheduler to implement what you need. Let's say you render a div element and you drag this element to the timeline. Based on drop position you create a new event and add it to the scheduler store. Here is how this could be implemented, for example in Basic demo:

Scheduler/examples/basic/app.js

/* eslint-disable no-unused-vars */
import '../_shared/shared.js'; // not required, our example styling etc.
import Scheduler from '../../lib/Scheduler/view/Scheduler.js';
import DragHelper from '../../lib/Core/helper/DragHelper.js';
import DomHelper from '../../lib/Core/helper/DomHelper.js';
import Rectangle from '../../lib/Core/helper/util/Rectangle.js';

//region Data

const resources = [...],
    events    = [...];

//endregion

class MyDrag extends DragHelper {
    static get defaultConfig() {
        return {
            // Don't drag the actual element, clone it
            cloneTarget        : true,
            mode               : 'translateXY',
            // Only allow drops on DOM elements with 'b-timeline-subgrid' CSS class specified
            dropTargetSelector : '.b-timeline-subgrid',
            // Only allow dragging elements with the 'draggable' CSS class
            targetSelector     : '.draggable'
        };
    }

construct(config) {
    super.construct(config);

    this.on({
        dragstart : this.onDragStart,
        drop      : this.onDrop
    });
}

onDragStart({ event, context }) {
    // Here you identify what you are dragging (an image of a user, grid row in an order table etc) and map it to something in your
    // data model. You can store your data on the context object which is available to you in all drag-related events
    context.eventName = context.grabbed.innerText;
}

onDrop({ source, context, event }) {
    if (context.valid) {
        const
            rect      = Rectangle.client(context.element, DomHelper.up(context.target, source.config.dropTargetSelector)),
            startDate = scheduler.getDateFromCoordinate(rect.x, 'round', true, true),
            endDate   = scheduler.getDateFromCoordinate(rect.right, 'round', true, true),
            resource  = scheduler.resolveResourceRecord(event);

        scheduler.eventStore.add({
            name       : context.eventName,
            resourceId : resource.id,
            startDate,
            endDate
        });

        // tell the drag helper the operation is finished
        context.finalize();
    }
}
};

const scheduler = new Scheduler({
    adopt            : 'container',
    minHeight        : '20em',
    resources        : resources,
    events           : events,
    startDate        : new Date(2017, 0, 1, 6),
    endDate          : new Date(2017, 0, 1, 20),
    viewPreset       : 'hourAndDay',
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,

columns : [
    { text : 'Name', field : 'name', width : 130 }
]
});

new MyDrag();

Scheduler/examples/basic/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Basic demo</title>
    <script src="../_shared/browser/helper.js"></script>
    <link rel="stylesheet" href="../../build/scheduler.stockholm.css" id="bryntum-theme">
    <link rel="stylesheet" href="../_shared/shared.css">
    <style>
        .draggable {
            background      : orange;
            cursor          : grab;
            width           : 300px;
            height          : 50px;
            display         : flex;
            align-items     : center;
            justify-content : center;
        }
    </style>
</head>

<body>

<div id="container">
    <div class="draggable">My task</div>
</div>
<!-- Using Ecma Modules -->
<script type="module" src="app.js"></script>
</body>

</html>

: Запись активности на экране 2020-06-01 в 19.32.18.gif (1.48 MiB) Viewed 1943 times

Hope this will help you to achieve what you need. We will update our docs of DragHelper to make it more clear.

Best,
Pavel

Posted: **Tue Jun 02, 2020 8:10 am**

Brilliant it looks good on first look, will check and get back.. Thanks again for your help

Bryntum Support Forums

[INFO REQ] Need to know if my license is covered with Bryntum Grid

[INFO REQ] Need to know if my license is covered with Bryntum Grid

Re: [INFO REQ] Need to know if my license is covered with Bryntum Grid

Re: [INFO REQ] Need to know if my license is covered with Bryntum Grid

Re: [INFO REQ] Need to know if my license is covered with Bryntum Grid

Re: [INFO REQ] Need to know if my license is covered with Bryntum Grid