{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/server-side-model-updating/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to manage data updates using the Server-Side Row Model (SSRM)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The options available for doing updates depends on what "},{"type":"element","tagName":"a","properties":{"href":"/archive/27.3.0/server-side-model-row-stores/"},"children":[{"type":"text","value":"Row Store"}]},{"type":"text","value":" is used. The options are as follows:"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"element","tagName":"thead","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Update Type"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Description"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Supported Store"}]}]}]},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Single Row"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Update attributes of a single row."}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Partial & Full"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Transaction"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Add, remove and update rows in the grid."}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Full Only"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"High Frequency"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Apply transactions at high speed."}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Full Only"}]}]}]}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Update Single Row"}]},{"type":"text","value":": This means changing an attribute for a particular row."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Update Transactions"}]},{"type":"text","value":": This means adding, removing or updating rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"High Frequency"}]},{"type":"text","value":": This means adding, removing or updating rows at high frequency."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h2","properties":{"id":"partial-store-updates","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#partial-store-updates","ariaLabel":"partial store updates permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Partial Store Updates"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If using the Partial Store, then it is not possible to insert or remove rows from the set provided to the grid. The only update option is "},{"type":"element","tagName":"a","properties":{"href":"#single-row-updates"},"children":[{"type":"text","value":"Single Row"}]},{"type":"text","value":" updates which is explained below."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The reason inserts and removes are not allowed is that doing inserts or removes would impact the block\nboundaries. For example suppose a block of 100 rows is read back from the server, and you try to insert 10\nrows into the middle of the block - this would result in 10 rows falling off the end of the block as they\nget pushed out. Similarly, if rows were removed, rows would be missing from the end of the block."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you do need to insert or remove rows while using the Partial Store, then the update needs to be done on the server and then have the grid refresh. The example "},{"type":"element","tagName":"a","properties":{"href":"#update--refresh"},"children":[{"type":"text","value":"Update & Refresh"}]},{"type":"text","value":" below demonstrates this."}]},{"type":"element","tagName":"h2","properties":{"id":"full-store-updates","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#full-store-updates","ariaLabel":"full store updates permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Full Store Updates"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If using the Full store, then you can update using "},{"type":"element","tagName":"a","properties":{"href":"#single-row-updates"},"children":[{"type":"text","value":"Single Row"}]},{"type":"text","value":" and "},{"type":"element","tagName":"a","properties":{"href":"#update--refresh"},"children":[{"type":"text","value":"Update & Refresh"}]},{"type":"text","value":" just like the Partial Store."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On top of that, you can also update using "},{"type":"element","tagName":"a","properties":{"href":"/archive/27.3.0/server-side-model-transactions/"},"children":[{"type":"text","value":"Transactions"}]},{"type":"text","value":" and "},{"type":"element","tagName":"a","properties":{"href":"/archive/27.3.0/server-side-model-high-frequency/"},"children":[{"type":"text","value":"High Frequency"}]},{"type":"text","value":" Transactions."}]},{"type":"element","tagName":"h2","properties":{"id":"single-row-updates","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#single-row-updates","ariaLabel":"single row updates permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Single Row Updates"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following code snippet outlines the general approach, to iterate through all loaded row nodes and then update them directly using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowNode.setData(data)"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|gridOptions.api.forEachNode(rowNode => {\n|    if (idsToUpdate.indexOf(rowNode.data.id) >= 0) {\n|        // arbitrarily update some data\n|        var updated = rowNode.data;\n|        updated.gold += 1;\n|\n|        // directly update data in rowNode\n|        rowNode.setData(updated);\n|    }\n|});\n"}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Setting row data will NOT change the row node ID, so if you are using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRowId()"}]},{"type":"text","value":"\nand the data changes such that the ID will be different, the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowNode"}]},{"type":"text","value":" will not have its ID updated."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows this in action where the following can be noted:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Update Selected Rows"}]},{"type":"text","value":" - will update the medal count directly on the row nodes and then invoke the mock server with the updated rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Refresh Store"}]},{"type":"text","value":" - will clear all loaded data and force a reload. Notice that the previously updated data will be returned from the server."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Updating Row Data","name":"updating-row-data","type":"generated","options":"{ \"enterprise\": true, \"extras\": [\"lodash\"], \"modules\": [\"serverside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"update--refresh","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#update--refresh","ariaLabel":"update  refresh permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Update & Refresh"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To add or remove records when using the Partial Store, the pattern is to update the original dataset\n(typically on the server) and then get the Partial Store to refresh."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows this in action where the following can be noted:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Add Row"}]},{"type":"text","value":" will add a row before the currently selected row."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Remove Row"}]},{"type":"text","value":" will remove the currently selected row."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"All operations are done outside the grid and the grid is then told to refresh."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Server-Side Row Model & CRUD","name":"crud","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"serverside\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Next Up"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continue to the next section to learn how to perform "},{"type":"element","tagName":"a","properties":{"href":"/archive/27.3.0/server-side-model-transactions/"},"children":[{"type":"text","value":"Transactions"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"SSRM Updating Data","version":null,"enterprise":true,"description":null},"headings":[{"id":"partial-store-updates","depth":2,"value":"Partial Store Updates"},{"id":"full-store-updates","depth":2,"value":"Full Store Updates"},{"id":"single-row-updates","depth":2,"value":"Single Row Updates"},{"id":"update--refresh","depth":2,"value":"Update & Refresh"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"react","srcPath":"/server-side-model-updating","pageName":"server-side-model-updating"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}