{"_id":"5aff027686c0a90003b923a8","category":{"_id":"5aff027686c0a90003b923b2","version":"5aff027686c0a90003b923b4","project":"5707c6875309d117006948d4","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-04-08T14:56:07.661Z","from_sync":false,"order":1,"slug":"documentation","title":"Guides"},"project":"5707c6875309d117006948d4","user":"54d742a80771980d0052f4b5","parentDoc":null,"version":{"_id":"5aff027686c0a90003b923b4","project":"5707c6875309d117006948d4","__v":0,"forked_from":"5ab4fbd96316b00012bd8970","createdAt":"2018-03-23T13:06:33.352Z","releaseDate":"2018-03-23T13:06:33.352Z","categories":["5aff027686c0a90003b923b1","5aff027686c0a90003b923b2","5aff027686c0a90003b923b3"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"7.2.0","version":"7.2.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":6,"body":"[block:api-header]\n{\n  \"title\": \"Use ID\"\n}\n[/block]\n\nWorking with the tree using immutable data is possible.\n\nMake sure that:\n1. You provide a unique `id` property on each node\n2. If you have a different key property, then set the `idField` in the options\n3. You override drop action as stated below\n[block:api-header]\n{\n  \"title\": \"Override drop action\"\n}\n[/block]\nDrag and drop by default mutates the children.\nIf working with immutable data, 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]\nEvery time the nodes array changes, the entire tree model is rebuilt.\nThis might be costly if you have a huge amount of nodes that change very frequently.","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 possible. Make sure that: 1. You provide a unique `id` property on each node 2. If you have a different key property, then set the `idField` in the options 3. You override drop action as stated below [block:api-header] { "title": "Override drop action" } [/block] Drag and drop by default mutates the children. If working with immutable data, 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] Every time the nodes array changes, the entire tree model is rebuilt. This might be costly if you have a huge amount of nodes that change very frequently.