Our pure JavaScript Scheduler component


Post by idyn-james »

In some cases we reload the entire gantt schedulers data (clear all, add new resources, new tasks)

When the scrollbar is somewhere in the lower middle, the schedulers screen remains white although at this position gantt data are available when all html elements are rendered.
the loading of the tasks begins only when we scroll upwards. (It looks like that the lazy rendering begins to render the html-elements)

Is there a way that we can say, when the gantt data is reloaded that the rendering is executed until the position of the vertical scroll bar?

Our desired behavior is, when the number of resources not change that the vertical position does not change after reloading. E.g. the user remains on the same vertical position after reloading.

Kind Regards


Post by alex.l »

Hi idyn-james,

Should be working ok, how can we reproduce that? What version you use?
Any chance to get a runnable test case to reproduce it and check your full configs?

Did you see https://bryntum.com/docs/scheduler/api/Grid/view/GridBase#config-preserveScrollOnDatasetChange ?

All the best,
Alex


Post by idyn-james »

Hello Alex

Thank you for your response

I created a sample to reproduce the problem

here is the code (tested with 5.04):

<!DOCTYPE html>
<html lang="en">

<head>
	<meta name="description" content="This demo visualizes hierarchical data in the form of a tree"/>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>Bryntum Scheduler - Tree demo</title>
	<!-- <script src="../_shared/browser/helper.js?456130"></script> -->
	<link rel="stylesheet" href="./build504/scheduler.stockholm.css?456130" id="bryntum-theme">
	<link rel="stylesheet" href="./_shared/shared.css?456130">
	<link rel="stylesheet" href="resources/app.css?456130">
		<!-- Using UMD bundle -->
	<!-- <script src="../_shared/locales/examples.locales.umd.js?456130"></script> -->
	
<script data-default-locale="De" src="./build/locales/custom.locale.De.js"></script>
<script data-default-locale="De" src="./build504/scheduler.umd.js?456130"></script>
<!-- <script src="../_shared/shared.umd.js?456130"></script> -->


</head>

<body onload="start();">
	<div id="controlAddIn">
	</div>
	

<script>
var {
Scheduler,
ResourceModel,
StringHelper
} = bryntum.scheduler; //TODO: tree filtering


class Gate extends ResourceModel {
static get fields() {
	return [{
	name: 'capacity',
	type: 'number'
	}];
}
}
Gate.exposeProperties();
var scheduler = null;
function start()
{


scheduler =  new Scheduler({
// _evenRowBackgroundColor :null,
// _oddRowBackgroundColor: null,

resourceNonWorkingTime : true,
appendTo: 'controlAddIn',
eventColor: null,
eventStyle: null,
preserveScrollOnDatasetChange:true,
features: {
	eventMenu :false,
	cellMenu :false,
	eventDrag: true,
	filterBar  : true,
	eventEdit:false,

timeRanges: {
	showHeaderElements: false,
	showCurrentTimeLine : true
},
eventDragSelect      : true,
eventDragCreate      : false,
//eventDragCreate: true,
tree: true,
regionResize: true,
},
rowHeight: 45,
barMargin: 5,
columns: [
{
	id: 'name',
	type: 'tree',
	text: 'Name',
	field: 'name',
	editor: false,
	width:300,
	}
],
startDate: new Date(2017, 11, 2, 8),
endDate   : new Date(2017, 11, 20),
viewPreset: 'hourAndDay',
zoomKeepsOriginalTimespan:true
});
createEvents();
}
function createEvents()
{
	scheduler.store.clear();
	for(i =0; i < 100; i++)
	{
		scheduler.store.add({
			"id"       : "h"+i,
			"name"     : "Res Id"+i
		});
	}
}	


</script>



</body>

</html>

how to reprodruce the problem:
1.) scroll to the middle
2.)open developer console with F12
3.) call

CreateEvents();

4.) the scrollbar jumps to the top and the screen is white until i beginn to scroll downwards.

