- This topic has 3 replies, 2 voices, and was last updated 2 years, 1 month ago by
.
-
Hi,
I’m binding the data to the scheduler with dataAdapter which is fetching data from a server several times prior to the selected row in a grid. For some rows there might be data returned by the server, but for others the list is empty. The resources may vary upon the dataSource. So when there is an empty dataSource, the resource list is also empty. For those cases the groups are removed from the scheduler body, but in the header the cell for the group label remains. So I’m wondering if there is a method, or any kind of workaround to ungroup the scheduler’s events.
Here is my code:
var taskSource = new window.Smart.DataAdapter({
beforeLoadComplete: (data) => {
//Handle Data from the Server before the DataAdapter handles it
return data.tasks;
},
onBindingComplete: (boundSource) => {
//Modify the DataAdapter data before it is handled by the Scheduler
const data = boundSource.data;
for (let i = 0; i < data.length; i++) {
const dateStart = data[i].dateStart;
const dateEnd = data[i].dateEnd;
data[i].dateStart = new Date(dateStart.getFullYear(), dateStart.getMonth(), dateStart.getDate(), 0, 0, 0);
data[i].dateEnd = new Date(dateEnd.getFullYear(), dateEnd.getMonth(), dateEnd.getDate(), 23, 59, 59);
}
},
dataFields: [
{ name: ‘projid’, dataType: ‘number’ },
{ name: ‘label’, dataType: ‘string’ },
{ name: ‘dateStart’, dataType: ‘date’ },
{ name: ‘dateEnd’, dataType: ‘date’ },
{ name: ‘backgroundColor’, dataType: ‘string’ }
],
dataSource: ‘/get_data/accepted’,
dataSourceType: ‘json’,
root: ‘tasks’
});var projectSource = new window.Smart.DataAdapter({
beforeLoadComplete: (data) => {
//Handle Data from the Server before the DataAdapter handles it
return data.projects;
},
dataFields: [
{ name: ‘id’, dataType: ‘number’ },
{ name: ‘label’, dataType: ‘string’ },
{ name: ‘type’, dataType: ‘string’ },
{ name: ‘backgroundColor’, dataType: ‘string’ }
],
dataSource: ‘/get_data/accepted’,
dataSourceType: ‘json’,
root: ‘projects’
});window.Smart(‘#scheduler’, class {
get properties() {
return {
dataSource: taskSource,
currentTimeIndicator: true,
groupOrientation: ‘vertical’,
groups: [‘projid’],
resources: [
{
label: ‘Project’,
value: ‘projid’,
dataSource: projectSource,
},
],
view: ‘timelineMonth’,
firstDayOfWeek: 1,
hideNonworkingWeekdays: true,
nonworkingDays: [0,6],
eventRenderMode: ‘classic’
};
}
});
window.onload = function () {
const scheduler = document.querySelector(‘smart-scheduler’);
scheduler.scrollToDate(new Date());
scheduler.addEventListener(‘viewChange’, function () {
scheduler.scrollToDate(new Date());
});
};
Thanks in advance!Hi BLaGO,
Currently, only the resources property has a change listener, and not any of the properties of its items. So the only way to force a refresh on the header is to ‘refersh’ the resources property.
So similar to the demo here: Scheduler Resources, you need to first copy the resources[0] object to a new variable and change its dataSource. Then set resources to a new array containing the update object.For example:
let newResourceObject = document.querySelector(‘smart-scheduler’).resources[0];
newResourceObject.dataSource = [];
document.querySelector(‘smart-scheduler’).resources = [newResourceObject];Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/Hi Ivan,
My issue is more with the rendering of the groups, not how to change the actual data to the resources. See what I mean with some images.
This is how the scheduler is rendered when there is data bound to both dataSource and resource properties:
And this is how it is refreshed after requesting data from the server and the list is empty:
On the “rowselect” event of the grid I’m having this chunk of code:
$("#main_grid").on('rowselect', function (event) { var data = event.args.owner.source.recordids[event.args.rowindex]; taskSource.dataSource = '/get_data/accepted?id=${data.id}'; projectSource.dataSource = '/get_data/accepted?id=${data.id}'; });That part of the code is forcing both dataAdapters to refresh it’s data. The Scheduler is refreshing the data when the ajax call completes, but when the data source is empty the actual groups are removed from the rows, unfortunately the cell which meant to hold the group’s label remains in the timeline row and the whole grid is looking odd
Thanks in advance!
Blagoy
- You must be logged in to reply to this topic.