{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/vue-data-grid/server-side-model-sorting/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section covers Server-Side Sorting using the Server-Side Row Model."}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-sorting","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#enabling-sorting","ariaLabel":"enabling sorting 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 Sorting"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Sorting is enabled in the grid via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sortable"}]},{"type":"text","value":" column definition attribute."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        { field: 'country', sortable: true },\n        { field: 'year', sortable: true },\n        { field: 'sport' },\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For more details on sorting configurations see the section on "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/row-sorting/"},"children":[{"type":"text","value":"Row Sorting"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"client-side-sorting","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#client-side-sorting","ariaLabel":"client side sorting 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 Sorting"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/server-side-model-row-stores/"},"children":[{"type":"text","value":"Infinite Scroll"}]},{"type":"text","value":" is not active, the grid has all the rows needed to sort on the client. As such, the SSRM will sort on the client-side."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates Client-side Sorting with no 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 is not using "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/server-side-model-row-stores/"},"children":[{"type":"text","value":"Infinite Scroll"}]},{"type":"text","value":", the property  "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"serverSideInfiniteScroll"}]},{"type":"text","value":" is not set."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"All columns have sorting enabled using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultColDef.sortable = true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Rows are loaded once. All sorting is then subsequently done by the grid."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Client-side Sorting","name":"full-sort-client-side","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"serverside\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"server-side-sorting","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#server-side-sorting","ariaLabel":"server side sorting 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 Sorting"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/server-side-model-row-stores/"},"children":[{"type":"text","value":"Infinite Scroll"}]},{"type":"text","value":" is active, the grid does not have all the rows needed to sort on the client. As such, the server-side row model will request rows again each time the sort changes and expect the server to sort the rows."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The request object sent to the server contains sort metadata in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sortModel"}]},{"type":"text","value":" property. An example of the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sortModel"}]},{"type":"text","value":" is as follows:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Example request with sorting info"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    sortModel"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" colId"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'country'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" sort"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'asc'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" colId"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'year'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" sort"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'desc'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// other properties"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Notice "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sortModel"}]},{"type":"text","value":" is an array with each item representing a Column with an active sort, containing the Column ID and the Sort Direction."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates sorting using the SSRM and Infinite Scrolling. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid has Infinite Scrolling enabled via "},{"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":"All columns have sorting enabled via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultColDef.sortable = true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The server uses the metadata contained in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sortModel"}]},{"type":"text","value":" to sort the rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Open the browser's dev console to view the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sortModel"}]},{"type":"text","value":" supplied in the request to the datasource."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Try single / multi column (using "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Shift"}]},{"type":"text","value":" key) sorting by clicking on column headers."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Server Side Sorting","name":"infinite-sorting","type":"generated","options":"{ \"enterprise\": true, \"extras\": [\"alasql\"], \"modules\": [\"serverside\"] }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As previously mentioned, when not using Infinite Scroll, the grid will sort on the client. To force Server-side Sorting, regardless of Infinite Scroll, set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"serverSideSortOnServer=true"}]},{"type":"text","value":". This is demonstrated 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 is not using "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/server-side-model-row-stores/"},"children":[{"type":"text","value":"Infinite Scroll"}]},{"type":"text","value":", the property  "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"serverSideInfiniteScroll"}]},{"type":"text","value":" is not set."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"serverSideSortOnServer=true"}]},{"type":"text","value":" to force Server-side Sorting."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Rows are loaded every time the sort order changes."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"No Infinite Scroll Server-side Sorting","name":"full-sort-server-side","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"serverside\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"client-side-row-group-sorting","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#client-side-row-group-sorting","ariaLabel":"client side row group sorting 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 Group Sorting"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Sorting row groups Client-side (Infinite Scroll is off) happens inside the grid by default."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows Client-side sorting of groups. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid is not using "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/server-side-model-row-stores/"},"children":[{"type":"text","value":"Infinite Scroll"}]},{"type":"text","value":", the property  "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"serverSideInfiniteScroll"}]},{"type":"text","value":" is not set."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"All columns have sorting enabled via defaultColDef.sortable = true."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click the Gold column header to sort, open the browser console and note there are no requests to the server - the grid sorts client-side without reloading the rows."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Client-side Group Sorting","name":"group-sort-client-side","type":"generated","options":"{ \"enterprise\": true, \"extras\": [\"alasql\"], \"modules\": [\"serverside\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"server-side-row-group-sorting","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#server-side-row-group-sorting","ariaLabel":"server side row group sorting 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 Group Sorting"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When grouping and Server-side sorting, the grid will reload the data if it needs to be sorted."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Not all rows need to be reloaded when a sort changes. Group levels only need to be reloaded (sorted) if the sort impacts the group level. A sort will impact a group level if the sort is on a grouped column, or the sort is on an aggregated column (ie "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.aggFunc"}]},{"type":"text","value":" is set)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Sorting is done on the Server-side via grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"serverSideSortOnServer=true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Sorting by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" reloads the top level groups."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Sorting by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Sport"}]},{"type":"text","value":" reloads the second level group, the top level is not impacted."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Sorting by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" does not reload any groups. Only leaf-levels are reloaded."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Sorting by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Gold"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Silver"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Bronze"}]},{"type":"text","value":" does reload groups, as they columns have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"aggFunc"}]},{"type":"text","value":" set."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Server-side Group Sorting","name":"group-sort-server-side","type":"generated","options":"{ \"enterprise\": true, \"extras\": [\"alasql\"], \"modules\": [\"serverside\"] }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To override this behaviour, and always have the grid reload all rows when a sort changes, set the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"serverSideSortAllLevels=true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below is identical to the above, except "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"serverSideSortAllLevels=true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Server-side Group Sorting Force","name":"group-sort-server-side-force","type":"generated","options":"{ \"enterprise\": true, \"extras\": [\"alasql\"], \"modules\": [\"serverside\"] }"},"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/28.0.0/server-side-model-filtering/"},"children":[{"type":"text","value":"SSRM Filtering"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"SSRM Sorting","version":null,"enterprise":true,"description":null},"headings":[{"id":"enabling-sorting","depth":2,"value":"Enabling Sorting"},{"id":"client-side-sorting","depth":2,"value":"Client-side Sorting"},{"id":"server-side-sorting","depth":2,"value":"Server-side Sorting"},{"id":"client-side-row-group-sorting","depth":2,"value":"Client-side Row Group Sorting"},{"id":"server-side-row-group-sorting","depth":2,"value":"Server-side Row Group Sorting"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"vue","srcPath":"/server-side-model-sorting","pageName":"server-side-model-sorting"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}