hope this helps


Post by alex.l »

Sorry, your code doesn't work. There is no initial data, and createEvents method adds only resources in fact, but I guess you know that.
Gate class in never used. After I fixed all and applied createEvents to our tree example, I am not able to reproduce the problem.
Could you please try to edit our tree demo (check "examples/tree" folder in sources you downloaded) to make this problem reproducible?

Thank you!

All the best,
Alex


Post by idyn-james »

alex.l wrote: Thu May 26, 2022 6:06 am

Sorry, your code doesn't work. There is no initial data, and createEvents method adds only resources in fact, but I guess you know that.
Gate class in never used. After I fixed all and applied createEvents to our tree example, I am not able to reproduce the problem.
Could you please try to edit our tree demo (check "examples/tree" folder in sources you downloaded) to make this problem reproducible?

Thank you!

Hello Alex

  • Yes, this is just a reproducing sample. (I know that I only add Resources and no events, I agree: the function name is not very well choosen.)
  • We don't need the Crud-Manager or Inital-Data from a webserver. Our Inital-Data is set with Javascript Methods (the scheduler is embedded in the Dynamics Nav 365 ERP (https://dynamics.microsoft.com/en-us/); That means in our case: The Inital-Data can only be set with JavaScript Methods.
  • Is it mandatory to use a Gate Class when the Data is only set with JavaScript Methods?

Ok, i just modified the tree example (commented out the crud loading, added createEvents Method). the issue with the white screen remains: scroll to the middle and run createEvents again.

'use strict';

var {
    Scheduler,
    ResourceModel,
    StringHelper
} = bryntum.scheduler; //TODO: tree filtering

class Gate extends ResourceModel {
    static get fields() {
        return [{
            name : 'capacity',
            type : 'number'
        }];
    }

}

Gate.exposeProperties();
var scheduler = new Scheduler({
    appendTo   : 'container',
    eventColor : null,
    eventStyle : null,
    features   : {
        timeRanges : {
            showHeaderElements : false
        },
        tree         : true,
        regionResize : true
    },
    rowHeight : 45,
    barMargin : 5,
    columns   : [{
        type  : 'tree',
        text  : 'Name',
        width : 220,
        field : 'name'
    }, {
        type  : 'aggregate',
        text  : 'Capacity',
        width : 90,
        field : 'capacity'
    }],
    startDate   : new Date(2017, 11, 2, 8),
    //endDate   : new Date(2017, 11, 3),
    viewPreset  : 'hourAndDay',
    // crudManager : {
        // autoLoad      : true,
        // resourceStore : {
            // modelClass : Gate
        // },
        // transport : {
            // load : {
                // url : 'data/data.json'
            // }
        // },
        // // This config enables response validation and dumping of found errors to the browser console.
        // // It's meant to be used as a development stage helper only so please set it to false for production systems.
        // validateResponse : true
    // },

eventRenderer({
    eventRecord,
    resourceRecord,
    renderData
}) {
    var {
        isLeaf
    } = resourceRecord; // Custom icon

    renderData.iconCls = 'b-fa b-fa-plane'; // Add custom CSS classes to the template element data by setting property names

    renderData.cls.leaf = isLeaf;
    renderData.cls.group = !isLeaf;
    return isLeaf ? StringHelper.encodeHtml(eventRecord.name) : '\xa0';
}

});
createEvents();
function createEvents()
{
	scheduler.store.clear();
	for(let i =0; i < 100; i++)
	{
		scheduler.store.add({
			"id"       : "h"+i,
			"name"     : "Res Id"+i
		});
	}
}


Post by alex.l »

Thank you! Now I see the problem. Here is a link to track the status: https://github.com/bryntum/support/issues/4703

Is it mandatory to use a Gate Class when the Data is only set with JavaScript Methods?

It's always mandatory to use correct data model independent of how you load data into the store. The UI won't properly react on fields changes which are not specified in data model.

All the best,
Alex


Post Reply