Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Multiple issues in paged Treegrid

    Hi,

    Working with the paged tree-databinding i have discovered three more issues.
    Because they are different to the last few bugs(http://forums.smartclient.com/showthread.php?t=32566,http://forums.smartclient.com/showthread.php?t=32651) i post them into a this thread insted of "reopening" the old.

    1. If you open the example below you can see, that the datasource returns open folders. This is important for this example.
    At the beginning it's clear that the treegrid has to load the children of the root-node. After that the Treegrid has to load the childs of the of the "root-x" nodes. At this point i'm wondering, why the end-parameter is counting down, even if i have set the dataFetchSize to 50.
    Sure i can ignore the given end-parameter at the server-side and could return all children instead, but i think this should be set right at the request.
    Code:
    treegrid.php?operationType=fetch&parentId=root-1&delay=50&sortBy=null&start=0&end=14
    treegrid.php?operationType=fetch&parentId=root-2&delay=50&sortBy=null&start=0&end=13
    treegrid.php?operationType=fetch&parentId=root-3&delay=50&sortBy=null&start=0&end=12
    treegrid.php?operationType=fetch&parentId=root-4&delay=50&sortBy=null&start=0&end=11
    treegrid.php?operationType=fetch&parentId=root-5&delay=50&sortBy=null&start=0&end=10
    2. Maybe you have already noticed the newly-added delay parameter to my extended exampe of the other posts ;-). The paged databinding of the tree makes imho only sense with large trees. Therefore it is possible that the latency of the server are not the same as localhost. So i have set a "delay" parameter to simulate server-workload. In the example below i have set it to 50 ms.
    The result of a slight delay on the server is that after the call of all "root-x" nodes there comes a second bunch of load to the backend.
    Code:
    treegrid.php?operationType=fetch&parentId=root-1&delay=50&sortBy=null&start=0&end=14
    treegrid.php?operationType=fetch&parentId=root-2&delay=50&sortBy=null&start=0&end=13
    treegrid.php?operationType=fetch&parentId=root-3&delay=50&sortBy=null&start=0&end=12
    treegrid.php?operationType=fetch&parentId=root-4&delay=50&sortBy=null&start=0&end=11
    treegrid.php?operationType=fetch&parentId=root-5&delay=50&sortBy=null&start=0&end=10
    ...
    treegrid.php?operationType=fetch&parentId=root-13&delay=50&sortBy=null&start=0&end=2
    treegrid.php?operationType=fetch&parentId=root-14&delay=50&sortBy=null&start=0&end=1
    
    treegrid.php?operationType=fetch&parentId=root-1&delay=50&sortBy=null&start=0&end=27
    treegrid.php?operationType=fetch&parentId=root-3&delay=50&sortBy=null&start=0&end=13
    treegrid.php?operationType=fetch&parentId=root-4&delay=50&sortBy=null&start=0&end=12
    treegrid.php?operationType=fetch&parentId=root-5&delay=50&sortBy=null&start=0&end=11
    treegrid.php?operationType=fetch&parentId=root-6&delay=50&sortBy=null&start=9&end=59
    I wasn't able to reproduce this properly, but at testing this out it was reproducable in 1 of 5 times. Often there is no additional request, sometimes only 1 additional request and sometimes there are - like in the code-block - 5 additional requests. edit: It is also reproducable without the delay-parameter.

    3. In our TreeGrid we have a few cells which needs to be in two lines. So we have set "fixedRecordHeights: false". It's clear to me that working with this attribute and DataBindings can result in struggeling while jumping in the Grid (for example scrollToRow in ListGrids). In the ListGrid there is no problem if you have set "fixedRecordHeights: false", but only work with records which have only 1 line in each field.
    In the TreeGrid there seems to be a scrolling issue, if you set the "fixedRecordHeights: false" and begin to scroll with the mouse-wheel. If you start scrolling, the nodes at the bottom will get rendered, but at the top you can see the nodes are jumping up again. The same thing happens if you are at the bottom and scroll upwards.
    .
    Note to this gif: I was only scrolling down with the mouse-wheel. The jumping back up again is the issue described here.

    All three issues are reproducable with the latest nightly from SmartClient_v100p_2015-04-22_Pro.

    Issue 1 and 3 i could reproduce in all current versions from Chrome, Firefox and IE.
    Issue 2 i could reproduce in Chrome and IE, maybe Firefox, but it was too bring to click F5 dozen of times.

    This is the code, with which i could reproduce all 3 issues:
    Code:
    isc.VLayout.create({
    	"ID" : "rootLayout_5",
    	"width" : "100%",
    	"height" : "100%",
    	"autoDraw" : true,
    	"hideUsingDisplayNone" : false,
    	"leaveScrollbarGap" : false,
    	"members" :
    	[
    		isc.TreeGrid.create({
    			"ID" : "theTreeGrid",
    			"width" : "100%",
    			"height" : "100%",
    			"selectionType" : "multiple",
    			"canEdit" : false,
    			"showFilterEditor" : false,
    			dataSource : isc.DataSource.create({
    				"fields" :
    				[{
    						"name" : "treeGridGeneratedIndex",
    						"primaryKey" : true,
    						"hidden" : true,
    						"canView" : false
    					}, {
    						"name" : "nameField",
    						"title" : "Reason",
    						"type" : "text"
    					}, {
    						"name" : "parentId",
    						"rootValue" : "root",
    						"foreignKey" : "treeGridGeneratedIndex",
    						"hidden" : true
    					}
    				],
    				"dataFormat" : "json",
    				"dataURL" : "http://devset.de/treegrid.php",
    				"transformRequest" : requestTransformer,
    				"transformResponse" : responseTransformer,
    				"recordXPath" : "\/resultData",
    				useHttpProxy : false
    			}),
    			dataProperties : {
    				openProperty : "isOpen",
    				childrenProperty : "children",
    				canReturnOpenFolders: true
    			},
    			"fixedRecordHeights" : false,
    			"autoFetchData" : true,
    			"dataPageSize" : 50,
    			"dataFetchMode" : "paged",
    			"selectionProperty" : "isSelected",
    			"fields" :
    			[{
    					"name" : "nameField",
    					"title" : "Reason",
    					"type" : "text",
    					"canEdit" : true,
    					"canSort" : true
    				}, {
    					"name" : "lastField",
    					"title" : "Name",
    					"type" : "text",
    					"canEdit" : true,
    					"canSort" : true
    				}, {
    					"name" : "randomField",
    					"title" : "random",
    					"type" : "text",
    					"canEdit" : true,
    					"canSort" : true
    				}
    			],
    			"selectionProperty" : "isSelected",
    			"members" :
    			[]
    		})
    	]
    });
    function requestTransformer(dataSourceRequest) {
    	var operationType = {
    		operationType : dataSourceRequest.operationType
    	};
    	if (dataSourceRequest.operationType == "fetch") {
    		var params = {
    			delay: 50,
    			sortBy : dataSourceRequest.sortBy,
    			start : dataSourceRequest.startRow,
    			end : dataSourceRequest.endRow
    		};
    	}
    	return isc.addProperties({}, operationType, dataSourceRequest.data, params);
    }
    function responseTransformer(dataSourceResponse, dataSourceRequest, jsonData) {
    	if (dataSourceRequest.operationType == "fetch") {
    		dataSourceResponse.totalRows = jsonData.totalRows;
    		dataSourceResponse.endRow = jsonData.endRow;
    		dataSourceResponse.startRow = jsonData.startRow;
    	};
    }
    Best regards

    #2
    Hi,

    Just to adding some information. The third issue could also be reproduced without using paging datasource. This means that every TreeGrid, which is defined with "fixedRecordHeights: false" does jump when scrolling through a long tree.
    If you see a bigger part of the tree this effect is getting stronger. In the gif you can see some small jumps back upwards by 1 or 2 rows. Using a bigger tree and scrolling faster the jumps are also getting bigger. In fact I have seen jumps about 8-14 rows in my tests.

    I have tested this again with the latest nightly SmartClient_v100p_2015-04-24_Pro and it is still reproducable.

    See here (in small):


    Here is a example for it:
    Code:
    isc.TreeGrid.create({
    	"width" : 240,
    	"height" : 300,
    	"showHeader" : false,
    	"fixedRecordHeights" : false,
    	data : isc.Tree.create({
    
    		"modelType" : "children",
    		"openProperty" : "isOpen",
    		"root" : {
    			"title" : "5",
    			"isFolder" : false,
    			"isOpen" : true,
    
    			"isSelected" : false,
    			"children" :
    			[{
    					"title" : "5",
    					"isFolder" : true,
    					"canDrag" : false,
    					"isOpen" : true,
    
    					"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    					"isSelected" : false,
    					"description" : "The description",
    					"children" :
    					[{
    							"title" : "5",
    							"isFolder" : false,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : true,
    							"description" : "The description"
    						}, {
    							"title" : "5",
    							"isFolder" : false,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description"
    						}, {
    							"title" : "5",
    							"isFolder" : false,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description"
    						}
    					]
    				}, {
    					"title" : "5",
    					"isFolder" : true,
    					"canDrag" : false,
    					"isOpen" : true,
    
    					"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    					"isSelected" : false,
    					"description" : "The description",
    					"children" :
    					[{
    							"title" : "5",
    							"isFolder" : true,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description",
    							"children" :
    							[{
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}
    							]
    						}, {
    							"title" : "5",
    							"isFolder" : true,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description",
    							"children" :
    							[{
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}
    							]
    						}, {
    							"title" : "5",
    							"isFolder" : true,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description",
    							"children" :
    							[{
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}
    							]
    						}, {
    							"title" : "5",
    							"isFolder" : true,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description",
    							"children" :
    							[{
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}
    							]
    						}, {
    							"title" : "5",
    							"isFolder" : true,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description",
    							"children" :
    							[{
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}
    							]
    						}, {
    							"title" : "5",
    							"isFolder" : true,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description",
    							"children" :
    							[{
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}
    							]
    						}, {
    							"title" : "5",
    							"isFolder" : true,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description",
    							"children" :
    							[{
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}
    							]
    						}
    					]
    				}, {
    					"title" : "5",
    					"isFolder" : true,
    					"canDrag" : false,
    					"isOpen" : true,
    
    					"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    					"isSelected" : false,
    					"description" : "The description",
    					"children" :
    					[{
    							"title" : "5",
    							"isFolder" : false,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description"
    						}, {
    							"title" : "5",
    							"isFolder" : false,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description"
    						}, {
    							"title" : "5",
    							"isFolder" : false,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description"
    						}, {
    							"title" : "5",
    							"isFolder" : false,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description"
    						}
    					]
    				}, {
    					"title" : "5",
    					"isFolder" : true,
    					"canDrag" : false,
    					"isOpen" : true,
    
    					"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    					"isSelected" : false,
    					"description" : "The description",
    					"children" :
    					[{
    							"title" : "5",
    							"isFolder" : false,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description"
    						}, {
    							"title" : "5",
    							"isFolder" : false,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description"
    						}, {
    							"title" : "5",
    							"isFolder" : false,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description"
    						}, {
    							"title" : "5",
    							"isFolder" : true,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description",
    							"children" :
    							[{
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}
    							]
    						}, {
    							"title" : "5",
    							"isFolder" : true,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description",
    							"children" :
    							[{
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}
    							]
    						}, {
    							"title" : "5",
    							"isFolder" : true,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description",
    							"children" :
    							[{
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}
    							]
    						}, {
    							"title" : "5",
    							"isFolder" : true,
    							"canDrag" : false,
    							"isOpen" : true,
    
    							"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    							"isSelected" : false,
    							"description" : "The description",
    							"children" :
    							[{
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}, {
    									"title" : "5",
    									"isFolder" : false,
    									"isOpen" : true,
    									"icon" : "https://cdn4.iconfinder.com/data/icons/pretty_office_3/16/Star-Full.png",
    									"isSelected" : false,
    									"description" : "The description"
    								}
    							]
    						}
    					]
    				}
    			]
    		}
    	})
    });
    Best

    Comment


      #3
      We're looking into these issues now. We'll update the thread as more information is available.

      Comment


        #4
        For issues #1-2, we believe that in the sample code and server behavior you provided, the server responses may be incomplete. When an open node is included in a server response in this situation, you need to either provide the children node array as a "children" property, or provide a valid "childCount". We'll update the documentation to clarify proper usage as it isn't made clear right now that this is required.

        We agree that issue #3 is separate and that will be addressed separately.

        Comment


          #5
          Thanks, adding the childCount to the dataBinding resolves the decreasing end-index in the requests.

          In the current docs it says:
          When returning children, a partial list of children may be returned, but if so, the childCountProperty must be set to the total number of children.
          I think this part will be changed (for #1 and #2).

          Is it correct that even if the childCount is set, the requests includes the higher dataFetchSize count?
          Example: If the dataFetchSize is 50 and the childCount is 12, the end-attribute in the request is set to 50. The tree already knows that this node does only have 12 childNodes, so shouldn't be the end-parameter set to the minimum of 12 and 50 for request?
          You can see this behaviour in the example above

          Looking forward to the fix #3.

          best regards

          Comment


            #6
            When we update the docs, we'll include examples of various fetches and the request and response parameters. We'll also update this thread.

            Comment


              #7
              In the latest nightly the scrolling issue still persists.

              Also if the user sets "fixedRecordHeights" to false, the tree seems to not scroll correct.

              Example with "fixedRecordHeights" : false

              with "fixedRecordHeights" : true


              I think the last treenode should be always at the bottom of the treegrid.

              You can use the same example as shown above (with the stars).

              Best Regards

              Comment


                #8
                The scrolling behavior you describe is by design when fixedRecordHeights is false because our virtual scrolling mechanism is active. See for example http://www.smartclient.com/#customExpansionComponent where if you scroll to the bottom of the ListGrid you can observe similar behavior. In this case, virtual scrolling is active because expansion components are present (http://www.smartclient.com/docs/10.0...rtualScrolling).

                Comment


                  #9
                  Thanks for the explanation. Is it possible to add a link on the docs of fixedRecordHeights to the virtualScolling? Maybe someone else is also wondering about that in the future.

                  Is there any news on the back-scrolling-bug? Maybe some estimations ;-)

                  Best Regards

                  Comment


                    #10
                    We've made a fix to address your original issues #1 and #2. This will be applied to SC 10.0p and newer. Check tomorrow's nightly builds.

                    We're also looking at the scrolling issue, and will update this thread when it's been resolved.
                    Last edited by Isomorphic; 6 May 2015, 16:15.

                    Comment


                      #11
                      Thanks, I have tested original issue #1 and #2 against the latest version SmartClient_v100p_2015-05-07_Pro.
                      I wasn't able to reproduce it anymore.

                      Thanks for fixing it!
                      Hopefully here is also a solution for the scrolling issue :-)

                      Best

                      Comment


                        #12
                        We've made changes to address the scrolling problem you described. They will be applied to SC 10.0p and newer, and be available in the nightly builds dated 05-09-2015.

                        Comment


                          #13
                          Thanks for the fixes,
                          Scrolling-issue is now fixed, tested in SmartClient_v100p_2015-05-10_Pro.

                          Sadly there seems to be some kind of problem with the last node.
                          The first 14 nodes are loading easily whereas the last node is showed as closed.
                          The definition of root-1
                          Code:
                           {
                          	"title" : "root-1",
                          	"parentId" : "root",
                          	"isFolder" : true,
                          	"isOpen" : true,
                          	"icon" : "http:\/\/icons.iconarchive.com\/icons\/milosz-wlazlo\/boomy\/16\/user-icon.png",
                          	"treeGridGeneratedIndex" : "root-1",
                          	"isSelected" : false,
                          	"nameField" : "root-1",
                          	"lastField" : "Walker Glen Patife",
                          	"randomField" : "d00e72de7431d224ad254e79e867d21a",
                          	"nameMd5Field" : "8851739335520c5eeea01cd745d0442d",
                          	"timeMd5Field" : "fc4c8926130799a633e73740c57e1671",
                          	"multiLineField" : "c3ad20159ad8d6f16d1eeae53f4aaf9b<br>8851739335520c5eeea01cd745d0442d"
                          }
                          and the definition in the datasource of root-15:
                          Code:
                          {
                          	"title" : "root-15",
                          	"parentId" : "root",
                          	"isFolder" : true,
                          	"isOpen" : true,
                          	"icon" : "http:\/\/icons.iconarchive.com\/icons\/milosz-wlazlo\/boomy\/16\/user-icon.png",
                          	"treeGridGeneratedIndex" : "root-15",
                          	"isSelected" : false,
                          	"nameField" : "root-15",
                          	"lastField" : "Damico Ronald Whatumbigh",
                          	"randomField" : "9f305fcdccaf1da6657eb259a85dfd11",
                          	"nameMd5Field" : "27775a17dbeca14be073f404950f3a94",
                          	"timeMd5Field" : "9a41e5ba64aaa674744bc1a16e3040ed",
                          	"multiLineField" : "9a41e5ba64aaa674744bc1a16e3040ed<br>27775a17dbeca14be073f404950f3a94"
                          }
                          If you jump down to the buttom/ or scroll down like in the gif, you can see that even if the definition through the datasource is the same root-15 isn't open like the other 14 root-x nodes.
                          Also root-15 is only opened after the second click. And there seems to be some kind of jumping of the whole tree, when opening the last node.


                          Changing the datasource to have only 1 node seems to have the same impacts, that the last node (first node) is not opening.
                          Note: I have set the default number of children after the test back to 15 nodes.
                          Code:
                          {
                              "totalRows": 1,
                              "startRow": 0,
                              "endRow": 1,
                              "resultData": [
                                  {
                                      "title": "root-1",
                                      "parentId": "root",
                                      "isFolder": true,
                                      "isOpen": true,
                                      "icon": "http:\/\/icons.iconarchive.com\/icons\/milosz-wlazlo\/boomy\/16\/user-icon.png",
                                      "treeGridGeneratedIndex": "root-1",
                                      "isSelected": false,
                                      "nameField": "root-1",
                                      "lastField": "Walker Glen Patife",
                                      "randomField": "d00e72de7431d224ad254e79e867d21a",
                                      "nameMd5Field": "8851739335520c5eeea01cd745d0442d",
                                      "timeMd5Field": "299d1799da36e4692bbb5a16041a1e00",
                                      "multiLineField": "299d1799da36e4692bbb5a16041a1e00<br>8851739335520c5eeea01cd745d0442d"
                                  }
                              ]
                          }

                          I think there might be some kind of bug with the indices.

                          The code is the same as in the first post.

                          I have made the requested datasource-changes requested in this post that closed folders can have childCount and openFolders should have childCount only if there are any children in the request.

                          Best
                          Last edited by SimonF; 11 May 2015, 00:02. Reason: Added the behaviour with only one child-node

                          Comment


                            #14
                            Hi there,

                            I'm very sorry, but I've another unclarity to me.

                            For better referencing this "unclarity" let's call it #2.
                            In our tree we have some rare nodes, which could have 3 lines.
                            To activate the displaying in the treegrid properly we have set "fixedRecordHeights: false". This has resulted into the initial jump-scolling issue. I'm happy that this is now fixed, thanks again.

                            Scrolling through the treegrid having one "3-line"-node results in jumping again, when scrolling.
                            See here:


                            I'm not able to categorize this as a issue or a visual glitch, but I think the enduser will recognize this jumps. I have tested this against the latest release SmartClient_v100p_2015-05-11_Pro.

                            Code for reproduction:
                            Code:
                            isc.VLayout.create({
                            	"ID" : "rootLayout_5",
                            	"width" : "100%",
                            	"height" : "100%",
                            	"autoDraw" : true,
                            	"hideUsingDisplayNone" : false,
                            	"leaveScrollbarGap" : false,
                            	"members" :
                            	[
                            		isc.TreeGrid.create({
                            			"ID" : "theTreeGrid",
                            			"width" : "100%",
                            			"height" : "100%",
                            			"selectionType" : "multiple",
                            			"canEdit" : false,
                            			"showFilterEditor" : false,
                            			dataSource : isc.DataSource.create({
                            				"fields" :
                            				[{
                            						"name" : "treeGridGeneratedIndex",
                            						"primaryKey" : true,
                            						"hidden" : true,
                            						"canView" : false
                            					}, {
                            						"name" : "nameField",
                            						"title" : "Reason",
                            						"type" : "text"
                            					}, {
                            						"name" : "parentId",
                            						"rootValue" : "root",
                            						"foreignKey" : "treeGridGeneratedIndex",
                            						"hidden" : true
                            					}
                            				],
                            				"dataFormat" : "json",
                            				"dataURL" : "http://devset.de/treegrid.php",
                            				"transformRequest" : requestTransformer,
                            				"transformResponse" : responseTransformer,
                            				"recordXPath" : "\/resultData",
                            				useHttpProxy : false
                            			}),
                            			dataProperties : {
                            				openProperty : "isOpen",
                            				childrenProperty : "children",
                            				canReturnOpenFolders: true
                            			},
                            			"fixedRecordHeights" : false,
                            			"autoFetchData" : true,
                            			"dataPageSize" : 50,
                            			"dataFetchMode" : "paged",
                            			"selectionProperty" : "isSelected",
                            			"fields" :
                            			[{
                            					"name" : "nameField",
                            					"title" : "Reason",
                            					"type" : "text",
                            					"canEdit" : true,
                            					"canSort" : true
                            				}, {
                            					"name" : "lastField",
                            					"title" : "Name",
                            					"type" : "text",
                            					"canEdit" : true,
                            					"canSort" : true
                            				}, {
                            					"name" : "multiLineField",
                            					"title" : "multiline",
                            					"type" : "text",
                            					"canEdit" : true,
                            					"canSort" : true
                            				}
                            			],
                            			"selectionProperty" : "isSelected",
                            			"members" :
                            			[]
                            		})
                            	]
                            });
                            function requestTransformer(dataSourceRequest) {
                            	var operationType = {
                            		operationType : dataSourceRequest.operationType
                            	};
                            	if (dataSourceRequest.operationType == "fetch") {
                            		var params = {
                            			delay: 50,
                            			sortBy : dataSourceRequest.sortBy,
                            			start : dataSourceRequest.startRow,
                            			end : dataSourceRequest.endRow
                            		};
                            	}
                            	return isc.addProperties({}, operationType, dataSourceRequest.data, params);
                            }
                            function responseTransformer(dataSourceResponse, dataSourceRequest, jsonData) {
                            	if (dataSourceRequest.operationType == "fetch") {
                            		dataSourceResponse.totalRows = jsonData.totalRows;
                            		dataSourceResponse.endRow = jsonData.endRow;
                            		dataSourceResponse.startRow = jsonData.startRow;
                            	};
                            }
                            Best

                            Comment


                              #15
                              The issue you mention where the last node doesn't open is actually a problem with the format of the responses from your server. When a node is marked as open, you must supply a childCount, and at least one child for that node. In the case of that sample, you're marking all of the top level nodes as open, but none of them have children specified. (This will be part of the enhanced documentation that is being written as part of addressing all of the issues you've brought up.)

                              As a convenience, we will add code to generate a warning and perform an immediate fetch when we encounter such nodes, but it will still be invalid usage. That change will be available in the nightly builds marked 5-13-2015.

                              We see also that you haven't corrected an issue with your sample server that we mentioned before - leaves should not be marked with a childCount. If I open root-1-1 in this sample, root-1-1-1 is marked as a leaf but has a childCount of 100.

                              Comment

                              Working...
                              X