{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-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":"text","value":"Server-Side Cache"},{"type":"element","tagName":"a","properties":{"href":"#server-side-cache","ariaLabel":"server side cache permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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.3.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.3.0/static/4bb7cef1500e3721452b8bd2376576c2/b1b4f/serverSideCache.png","srcSet":["/archive/29.3.0/static/4bb7cef1500e3721452b8bd2376576c2/56d15/serverSideCache.png 200w","/archive/29.3.0/static/4bb7cef1500e3721452b8bd2376576c2/d9f49/serverSideCache.png 400w","/archive/29.3.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.3.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.3.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":"text","value":"Block Loading Debounce"},{"type":"element","tagName":"a","properties":{"href":"#block-loading-debounce","ariaLabel":"block loading debounce permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"text","value":"Initial Scroll Position"},{"type":"element","tagName":"a","properties":{"href":"#initial-scroll-position","ariaLabel":"initial scroll position permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"text","value":"Providing Row IDs"},{"type":"element","tagName":"a","properties":{"href":"#providing-row-ids","ariaLabel":"providing row ids permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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.3.0/server-side-model-selection/"},"children":[{"type":"text","value":"Row Selection"}]},{"type":"text","value":",\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/server-side-model-updating-transactions/"},"children":[{"type":"text","value":"Transactions"}]},{"type":"text","value":" and "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.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":"text","value":"Supplying Unique Group IDs"},{"type":"element","tagName":"a","properties":{"href":"#supplying-unique-group-ids","ariaLabel":"supplying unique group ids permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"text","value":"Debug Info"},{"type":"element","tagName":"a","properties":{"href":"#debug-info","ariaLabel":"debug info permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"text","value":"Next Up"},{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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.3.0/server-side-model-sorting/"},"children":[{"type":"text","value":"SSRM Sorting"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"SSRM Configuration","version":null,"enterprise":true,"sideMenu":null,"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":"angular","srcPath":"/server-side-model-configuration","pageName":"server-side-model-configuration"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}