{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/server-side-model-transactions/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"SSRM Transaction Updates allow large numbers of rows in the grid to be added, removed or updated in an efficient manner."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Transactions for the Server Side Row Model (SSRM) work similarly to "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/data-update-transactions/"},"children":[{"type":"text","value":"Client Side Row Model Transactions"}]},{"type":"text","value":". The APIs are almost identical, but there are some important differences (such as the SSRM requiring a 'route') and as such the APIs are not shared."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Applying a SSRM transaction is done using the grid API "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"applyServerSideTransaction(params)"}]},{"type":"text","value":". Here are some introductory code snippets demonstrating how to use the API:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n// Add 1 row at the top level group\ngridOptions.api.applyServerSideTransaction({\n    add: [\n        { id: 24, name: 'Niall Crosby', status: 'Alive and kicking' }\n    ]\n});\n// Remove 1 row under the group 'Ireland', '2002'\ngridOptions.api.applyServerSideTransaction({\n    route: ['Ireland','2002'],\n    remove: [\n        { id: 24, name: 'Niall Crosby', status: 'Alive and kicking' }\n    ]\n});\n// Add, remove and update a bunch of rows under 'United Kingdom'\ngridOptions.api.applyServerSideTransaction({\n    route: ['United Kingdom'],\n    add: [\n        { id: 24, name: 'Niall Crosby', status: 'Alive and kicking' },\n        { id: 25, name: 'Jillian Crosby', status: 'Alive and kicking' }\n    ],\n    update: [\n        { id: 26, name: 'Kevin Flannagan', status: 'Alive and kicking' },\n        { id: 27, name: 'Tony Smith', status: 'Alive and kicking' }\n    ],\n    remove: [\n        { id: 28, name: 'Andrew Connel', status: 'Alive and kicking' },\n        { id: 29, name: 'Bricker McGee', status: 'Alive and kicking' }\n    ]\n});\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here is a basic example with no grouping and a small dataset."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Transactions Flat","name":"transactions-flat","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"serverside\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"transaction-api","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#transaction-api","ariaLabel":"transaction api 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":"Transaction API"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The signature of the grid API "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"applyServerSideTransaction(params)"}]},{"type":"text","value":" is as follows:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"serverSideRowModel","names":"[\"applyServerSideTransaction\"]"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"matching-rows","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#matching-rows","ariaLabel":"matching rows 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":"Matching Rows"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In order for the grid to find rows to update and remove, it needs a way to identify these rows."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the grid callback "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRowId"}]},{"type":"text","value":" is provided, the grid will match on row ID."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the grid callback "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRowId"}]},{"type":"text","value":" is not provided, the grid will match on object reference."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"rowModels","names":"[\"getRowId\"]"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"targeting-groups","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#targeting-groups","ariaLabel":"targeting groups 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":"Targeting Groups"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When updating grouped data, a transaction needs to be targeted against the group. This is done by using the transaction's "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"route"}]},{"type":"text","value":" attribute."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you require to update more than one group, then a transaction needs to be applied for each individual group to update."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates applying transactions to groups. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The buttons "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"New Palm Oil"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"New Rubber"}]},{"type":"text","value":" will add one row to each group accordingly and print the result to the console. The group must be open for the add to happen."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The button "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"New Wool & Amber"}]},{"type":"text","value":" will add one item to each group. Note that two transactions are require to achieve this, one for each group, and print the results to the console. The groups must be open for the add to happen."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The button "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"New Product"}]},{"type":"text","value":" will attempt to add an item to the top level, however it will fail as the top level has been configured to use Infinite Scroll."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The button "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Group State"}]},{"type":"text","value":" will print to the console the state of the existing groups."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Transactions Hierarchy","name":"transactions-hierarchy","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"serverside\",\"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"infinite-scroll","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#infinite-scroll","ariaLabel":"infinite scroll 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":"Infinite Scroll"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Transaction Updates do not work for Infinite Scroll. Instead either move your application to not use Infinite Scroll or  "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/server-side-model-refresh/"},"children":[{"type":"text","value":"Refresh"}]},{"type":"text","value":" to have the grid data update."}]},{"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-high-frequency/"},"children":[{"type":"text","value":"High Frequency Updates"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"SSRM Transactions","version":null,"enterprise":true,"description":null},"headings":[{"id":"transaction-api","depth":2,"value":"Transaction API"},{"id":"matching-rows","depth":2,"value":"Matching Rows"},{"id":"targeting-groups","depth":2,"value":"Targeting Groups"},{"id":"infinite-scroll","depth":2,"value":"Infinite Scroll"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"react","srcPath":"/server-side-model-transactions","pageName":"server-side-model-transactions"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}