Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #103769
    BLaG0
    Participant
    Up
    0
    Down

    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!

    • This topic was modified 2 months ago by BLaG0.
    • This topic was modified 2 months ago by BLaG0.
    • This topic was modified 2 months ago by BLaG0.
    #103778
    ivanpeevski
    Participant
    Up
    0
    Down

    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/

     

    #103785
    BLaG0
    Participant
    Up
    0
    Down

    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:

    Scheduler with bound data

    And this is how it is refreshed after requesting data from the server and the list is empty:

    Empty data source

    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

    • This reply was modified 2 months ago by BLaG0.
    • This reply was modified 2 months ago by BLaG0.
    • This reply was modified 2 months ago by BLaG0.
    #103796
    ivanpeevski
    Participant
    Up
    0
    Down

    Hi 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/

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.