Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

transformFlatData not compatible with syncDataOnLoad in a tree store #2944

Closed
eangelov opened this issue May 28, 2021 · 5 comments
Closed

transformFlatData not compatible with syncDataOnLoad in a tree store #2944

eangelov opened this issue May 28, 2021 · 5 comments
Assignees
@chuckn0rris
Labels
bug Something isn't working high-priority Urgent to have fixed resolved Fixed but not yet released (available in the nightly builds)
Milestone
4.3.5

Comments

@eangelov
Copy link

eangelov commented May 28, 2021 •
edited
Loading

I am not sure if this is a bug or if i'm using syncDataOnLoad on a tree grid in a way that it is not intended to use.

Summary: Render a tree grid with data. Once it is rendered set the store data to an empty array after that set it to array that has data and the flat data is not transformed to a tree.

Component version: Bryntum Grid 4.1.4

Test Case:
`

	<link rel="stylesheet" href="./bryntum-grid-4.1.4/build/grid.material.min.css" id="bryntum-theme">
	<link rel="stylesheet" href="./bryntum-grid-4.1.4/examples/_shared/shared.css">
</head>
<body>
	<script data-default-locale="En" src="./bryntum-grid-4.1.4/build/grid.umd.js"></script>
	
	
	<div id="container"></div>
	<script>
		const grid = new bryntum.grid.TreeGrid({
			appendTo: 'container'

			, columns: [{
				"text": "Target"
				, "field": "Target"
				, "type": "tree"
				, "editor": false
				, "htmlEncode": false
				, "width": 200
			}]

			, store: {
				transformFlatData: true,
				syncDataOnLoad: true,
				tree: true,
				data: [
					{
						"id": "1"
						, "expanded": true

						, "Target": "Item 1"
					}, {
						"id": "2"
						, "parentId": "1"
						, "expanded": true

						, "Target": "Item 2"
					}
				]
			}

			, tbar: [
				{ 
					text : 'Load Data'
					, onClick: () => {
						grid.store.data = [];

						grid.store.data = [
							{
								"id": "3"
								, "expanded": true

								, "Target": "Item 3_1"
							}, {
								"id": "4"
								, "parentId": "3"
								, "expanded": true

								, "Target": "Item 3_2"
							}
						];
					}
				}
			]
		});
	</script>
</body>
`

Steps to reproduce: Once the tree grid is rendered press the "Load Data" button. The loaded flat data is not transformed into a tree.

Expected Result: After pressing the "Load Data" button the data should be transformed into a tree.

What happens: After pressing the "Load Data" button the loaded data remains flat.

Debug info: From what i see there are no errors in the console and if i execute

grid.store.data = [];
grid.store.data = [
	{
		'id': '3'
		, 'expanded': true

		, 'Target': 'Item 3_1'
	}, {
		'id': '4'
		, 'parentId': '3'
		, 'expanded': true

		, 'Target': 'Item 3_2'
	}
];
grid.store.data = [
	{
		'id': '3'
		, 'expanded': true

		, 'Target': 'Item 3_1'
	}, {
		'id': '4'
		, 'parentId': '3'
		, 'expanded': true

		, 'Target': 'Item 3_2'
	}
];

instead of

grid.store.data = [];
grid.store.data = [
	{
		'id': '3'
		, 'expanded': true

		, 'Target': 'Item 3_1'
	}, {
		'id': '4'
		, 'parentId': '3'
		, 'expanded': true

		, 'Target': 'Item 3_2'
	}
];

the flat data is transformed into a tree. From what i can see it looks like the problem is only if you set the data to an empty array and after data you set it to a new dataset.
@matsbryntse matsbryntse added the bug Something isn't working label May 28, 2021
@jsakalos
Copy link

Confirmed, this is a bug. I have reproduced it in our Grid/examples/tree by setting the store to:

