{"version":1,"pages":[{"id":"3r31mDxnVTM0WQaL3LUj","title":"Overview","pathname":"/","siteSpaceId":"sitesp_jOS03","description":"To help you understand every section, we have created a live demo for each DkGrid feature."},{"id":"F5cO2BgKMotuVoS9OcKN","title":"Quick Start Tutorial","pathname":"/getting-started/quick-start-tutorial","siteSpaceId":"sitesp_jOS03","description":"This section summarizes all the essentials you need to know to start with DkGrid. Here you can find how to create a DkGrid instance, add some columns, and enable some features.","breadcrumbs":[{"label":"Getting Started"}]},{"id":"nHUH8lkEIUcGOblVlJ8R","title":"Grid Structure","pathname":"/fundamentals/grid-structure","siteSpaceId":"sitesp_jOS03","description":"This section describes the main parts of a DikeGrid instance and how you can customize this structure.","breadcrumbs":[{"label":"Fundamentals"}]},{"id":"EDY6BVLBU6aoSnJpirF4","title":"Grid Size","pathname":"/fundamentals/grid-structure/grid-size","siteSpaceId":"sitesp_jOS03","description":"You can customize the width and the height of the DikeGrid instance.","breadcrumbs":[{"label":"Fundamentals"},{"label":"Grid Structure"}]},{"id":"CcbT5tolWDNQcj05Vojy","title":"Header","pathname":"/fundamentals/grid-structure/header","siteSpaceId":"sitesp_jOS03","description":"Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, the Header is also called Header Row.","breadcrumbs":[{"label":"Fundamentals"},{"label":"Grid Structure"}]},{"id":"2HHpdMczgNfbUk4VymuC","title":"Row Filter","pathname":"/fundamentals/grid-structure/row-filter","siteSpaceId":"sitesp_jOS03","description":"Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, the Row Filter is also called Row-Filter Row.","breadcrumbs":[{"label":"Fundamentals"},{"label":"Grid Structure"}]},{"id":"DWjAJHO42LDvFfeXDTyE","title":"Rows","pathname":"/fundamentals/grid-structure/rows","siteSpaceId":"sitesp_jOS03","description":"Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, every row is also called Content Row.","breadcrumbs":[{"label":"Fundamentals"},{"label":"Grid Structure"}]},{"id":"Wh9HAWNrL4LpEtHPfnk2","title":"Panels","pathname":"/fundamentals/grid-structure/panels","siteSpaceId":"sitesp_jOS03","description":"Panels are containers to accommodate columns.","breadcrumbs":[{"label":"Fundamentals"},{"label":"Grid Structure"}]},{"id":"veAT1PaIuDoeXjDK8cMY","title":"Gutters","pathname":"/fundamentals/grid-structure/gutters","siteSpaceId":"sitesp_jOS03","description":"Gutters are the spaces between columns and rows. The DikeGrid definition could or could not draw a line at the center of these spaces.","breadcrumbs":[{"label":"Fundamentals"},{"label":"Grid Structure"}]},{"id":"n8ewqq4CYq1Ku0YO8p9N","title":"Edition Toolbar","pathname":"/fundamentals/grid-structure/edition-toolbar","siteSpaceId":"sitesp_jOS03","description":"Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, the Edition Toolbar is also known as Edition Toolbar Row.","breadcrumbs":[{"label":"Fundamentals"},{"label":"Grid Structure"}]},{"id":"GiUsPyxme8ZLTSP5XgJC","title":"Paginator","pathname":"/fundamentals/grid-structure/paginator","siteSpaceId":"sitesp_jOS03","description":"Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, the paginator is also called the Pagination Row.","breadcrumbs":[{"label":"Fundamentals"},{"label":"Grid Structure"}]},{"id":"xAV3qdVLwdpj3b6mRW1o","title":"Borders","pathname":"/fundamentals/grid-structure/borders","siteSpaceId":"sitesp_jOS03","description":"The DikeGrid itself draws a border through its primary container. However, Borders concept is essential for column moving.","breadcrumbs":[{"label":"Fundamentals"},{"label":"Grid Structure"}]},{"id":"8MUBmlKHjXMCkVs9PimX","title":"Column Context Menu","pathname":"/fundamentals/grid-structure/column-context-menu","siteSpaceId":"sitesp_jOS03","description":"Every column displays a context menu, and this has a default size. You can customize the width and height of this context menu or avoid displaying it.","breadcrumbs":[{"label":"Fundamentals"},{"label":"Grid Structure"}]},{"id":"PCYiK3bu2vjUDuILiM1c","title":"Waiting Indicator","pathname":"/fundamentals/grid-structure/waiting-indicator","siteSpaceId":"sitesp_jOS03","description":"When the DikeGrid is waiting or processing rows of data, it shows a message. You can customize this message.","breadcrumbs":[{"label":"Fundamentals"},{"label":"Grid Structure"}]},{"id":"OJEqVY67Nfl3bUyakdEa","title":"DataSource","pathname":"/fundamentals/datasource","siteSpaceId":"sitesp_jOS03","description":"This section describes how you can provide a data set and how a DikeGrid instance treats that data set.","breadcrumbs":[{"label":"Fundamentals"}]},{"id":"5oUYLEywVbmEda52YKGx","title":"In-Memory DataSource","pathname":"/fundamentals/datasource/in-memory-datasource","siteSpaceId":"sitesp_jOS03","description":"We name an In-Memory data source when you provide your data set in one go.","breadcrumbs":[{"label":"Fundamentals"},{"label":"DataSource"}]},{"id":"k1BDfTVkLiHIZhViXPjz","title":"Custom DataSource","pathname":"/fundamentals/datasource/custom-datasource","siteSpaceId":"sitesp_jOS03","description":"A custom data source is an instance class that extends from the DataSource abstract class.","breadcrumbs":[{"label":"Fundamentals"},{"label":"DataSource"}]},{"id":"1Craw75cm3jbJBnz1bBY","title":"Theming","pathname":"/fundamentals/theming","siteSpaceId":"sitesp_jOS03","description":"This section describes how to use your themes or use a pre-built one.","breadcrumbs":[{"label":"Fundamentals"}]},{"id":"yAfqK0msQWOXJZDjhNiC","title":"Column Definitions","pathname":"/columns/column-definitions","siteSpaceId":"sitesp_jOS03","description":"This section describes how to create columns in the component's HTML definition or in the TypeScript class file.","breadcrumbs":[{"label":"Columns"}]},{"id":"38KNaQ2TwtZ81i4sDU2w","title":"Column Grouping","pathname":"/columns/column-grouping","siteSpaceId":"sitesp_jOS03","description":"This section describes creating column groups in the component's HTML definition or the TypeScript class file.","breadcrumbs":[{"label":"Columns"}]},{"id":"rWo1U3MM84SjGCRRKuoX","title":"Column Sizing","pathname":"/columns/column-sizing","siteSpaceId":"sitesp_jOS03","description":"After setting the initial column size, this section describes how to change the column width dynamically.","breadcrumbs":[{"label":"Columns"}]},{"id":"7i7oja1tOVpCg31hSsXK","title":"Column Moving","pathname":"/columns/column-moving","siteSpaceId":"sitesp_jOS03","description":"This section describes how to make a column draggable and which type of movements you can do.","breadcrumbs":[{"label":"Columns"}]},{"id":"NOhF79FZIabCPr2XZK39","title":"Column Pinning","pathname":"/columns/column-pinning","siteSpaceId":"sitesp_jOS03","description":"Once you have defined a column as draggable, you can make it non-draggable at runtime.","breadcrumbs":[{"label":"Columns"}]},{"id":"1C3SdwJvcHJs9Z28BLV6","title":"Row Sorting","pathname":"/rows/row-sorting","siteSpaceId":"sitesp_jOS03","description":"This section describes how you can sort the DikeGrid rows.","breadcrumbs":[{"label":"Rows"}]},{"id":"w6GRILztMTSGdkJdoAl4","title":"Row Selection","pathname":"/rows/row-selection","siteSpaceId":"sitesp_jOS03","description":"The user can select one or all rows from the data source. This section describes how you can configure this feature.","breadcrumbs":[{"label":"Rows"}]},{"id":"ASYheZQkXknfiOFwBFgj","title":"Row Grouping","pathname":"/rows/row-grouping","siteSpaceId":"sitesp_jOS03","description":"This section describes how the user can display rows grouped by columns.","breadcrumbs":[{"label":"Rows"}]},{"id":"iGlHBD61WPkPcd9WPYq3","title":"Row Pagination","pathname":"/rows/row-pagination","siteSpaceId":"sitesp_jOS03","description":"This section describes how to display a fixed amount of rows, in other words, page by page.","breadcrumbs":[{"label":"Rows"}]},{"id":"X4bumT5Cpbae4S50XUQ5","title":"Column Filters","pathname":"/filtering/column-filters","siteSpaceId":"sitesp_jOS03","description":"This section describes how to enable filtering for a column and what events are involved.","breadcrumbs":[{"label":"Filtering"}]},{"id":"H60afD0zMjYBarA6KVB3","title":"Filter types","pathname":"/filtering/filter-types","siteSpaceId":"sitesp_jOS03","description":"This section describes the types of filters and how you can add or overwrite conditions for each of them.","breadcrumbs":[{"label":"Filtering"}]},{"id":"ZDwkJmGK4cRny3rr8t5Y","title":"In-line Filters","pathname":"/filtering/in-line-filters","siteSpaceId":"sitesp_jOS03","description":"This section describes how you can enable filtering for all the displayed columns.","breadcrumbs":[{"label":"Filtering"}]},{"id":"txxHa3DzewsBxqtVlf9i","title":"Row Edition","pathname":"/editing/row-edition","siteSpaceId":"sitesp_jOS03","description":"This section describes how to enable the edition operations and perform the edition per row.","breadcrumbs":[{"label":"Editing"}]},{"id":"5oUhS0CES0CQ1rZ5JPHA","title":"Edition templates","pathname":"/editing/edition-templates","siteSpaceId":"sitesp_jOS03","description":"This section describes how to provide custom templates for editing the column values.","breadcrumbs":[{"label":"Editing"}]},{"id":"YiTEss2guZvKgU7gUYJa","title":"Edition validation","pathname":"/editing/edition-validation","siteSpaceId":"sitesp_jOS03","description":"This section describes how you can validate user input and show validation messages.","breadcrumbs":[{"label":"Editing"}]},{"id":"vHUyOMERb8eTpBTd83Mt","title":"Multiple rows edition","pathname":"/editing/multiple-rows-edition","siteSpaceId":"sitesp_jOS03","description":"This section describes how to update, delete or restore more than one row at a time.","breadcrumbs":[{"label":"Editing"}]},{"id":"G3k2ORtDlQ6IzyyLAfDd","title":"DkGrid API","pathname":"/reference/dkgrid-api","siteSpaceId":"sitesp_jOS03","description":"","breadcrumbs":[{"label":"Reference"}]},{"id":"izzx5ZlNxidNpKHWeqmO","title":"DkGridColumnDef","pathname":"/reference/dkgrid-api/dkgridcolumndef","siteSpaceId":"sitesp_jOS03","description":"You can access this instance through the property named columnDef of the DkGridComponent, or by listening to the DkGridComponent event called gridColumnDefInstance.","breadcrumbs":[{"label":"Reference"},{"label":"DkGrid API"}]},{"id":"mF4j9w4wBvEWnc5cork5","title":"DkGridSorting","pathname":"/reference/dkgrid-api/dkgridsorting","siteSpaceId":"sitesp_jOS03","description":"You can access this instance through the property named sorting of the DkGridComponent.","breadcrumbs":[{"label":"Reference"},{"label":"DkGrid API"}]},{"id":"UD0Z30EDWOGYTP3N8hEQ","title":"DkGridSelection","pathname":"/reference/dkgrid-api/dkgridselection","siteSpaceId":"sitesp_jOS03","description":"You can access this instance through the property named selection of the DkGridComponent.","breadcrumbs":[{"label":"Reference"},{"label":"DkGrid API"}]},{"id":"S1QTACTB1PVoWQjiCmAY","title":"DkGridRowGrouping","pathname":"/reference/dkgrid-api/dkgridrowgrouping","siteSpaceId":"sitesp_jOS03","description":"You can access this instance through the property named rowGrouping of the DkGridComponent.","breadcrumbs":[{"label":"Reference"},{"label":"DkGrid API"}]},{"id":"oZOdhjjfMdfhCO7qVQ9t","title":"DkGridPagination","pathname":"/reference/dkgrid-api/dkgridpagination","siteSpaceId":"sitesp_jOS03","description":"You can access this instance through the property named pagination of the DkGridComponent.","breadcrumbs":[{"label":"Reference"},{"label":"DkGrid API"}]},{"id":"AJsZueupzigqR3GJnFkI","title":"DkGridWaitingIndicator","pathname":"/reference/dkgrid-api/dkgridwaitingindicator","siteSpaceId":"sitesp_jOS03","description":"You can access this instance through the property called waitingIndicator of the DkGridComponent.","breadcrumbs":[{"label":"Reference"},{"label":"DkGrid API"}]},{"id":"yPSM757JhBGjrBwJ5qY0","title":"DkGridFactoryDataSource","pathname":"/reference/dkgrid-api/dkgridfactorydatasource","siteSpaceId":"sitesp_jOS03","description":"You can access this instance through the property named dataSourceFactory of the DkGridComponent.","breadcrumbs":[{"label":"Reference"},{"label":"DkGrid API"}]},{"id":"TERbfetx4gWDMdNHK4dU","title":"DkGridFilter","pathname":"/reference/dkgrid-api/dkgridfilter","siteSpaceId":"sitesp_jOS03","description":"You can access this instance through the property named filter of the DkGridComponent.","breadcrumbs":[{"label":"Reference"},{"label":"DkGrid API"}]},{"id":"dKmRKrfrctxcPEFcXy1L","title":"DkGridEdition","pathname":"/reference/dkgrid-api/dkgridedition","siteSpaceId":"sitesp_jOS03","description":"You can access this instance through the property named edition of the DkGridComponent.","breadcrumbs":[{"label":"Reference"},{"label":"DkGrid API"}]},{"id":"9btdwb5IHewKbAAytQZ5","title":"Components","pathname":"/reference/components","siteSpaceId":"sitesp_jOS03","description":"","breadcrumbs":[{"label":"Reference"}]},{"id":"KWMyu4Mo7DYuYngXUiGk","title":"DkGridComponent","pathname":"/reference/components/dkgridcomponent","siteSpaceId":"sitesp_jOS03","description":"This class creates a DkGrid instance through the HTML definition.","breadcrumbs":[{"label":"Reference"},{"label":"Components"}]},{"id":"L0VgnKVIwtYgyylSDOkk","title":"DkGridColumnComponent","pathname":"/reference/components/dkgridcolumncomponent","siteSpaceId":"sitesp_jOS03","description":"This class creates a column, either a data column or a group column, using the HTML definition.","breadcrumbs":[{"label":"Reference"},{"label":"Components"}]},{"id":"LDe3znSRwSph6mC4yAqo","title":"Classes","pathname":"/reference/classes","siteSpaceId":"sitesp_jOS03","description":"","breadcrumbs":[{"label":"Reference"}]},{"id":"Y9IvKHzpCHNk5IYzKEZp","title":"DataSource","pathname":"/reference/classes/datasource","siteSpaceId":"sitesp_jOS03","description":"<T> represents the object's shape coming from the data source.","breadcrumbs":[{"label":"Reference"},{"label":"Classes"}]},{"id":"bWSdYn7aQKFFRYXnUUII","title":"Columns","pathname":"/reference/classes/columns","siteSpaceId":"sitesp_jOS03","description":"<T> represents the object's shape coming from the data source. <R> represents the column data type: string, number, Date, or boolean.","breadcrumbs":[{"label":"Reference"},{"label":"Classes"}]},{"id":"93phTcNax7Joql2YxRo1","title":"Rows","pathname":"/reference/classes/rows","siteSpaceId":"sitesp_jOS03","description":"<T> represents the object's shape coming from the data source.","breadcrumbs":[{"label":"Reference"},{"label":"Classes"}]},{"id":"vjgbDGnwY4ljJldRL1AL","title":"Filtering","pathname":"/reference/classes/filtering","siteSpaceId":"sitesp_jOS03","description":"","breadcrumbs":[{"label":"Reference"},{"label":"Classes"}]},{"id":"65wi92x7mM9X4cwDiTVQ","title":"Editing","pathname":"/reference/classes/editing","siteSpaceId":"sitesp_jOS03","description":"","breadcrumbs":[{"label":"Reference"},{"label":"Classes"}]},{"id":"svLQ69QtSoqDW5Z2FabE","title":"Interfaces","pathname":"/reference/interfaces","siteSpaceId":"sitesp_jOS03","description":"","breadcrumbs":[{"label":"Reference"}]},{"id":"UEJMB0jPTp0HeAvnn4NS","title":"Columns","pathname":"/reference/interfaces/columns","siteSpaceId":"sitesp_jOS03","description":"","breadcrumbs":[{"label":"Reference"},{"label":"Interfaces"}]},{"id":"cO3hq12AnvucRKyObrp8","title":"Sorting","pathname":"/reference/interfaces/sorting","siteSpaceId":"sitesp_jOS03","description":"<T> represents the object's shape coming from the data source.","breadcrumbs":[{"label":"Reference"},{"label":"Interfaces"}]},{"id":"f2drKTi7Yp5bBrNWGfjL","title":"Row Grouping","pathname":"/reference/interfaces/row-grouping","siteSpaceId":"sitesp_jOS03","description":"<T> represents the object's shape coming from the data source.","breadcrumbs":[{"label":"Reference"},{"label":"Interfaces"}]},{"id":"YvZHutJCpNvMWE9KI9Gi","title":"Filtering","pathname":"/reference/interfaces/filtering","siteSpaceId":"sitesp_jOS03","description":"<T> represents the object's shape coming from the data source. <R> represents the column data type: string, number, Date, or boolean.","breadcrumbs":[{"label":"Reference"},{"label":"Interfaces"}]},{"id":"7qyr9yPiULD2QttomOF8","title":"Editing","pathname":"/reference/interfaces/editing","siteSpaceId":"sitesp_jOS03","description":"<T> represents the object's shape coming from the data source.","breadcrumbs":[{"label":"Reference"},{"label":"Interfaces"}]},{"id":"Triiwmi6PQY4N0V8S64t","title":"Injection Tokens","pathname":"/reference/injection-tokens","siteSpaceId":"sitesp_jOS03","description":"","breadcrumbs":[{"label":"Reference"}]},{"id":"rUWU1chemlvyxFzB9eJg","title":"Grid Structure","pathname":"/reference/injection-tokens/grid-structure","siteSpaceId":"sitesp_jOS03","description":"The following Injection Tokens apply to the Grid Structure.","breadcrumbs":[{"label":"Reference"},{"label":"Injection Tokens"}]},{"id":"lEmMcPs7VVlN0a7yVeZ5","title":"Filtering","pathname":"/reference/injection-tokens/filtering","siteSpaceId":"sitesp_jOS03","description":"The following Injection Tokens apply to the Filtering module.","breadcrumbs":[{"label":"Reference"},{"label":"Injection Tokens"}]},{"id":"cxBx3cJwJdUixHBVJrja","title":"Editing","pathname":"/reference/injection-tokens/editing","siteSpaceId":"sitesp_jOS03","description":"The following Injection Tokens apply to the Editing module.","breadcrumbs":[{"label":"Reference"},{"label":"Injection Tokens"}]},{"id":"MEGIoFvAS7fGkgQwKsVO","title":"Theming","pathname":"/reference/injection-tokens/theming","siteSpaceId":"sitesp_jOS03","description":"The following Injection Tokens apply to Theming","breadcrumbs":[{"label":"Reference"},{"label":"Injection Tokens"}]},{"id":"ucPDoVm9VyIenzAaRQOC","title":"Type aliases","pathname":"/reference/type-aliases","siteSpaceId":"sitesp_jOS03","description":"","breadcrumbs":[{"label":"Reference"}]},{"id":"mTLBUsmQOSd2X2z1O1gJ","title":"DataSource","pathname":"/reference/type-aliases/datasource","siteSpaceId":"sitesp_jOS03","description":"<T> represents the object's shape coming from the data source.","breadcrumbs":[{"label":"Reference"},{"label":"Type aliases"}]},{"id":"PHH7nN52i7bqdCUjCZl0","title":"Columns","pathname":"/reference/type-aliases/columns","siteSpaceId":"sitesp_jOS03","description":"<T> represents the object's shape coming from the data source. <R> represents the column data type: string, number, Date, or boolean.","breadcrumbs":[{"label":"Reference"},{"label":"Type aliases"}]},{"id":"FwyNbf51wGY42bdqDqiN","title":"Selection","pathname":"/reference/type-aliases/selection","siteSpaceId":"sitesp_jOS03","description":"<T> represents the object's shape coming from the data source. <R> represents the column data type: string, number, Date, or boolean.","breadcrumbs":[{"label":"Reference"},{"label":"Type aliases"}]},{"id":"vZ0DW5rOqHAVssdjwQv1","title":"Filtering","pathname":"/reference/type-aliases/filtering","siteSpaceId":"sitesp_jOS03","description":"<T> represents the object's shape coming from the data source. <R> represents the column data type: string, number, Date, or boolean.","breadcrumbs":[{"label":"Reference"},{"label":"Type aliases"}]},{"id":"VwMBvDmHM9bAkEef1ztZ","title":"Editing","pathname":"/reference/type-aliases/editing","siteSpaceId":"sitesp_jOS03","description":"","breadcrumbs":[{"label":"Reference"},{"label":"Type aliases"}]},{"id":"xgdaane1QFuXENeAbtu0","title":"Type Guards","pathname":"/reference/type-guards","siteSpaceId":"sitesp_jOS03","description":"<T> represents the object's shape coming from the data source. <R> represents the column data type: string, number, Date, or boolean.","breadcrumbs":[{"label":"Reference"}]}]}