{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/vue-data-grid/server-side-model-infinite-scroll/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Server-side Row Model (SSRM) can load rows on demand as the user scrolls down through the rows in the grid using\nan "},{"type":"element","tagName":"a","properties":{"href":"https://en.wiktionary.org/wiki/infinite_scroll"},"children":[{"type":"text","value":"Infinite Scrolling"}]},{"type":"text","value":" technique."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Infinite Scroll is useful when there is too much data to be retrieved in a single request from the server. "}]},{"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":"Note that it is still possible to present large amounts of data inside grid when "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/server-side-model-grouping/"},"children":[{"type":"text","value":"Row Grouping"}]},{"type":"text","value":" is applied. For example a dataset could have 10 million rows, but only 200 rows are required at any group level - in this case Infinite Scroll is not needed to show the large dataset."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-infinite-scroll","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#enabling-infinite-scroll","ariaLabel":"enabling 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":"Enabling Infinite Scroll"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To enable Infinite Scroll in the SSRM, set the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"serverSideInfiniteScroll=true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates Infinite Scroll in the SSRM. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Infinite Scroll is enabled via the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"serverSideInfiniteScroll=true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"100 rows are loaded at a time as the user scrolls down through the grid."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Enabling Infinite Scroll","name":"infinite-scroll","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"serverside\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"configuring-infinite-scroll","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#configuring-infinite-scroll","ariaLabel":"configuring 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":"Configuring Infinite Scroll"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is useful to understand how the grid organises data into caches for Infinite Scrolling as many of the\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/server-side-model-configuration/"},"children":[{"type":"text","value":"Configurations"}]},{"type":"text","value":" are expressed in terms of the Server-Side Cache such as\n"},{"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":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid arranges rows into blocks which are in turn stored in a cache. There is a cache containing the top-level rows\n(i.e. on the root node) and for each individual "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/server-side-model-row-grouping/"},"children":[{"type":"text","value":"Row Grouping"}]},{"type":"text","value":" level. When the grid\ninitialises, it will retrieve an initial number (as per configuration) of blocks containing rows. As the user scrolls down,\nmore blocks will be loaded."}]},{"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/28.0.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/28.0.0/static/4bb7cef1500e3721452b8bd2376576c2/b1b4f/serverSideCache.png","srcSet":["/archive/28.0.0/static/4bb7cef1500e3721452b8bd2376576c2/56d15/serverSideCache.png 200w","/archive/28.0.0/static/4bb7cef1500e3721452b8bd2376576c2/d9f49/serverSideCache.png 400w","/archive/28.0.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":"The example below demonstrates some configurations that are specific to Infinite Scroll. 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":"serverSideInfiniteScrolling = true"}]},{"type":"text","value":", which turns on Infinite Scrolling. The grid loads rows one block at a time as the user scrolls down."}]},{"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":"Configuring Infinite Scroll","name":"configuring-infinite-scroll","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. In other words, Infinite Scrolling is turned off, however rows are still loaded in blocks."}]},{"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":"debugging-infinite-scroll","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#debugging-infinite-scroll","ariaLabel":"debugging 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":"Debugging Infinite Scroll"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When experimenting with different Infinite Scroll "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/server-side-model-configuration/"},"children":[{"type":"text","value":"Configurations"}]},{"type":"text","value":" it can useful to\nenable debug mode as follows:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    debug: true\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The screenshot below is taken from the browser's dev console when "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"debug"}]},{"type":"text","value":" is enabled:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"image-caption","properties":{"src":"debug.png","constrained":"true","alt":"Console Output"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Notice that the current cache status is logged showing block details such as the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"startRow"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"endRow"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This can be very useful when debugging issues on the server."}]},{"type":"element","tagName":"h2","properties":{"id":"infinite-scroll-restrictions","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#infinite-scroll-restrictions","ariaLabel":"infinite scroll restrictions 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 Restrictions"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Infinite Scroll allows displaying a large amount of data by breaking it into blocks\nand lazy loading the blocks as the users scrolls. However, it comes with the following restrictions."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"In Grid Sorting"}]},{"type":"text","value":"\nBecause data is read back in blocks, the grid cannot sort the data,\nas it does not have all the data loaded. All sorting must be done on the server\nas described in "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/server-side-model-sorting/"},"children":[{"type":"text","value":"Sorting"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"In Grid Filtering"}]},{"type":"text","value":"\nBecause data is read back in blocks, the grid cannot filter the data,\nas it does not have all the data loaded. All filtering must be done on the server\nas described in "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/server-side-model-filtering/"},"children":[{"type":"text","value":"Filtering"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Updating Data"}]},{"type":"text","value":"\nUpdating data in the grid using "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/server-side-model-transactions/"},"children":[{"type":"text","value":"Transactions"}]},{"type":"text","value":" is not supported\nwhen Infinite Scrolling."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is because applying updates would potentially move rows between blocks, which would not be possible\nif all blocks are not loaded."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Changing Data"}]},{"type":"text","value":"\nIf data on the server is changing with regards inserts and deletes, this will cause problems with the\nInfinite Scroll. This is because data is read back from the server in blocks.\nIf the data is receiving updates or deletes, then what block a particual row should be in can change.\nFor example consider the following scenario:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid asks for rows 0 to 99 (i.e. first block of 100 rows) and these get read from a database."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Another application inserts a row at index 50."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid asks for rows 100 to 199 (the second block of 100 rows) and again these get read from the database."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this scenario the grid will have the last row in the first block appear again as the first row in the second\nblock. This is because the row was at index 99 before the insert and then at index 100 after the insert."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If data is changing such that row indexes will change and result in duplicate or missing rows across\nblocks, then it is best either avoid Infinite Scrolling or use a snapshot of data to prevent data updates."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"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/28.0.0/server-side-model-grouping/"},"children":[{"type":"text","value":"SSRM Row Grouping"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"SSRM Infinite Scroll","version":null,"enterprise":true,"description":null},"headings":[{"id":"enabling-infinite-scroll","depth":2,"value":"Enabling Infinite Scroll"},{"id":"configuring-infinite-scroll","depth":2,"value":"Configuring Infinite Scroll"},{"id":"block-loading-debounce","depth":2,"value":"Block Loading Debounce"},{"id":"debugging-infinite-scroll","depth":2,"value":"Debugging Infinite Scroll"},{"id":"infinite-scroll-restrictions","depth":2,"value":"Infinite Scroll Restrictions"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"vue","srcPath":"/server-side-model-infinite-scroll","pageName":"server-side-model-infinite-scroll"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}