{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/server-side-model/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section gives an overview of the Server-Side Row Model (SSRM) and provides guidance on when it should be used."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Server-Side Row Model (SSRM) allows applications to work with very large datasets. This is done by lazy-loading data from the server via the following mechanisms:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Lazy loading child records from group rows as group rows are expanded."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Infinite scrolling through data, loading more data as the application scrolls."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Using the SSRM to view a large dataset is demonstrated below:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"gif","properties":{"src":"server-side-showcase.gif","alt":"Server-Side Showcase"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Before diving into the details of how to use the SSRM, the next section provides an overview and explains when it should be used instead of the default "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/client-side-model/"},"children":[{"type":"text","value":"Client-Side Row Model"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"overview","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#overview","ariaLabel":"overview 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":"Overview"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When designing a grid-based application, one of the key considerations is how much data needs to be sent from the server to the client. The answer to this determines which Row Model should be selected for the grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"client-side-row-model","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#client-side-row-model","ariaLabel":"client side row model 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":"Client-Side Row Model"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The simplest approach is to send all row data to the browser in response to a single request at initialisation. For this use case the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/client-side-model/"},"children":[{"type":"text","value":"Client-Side Row Model"}]},{"type":"text","value":" has been designed."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This scenario is illustrated below where 10,000 records are loaded directly into the browser:"}]},{"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: 800px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/archive/29.1.0/static/ab5a51aeb60fe529563125cc7214e374/2eb59/in-memory-row-model.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: 37.99999999999999%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAABYlAAAWJQFJUiTwAAABr0lEQVQoz52Pz2sTURSF5x9xqYKSZW21RSNZxJ3rCiKioESkpVWDNv5YFLqTbESqVoQKSotSERVXuhG7KmhKbY0kZGJjZjKZmUxmmjedN/NJX7ELRRce+N597xwu912NvyhJkj+Id+7beRzHxDIiiSVSSuVppiewuwLHF9i+wOoKNkLJv5WoU2wErJYrlKs6rt1WnnZn4SOTc4uMzbxn7ME7Ru6+pvj8gwpblsP39R8YZhu93qBS1fEDQSQTwihm8uVXsrcXFbderClPGx8f5drN6+QnClwqTJAbvcjU/af0Ilg3PUXTClStN10Mu4fjbdJweuQelxieXuLEvSXOPvpEywvRdu3eR2qgn/70EfqOptlz6ABXig9/WzHeWfOXWt2QGwurXJ5bIT+/wtVnX7C6Idre/Sn60kMMZjMcPJYhdXiAfHFGNQUiwukErJWrfKvUqNUbdHyBlAlGRzDyZJnzs5/JzZbUb7eGaIPHT5E5eY7s6QuKoeEzFKbnEZtgOj3aXki7s43VEaraXkgkY94um0y9KivelAxknKBVmw664aI3XWqGy9bbdHz+Vz8BtaUpYnfnEpgAAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"in-memory-row-model","title":"in-memory-row-model","src":"/archive/29.1.0/static/ab5a51aeb60fe529563125cc7214e374/78d47/in-memory-row-model.png","srcSet":["/archive/29.1.0/static/ab5a51aeb60fe529563125cc7214e374/56d15/in-memory-row-model.png 200w","/archive/29.1.0/static/ab5a51aeb60fe529563125cc7214e374/d9f49/in-memory-row-model.png 400w","/archive/29.1.0/static/ab5a51aeb60fe529563125cc7214e374/78d47/in-memory-row-model.png 800w","/archive/29.1.0/static/ab5a51aeb60fe529563125cc7214e374/64756/in-memory-row-model.png 1200w","/archive/29.1.0/static/ab5a51aeb60fe529563125cc7214e374/42cbc/in-memory-row-model.png 1600w","/archive/29.1.0/static/ab5a51aeb60fe529563125cc7214e374/2eb59/in-memory-row-model.png 2048w"],"sizes":["(max-width:","800px)","100vw,","800px"],"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":"p","properties":{},"children":[{"type":"text","value":"Once the data is loaded into the grid using the Client-Side Row Model, the grid can then do sorting, filtering, grouping etc. on the data inside the grid without requiring further assistance from the application."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Client-Side Row Model only renders the rows currently visible using "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/dom-virtualisation/"},"children":[{"type":"text","value":"DOM Virtualisation"}]},{"type":"text","value":", so the upper limit of rows is governed by the browser's memory footprint and data transfer time, rather than any restrictions inside the grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"server-side-row-model","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#server-side-row-model","ariaLabel":"server side row model 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 Row Model"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However, many real world applications contain much larger datasets, often involving millions of records. In this case it simply isn't feasible to load all the data into the browser in one go. Instead the data will need to be lazy-loaded as required and then purged to limit the memory footprint in the browser."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is precisely the problem the SSRM addresses, along with delegating server-side operations such as filtering, sorting, grouping and pivoting."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following diagram shows the approach used by the SSRM. Here there are 10 million records, however the number of records is only constrained by the limits of the server-side:"}]},{"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: 800px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/archive/29.1.0/static/6920c5fa383a7df224b0190f37fd7d64/704c2/enterprise-row-model.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: 37%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAABYlAAAWJQFJUiTwAAABoElEQVQoz52RTWsTYRSF37/jSlEoVmbhR1sQ1yKCglgUwUoLikRoUbFGF4KCG9uFFmzoQiiUQEFoVSKtVFKtSahtsE1iZpKOmmSczEdm5p15pNMus/LC5XK4cDgPR/AfE+1fGfgEHQfpObiOTRAECK1ps7S5w0Jhh/QXlfRqlXd5FdtxMVotDMPAsixM8y+W7RG6NeR2EszPOB58KmyTyZWo1HR8z0N8WNti/PkrkhMpEk+nuP1kkhuPJinXW5R+/mKrolPRGpSqOuW6R1t7i/FGEBVvkcp2UB5/5GhymbtzxTi1yKyuc6RXQTmh0H96AOWUwplLV2l3ZFdc2cxQnRH4xTGmViyuv/7KyEyBB+kivgwRiyt5Dhzu4ZDSS89AHwePH+PkxSsYth8b7CJrmkaz8TvW/p/3fHsh8DZGmc7aXH6ZZSiVZ3R2AxlGiKXcD85eS3B+5A4Xbo5xbjjB4P1ntN09Q13XUVWVek2Nywhby1jzAsrjrNXgYfo79+Y2mc/pe8i7MU1X0nYlphPEa7kBURR1bzh0wV4n8htd//8AEwnib84IL0kAAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"enterprise-row-model","title":"enterprise-row-model","src":"/archive/29.1.0/static/6920c5fa383a7df224b0190f37fd7d64/78d47/enterprise-row-model.png","srcSet":["/archive/29.1.0/static/6920c5fa383a7df224b0190f37fd7d64/56d15/enterprise-row-model.png 200w","/archive/29.1.0/static/6920c5fa383a7df224b0190f37fd7d64/d9f49/enterprise-row-model.png 400w","/archive/29.1.0/static/6920c5fa383a7df224b0190f37fd7d64/78d47/enterprise-row-model.png 800w","/archive/29.1.0/static/6920c5fa383a7df224b0190f37fd7d64/64756/enterprise-row-model.png 1200w","/archive/29.1.0/static/6920c5fa383a7df224b0190f37fd7d64/42cbc/enterprise-row-model.png 1600w","/archive/29.1.0/static/6920c5fa383a7df224b0190f37fd7d64/704c2/enterprise-row-model.png 2286w"],"sizes":["(max-width:","800px)","100vw,","800px"],"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":"p","properties":{},"children":[{"type":"text","value":"As the user performs operations such as expanding groups, the grid issues requests to the server for more data."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"features","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#features","ariaLabel":"features 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":"Features"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You may benefit from the combination of all these features or just be interested in a subset. The features of the SSRM are:"}]},{"type":"text","value":"\n"},{"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":"Lazy-Loading of Groups:"}]},{"type":"text","value":" The grid will load the top level rows only. Children of groups are only loaded when the user expands the group."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Infinite Scrolling:"}]},{"type":"text","value":" Rows are read back from the server in blocks to provide the experience of infinite scrolling. This allows viewing very large datasets in the browser by only bringing back data one block of data at a time."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Server-Side Grouping, Pivot and Aggregation:"}]},{"type":"text","value":" Because the data is coming back from the server one group level at\na time, this allows you to do aggregation on the server, returning the aggregated results for the top level parent\nrows. For example, you could include 'employee count' as an attribute on the returned manager record, to say how many\nemployees a manager manages."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Slice and Dice:"}]},{"type":"text","value":" Assuming your server-side can build the data query, you can allow the user to use the Grid UI\nto drag columns around to select what columns you want to group by and aggregate on. What the user selects will then\nbe forwarded to your datasource as part of the request. This feature is advanced and will require some difficult\nserver-side coding from you, however when done your users will have an experience of slicing and dicing large data in\nreal time, something previously only available in expensive reporting tools, which you can now embed into your\nJavaScript application."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"full-stack-examples","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#full-stack-examples","ariaLabel":"full stack examples 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":"Full Stack Examples"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To accompany the examples in the documentation, we also provide the following full stack examples for reference.\nWe advise using the examples in the documentation to learn about the Server-Side Row Model and then using the full\nstack examples as reference."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The full stack examples are as follows:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/server-side-operations-nodejs/"},"children":[{"type":"text","value":"Node.js connecting to MySQL"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/server-side-operations-oracle/"},"children":[{"type":"text","value":"Java Server connecting to Oracle"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/server-side-operations-graphql/"},"children":[{"type":"text","value":"GraphQL connecting to MySQL"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/server-side-operations-spark/"},"children":[{"type":"text","value":"Java Server connecting to Apache Spark"}]}]},{"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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continue to the next section to learn about the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/server-side-model-api-reference/"},"children":[{"type":"text","value":"SSRM API Reference"}]},{"type":"text","value":"."}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Server-Side Row Model","version":null,"enterprise":true,"description":null},"headings":[{"id":"overview","depth":2,"value":"Overview"},{"id":"client-side-row-model","depth":3,"value":"Client-Side Row Model"},{"id":"server-side-row-model","depth":3,"value":"Server-Side Row Model"},{"id":"features","depth":2,"value":"Features"},{"id":"full-stack-examples","depth":2,"value":"Full Stack Examples"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"angular","srcPath":"/server-side-model","pageName":"server-side-model"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}