{"_id":"59a9e41bb925cb000f923e70","category":{"_id":"59a9e41bb925cb000f923e5f","version":"59a9e41ab925cb000f923e5c","project":"5707c6875309d117006948d4","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-04-08T14:56:07.661Z","from_sync":false,"order":2,"slug":"documentation","title":"Guides"},"project":"5707c6875309d117006948d4","user":"54d742a80771980d0052f4b5","parentDoc":null,"version":{"_id":"59a9e41ab925cb000f923e5c","project":"5707c6875309d117006948d4","__v":1,"createdAt":"2017-09-01T22:50:02.967Z","releaseDate":"2017-09-01T22:50:02.967Z","categories":["59a9e41bb925cb000f923e5d","59a9e41bb925cb000f923e5e","59a9e41bb925cb000f923e5f","59a9e41bb925cb000f923e60"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"5.0.0","version":"5.0.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-04-04T06:42:09.111Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":18,"body":"[block:api-header]\n{\n  \"title\": \"Use ID\"\n}\n[/block]\n\nWorking with the tree using immutable data is completely possible.\n\nThe only thing the tree will try to change in your data is add an `id` property in case it doesn't exist.\n\nSo make sure to either:\n1. Provide a unique `id` property on each node\n2. If you have a different property that represents the id, then set the `idField` in the options\n[block:api-header]\n{\n  \"title\": \"Override drop action\"\n}\n[/block]\nIf you are using drag and drop, then the default behaviour is to call `moveNode`, which tries to alter the `children` array.\nIf you wish to implement drag and drop, you must override the action and supply your custom behaviour:\n```\noptions = {\n  actionMapping: {\n    mouse: {\n      drop: (tree: TreeModel, node: TreeNode, $event: any, {from , to}: {from: any, to: any}) => {\n        // custom action. parameters: from = node, to = {parent, index}\n      }\n    }\n  }\n}\n```\n[block:api-header]\n{\n  \"title\": \"Rebuilding the tree\"\n}\n[/block]\nThe model rebuilds the internal `TreeNode`s for the entire tree whenever the data changes.\nThis might be costly if you have a huge amount of nodes that change all the time.","excerpt":"","slug":"redux-immutable-data","type":"basic","title":"Redux / Immutable Data"}

Redux / Immutable Data


[block:api-header] { "title": "Use ID" } [/block] Working with the tree using immutable data is completely possible. The only thing the tree will try to change in your data is add an `id` property in case it doesn't exist. So make sure to either: 1. Provide a unique `id` property on each node 2. If you have a different property that represents the id, then set the `idField` in the options [block:api-header] { "title": "Override drop action" } [/block] If you are using drag and drop, then the default behaviour is to call `moveNode`, which tries to alter the `children` array. If you wish to implement drag and drop, you must override the action and supply your custom behaviour: ``` options = { actionMapping: { mouse: { drop: (tree: TreeModel, node: TreeNode, $event: any, {from , to}: {from: any, to: any}) => { // custom action. parameters: from = node, to = {parent, index} } } } } ``` [block:api-header] { "title": "Rebuilding the tree" } [/block] The model rebuilds the internal `TreeNode`s for the entire tree whenever the data changes. This might be costly if you have a huge amount of nodes that change all the time.