store : {
    transformFlatData : true,
    syncDataOnLoad    : true,
    tree              : true,
    data              : [
        {
            id       : '1',
            expanded : true,
            name     : 'Item 1'
        }, {
            id       : '2',
            parentId : '1',
            expanded : true,
            name     : 'Item 2'
        }
    ]
},

and then in console:

grid.store.data = [];
grid.store.data = [
        {
            id       : '1',
            expanded : true,
            name     : 'Item 1'
        }, {
            id       : '2',
            parentId : '1',
            expanded : true,
            name     : 'Item 2'
        }
    ]

The result is:

Screen Shot 2021-05-28 at 10 14 29

When syncDataOnLoad: false (or removed) the same procedure leads to the expected result of:

Screen Shot 2021-05-28 at 10 16 11

@eangelov
Copy link
Author

Some more debug info. The same happens if you start with an empty store and then load a flat dataset.

Example:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		
		<link rel="stylesheet" href="./bryntum-grid-4.1.4/build/grid.material.min.css" id="bryntum-theme">
		<link rel="stylesheet" href="./bryntum-grid-4.1.4/examples/_shared/shared.css">
	</head>
	<body>
		<script data-default-locale="En" src="./bryntum-grid-4.1.4/build/grid.umd.js"></script>
		
		
		<div id="container"></div>
		<script>
			const grid = new bryntum.grid.TreeGrid({
				appendTo: 'container'

				, columns: [{
					"text": "Target"
					, "field": "Target"
					, "type": "tree"
					, "editor": false
					, "htmlEncode": false
					, "width": 200
				}]

				, store: {
					transformFlatData: true,
					syncDataOnLoad: true,
					tree: true,
					data: []
				}

				, tbar: [
					{ 
						text : 'Load Data'
						, onClick: () => {
							grid.store.data = [
								{
									"id": "3"
									, "expanded": true

									, "Target": "Item 3_1"
								}, {
									"id": "4"
									, "parentId": "3"
									, "expanded": true

									, "Target": "Item 3_2"
								}
							];
						}
					}
				]
			});
		</script>
	</body>
</html>

image

@matsbryntse matsbryntse added this to the 5.0.1 milestone May 28, 2021
@jsakalos
Copy link

Also reported here: https://www.bryntum.com/forum/viewtopic.php?p=90275#p90275

@chuckn0rris chuckn0rris self-assigned this Oct 4, 2021
@jsakalos jsakalos mentioned this issue Oct 15, 2021
Closed
@jsakalos
Copy link

Probably causing #3429

@isglass isglass added the high-priority Urgent to have fixed label Oct 20, 2021
@isglass isglass modified the milestones: 5.0.1, 5.0 Nov 30, 2021
@jsakalos
Copy link

jsakalos commented Dec 2, 2021 •
edited
Loading

The related, but very important issue is that the store does not fire the correct events when this flag is on. Only update is fired correctly. To test, the attached simple application can be used. Make sure that the flag is on and then remove and add records and observe the console log.

app1.zip

@matsbryntse matsbryntse changed the title transformFlatData, syncDataOnLoad & tree strange behavior transformFlatData not compatible with syncDataOnLoad in a tree store Dec 13, 2021
@matsbryntse matsbryntse modified the milestones: 5.0, 4.3.5 Dec 13, 2021
@matsbryntse matsbryntse added ready for review Issue is fixed, the pull request is being reviewed resolved Fixed but not yet released (available in the nightly builds) and removed ready for review Issue is fixed, the pull request is being reviewed labels Dec 13, 2021
@ExtAnimal ExtAnimal mentioned this issue Mar 13, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@chuckn0rris chuckn0rris

Labels
bug Something isn't working high-priority Urgent to have fixed resolved Fixed but not yet released (available in the nightly builds)
Projects
None yet
Milestone
4.3.5
Development

No branches or pull requests
5 participants
@jsakalos @matsbryntse @eangelov @isglass @chuckn0rris