JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Scheduler › Ungrouping events
- This topic has 3 replies, 2 voices, and was last updated 1 year, 11 months ago by
ivanpeevski.
-
AuthorPosts
-
September 29, 2022 at 10:20 am #103769
BLaG0
ParticipantHi,
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!September 29, 2022 at 6:39 pm #103778ivanpeevski
ParticipantHi 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/-
This reply was modified 1 year, 11 months ago by
ivanpeevski.
September 30, 2022 at 7:34 am #103785BLaG0
ParticipantHi 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!
BlagoySeptember 30, 2022 at 8:25 pm #103796ivanpeevski
ParticipantHi Blago,
Thanks for the additional details!
I am seeing a 403 Forbidden message for the images. However the code was useful to reproduce your implementation.
This is indeed an issue with the Scheduler, I have opened a work item for it and we will work on fixing this for our next releases.
As a workaround, you can dispatch a ‘resize’ Event, which will force the Scheduler to re-render its cells and remove the grouping cell.
You can have a look at a demo here: codepen
I hope this will be of help! If you have any further questions, feel free to contact us again.
Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/ -
This reply was modified 1 year, 11 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.