store.on({ load : () => { ... })
Support Forum
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
});
}
}
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:
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
Or try listen to 'refresh' on the eventStore. https://bryntum.com/docs/scheduler/#Com ... nt-refresh
I managed to do it this way below:
Grid.js
Only problem is that I cannot add data inside normalizedData variable to the eventStore from the response. Do you know anything about it ?
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;
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
But to add to the eventStore call add like:
Docs: https://bryntum.com/docs/scheduler/#Sch ... nction-add
eventStore.add = foo;
eventStore.add([ ... ]);