{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/overlays/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"At present, there are two overlays for the grid when using the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/client-side-model/"},"children":[{"type":"text","value":"Client-Side Row Model"}]},{"type":"text","value":":"}]},{"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":"Loading"}]},{"type":"text","value":": Gets displayed when the grid is loading data."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"No Rows"}]},{"type":"text","value":": Gets displayed when loading has completed but there are no rows to show."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid manages showing and hiding of the overlays for you. When the table is first initialised, the loading panel is displayed if "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowData"}]},{"type":"text","value":" is set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":". When the API function "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setRowData"}]},{"type":"text","value":" is called, the loading panel is hidden."}]},{"type":"text","value":"\n"},{"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":"Overlays are not used when using "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/row-models/"},"children":[{"type":"text","value":"Row Models"}]},{"type":"text","value":" other than the Client-Side Row Model. This is because data is\nloaded differently."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Loading overlay doesn't make sense as rows are loaded in sections. Access to the entire grid shouldn't\nbe blocked as some rows will be loaded while others are loading."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The No Rows overlay doesn't make sense as there could be rows on the server, but a filter could be applied\nthat filters out all rows. This would be equivalent to the Client-Side Row Model and applying a filter to\nsome data (no overlay would be shown, and a grid with a filter and no rows would be shown)."}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"overlay-api","style":"position:relative;"},"children":[{"type":"text","value":"Overlay API"},{"type":"element","tagName":"a","properties":{"href":"#overlay-api","ariaLabel":"overlay api 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"At any point, you can show or hide any of the overlays using the methods below. You may never need to use these methods, as the grid manages the overlays for you. However you may find some edge cases where you need complete control (such as showing 'loading' if an option outside the grid is changed)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"overlays","config":"{\"overrideBottomMargin\":\"1rem\"}"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The overlays are mutually exclusive, you cannot show more than one overlay at any given time."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"custom-overlays","style":"position:relative;"},"children":[{"type":"text","value":"Custom Overlays"},{"type":"element","tagName":"a","properties":{"href":"#custom-overlays","ariaLabel":"custom overlays 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're not happy with the provided overlay templates, you can provide your own in the following two ways."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Provide a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"plain HTML string"}]},{"type":"text","value":" to the grid properties "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"overlayLoadingTemplate"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"overlayNoRowsTemplate"}]},{"type":"text","value":". "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Provide a custom component for the overlay - see "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/component-overlay/"},"children":[{"type":"text","value":"Overlay Component"}]},{"type":"text","value":" for details."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"example","style":"position:relative;"},"children":[{"type":"text","value":"Example"},{"type":"element","tagName":"a","properties":{"href":"#example","ariaLabel":"example 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates how the loading overlay is shown automatically while the data is loading. You can also use the buttons to show / hide the different overlays at your will. "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The overlays are customised by providing custom HTML templates to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"overlayLoadingTemplate"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"overlayNoRowsTemplate"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Overlays","name":"overlays","type":"mixed","options":"{ \"exampleHeight\": 580 }"},"children":[]}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Overlays","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"overlay-api","depth":2,"value":"Overlay API"},{"id":"custom-overlays","depth":2,"value":"Custom Overlays"},{"id":"example","depth":2,"value":"Example"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"angular","srcPath":"/overlays","pageName":"overlays"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}