Our blazing fast Grid component built with pure JavaScript


Post by mats »

Any class that mixes in 'Events' can be observed as you see here: https://bryntum.com/docs/scheduler/#Common/mixin/Events
store.on({ load : () => { ... })

Post by prh7 »

I tried doing something like below but it doesn't log anything:
// we import scheduler.umd for IE11 compatibility only. If you don't use IE import:
// import { Grid } from 'bryntum-scheduler';
import { Grid } from 'bryntum-scheduler/scheduler.umd';

export default class UnplannedGrid extends Grid {
    static get defaultConfig() {
        return {
            features: {
                stripe: true,
                sort: 'name'
            },
            columns: [
                {
                    text: 'Unassigned tasks',
                    flex: 1,
                    field: 'name',
                    htmlEncode: false,
                    renderer: data => `<i class="${data.record.iconCls}"></i>${data.record.name}`
                },
                {
                    text: 'Duration',
                    width: 100,
                    align: 'right',
                    editor: false,
                    field: 'duration',
                    renderer: data => `${data.record.duration} ${data.record.durationUnit}`
                }
            ],
            rowHeight: 50
        };
    }

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

        this.eventStore.on({
            // When a task is updated, check if it was unassigned and if so - move it back to the unplanned tasks grid
            update: ({ record, changes }) => {
                console.log()
                if ('resourceId' in changes && !record.resourceId) {
                    this.eventStore.remove(record);
                    this.store.add(record);
                }
            },
            load: ({ data, response, json}) => {
                debugger;
                console.log(data, response, json);
            },
            thisObj: this
        });
    }
}

Post by mats »

Are you using the CrudManager to load data? Then that's where the listener should go. Which example are you using as a base?

Post by prh7 »

I am using https://www.bryntum.com/examples/schedu ... index.html as base.

The Grid React component inside components folder from the above example doesn't use CrudManager. the code looks like below:
/**
 * @author Saki
 * @date 2019-03-08 09:19:25
 * @Last Modified by: Saki
 * @Last Modified time: 2019-03-08 10:31:00
 *
 * Grid with unplanned tasks. This is just a react wrapper.
 */
// libraries
import React, { Component } from 'react';

// our stuff
import UnplannedGrid from '../lib/UnplannedGrid.js';
import Task from '../lib/Task.js';

class Grid extends Component {

    componentDidMount() {
        this.unplannedGrid = new UnplannedGrid({
            appendTo   : 'unplannedContainer',
            eventStore : this.props.eventStore,
            store: {
                modelClass: Task,
                autoLoad: true,
                readUrl: 'https://127.0.0.1:8081/rest/',
                fetchOptions: {
                    method: 'POST',
                    body: 'something'
                },
                headers: {
                    'Content-Type': 'application/json'
                }
            }
        });
    } // eo function componentDidMount

    render() {
        return (<div id="unplannedContainer"></div>);
    } // eo function render

}; // eo class Grid

export default Grid;

// eof

Post by mats »

You'll create a (slight) race condition by doing it the way you do, loading of event is done by CrudManager. Look at the sources, try listening instead on the CrudManager:

Content.js
crudManager={{
                    autoLoad   : true,
                    eventStore : eventStore,
                    transport  : {
                        load : {
                            url : 'data/data.json'
                        }
                    }
                }}

Post by mats »

Or try listen to 'refresh' on the eventStore. https://bryntum.com/docs/scheduler/#Com ... nt-refresh

Post by prh7 »

I managed to do it this way below:

Grid.js
import React, { Component } from 'react';
import UnplannedGrid from '../lib/UnplannedGrid';
import Task from '../lib/Task';

class Grid extends Component {

    componentDidMount() {
        this.unplannedGrid = new UnplannedGrid({
            appendTo: 'unplannedContainer',
            eventStore: this.props.eventStore,
            store: {
                modelClass: Task,
                autoLoad: true,
                readUrl: 'https://127.0.0.1:/rest',
                fetchOptions: {
                    method: 'POST',
                    body: 'something'
                },
                headers: {
                    'Content-Type': 'application/json'
                },
                listeners: {
                    load(response) {
                        const task = 12;
                        const workStatus = 34;

                        const filteredResponse = response.json.itemList.filter((item, index) => {
                            const itemFields = item.fields;
                            const requiredField = itemFields.filter((item) => (item.id === workStatus && item.options[0].value.name === "Not planned"));

                            if (Object.keys(requiredField).length > 0) return item;
                        });
                        const normalizedData = filteredResponse.map((item) => {
                            return {
                                "id": item.itemId,
                                "name": item.fields.find(field => field.id === task).options[0].value,
                                "duration": 4,
                                "durationUnit": "h",
                                "fields": item.fields
                            };
                        });
                        this.props.eventStore.add = normalizedData;
                        console.log(response);
                    }
                }
            }
        });
    }

    render() {
        return <div id="unplannedContainer"/>;
    }
}

export default Grid;
Only problem is that I cannot add data inside normalizedData variable to the eventStore from the response. Do you know anything about it ?

Post by mats »

Not really following here. You're loading the unplanned Grid data but want to load it into the eventStore? `eventStore.add` is a method, so you can't do
 eventStore.add  = foo;
But to add to the eventStore call add like:
eventStore.add([ ... ]);
Docs: https://bryntum.com/docs/scheduler/#Sch ... nction-add

Post by prh7 »

I resolved my issue by doing
response.source.data = normalizedData;
. Let me know if this is not a good solution. Thank you for the help.

Post Reply