{
    "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). The different options for updating are as follows:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"#single-row-updates"},"children":[{"type":"text","value":"Single Row"}]},{"type":"text","value":" - Update Attributes of a Single Row."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/server-side-model-transactions/"},"children":[{"type":"text","value":"Transactions"}]},{"type":"text","value":" - Add, remove and update rows in the grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/server-side-model-high-frequency/"},"children":[{"type":"text","value":"High Frequency"}]},{"type":"text","value":" - Apply transactions at high speed."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If using "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/server-side-model-infinite-scroll/"},"children":[{"type":"text","value":"Infinite Scroll"}]},{"type":"text","value":" ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"serverSideInfiniteScroll=true"}]},{"type":"text","value":") then "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/server-side-model-transactions/"},"children":[{"type":"text","value":"Transactions"}]},{"type":"text","value":" and "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/server-side-model-high-frequency/"},"children":[{"type":"text","value":"High Frequency"}]},{"type":"text","value":" updates are not permitted. The only available option for updating data when using Infinite Scroll is "},{"type":"element","tagName":"a","properties":{"href":"#single-row-updates"},"children":[{"type":"text","value":"Single Row Updates"}]},{"type":"text","value":"."}]},{"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":"The reason row inserts and removes are not allowed while using Infinite Scroll is that they impact the block boundaries.\nFor example suppose a block of 100 rows is received 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 Infinite Scroll, then the update needs to be done on the server and then the grid should be refreshed. 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":"p","properties":{},"children":[{"type":"text","value":"If not using Infinite Scroll ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"serverSideInfiniteScroll=false"}]},{"type":"text","value":"), there are no restrictions, you can use any of the provided ways described here."}]},{"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"}]},{"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 Infinite Scroll, the pattern is to update the original dataset\n(typically on the server) and then get the grid 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/28.2.1/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":"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","699667431","940729948"]}