I'm want to add an additional Combobox to the EventEditor that references a resource (in addition to the normal ressourceCombo). This Combo need a reference to the resource store in the config of the scheduler, but i cannot references the CRUD Manger before its created. To do this, my EventModel already has an addidional field "resourceId2" How would I go about this?
Please check our Vue examples. So, 'drag-onto-tasks' has a grid and a scheduler that share the same store. (https://bryntum.com/examples/scheduler/vue/javascript/drag-onto-tasks/dist/index.html)
Shortly, you could create your store before the scheduler and set it to the scheduler and to the resourceId2.
It also shows how to make chained stores.
Uncaught (in promise) TypeError: _0xf8bd1.getGraph is not a function
at _0x439090.value (schedulerpro.module.js:81708)
at _0x439090.value (schedulerpro.module.js:82015)
at _0x439090.value (schedulerpro.module.js:81944)
at schedulerpro.module.js:16965
at Array.forEach (<anonymous>)
at ResourceStore$1.value (schedulerpro.module.js:16964)
at ResourceStore$1.value (schedulerpro.module.js:81824)
at ResourceStore$1.set (schedulerpro.module.js:17828)
at CrudManager.loadCrudStore (schedulerpro.module.js:72063)
at CrudManager.value (schedulerpro.module.js:72089)
The resources are displayed correctly, but the events are not loaded and the Scheduler gets stuck in the "Loading"-state. I'm also using the AssignmentStore to allow events to be assigned to multiple resources. Could the be the source of the problem?
I just tried to use resourceStore var in the example I sent the link on, and it works to me. It's hard to say what is going on here without a full runnable example. Please, check if your CrudManager's configuration is full and correct (https://bryntum.com/docs/scheduler/#Scheduler/data/CrudManager) and if you still have issues, please attach a runnable example here, we will take a look.
I've checked your testcase, but it's not runnable. I got it fixed by changing how crudManager config is passed to original value:
:crudManager = "schedulerConfig.crudManager"
There was no errors, but the way you provided ResourceStore it was not applied to the crud manager.
I did it this way:
Scheduler/examples/vue/javascript/drag-onto-tasks/src/App.vue
......
// scheduler components
import { AjaxStore, EventStore, ResourceStore } from 'bryntum-scheduler';
import Task from './lib/Task.js';
import Employee from './lib/Employee.js';
import Grid from './components/Grid.vue';
import Drag from './lib/Drag.js';
import { Toast, ObjectHelper } from 'bryntum-scheduler'
// we need to import it here because it comes from the package
import 'bryntum-scheduler/scheduler.stockholm.css';
const
equipmentStore = new AjaxStore({
modelClass : Task,
readUrl : 'data/equipment.json',
sorters : [
{ field : 'name', ascending : true }
]
}),
eventStore = new EventStore({
modelClass : Task
}),
resourceStore = new ResourceStore({
modelClass : Employee,
});
ObjectHelper.merge(schedulerConfig, {
crudManager : {
autoLoad : true,
eventStore,
resourceStore,
transport : {
load : {
url : 'data/data.json'
}
}
}
});
// App
export default {
name: 'app',
// local components
components: {
DemoHeader,
Scheduler,
Grid
}, // eo components
// function that returns data
data() {
// console.log(schedulerConfig);
return {
schedulerConfig,
gridConfig : {
// Use a chained Store to avoid its filtering to interfere with Scheduler rendering
store : equipmentStore.makeChained(() => true)
}
}
}, // eo function data
mounted() {
const
grid = this.$refs.grid.grid,
schedule = this.$refs.scheduler.schedulerInstance,
outerElement = grid.element;
// make sure you store is applied to the scheduler
console.log(schedule.resourceStore === resourceStore);
......
Also I created a new model class to make sure my store is applied:
Scheduler/examples/vue/javascript/drag-onto-tasks/src/lib/Employee.js
import { ResourceModel } from 'bryntum-scheduler';
export default class Employee extends ResourceModel {
static get fields() {
return [
'mypositionfield'
];
}
}
But when I tried to run the demo I got the following error. You might have seen something similar:
Снимок экрана 2020-09-29 в 19.41.49.png (624.61 KiB) Viewed 1521 times
I also tried this demo in our 4.0 beta release and it worked there with no issues. It's quite stable now. You can download it from the CustomerZone. Let me know please if it works for you. Official release is going to be in 1-2 weeks.
Снимок экрана 2020-09-29 в 19.47.01.png (599.31 KiB) Viewed 1521 times
thank you for your detailed investigation and response. I encountered this error while evaluating wether your product covers our use case, so I'm not a customer (yet). Would it be possible to send me the beta release, so I can further evaluate it?
sadly the beta dosen't work for me... I replicated your code in the drag onto tasks example of the beta. Please see the attached code and image. This is really important for my use case, so I hope you can assist me further or suggest another solution without the store.
Hello! I checked the trial build and was able to reproduce exactly the same error. And then I realized that you're evaluating SchedulerPro! This is the key! Yesterday I checked the code in simple Scheduler. And it worked. In SchedulerPro we have 2 folders with demos:
examples - to show how to create a scheduler pro;
examples-scheduler which is a copy of Scheduler/examples - to show how to create a simple scheduler based on SchedulerPro package;
So I applied exactly the same code to the 'SchedulerPro/examples-scheduler/vue/javascript/drag-onto-tasks/src/App.vue' and got the same error you posted at the beginning TypeError: project.getGraph is not a function.
So to fix the code you just need to import correct class from the package:
// scheduler components
import { AjaxStore, SchedulerResourceStore } from 'bryntum-schedulerpro'; // Add SchedulerResourceStore import
import Task from './lib/Task.js';
import Grid from './components/Grid.vue';
import Drag from './lib/Drag.js';
import { Toast, ObjectHelper } from 'bryntum-schedulerpro' // Add ObjectHelper import
// Create store
const resourceStore = new SchedulerResourceStore();
// Apply store to CrudManager
ObjectHelper.merge(schedulerConfig, {
crudManager : {
resourceStore
}
});
How I know what is used: Scheduler or SchedulerPro. I can check the wrappers.
In case of 'SchedulerPro/examples-scheduler/vue/javascript/drag-onto-tasks' demo this wrapper is used: 'SchedulerPro/examples-scheduler/vue/javascript/_shared/src/Scheduler.vue'. In the wrapper I can see:
import { Scheduler } from 'bryntum-schedulerpro';
For example in scheduler pro vue demo 'SchedulerPro/examples/frameworks/vue/javascript/resource-histogram' the wrapper is 'SchedulerPro/examples/frameworks/npm/vue/schedulerpro/src/SchedulerPro.vue'. In the wrapper I can see that SchedulerPro is imported:
import { SchedulerPro } from 'bryntum-schedulerpro';
I predict your next question will be how to use ResourceStore with SchedulerPro. ProjectModel plays the role of CrudManager.
SchedulerPro/examples/frameworks/vue/javascript/resource-histogram/src/App.vue
import {
schedulerConfig,
histogramConfig,
toolbarConfig
} from './components/config.js';
import { ProjectModel, ObjectHelper, ResourceStore } from "bryntum-schedulerpro";
const resourceStore = new ResourceStore();
const project = (window.project = new ProjectModel({
resourceStore,
transport : {
load : {
url : 'data/data.json'
}
},
autoLoad : true
}));
// Apply project to schedulerConfig
ObjectHelper.merge(schedulerConfig, {
project
});
// Apply project to histogramConfig
ObjectHelper.merge(histogramConfig, {
project
});
Then compile the demo and check the result
cd SchedulerPro/examples/frameworks/vue/javascript/resource-histogram
npm install
npm run serve
I hope this will help you to continue evaluating our product. We will update the docs to make the class naming clear. I would recommend to stick to the 4.0 beta. Though online docs might have some differences, but you can always ask here and we are glad to help!