{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/vue-data-grid/server-side-model-configuration/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section covers the Server-Side Cache and configurations available in the Server-Side Row Model."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As many of the configurations available in the Server-Side Row Model relate to the Server-Side Cache it is important to\nunderstand how the grid organises data obtained from the server into caches."}]},{"type":"element","tagName":"h2","properties":{"id":"server-side-cache","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#server-side-cache","ariaLabel":"server side cache 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":"Server-Side Cache"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid arranges rows into blocks which are in turn stored in a cache as illustrated below:"}]},{"type":"element","tagName":"div","properties":{"style":"text-align: center; margin-top: 20px; margin-bottom: 20px;"},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 625px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/archive/29.2.0/static/4bb7cef1500e3721452b8bd2376576c2/b1b4f/serverSideCache.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 88.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAACK0lEQVQ4y41Ui27bMAzs//9ch2WLV2BtktVekKZ+6EG97RtIJ6nbLlsEEBQo60zyTrybxhHjOKKUIsZrmibZs+ezsZTZj+Xy3UfLOcs3d9ZFGIoo44SHhwdU6wrfv1eoqgr391/QdR1SmaBsgI8Z19Z4Suyu1xbeWQRPIKughhZa9TC6F09WIwYHbTQMhUsFS3sHOKj5QkpJjIOnWyg5I8WInBKILKx7Azyvz4DaIAaPGCNSTHg5vGC72WDztAGRm+MpS+bGuncZ/h2QM4xeLuWU0Xc9mrpBXTdwzkvWpYxoX/fo+vYGQG0RA81ZBo+cIqaRWeVyw6kdAdZqvLbHG3rIpJCCswM8aZAdhBwyPdwibo1CPwzIyWNaALCdZTazvCiZy2M9lTxr6y1WTqRExGCvSofvzKRELjdKD7l/1XqN9XoNra0QdSal7VrkaPFr94Ttdoe6fsbPx0dU1Q8cDgfJdM4wMJtJGHVEMFpDKQXvg8SyAL6i63tEr/Fy2OO5brDf79E0DXbbHY7H4wzIPQzeIPhZ3OxTdCeiSETPngVuyN9Ssl2AzSYZB7r8QADJSsnTmFnzFzI+kTJ8IMV7D7IkdhY7k6RVh3Yhm496fP9SmJSYpFf1c41vqxVWX1ewlgSQWW6Pv6G0vvGlsHgjSyLIu5VxxbJZxFiH3MP/Cvs8bcQ8wZGFcxaODLwj2QfP00Zdps0/x5e2Hsp4iL9ifDYYB+fj1SF7HrB/AABgeacGvBOwAAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"serverSideCache","title":"serverSideCache","src":"/archive/29.2.0/static/4bb7cef1500e3721452b8bd2376576c2/b1b4f/serverSideCache.png","srcSet":["/archive/29.2.0/static/4bb7cef1500e3721452b8bd2376576c2/56d15/serverSideCache.png 200w","/archive/29.2.0/static/4bb7cef1500e3721452b8bd2376576c2/d9f49/serverSideCache.png 400w","/archive/29.2.0/static/4bb7cef1500e3721452b8bd2376576c2/b1b4f/serverSideCache.png 625w"],"sizes":["(max-width:","625px)","100vw,","625px"],"style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;","loading":"lazy","decoding":"async"},"children":[]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"div","properties":{},"children":[{"type":"text","value":"Fig 1. Server-side Cache"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There is a cache containing the top-level rows (i.e. on the root node) and for each individual "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/server-side-model-grouping/"},"children":[{"type":"text","value":"Row Grouping"}]},{"type":"text","value":"\nlevel. When the grid initialises, it will retrieve an initial number (as per configuration) of blocks containing rows,\nand as the user scrolls down more blocks will be loaded."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Several "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/server-side-model-api-reference/"},"children":[{"type":"text","value":"Configurations"}]},{"type":"text","value":", such as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cacheBlockSize"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"maxBlocksInCache"}]},{"type":"text","value":", are expressed in terms of the Server-Side Cache."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates some configurations. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cacheBlockSize = 50"}]},{"type":"text","value":". This sets the block size to 50, thus rows are read back 50 at a time."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"maxBlocksInCache = 2"}]},{"type":"text","value":". This means the grid will keep two blocks in memory only. To see this in action, scroll past row 100 (which will require a third block to be loaded), then quickly scroll back to the start and you will observe the first block needs to be reloaded."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Cache Configurations","name":"cache-configurations","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"serverside\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"block-loading-debounce","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#block-loading-debounce","ariaLabel":"block loading debounce 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":"Block Loading Debounce"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It may be desirable to scroll through the entire dataset without the need for intermediate blocks to be loaded. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows how debouncing block loading can be achieved. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The response from the server sets the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowCount"}]},{"type":"text","value":" property so that the vertical scrollbars bounds are set such that the entire dataset can be scrolled through."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"blockLoadDebounceMillis = 1000"}]},{"type":"text","value":" - loading of blocks is delayed by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"1000ms"}]},{"type":"text","value":". This allows for skipping over blocks when scrolling to advanced positions."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"debug = true"}]},{"type":"text","value":". This means the browser's dev console will show loading block details."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Block Loading Debounce","name":"block-load-debounce","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"serverside\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"initial-scroll-position","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#initial-scroll-position","ariaLabel":"initial scroll position 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":"Initial Scroll Position"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When using the server-side row model the initial scroll position of the grid can be set. This is achieved by calling\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.ensureIndexVisible()"}]},{"type":"text","value":" after setting the data source to the grid. "}]},{"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":"It is important that the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"serverSideInitialRowCount"}]},{"type":"text","value":" property is set to a value that is greater than the sum of the row index provided to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.ensureIndexVisible()"}]},{"type":"text","value":" and the number of rows displayed in the grid's viewport."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is demonstrated in the example below, note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"serverSideInitialRowCount"}]},{"type":"text","value":" property has been set to provide an initial length to the vertical scrollbars."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"After the datasource has been set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.ensureIndexVisible(5000, 'top')"}]},{"type":"text","value":" is called, causing the grid to scroll down to row "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"5000"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Initial Scroll Position","name":"initial-scroll-position","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"serverside\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"providing-row-ids","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#providing-row-ids","ariaLabel":"providing row ids 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":"Providing Row IDs"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Some features of the server-side row model require Row IDs in order to be enabled or to enhance their behaviour, these features include "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/server-side-model-selection/"},"children":[{"type":"text","value":"Row Selection"}]},{"type":"text","value":",\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/server-side-model-updating-transactions/"},"children":[{"type":"text","value":"Transactions"}]},{"type":"text","value":" and "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/server-side-model-updating-refresh/"},"children":[{"type":"text","value":"Refreshing Data"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The server-side row model requires unique Row IDs in order to identify rows after new data loads. For example, if a sort or filter is applied which results in new rows being loaded, the grid needs\nto be able to identify the previously known rows."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Row IDs are provided by the application using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRowId()"}]},{"type":"text","value":" callback:"}]},{"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":"p","properties":{},"children":[{"type":"text","value":"When implementing "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRowId()"}]},{"type":"text","value":" you must ensure the rows have unique Row IDs across the entire data set. Using an ID that\nis provided in the data such as a database Primary Key is recommended."}]},{"type":"element","tagName":"h3","properties":{"id":"supplying-unique-group-ids","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#supplying-unique-group-ids","ariaLabel":"supplying unique group ids 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":"Supplying Unique Group IDs"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When grouping there may not be an easy way to get unique Row IDs from the data for group levels. This is because a group\nrow doesn't always correspond to one Row in the store. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To handle this scenario, the grid provides "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"parentKeys"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"level"}]},{"type":"text","value":" properties in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"GetRowIdParams"}]},{"type":"text","value":" supplied to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRowId()"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"These can be used to create unique group id's as shown below:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|const gridOptions = {\n|   getRowId: params => {\n|       const parentKeysJoined = (params.parentKeys || []).join('-');\n|       if (params.data.id != null) {\n|           parentKeysJoined + params.data.id;\n|       }\n|       const rowGroupCols = params.columnApi.getRowGroupColumns();\n|       const thisGroupCol = rowGroupCols[params.level];\n|       parentKeysJoined + params.data[thisGroupCol.getColDef().field];\n|    }\n|}\n"}]},{"type":"element","tagName":"h2","properties":{"id":"debug-info","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#debug-info","ariaLabel":"debug info 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":"Debug Info"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When using the server-side row model it can be helpful to gather the state of each block. This can be gathered by using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.getCacheBlockState()"}]},{"type":"text","value":" or alternatively you can enable "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"debug: true"}]},{"type":"text","value":" in the grid properties to see this output logged to the console whenever blocks are loaded. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below, note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid option "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"debug: true"}]},{"type":"text","value":" has been enabled"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When scrolling through the grid, block information is logged to the console"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Cache Block State","name":"cache-block-state","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"serverside\", \"menu\", \"columnpanel\"] }"},"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 about "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.2.0/server-side-model-sorting/"},"children":[{"type":"text","value":"SSRM Sorting"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"SSRM Configuration","version":null,"enterprise":true,"description":null},"headings":[{"id":"server-side-cache","depth":2,"value":"Server-Side Cache"},{"id":"block-loading-debounce","depth":2,"value":"Block Loading Debounce"},{"id":"initial-scroll-position","depth":2,"value":"Initial Scroll Position"},{"id":"providing-row-ids","depth":2,"value":"Providing Row IDs"},{"id":"supplying-unique-group-ids","depth":3,"value":"Supplying Unique Group IDs"},{"id":"debug-info","depth":2,"value":"Debug Info"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"vue","srcPath":"/server-side-model-configuration","pageName":"server-side-model-configuration"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}