{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/side-bar/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section covers how to configure the Side Bar which contains Tool Panels."}]},{"type":"element","tagName":"h2","properties":{"id":"configuring-the-side-bar","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#configuring-the-side-bar","ariaLabel":"configuring the side bar 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 the Side Bar"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The side bar is configured using the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sideBar"}]},{"type":"text","value":". The property takes multiple forms to allow easy configuration or more advanced configuration. The different forms for the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sideBar"}]},{"type":"text","value":" property are as follows:"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"element","tagName":"thead","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Type"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Description"}]}]}]},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":" / "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"No side bar provided."}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"boolean"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" to display the side bar with default configuration."}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" / "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"string[]"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'columns'"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'filters'"}]},{"type":"text","value":" to display side bar with just one of "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/tool-panel-columns/"},"children":[{"type":"text","value":"Columns"}]},{"type":"text","value":" or "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/tool-panel-filters/"},"children":[{"type":"text","value":"Filters"}]},{"type":"text","value":" tool panels or an array of one or both of these values."}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SideBarDef"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"(long form)"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"An object of type "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SideBarDef"}]},{"type":"text","value":" (explained below) to allow detailed configuration of the side bar. Use this to configure the provided tool panels (e.g. pass parameters to the columns or filters panel) or to include custom tool panels."}]}]}]}]},{"type":"element","tagName":"h3","properties":{"id":"boolean-configuration","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#boolean-configuration","ariaLabel":"boolean configuration 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":"Boolean Configuration"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The default side bar contains the Columns and Filters tool panels. To use the default side bar, set the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sideBar=true"}]},{"type":"text","value":". The Columns panel will be open by default."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The default configuration doesn't allow customisation of the tool panels. More detailed configuration are explained below."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the following example 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":"sideBar"}]},{"type":"text","value":" is set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The side bar is displayed with tool panels Columns and Filters."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Columns panel is displayed by default."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Boolean Configuration","name":"boolean-configuration","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"columnpanel\", \"filterpanel\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"string-configuration","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#string-configuration","ariaLabel":"string configuration 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":"String Configuration"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To display just one of the provided tool panels, set either "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sideBar='columns'"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sideBar='filters'"}]},{"type":"text","value":". This will display the desired item with default configuration. Alternatively pass one or both as a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"string[]"}]},{"type":"text","value":", i.e "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sideBar=['columns','filters']"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates using the string configuration. 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":"sideBar"}]},{"type":"text","value":" is set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'filters'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The side bar is displayed showing only the Filters panel."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Side Bar - Only Filters","name":"only-filters","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"columnpanel\", \"filterpanel\", \"setfilter\"]  }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"sidebardef-configuration","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#sidebardef-configuration","ariaLabel":"sidebardef configuration 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":"SideBarDef Configuration"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The previous configurations are shortcuts for the full fledged configuration using a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SideBarDef"}]},{"type":"text","value":" object. For full control over the configuration, you must provide a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SideBarDef"}]},{"type":"text","value":" object."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"SideBarDef","overridesrc":"side-bar/resources/sideBar.json"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"toolPanels"}]},{"type":"text","value":" property follows the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ToolPanelDef"}]},{"type":"text","value":" interface:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"ToolPanelDef","overridesrc":"side-bar/resources/sideBar.json"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following snippet shows configuring the tool panel using a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SideBarDef"}]},{"type":"text","value":" object:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    sideBar: {\n        toolPanels: [\n            {\n                id: 'columns',\n                labelDefault: 'Columns',\n                labelKey: 'columns',\n                iconKey: 'columns',\n                toolPanel: 'agColumnsToolPanel',\n                minWidth: 225,\n                maxWidth: 225,\n                width: 225\n            },\n            {\n                id: 'filters',\n                labelDefault: 'Filters',\n                labelKey: 'filters',\n                iconKey: 'filter',\n                toolPanel: 'agFiltersToolPanel',\n                minWidth: 180,\n                maxWidth: 400,\n                width: 250\n            }\n        ],\n        position: 'left',\n        defaultToolPanel: 'filters'\n    }\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The snippet above is demonstrated in the following example:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"SideBarDef","name":"sideBarDef","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"columnpanel\", \"filterpanel\", \"setfilter\"], \"exampleHeight\": 600 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"configuration-shortcuts","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#configuration-shortcuts","ariaLabel":"configuration shortcuts 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":"Configuration Shortcuts"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"boolean"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" configurations are shortcuts for more detailed configurations. When you use a shortcut the grid replaces it with the equivalent long form of the configuration by building the equivalent "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SideBarDef"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following code snippets show an example of the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"boolean"}]},{"type":"text","value":" shortcut and the equivalent "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SideBarDef"}]},{"type":"text","value":" long form."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // shortcut\n    sideBar: true,\n}\n"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // equivalent detailed long form\n    sideBar: {\n        toolPanels: [\n            {\n                id: 'columns',\n                labelDefault: 'Columns',\n                labelKey: 'columns',\n                iconKey: 'columns',\n                toolPanel: 'agColumnsToolPanel',\n            },\n            {\n                id: 'filters',\n                labelDefault: 'Filters',\n                labelKey: 'filters',\n                iconKey: 'filter',\n                toolPanel: 'agFiltersToolPanel',\n            }\n        ],\n        defaultToolPanel: 'columns',\n    }\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following code snippets show an example of the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" shortcut and the equivalent "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SideBarDef"}]},{"type":"text","value":" long form."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // shortcut\n    sideBar: 'filters',\n}\n"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // equivalent detailed long form\n    sideBar: {\n        toolPanels: [\n            {\n                id: 'filters',\n                labelDefault: 'Filters',\n                labelKey: 'filters',\n                iconKey: 'filter',\n                toolPanel: 'agFiltersToolPanel',\n            }\n        ],\n        defaultToolPanel: 'filters',\n    }\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also use shortcuts inside the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"toolPanel.items"}]},{"type":"text","value":" array for specifying the Columns and Filters items."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // shortcut\n    sideBar: {\n        toolPanels: ['columns', 'filters']\n    }\n}\n"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // equivalent detailed long form\n    sideBar: {\n        toolPanels: [\n            {\n                id: 'columns',\n                labelDefault: 'Columns',\n                labelKey: 'columns',\n                iconKey: 'columns',\n                toolPanel: 'agColumnsToolPanel',\n            },\n            {\n                id: 'filters',\n                labelDefault: 'Filters',\n                labelKey: 'filters',\n                iconKey: 'filter',\n                toolPanel: 'agFiltersToolPanel',\n            }\n        ]\n    }\n}\n"}]},{"type":"element","tagName":"h2","properties":{"id":"side-bar-customisation","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#side-bar-customisation","ariaLabel":"side bar customisation 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":"Side Bar Customisation"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are using the long form (providing a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SideBarDef"}]},{"type":"text","value":" object) then it is possible to customise. The example below shows changing the label and icon for the columns and filters tab."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Side Bar Fine Tuning","name":"fine-tuning","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"columnpanel\", \"filterpanel\", \"setfilter\"]  }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"providing-parameters-to-tool-panels","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#providing-parameters-to-tool-panels","ariaLabel":"providing parameters to tool panels 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":"Providing Parameters to Tool Panels"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Parameters are passed to tool panels via the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"toolPanelParams"}]},{"type":"text","value":" object. For example, the following code snippet sets "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressRowGroups: true"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressValues: true"}]},{"type":"text","value":" for the "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/tool-panel-columns/"},"children":[{"type":"text","value":"columns tool panel"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    sideBar: {\n        toolPanels: [\n            {\n                id: 'columns',\n                labelDefault: 'Columns',\n                labelKey: 'columns',\n                iconKey: 'columns',\n                toolPanel: 'agColumnsToolPanel',\n                toolPanelParams: {\n                    suppressRowGroups: true,\n                    suppressValues: true,\n                }\n            }\n        ]\n    }\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This example configures the columns tool panel. See the "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/tool-panel-columns/"},"children":[{"type":"text","value":"columns tool panel"}]},{"type":"text","value":" documentation for the full list of possible parameters to this tool panel."}]},{"type":"element","tagName":"h2","properties":{"id":"side-bar-api","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#side-bar-api","ariaLabel":"side bar api 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":"Side Bar API"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The list below details all the API methods relevant to the tool panel."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"accessories","names":"[\"setSideBar\",\"getSideBar\",\"setSideBarVisible\",\"isSideBarVisible\",\"setSideBarPosition\",\"openToolPanel\",\"closeToolPanel\",\"getOpenedToolPanel\",\"isToolPanelShowing\",\"refreshToolPanel\", \"getToolPanelInstance\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates different usages of the tool panel API methods. The following can be noted:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Initially the side bar is not visible as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sideBar.hiddenByDefault=true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Visibility Buttons:"}]},{"type":"text","value":" These toggle visibility of the tool panel. Note that when you make "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"visible=false"}]},{"type":"text","value":", the entire tool panel is hidden including the tabs. Make sure the tool panel is left visible before testing the other API features so you can see the impact."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Open / Close Buttons:"}]},{"type":"text","value":" These open and close different tool panel items."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Reset Buttons:"}]},{"type":"text","value":" These reset the tool panel to a new configuration. Notice that "},{"type":"element","tagName":"a","properties":{"href":"#configuration-shortcuts"},"children":[{"type":"text","value":"shortcuts"}]},{"type":"text","value":" are provided as configuration however "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getSideBar()"}]},{"type":"text","value":" returns back the long form."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Position Buttons:"}]},{"type":"text","value":" These change the position of the side bar relative to the grid."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Side Bar API","name":"api","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"columnpanel\", \"filterpanel\", \"setfilter\"], \"exampleHeight\": 630 }"},"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":"Now that we covered the Side bar, continue to the next section to learn about the "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/tool-panel-columns/"},"children":[{"type":"text","value":"Columns Tool Panel"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Side Bar","version":null,"enterprise":true,"description":null},"headings":[{"id":"configuring-the-side-bar","depth":2,"value":"Configuring the Side Bar"},{"id":"boolean-configuration","depth":3,"value":"Boolean Configuration"},{"id":"string-configuration","depth":3,"value":"String Configuration"},{"id":"sidebardef-configuration","depth":3,"value":"SideBarDef Configuration"},{"id":"configuration-shortcuts","depth":2,"value":"Configuration Shortcuts"},{"id":"side-bar-customisation","depth":2,"value":"Side Bar Customisation"},{"id":"providing-parameters-to-tool-panels","depth":2,"value":"Providing Parameters to Tool Panels"},{"id":"side-bar-api","depth":2,"value":"Side Bar API"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"angular","srcPath":"/side-bar","pageName":"side-bar"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}