{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/master-detail-refresh/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is desirable for the Detail Grid to refresh when fresh data is available for it. The grid will attempt to refresh the data in the Detail Grid when the parent Master Grid row is updated."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The update actions that cause the Detail Rows to refresh are as follows:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A change to "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/data-update-row-data/"},"children":[{"type":"text","value":"Row Data"}]},{"type":"text","value":" updates the parent row and "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/row-ids/"},"children":[{"type":"text","value":"Row IDs"}]},{"type":"text","value":" are provided*."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/data-update-transactions/"},"children":[{"type":"text","value":"Transaction Update"}]},{"type":"text","value":" updates the parent row."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The method "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowNode.setRowData(data)"}]},{"type":"text","value":" is called on the parent row's "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/row-object/"},"children":[{"type":"text","value":"Row Node"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\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":"*If Row ID's are not provided, the grid will not match rows and treat the new Row Data as a new set. In this case, all rows are destroyed and re-created."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"How the refresh occurs depends on the Refresh Strategy set on the Detail Cell Renderer. There are three Refresh Strategies which are as follows:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Refresh Rows"}]},{"type":"text","value":" - The detail panel calls "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getDetailRowData(params)"}]},{"type":"text","value":" again and sets the row data in the Detail Grid by using it's "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setRowData"}]},{"type":"text","value":" grid API. This will keep the Detail Grid instance thus any changes in the Detail Grid (scrolling, column positions etc) will be kept. If the Detail Grid has "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/row-ids/"},"children":[{"type":"text","value":"getRowId()"}]},{"type":"text","value":" implemented, then more grid context will be kept such as row selection etc."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Refresh Everything"}]},{"type":"text","value":" -The Detail Panel will get destroyed and a fresh Detail Panel will be redrawn. This will result in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getDetailRowData(params)"}]},{"type":"text","value":" getting called again. The Detail Grid will be a new instance and any changes in the Detail Grid (scrolling, column position, row selection etc) will be lost. If the Detail Panel is using a custom template, then the template will be re-created. Use this option if you want to update the template or you want a fresh detail grid instance."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Do Nothing"}]},{"type":"text","value":" - The Detail Panel will do nothing. The method "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getDetailRowData(params)"}]},{"type":"text","value":" will not be called. If any refresh is required within the detail grid, this will need to be handled independently by the application. Use this if your refresh requirements are not catered for by the other two options."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The strategy is set via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"refreshStrategy"}]},{"type":"text","value":" parameter of the Detail Cell Renderer params. Valid values are "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rows"}]},{"type":"text","value":" for Refresh Rows, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"everything"}]},{"type":"text","value":" for Refresh Everything and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"nothing"}]},{"type":"text","value":" for Refresh Nothing. The default strategy is Refresh Rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below are different examples to demonstrate each of the refresh strategies. Each example is identical with the exception of the refresh strategy used. Note the following about each example:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Each Detail Grid has a title with the record's name and call count eg 'Nora Thomas 24 calls'. This is set by providing a custom Detail Cell Renderer template/ Only the detail strategy Refresh Everything will get this updated."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid refreshes the first master row every two seconds as follows:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The call count is incremented."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Half of the call records (displayed in the detail grid) have their durations updated."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All refresh strategies will have the Master Grid updated (as the strategy applies to the Detail Grid only), however each strategy will have the Detail Grid updated differently."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"refresh-rows","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#refresh-rows","ariaLabel":"refresh 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":"Refresh Rows"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This example shows the Refresh Rows strategy. Note the following:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Detail Cell Renderer params has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"refreshStrategy='rows'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Detail Grid is "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" recreated. The callback "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getDetailRowData(params)"}]},{"type":"text","value":" is called. The row data in the Detail Grid is updated to reflect the new values. The grid's context (column position, vertical scroll) is kept. Try interacting with the Detail Grid for the first row (move columns, vertical scroll) and observe the grid is kept intact."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Because the Detail Grid is configured with "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/row-ids/"},"children":[{"type":"text","value":"getRowId()"}]},{"type":"text","value":" the data rows are updated rather than replaced. This allows context such maintaining Row Selection and flashing cells on data changes."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Detail Grid title 'Nora Thomas 24 calls' doesn't change as the template is only set once for the detail panel."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Refresh Rows","name":"refresh-rows","type":"mixed","options":"{ \"enterprise\": true, \"exampleHeight\": 550, \"modules\": [\"clientside\", \"masterdetail\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"refresh-everything","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#refresh-everything","ariaLabel":"refresh everything 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":"Refresh Everything"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This example shows the Refresh Everything strategy. Note the following:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Detail Cell Renderer params has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"refreshStrategy='everything'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The callback "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getDetailRowData(params)"}]},{"type":"text","value":" is called. The Detail Grid is recreated and contains the most recent data. The grid's context (column position, vertical scroll) is lost."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Detail Grid providing "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/row-ids/"},"children":[{"type":"text","value":"getRowId()"}]},{"type":"text","value":" is irrelevant as the Detail Grid is recreated."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The detail grid title 'Nora Thomas 24 calls' updates with the new call count, as the refresh results in the template getting reset."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Refresh Everything","name":"refresh-everything","type":"mixed","options":"{ \"enterprise\": true, \"exampleHeight\": 550, \"modules\": [\"clientside\", \"masterdetail\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"refresh-nothing","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#refresh-nothing","ariaLabel":"refresh nothing 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":"Refresh Nothing"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This example shows the Refresh Nothing strategy. Note the following:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Detail Cell Renderer params has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"refreshStrategy='nothing'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"No refresh is attempted."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The callback "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getDetailRowData(params)"}]},{"type":"text","value":" is "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" called."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Detail Grid shows old data and the Detail Grid's title remains unchanged."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Refresh Nothing","name":"refresh-nothing","type":"mixed","options":"{ \"enterprise\": true, \"exampleHeight\": 550, \"modules\": [\"clientside\", \"masterdetail\", \"menu\", \"columnpanel\"] }"},"children":[]}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Master / Detail - Detail Refresh","version":null,"enterprise":true,"description":null},"headings":[{"id":"refresh-rows","depth":2,"value":"Refresh Rows"},{"id":"refresh-everything","depth":2,"value":"Refresh Everything"},{"id":"refresh-nothing","depth":2,"value":"Refresh Nothing"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"react","srcPath":"/master-detail-refresh","pageName":"master-detail-refresh"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}