2 |
22 |
30 |
31 |
41 | 42 |
51 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example02.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 1: Basic Grids 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | Basic Grids with fixed sizes (800 x 225) set by "gridHeight" & "gridWidth"
16 |
20 |
21 | -
17 |
- Wiki HOWTO link 18 |
22 |
23 | Grid 1
24 |
28 |
29 |
30 |
31 |
32 |
37 |
38 |
39 |
40 | 41 | 42 |
Grid 2 (with local Pagination)
43 |
44 |
48 |
49 |
50 |
2 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example07.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 2: Grid with Formatters 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | Grid with Custom and/or included Slickgrid Formatters (Wiki docs).
20 |
32 |
33 |
37 |
38 | -
21 |
- The 2 last columns are using Custom Formatters 22 |
- The "Completed" column uses a the "onCellClick" event and a formatter to simulate a toggle action 24 |
- 26 | Support Excel Copy Buffer (SlickGrid Copy Manager Plugin), you can use it by simply enabling "enableExcelCopyBuffer" flag. Note that 27 | it will only evaluate Formatter when the "exportWithFormatter" flag is enabled (through "ExportOptions" or the column definition) 28 | 29 |
- This example also has auto-resize enabled, and we also demo how you can pause the resizer if you wish to 30 |
-
23 |
2 |
42 |
43 |
44 |
45 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example07.component.scss:
--------------------------------------------------------------------------------
1 | /* 1st grid */
2 | #grid7-1 {
3 | --slick-header-button-float: right;
4 | }
5 |
6 | /* 2nd grid */
7 | #grid7-2 {
8 | --slick-header-button-margin: 4px 0 50px 0;
9 | --slick-header-button-float: left;
10 | }
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example08.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 7: Header Button Plugin 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | This example demonstrates using the Slick.Plugins.HeaderButtons plugin to easily add buttons to colum headers. These buttons can
16 | be specified directly in the column definition, and are very easy to configure and use. (Wiki docs)
21 |
35 |
36 | -
22 |
- Resize the 1st column to see all icon/command 23 |
- Mouse hover the 2nd column to see it's icon/command 24 |
- For all the other columns, click on top-right red circle icon to enable highlight of negative numbers. 25 |
- 26 | Use override callback functions to change the properties of show/hide, enable/disable the menu or certain item(s) from the list 27 | 28 |
- These callbacks are: "itemVisibilityOverride", "itemUsabilityOverride" 30 |
- for example the "Column E" does not show the header button via "itemVisibilityOverride" 31 |
- for example the "Column J" header button is displayed but it not usable via "itemUsabilityOverride" 32 |
-
29 |
Grid 1
37 |45 |
Grid 2 - with both Header Buttons & Menus
46 |
2 |
47 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example08.component.scss:
--------------------------------------------------------------------------------
1 | @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
2 | $slick-header-menu-button-border-width: 0px 1px,
3 | $slick-header-menu-button-icon-svg-path: "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M7,10L12,15L17,10H7Z",
4 | $slick-header-menu-button-icon-size: 16px,
5 | $slick-header-menu-button-padding: 10px 0 0 3px,
6 | $slick-sort-indicator-hint-opacity: 0,
7 | );
8 |
9 | .blue {
10 | color: rgb(73, 73, 255);
11 | }
12 | .orange {
13 | color: orange;
14 | }
15 | .red {
16 | color: red;
17 | }
18 | .bold {
19 | font-weight: bold;
20 | }
21 | .italic {
22 | font-style: italic;
23 | }
24 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example09.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 8: Header Menu Plugin 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | This example demonstrates using the Slick.Plugins.HeaderMenu plugin to easily add menus to colum headers.
16 | These menus can be specified directly in the column definition, and are very easy to configure and use. (Wiki docs) 21 |
38 |
39 | 16 | These menus can be specified directly in the column definition, and are very easy to configure and use. (Wiki docs) 21 |
-
22 |
- Now enabled by default in the Global Grid Options, it will add the default commands of (hide column, sort asc/desc) 23 |
- Hover over any column header to see an arrow showing up on the right 24 |
- Try Sorting (multi-sort) the 2 columns "Duration" and "% Complete" (the other ones are disabled) 25 |
- Try hiding any columns (you use the "Column Picker" plugin by doing a right+click on the header to show the column back) 26 |
- Note: The "Header Button" & "Header Menu" Plugins cannot be used at the same time 27 |
- You can change the menu icon via SASS variables as shown in this demo (check all SASS variables) 28 |
- 29 | Use override callback functions to change the properties of show/hide, enable/disable the menu or certain item(s) from the list 30 | 31 |
- These callbacks are: "itemVisibilityOverride", "itemUsabilityOverride" 33 |
- for example if we want to disable the "Help" command over the "Title" and "Completed" column 34 |
- for example don't show Help on column "% Complete" 35 |
-
32 |
40 |
44 |
45 |
46 |
2 |
48 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example09.component.scss:
--------------------------------------------------------------------------------
1 | @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
2 | $slick-column-picker-icon-checked-svg-path: "M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,5V19H5V5H19M10,17L6,13L7.41,11.58L10,14.17L16.59,7.58L18,9",
3 | $slick-column-picker-icon-unchecked-svg-path: "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z",
4 | $slick-column-picker-icon-font-size: 16px,
5 | $slick-checkbox-opacity-hover: 0.35,
6 | );
7 |
8 | .blue {
9 | color: rgb(73, 73, 255);
10 | }
11 | .orange {
12 | color: orange;
13 | }
14 | .red {
15 | color: red;
16 | }
17 | .bold {
18 | font-weight: bold;
19 | }
20 | .italic {
21 | font-style: italic;
22 | }
23 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example12.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 9: Grid Menu Control 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | This example demonstrates using the Slick.Controls.GridMenu plugin to easily add a Grid Menu (aka hamburger menu) on the top
16 | right corner of the grid. (Wiki docs)
19 |
20 |
32 |
33 |
38 |
39 | 20 |
-
21 |
- 22 | You can change the Grid Menu icon, for example "mdi-dots-vertical" (which is shown in this example) 24 | 25 |
- By default the Grid Menu shows all columns which you can show/hide them 26 |
- You can configure multiple custom "commands" to show up in the Grid Menu and use the "onGridMenuCommand()" callback 27 |
- Doing a "right + click" over any column header will also provide a way to show/hide a column (via the Column Picker Plugin) 28 |
- You can change the icons of both picker via SASS variables as shown in this demo (check all SASS variables) 29 |
- You can also show the Grid Menu anywhere on your page 30 |
40 |
45 |
46 |
47 |
2 |
24 | 25 |
58 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example14.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 12: Localization with Locales - French Locale displayed 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | This Examples uses French Locales but you could use your own custom locales
16 |
22 |
23 | -
17 |
- Defining your own Custom Locales must include all necessary text, see the default (English Custom Locales) 18 |
- Support Custom Locales (through the "locales" grid option), following these steps (Wiki docs) 19 |
- For more info about "Download to File", read the Wiki page 20 |
24 | 25 |
26 |
47 |
48 |
27 |
28 |
32 |
36 |
40 |
44 |
45 |
46 |
49 |
55 |
56 |
57 |
2 |
33 |
34 |
35 |
36 | 37 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example14.component.scss:
--------------------------------------------------------------------------------
1 | /** You can change the pinned/frozen border styling through this css override */
2 |
3 | .slick-row .slick-cell.frozen:last-child,
4 | .slick-headerrow-column.frozen:last-child,
5 | .slick-footerrow-column.frozen:last-child {
6 | border-right: 1px solid #969696 !important;
7 | }
8 |
9 | .slick-pane-bottom {
10 | border-top: 1px solid #969696 !important;
11 | }
12 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example15.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 14: Column Span & Header Grouping 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | This example demonstrates how to easily span a row over multiple columns & how to group header titles.
16 |
27 |
28 | -
17 |
- 18 | Note that you can add Sort but remember that it will sort by the data which the row contains, even if the data is visually hidden by 19 | colspan it will still sort it 20 | 21 |
- 22 | Header Grouping spanning accross multiple columns is working but has some UI issues on window resize. If anyone can fix it, probably 23 | some CSS issues, please let us know. 24 | 25 |
Grid 1 (with Header Grouping & Colspan)
29 |36 | 37 |
Grid 2 (with Header Grouping & Frozen/Pinned Columns)
38 |
39 |
43 |
46 |
47 |
2 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example17.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 15: Grid State & Presets using Local Storage 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | Grid State & Preset (Wiki docs)
20 |
21 |
31 |
32 |
36 |
37 | 21 |
-
22 |
- Uses Local Storage to persist the Grid State and uses Grid Options "presets" to put the grid back to it's previous state 23 |
- 25 | to demo this, simply change any columns (position reorder, visibility, size, filter, sort), then refresh your browser with (F5) 26 | 27 |
- Local Storage is just one option, you can use whichever is more convenient for you (Local Storage, Session Storage, DB, ...) 29 |
-
24 |
2 |
53 | 54 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example19-rowdetail.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 17: Dynamically Create Grid from CSV / Excel import 4 | 5 | 10 | code 11 | 12 | 13 | 21 |
22 | 23 |
24 | Allow creating a grid dynamically by importing an external CSV or Excel file. This script demo will read the CSV file and will
25 | consider the first row as the column header and create the column definitions accordingly, while the next few rows will be
26 | considered the dataset. Note that this example is demoing a CSV file import but in your application you could easily implemnt
27 | an Excel file uploading.
28 |
29 |
30 | A default CSV file can be download here.
31 |
32 |
33 |
51 |
52 |
34 |
35 |
42 |
43 | or
44 |
45 |
48 |
49 |
50 | 53 | 54 |
2 |
27 | 28 |
41 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example19-rowdetail.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { SlickDataView, SlickGrid } from 'angular-slickgrid';
3 | import { Example19Component } from './example19.component';
4 |
5 | @Component({
6 | styles: ['.detail-label { display: inline-flex; align-items: center; gap: 4px; padding: 4px; }', 'label { font-weight: 600; }'],
7 | templateUrl: './example19-rowdetail.component.html',
8 | standalone: false,
9 | })
10 | export class Example19RowDetailComponent {
11 | model!: {
12 | duration: Date;
13 | percentComplete: number;
14 | reporter: string;
15 | start: Date;
16 | finish: Date;
17 | effortDriven: boolean;
18 | assignee: string;
19 | title: string;
20 | };
21 |
22 | // you also have access to the following objects (it must match the exact property names shown below)
23 | addon: any; // row detail addon instance
24 | grid!: SlickGrid;
25 | dataView!: SlickDataView;
26 |
27 | // you can also optionally use the Parent Component reference
28 | // NOTE that you MUST provide it through the "parentRef" property in your "rowDetail" grid options
29 | parentRef!: Example19Component;
30 |
31 | alertAssignee(name: string) {
32 | if (typeof name === 'string') {
33 | alert(`Assignee on this task is: ${name.toUpperCase()}`);
34 | } else {
35 | alert('No one is assigned to this task.');
36 | }
37 | }
38 |
39 | deleteRow(model: any) {
40 | if (confirm(`Are you sure that you want to delete ${model.title}?`)) {
41 | // you first need to collapse all rows (via the 3rd party addon instance)
42 | this.addon.collapseAll();
43 |
44 | // then you can delete the item from the dataView
45 | this.dataView.deleteItem(model.rowId);
46 |
47 | this.parentRef.showFlashMessage(`Deleted row with ${model.title}`, 'danger');
48 | }
49 | }
50 |
51 | callParentMethod(model: any) {
52 | this.parentRef.showFlashMessage(`We just called Parent Method from the Row Detail Child Component on ${model.title}`);
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example20.component.scss:
--------------------------------------------------------------------------------
1 | /** You can change the pinned/frozen border styling through this css override */
2 |
3 | .slick-row .slick-cell.frozen:last-child,
4 | .slick-headerrow-column.frozen:last-child,
5 | .slick-footerrow-column.frozen:last-child {
6 | border-right: 1px solid #969696 !important;
7 | }
8 |
9 | .slick-pane-bottom {
10 | border-top: 1px solid #969696 !important;
11 | }
12 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example21.component.html:
--------------------------------------------------------------------------------
1 | {{ model?.title }}
3 |
4 |
5 |
15 |
16 |
6 | {{ model?.reporter }}
7 |
8 |
9 | {{ model?.duration | number: '1.2-2' }}
10 |
11 |
12 | {{ model?.percentComplete }}
13 |
14 |
17 |
24 |
25 |
26 |
18 | {{ model?.start | date: 'yyyy-MM-dd' }}
19 |
20 |
21 | {{ model?.finish | date: 'yyyy-MM-dd' }}
22 |
23 | 27 | 28 |
29 |
36 | 30 | Find out who is the Assignee 31 | 32 | 33 | 34 |
35 |
37 |
38 |
39 |
40 |
2 |
57 | 58 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example21.component.scss:
--------------------------------------------------------------------------------
1 | // sort indication will show behind Grid Menu since we don't have scroll,
2 | // we can offset these icons to fix that
3 | #grid21 {
4 | .slick-header-column:last-child {
5 | .slick-header-menu-button,
6 | .slick-resizable-handle,
7 | .slick-sort-indicator,
8 | .slick-sort-indicator-numbered {
9 | margin-right: 18px; // grid menu icon width
10 | }
11 | }
12 | }
13 |
14 | .duration-bg {
15 | background-color: #e9d4f1 !important;
16 | }
17 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example22.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 21: Grid AutoHeight 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | The SlickGrid option "autoHeight" can be used if you wish to keep the full height of the grid without any scrolling
16 |
25 |
26 | -
17 |
- You define a fixed grid width via "gridWidth" in the View 18 |
- You can still use the "autoResize" for the width to be resized automatically (the height will never change in this case) 19 |
- 20 | This dataset has 25 rows, if you scroll down the page you can see the entire set is shown without any grid scrolling (though you 21 | might have browser scrolling) 22 | 23 |
27 |
55 |
56 |
28 |
29 |
30 |
31 |
36 |
37 |
38 |
42 |
43 |
44 |
45 |
54 |
46 |
48 |
52 |
53 | 57 | 58 |
2 |
44 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example24.component.scss:
--------------------------------------------------------------------------------
1 | .bold {
2 | font-weight: bold;
3 | }
4 |
5 | .italic {
6 | font-style: italic;
7 | }
8 |
9 | .grey {
10 | color: grey;
11 | }
12 |
13 | .orange {
14 | color: orange;
15 | }
16 |
17 | .red {
18 | color: red;
19 | }
20 |
21 | .yellow {
22 | color: rgb(255, 235, 52);
23 | }
24 |
25 | .pointer {
26 | cursor: pointer;
27 | }
28 |
29 | .cell-menu-dropdown-outline {
30 | border: 1px solid #a0a0a0;
31 | border-radius: 4px;
32 | width: max-content;
33 | padding: 2px 14px;
34 | cursor: pointer;
35 | &:hover:not(.disabled) {
36 | background-color: #a3a3a3;
37 | color: #ffffff;
38 | }
39 |
40 | .mdi-caret-down {
41 | margin-left: 5px;
42 | }
43 | }
44 |
45 | .disabled {
46 | color: #d4d4d4;
47 | border: 1px solid #d8d8d8;
48 | }
49 | .slick-dark-mode {
50 | .disabled {
51 | border: 1px solid #616161;
52 | color: #686868;
53 | }
54 | }
55 |
56 | .row.locale {
57 | margin-top: 5px;
58 | }
59 |
60 | span.cell-menu {
61 | margin-left: 15px;
62 | }
63 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example25.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 22: Grids in Bootstrap Tabs 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | This example demonstrate the creation of multiple grids in Bootstrap Tabs
16 |
21 |
22 | -
17 |
- Regular mocked data with javascript 18 |
- Load dataset through Http-Client. Also note we need to call a "resizeGrid()" after focusing on this tab 19 |
23 |
24 |
25 |
30 |
31 |
32 |
33 |
39 |
40 |
41 |
42 |
43 | Grid 1 - Load Local Data
26 |Grid 2 - Load a JSON dataset through Http-Client
34 |
2 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example25.component.scss:
--------------------------------------------------------------------------------
1 | // @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
2 | // $slick-preheader-font-size: 18px,
3 | // $slick-preheader-border-right: 1px solid lightgrey,
4 | // );
5 |
6 | .alert {
7 | padding: 8px;
8 | }
9 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example26.component.scss:
--------------------------------------------------------------------------------
1 | h3 {
2 | font-style: normal;
3 | color: #3d3d3d;
4 | }
5 |
6 | #slickGridContainer-grid22 {
7 | /* you can change all filters heights via CSS variable */
8 | --slick-header-input-height: 34px;
9 |
10 | .slickgrid-container {
11 | .slick-headerrow-column {
12 | .ng-input {
13 | input {
14 | height: 100%;
15 | }
16 | }
17 | }
18 | }
19 | }
20 |
21 | .slick-headerrow-column ng-component,
22 | .ng-select {
23 | width: 100%;
24 | }
25 |
26 | .ng-select-focused {
27 | box-shadow: 0 0 0 0.25rem #0d6efd40;
28 | }
29 |
30 | .cell-menu-dropdown {
31 | border: 1px solid #a3a3a3;
32 | border-radius: 5px;
33 | display: flex;
34 | align-items: center;
35 | height: 100%;
36 | width: max-content;
37 | padding: 0 14px;
38 | cursor: pointer;
39 | &:hover {
40 | background-color: #a3a3a3;
41 | color: #ffffff;
42 | }
43 |
44 | .mdi-chevron-down {
45 | margin-left: 5px;
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example27.component.scss:
--------------------------------------------------------------------------------
1 | /* make sure to add the @use the SlickGrid Theme AFTER the variables changes */
2 | // @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.lite.scss';
3 |
4 | #grid27 {
5 | .slick-cell {
6 | display: inline-flex;
7 | align-items: center;
8 | gap: 4px;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example28.component.scss:
--------------------------------------------------------------------------------
1 | // @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
2 |
3 | #grid28 {
4 | .slick-cell {
5 | display: inline-flex;
6 | align-items: center;
7 | gap: 4px;
8 | }
9 |
10 | .avg-total {
11 | color: #a365ff;
12 | }
13 | .bold {
14 | font-weight: bold;
15 | }
16 | .total-suffix {
17 | margin-left: 10px;
18 | }
19 | .hidden {
20 | display: none;
21 | }
22 |
23 | .mdi-file-pdf-outline {
24 | color: #f14668;
25 | opacity: 0.9;
26 | }
27 |
28 | .mdi-folder, .mdi-folder-open {
29 | color: #ffa500;
30 | opacity: 0.9;
31 | }
32 | .mdi-file-music-outline {
33 | color: #3298dc;
34 | opacity: 0.9;
35 | }
36 | .mdi-file-excel-outline {
37 | color: #1E9F75;
38 | opacity: 0.9;
39 | }
40 | .mdi-file-document-outline,
41 | .mdi-file-question-outline {
42 | color: #686868;
43 | opacity: 0.9;
44 | }
45 |
46 | .display-inline-block {
47 | display: inline-block;
48 | }
49 | }
50 |
51 | // create a few 15px indentation multiplied by level number
52 | @for $i from 1 through 6 {
53 | .width-#{$i*15}px { width: #{$i * 15}px; }
54 | }
55 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example29.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 25: GraphQL Basic API without Pagination 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 |
47 |
48 |
16 | Use basic GraphQL query with any external public APIs (Wiki docs).
21 |
46 | -
22 |
- 23 | This Examples uses a Public GraphQL API that you can find at this link 24 | https://countries.trevorblades.com/ 25 | 26 |
- Compare to the regular and default GraphQL implementation, you will find the following differences 27 |
- 29 | There are no Pagination and we only use GraphQL once to load the data, then we use the grid as a regular local in-memory 30 | grid 31 | 32 |
- 33 | We enabled the following 2 flags "useLocalFiltering" and "useLocalSorting" to use regular (in memory) DataView filtering/sorting 34 | 35 |
- 37 | NOTE - This Example calls multiple GraphQL queries, this is ONLY for demo purposes, you would typically only call 1 query 38 | (which is what GraphQL is good at) 39 | 40 |
- 41 | This example is mainly to demo the use of GraphqlService to build the query and retrieve the data but also to demo how to mix that 42 | with local (in-memory) Filtering/Sorting strategies 43 | 44 |
-
28 |
49 |
58 |
59 |
50 |
57 |
51 | Status: {{status.text}}
52 |
53 |
54 |
55 |
56 |
2 |
27 |
28 |
30 |
31 |
32 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example29.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Column, GridOption, Formatters } from 'angular-slickgrid';
3 |
4 | const NB_ITEMS = 995;
5 |
6 | @Component({
7 | template: `
8 | 3 | Example 29: Custom header & footer Templates 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | Basic Grid with templates for custom headers and footers
16 |
20 |
21 | -
17 |
- Pass in custom templates to be rendered at predefined header and footer destinations 18 |
Grid with header and footer slot
29 |You've clicked me {{clickedTimes}} time(s)
`,
9 | selector: 'custom-footer',
10 | standalone: false,
11 | })
12 | export class CustomFooterComponent {
13 | clickedTimes = 0;
14 |
15 | clickMe() {
16 | this.clickedTimes++;
17 | }
18 | }
19 |
20 | @Component({
21 | templateUrl: './example29.component.html',
22 | standalone: false,
23 | })
24 | export class Example29Component implements OnInit {
25 | title = 'Example 29: Custom header & footer Templates';
26 | subTitle = `
27 | Basic Grid with templates for custom headers and footers
28 | -
29 |
- Pass in custom templates to be rendered at predefined header and footer destinations 30 |
2 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example33.component.scss:
--------------------------------------------------------------------------------
1 | // @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
2 | // $slick-button-border-color: #ababab
3 | // );
4 |
5 | // --
6 | // Custom Tooltips CSS Variables (or SASS equivalent)
7 | // ----------------------------------------------------
8 | // :root {
9 | // --slick-tooltip-background-color: #363636;
10 | // --slick-tooltip-border-color: #252525;
11 | // --slick-tooltip-border: 2px solid #252525;
12 | // --slick-tooltip-color: #ffffff;
13 |
14 | // --slick-tooltip-arrow-color: var(--slick-tooltip-border-color);
15 | // --slick-tooltip-arrow-size: 10px;
16 | // --slick-tooltip-arrow-side-margin: 15px;
17 | // }
18 |
19 | .editable-field {
20 | background-color: rgba(227, 240, 251, 0.57) !important;
21 | }
22 | .unsaved-editable-field {
23 | background-color: #fbfdd1 !important;
24 | }
25 |
26 | .header-tooltip-title {
27 | font-weight: bold;
28 | font-size: 14px;
29 | }
30 | .headerrow-tooltip-title {
31 | color: #AD0041;
32 | font-style: italic;
33 | font-size: 13px;
34 | font-weight: bold;
35 | }
36 |
37 | // it's preferable to use CSS Variables (or SASS) but if you want to change colors of your tooltip for 1 column in particular you can do it this way
38 | // e.g. change css of 5th column 4 (zero index: l4)
39 | .l4 {
40 | --slick-tooltip-color: #fff;
41 | }
42 | .l4 .header-tooltip-title,
43 | .l4 .headerrow-tooltip-title {
44 | color: #ffffff;
45 | }
46 | .l4.slick-custom-tooltip {
47 | color: #ffffff;
48 | background-color: #363636;
49 | border: 2px solid #252525;
50 | }
51 | .l4.slick-custom-tooltip.arrow-down::after,
52 | .l4.slick-custom-tooltip.arrow-up::after {
53 | border-width: 10px; // arrow size
54 | }
55 | .l4.slick-custom-tooltip.arrow-down::after {
56 | border-top-color: #252525; // arrow down color
57 | }
58 | .l4.slick-custom-tooltip.arrow-up::after {
59 | top: -20px; // arrow size * 2
60 | border-bottom-color: #252525; // arrow up color
61 | }
62 | .l4.slick-custom-tooltip.arrow-left-align::after {
63 | margin-left: 15px;
64 | }
65 | .l4.slick-custom-tooltip.arrow-right-align::after {
66 | margin-left: calc(100% - 20px - 15px); // 20px is (arrow size * 2), 15px is your extra side margin
67 | }
68 | .l6.slick-custom-tooltip.arrow-left-align::after {
69 | margin-left: 4px;
70 | }
71 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example34.component.scss:
--------------------------------------------------------------------------------
1 | // @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.lite.scss';
2 |
3 | $sparkline-color: #00b78d;
4 | // $sparkline-color: #573585;
5 |
6 | .trading-platform.full-screen {
7 | position: absolute;
8 | top: 0;
9 | left: 0;
10 | right: 0;
11 | bottom: 0;
12 | padding: 10px 12px 0 10px;
13 | background-color: white;
14 | z-index: 1040;
15 | position: fixed;
16 | }
17 | .changed-gain {
18 | background-color: #eafae8 !important;
19 | }
20 | .changed-loss {
21 | background-color: #ffeae8 !important;
22 | }
23 | .simulation-form {
24 | input[type=number] {
25 | height: 32px;
26 | width: 50px;
27 | border: 1px solid #c0c0c0;
28 | border-radius: 3px;
29 | }
30 | div.range {
31 | display: contents;
32 | width: 200px;
33 | label.form-label {
34 | margin: 0;
35 | }
36 | input.form-range {
37 | width: 120px;
38 | }
39 | }
40 | .refresh-rate input {
41 | height: 30px;
42 | width: 46px;
43 | }
44 | }
45 | .sparkline {
46 | stroke: $sparkline-color;
47 | fill: rgba($sparkline-color, 0.05);
48 | }
49 | *[hidden] {
50 | display: none;
51 | }
52 |
53 | .trading-tooltip {
54 | position: absolute;
55 | background: rgba(0, 0, 0, .7);
56 | color: #fff;
57 | padding: 2px 5px;
58 | font-size: 12px;
59 | white-space: nowrap;
60 | z-index: 9999;
61 | }
62 |
63 | .slick-dark-mode,
64 | .dark-mode {
65 | .text-success {
66 | color: #42b47f !important
67 | }
68 | .changed-gain {
69 | background-color: #00ff001d !important;
70 | }
71 | .changed-loss {
72 | background-color: #ff00001b !important;
73 | }
74 | .trading-platform.full-screen {
75 | background-color: #33393e;
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example35.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 33: Regular & Custom Tooltips 4 | 5 | 10 | code 11 | 12 | 13 | 16 |
17 |
18 | This demo shows how to create Regular & Custom Tooltips (Wiki docs)
23 |
24 |
31 |
32 | 24 |
-
25 |
- optionally parse regular [title] attributes and transform them into tooltips 26 |
- create your own Custom Tooltip via a Custom Formatter 27 |
- create an Async Custom Tooltip (Promise/Observable) to allowing fetching data from an API 28 |
- optionally add Custom Tooltip on Column Header & Column Header-Row (filters) 29 |
33 |
41 |
42 |
34 |
35 |
36 |
37 |
38 | Lazy loading collection...
39 |
40 | 2 | Example 35: Row Based Editing 3 | 4 | 9 | code 10 | 11 | 12 |
13 | 14 |
15 |
49 |
50 | -
16 |
- 17 | The Row Based Edit plugin allows you to edit either a single or multiple specific rows at a time, while disabling the rest of the grid 18 | rows. 19 | 20 |
- 21 | Editedable rows, as well as modified cells are highlighted with a different color, which you can customize using css variables (see 22 | 26 | grid-base-row-editing.component.scss ) 28 | 29 |
- Modifications are kept track of and if the cancel button is pressed, all modifications are rolled back. 30 |
-
31 | If the save button is pressed, a custom "onBeforeRowUpdated" callback is called, which you can use to save the data with your
32 | backend.
33 | The callback needs to return a Promise<boolean> and if the promise resolves to true, then the row will be updated, otherwise it 34 | will be cancelled and stays in edit mode. You can try out the later by defining a Duration value larger than 40. 35 |
36 | NOTE: You can also combine this with e.g. Batch Editing like shown 38 | in Example 30 40 |
41 | - 42 | This example additionally uses the ExcelCopyBuffer Plugin, which you can see also in Slickgrid-Universal 43 | example 19. The example defines a rule that pastes in the 44 | first column are prohibited. In combination with the Row Based Editing Plugin though, this rule gets enhanced with the fact that only 45 | the edited rows are allowed to be pasted into, while still respecting the original rule. 46 | 47 |
52 |
67 |
53 |
60 |
61 |
62 |
63 | Status:
64 |
65 |
66 |
2 |
26 |
48 |
49 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example36.component.scss:
--------------------------------------------------------------------------------
1 | input[type=number].narrow {
2 | height: 32px;
3 | width: 50px;
4 | border: 1px solid #c0c0c0;
5 | border-radius: 3px;
6 | }
7 |
8 | #grid36 {
9 | .slick-row:not(.slick-group) >.cell-unselectable {
10 | background: #ececec !important;
11 | font-weight: bold;
12 | }
13 |
14 | .text-sub-total {
15 | font-style: italic;
16 | color: rgb(33, 80, 115) !important;
17 | }
18 | .text-taxes {
19 | font-style: italic;
20 | color: rgb(198, 89, 17);
21 | }
22 | .text-total {
23 | font-weight: bold;
24 | color: rgb(0, 90, 158);
25 | }
26 | }
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example37.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 36: Excel Export Formulas 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | Grid with Excel Formulas (Wiki docs). Calculate Totals via Formatters in the UI, but use Excel Formula when exporting via
20 |
24 |
25 | excelExportOptions.valueParserCallback When Grouped we will also calculate the Group Totals in the UI via Group Formatter
21 | and we again use Excel Formula to calculate the Group Totals (sum) dynamically. For Grouping we need to use
22 | groupTotalsExcelExportOptions.valueParserCallback instead.
23 |
27 |
31 |
32 |
35 |
38 |
39 |
40 | Tax Rate (%):
41 |
42 |
45 |
46 |
47 |
2 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example38.component.scss:
--------------------------------------------------------------------------------
1 | .demo38 {
2 | .badge {
3 | display: none;
4 | &.fully-loaded {
5 | display: inline-flex;
6 | }
7 | }
8 | }
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example39.component.scss:
--------------------------------------------------------------------------------
1 | .demo39 {
2 | .badge {
3 | display: none;
4 | &.fully-loaded {
5 | display: inline-flex;
6 | }
7 | }
8 | }
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example40.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 37: Footer Totals Row 4 | 8 | 9 | 14 | code 15 | 16 | 17 |
18 |Display a totals row at the end of the grid.
19 |
20 |
2 |
77 |
78 |
79 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example41.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 40: Infinite Scroll from JSON data 4 | 5 | 10 | code 11 | 12 | 13 | 16 |
17 | 18 |
19 |
30 |
31 | -
20 |
- 21 | Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. In its simplest 22 | form, the more the user scrolls down, the more rows get loaded. 23 | 24 |
-
25 | NOTES:
presets.paginationis not supported with Infinite Scroll and will revert to the first page, simply because since 26 | we keep appending data, we always have to start from index zero (no offset). 27 |
28 |
32 |
57 |
58 |
33 |
42 |
45 |
48 |
51 |
52 |
53 |
54 |
55 |
56 |
59 | Metrics:
60 |
61 | {{ metrics.endTime | date: 'dd MMM, h:mm:ssa' }} —
62 | {{ metrics.totalItemCount }}
63 | items
64 |
65 |
66 |
67 |
2 |
16 |
22 |
23 |
52 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example41.component.scss:
--------------------------------------------------------------------------------
1 | .drag-message {
2 | position: absolute;
3 | display: inline-block;
4 | padding: 4px 10px;
5 | background: #e0e0e0;
6 | border: 1px solid gray;
7 | z-index: 99999;
8 | border-radius: 8px;
9 | box-shadow: 2px 2px 6px silver;
10 | }
11 |
12 | .grid-header {
13 | display: flex;
14 | align-items: center;
15 | box-sizing: border-box;
16 | font-weight: bold;
17 | height: 35px;
18 | padding-left: 8px;
19 | width: 100%;
20 | }
21 |
22 | .recycle-bin {
23 | background: transparent;
24 | cursor: default;
25 | width: 120px;
26 | border: 2px solid #e4e4e4;
27 | background: beige;
28 | padding: 4px;
29 | font-size: 12pt;
30 | font-weight: bold;
31 | color: black;
32 | text-align: center;
33 | border-radius: 10px;
34 |
35 | &.drag-dropzone {
36 | border: 2px dashed pink;
37 | }
38 | &.drag-hover {
39 | background: pink;
40 | cursor: crosshair;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example42.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 41: Drag & Drop 4 | 5 | 10 | code 11 | 12 | 13 |
14 | 15 |
16 |
17 | - Click to select, Ctrl-click to toggle selection(s).
18 | - Drag one or more rows by the handle icon to reorder.
19 | - Drag one or more rows by selection and drag to the recycle bin to delete.
20 |
21 |
22 |
23 |
24 |
51 |
25 |
44 |
45 |
26 |
36 |
37 |
41 |
42 |
43 |
38 |
39 |
40 |
46 |
50 |
47 | Recycle Bin
48 |
49 |
2 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example43.component.scss:
--------------------------------------------------------------------------------
1 | #grid43 {
2 | --slick-border-color: #d4d4d4;
3 | // --slick-cell-border-left: 1px solid var(--slick-border-color);
4 | --slick-header-menu-display: none;
5 | --slick-header-column-height: 20px;
6 | --slick-grid-border-color: #d4d4d4;
7 | --slick-row-selected-color: #d4ebfd;
8 | --slick-cell-active-box-shadow: inset 0 0 0 1px #3ca4ff;
9 |
10 | --slick-row-mouse-hover-box-shadow: 0;
11 | --slick-cell-odd-background-color: #fff;
12 | --slick-cell-border-right: 1px solid var(--slick-border-color);
13 | --slick-cell-border-bottom: 0;
14 | --slick-cell-border-top: 1px solid var(--slick-border-color);
15 | --slick-header-filter-row-border-bottom: 1px solid var(--slick-border-color);
16 | --slick-cell-border-left: 0;
17 | --slick-cell-box-shadow: none;
18 | --slick-row-mouse-hover-color: #fff;
19 | --slick-cell-display: flex;
20 |
21 | .slick-cell.rowspan {
22 | // background: white;
23 | z-index: 9;
24 | }
25 | .slick-cell {
26 | display: flex;
27 | align-items: center;
28 | /* justify-content: center; */
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example44.component.scss:
--------------------------------------------------------------------------------
1 | #grid44 {
2 | --slick-cell-active-box-shadow: inset 0 0 0 1px #e35ddc;
3 |
4 | .slick-row.even .slick-cell.cell-very-high {
5 | background-color: #f0ffe0;
6 | }
7 | .slick-row.odd .slick-cell.cell-var-span {
8 | background-color: #87ceeb;
9 | }
10 | .slick-row .slick-cell.rowspan {
11 | background-color: #95b7a2;
12 | z-index: 10;
13 | }
14 | .slick-row[data-row='3'] .slick-cell.l3.rowspan {
15 | background-color: #95b7a2;
16 | }
17 | .slick-row[data-row='2'] .slick-cell.l3.r5 {
18 | background-color: #ddfffc;
19 | }
20 | .slick-row[data-row='0'] .slick-cell.rowspan,
21 | .slick-row[data-row='8'] .slick-cell.rowspan {
22 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQ0lEQVQYV2N8/fr1fwY84M6dOwyM+BSBFKioqOBWBFMAsgSrScgKsCpCV4ChCJsCFEW4FMAV4VMAVnT8+PH/IG/iAwDA1DlezHn8bwAAAABJRU5ErkJggg==);
23 | }
24 | .slick-row[data-row='8'] .slick-cell.rowspan:nth-child(4) {
25 | background: #f0ffe0;
26 | }
27 | .slick-row[data-row='12'] .slick-cell.rowspan {
28 | background: #bd8b8b;
29 | }
30 | .slick-row[data-row='15'] .slick-cell.rowspan {
31 | background: #edc12e;
32 | }
33 | .slick-row[data-row='85'] .slick-cell.rowspan {
34 | background: #8baebd;
35 | }
36 | .slick-cell.active {
37 | /* use a different active cell color to make it a bit more obvious */
38 | box-shadow: inset 0 0 0 1px #e35ddc;
39 | }
40 | .cellValue {
41 | float: right;
42 | font-size: 14px;
43 | }
44 | .valueComment {
45 | color: #7c8983;
46 | font-size: 12px;
47 | font-style: italic;
48 | width: fit-content;
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example45-detail.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 42: Custom Pagination 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | You can create a Custom Pagination by passing an Angular Custom Component and it must
19 |
20 | implements BasePaginationComponent.
16 | Any of the pagination controls could be moved anywhere on the page (for example we purposely moved the page size away from the rest of
17 | the pagination elements).
18 |
21 |
25 |
26 |
27 | Page Size
28 |
29 |
30 |
31 |
32 |
2 |
16 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/example45.component.scss:
--------------------------------------------------------------------------------
1 | #grid45 {
2 | --slick-cell-active-box-shadow: inset 0 0 0 1px #e35ddc;
3 |
4 | .slick-row.even .slick-cell.cell-very-high {
5 | background-color: #f0ffe0;
6 | }
7 | .slick-row.odd .slick-cell.cell-var-span {
8 | background-color: #87ceeb;
9 | }
10 | .slick-row .slick-cell.rowspan {
11 | background-color: #95b7a2;
12 | z-index: 10;
13 | }
14 | .slick-row[data-row='3'] .slick-cell.l3.rowspan {
15 | background-color: #95b7a2;
16 | }
17 | .slick-row[data-row='2'] .slick-cell.l3.r5 {
18 | background-color: #ddfffc;
19 | }
20 | .slick-row[data-row='0'] .slick-cell.rowspan,
21 | .slick-row[data-row='8'] .slick-cell.rowspan {
22 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQ0lEQVQYV2N8/fr1fwY84M6dOwyM+BSBFKioqOBWBFMAsgSrScgKsCpCV4ChCJsCFEW4FMAV4VMAVnT8+PH/IG/iAwDA1DlezHn8bwAAAABJRU5ErkJggg==);
23 | }
24 | .slick-row[data-row='8'] .slick-cell.rowspan:nth-child(4) {
25 | background: #f0ffe0;
26 | }
27 | .slick-row[data-row='12'] .slick-cell.rowspan {
28 | background: #bd8b8b;
29 | }
30 | .slick-row[data-row='15'] .slick-cell.rowspan {
31 | background: #edc12e;
32 | }
33 | .slick-row[data-row='85'] .slick-cell.rowspan {
34 | background: #8baebd;
35 | }
36 | .slick-cell.active {
37 | /* use a different active cell color to make it a bit more obvious */
38 | box-shadow: inset 0 0 0 1px #e35ddc;
39 | }
40 | .cellValue {
41 | float: right;
42 | font-size: 14px;
43 | }
44 | .valueComment {
45 | color: #7c8983;
46 | font-size: 12px;
47 | font-style: italic;
48 | width: fit-content;
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/filter-ng-select.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Subject } from 'rxjs';
3 |
4 | // the appendTo="body" (necessary for SlickGrid filter) requires the body to be position relative like so
5 | //
6 | @Component({
7 | template: `
8 | {{ model.companyName }} - Order Details (id: {{ model.id }})
3 |
4 |
13 |
14 |
15 |
2 |
3 |
4 |
5 |
6 | {{currentPagination?.dataFrom}}
7 | -
8 |
9 | {{currentPagination?.dataTo}}
10 |
11 | of
12 |
13 |
14 | {{currentPagination?.totalItems}}
15 | items
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/grid-custom-pager.component.scss:
--------------------------------------------------------------------------------
1 | @use 'sass:color';
2 |
3 | .custom-pagination {
4 | display: flex;
5 | justify-content: flex-end;
6 | margin: 10px;
7 | font-size: 13px;
8 |
9 | .custom-pagination-settings {
10 | display: inline-flex;
11 | align-items: center;
12 | margin-right: 30px;
13 | }
14 |
15 | .custom-pagination-nav {
16 | display: flex;
17 | align-items: center;
18 | list-style-type: none;
19 |
20 | .page-item {
21 | display: flex;
22 | width: 26px;
23 | justify-content: center;
24 | margin: 0;
25 | &.disabled .pagination-link {
26 | color: rgb(180, 179, 179);
27 | background-color: rgb(180, 179, 179);
28 | }
29 | }
30 |
31 | .page-number {
32 | padding: 0 5px;
33 | .page-number {
34 | display: inline-flex;
35 | justify-content: center;
36 | width: 20px;
37 | }
38 | }
39 |
40 | nav {
41 | ul.custom-pagination-ul {
42 | display: flex;
43 | list-style-type: none;
44 | margin: 0;
45 | padding: 0 5px;
46 | color: #0d6efd;
47 |
48 | .pagination-link {
49 | color: #0d6efd;
50 | &:hover {
51 | color: color.adjust(#0d6efd, $lightness: 10%);
52 | }
53 | }
54 | }
55 | }
56 | }
57 | }
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/grid-remote.component.html:
--------------------------------------------------------------------------------
1 |
20 |
30 |
47 |
31 | Page
32 | {{currentPagination?.pageNumber}}
33 | of
34 | {{currentPagination?.pageCount}}
35 |
36 |
46 |
2 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/home.component.html:
--------------------------------------------------------------------------------
1 | 3 | {{title}} 4 | 5 | 8 | code 9 | 10 | 11 |
12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 | Note:
21 | this demo no longer displays any results because the WebAPI Key to connect and query the Octopart Component
22 | Search is no longer valid. However the concept remains valid, which is to use your own Custom DataView
23 | instead of the default SlickGrid DataView used by this library.
24 |
25 |
26 |
27 |
28 | Loading...
29 |
30 |
31 |
2 |
6 | 7 |
26 | Like my work? You can support me with caffeine :) 27 | 28 |
29 | 30 | 31 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | templateUrl: './home.component.html',
5 | standalone: false,
6 | })
7 | export class HomeComponent { }
8 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/rowdetail-preload.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | template: `Angular-Slickgrid - Demo Site
3 |This site is to demo multiple usage of Angular-Slickgrid, choose an example from the left side menu
4 |
5 | 6 | 7 |
Quick intro
8 |9 | One of the best javascript datagrid 10 | SlickGrid which was originally developed by @mleibman is now 11 | available to Angular. I have tried, and used, a few datagrids and SlickGrid beats most of them in terms of functionalities and 12 | performance (it can easily even handle a million row). 13 |
14 |Documentation
15 |
16 | The documentation is powered by GitBook and can be found at this link
17 | Angular-Slickgrid - Documentation, so be sure to consult
18 | it before opening any new issue.
19 |
20 | The
21 | HOWTO - Quick Start
22 | is the best starting point to get going with this library.
23 |
26 | Like my work? You can support me with caffeine :) 27 | 28 |
29 | 30 | 31 |
38 |
39 | 5 | 6 | Loading... 7 |
`, 8 | standalone: false, 9 | }) 10 | export class RowDetailPreloadComponent {} 11 | -------------------------------------------------------------------------------- /bootstrap5-demo-with-locales/src/app/examples/swt-common-grid-test.component.html: -------------------------------------------------------------------------------- 1 |
2 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/examples/utilities.ts:
--------------------------------------------------------------------------------
1 | export function randomNumber(min: number, max: number, floor = true) {
2 | const number = Math.random() * (max - min + 1) + min;
3 | return floor ? Math.floor(number) : number;
4 | }
5 |
6 | export function zeroPadding(input: string | number) {
7 | const number = parseInt(input as string, 10);
8 | return number < 10 ? `0${number}` : number;
9 | }
10 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/app/locales/en.ts:
--------------------------------------------------------------------------------
1 | export const localeEnglish = {
2 | // required texts
3 | TEXT_ALL_SELECTED: 'All Selected',
4 | TEXT_CANCEL: 'Cancel',
5 | TEXT_CLEAR_ALL_FILTERS: 'Clear all Filters',
6 | TEXT_CLEAR_ALL_GROUPING: 'Clear all Grouping',
7 | TEXT_CLEAR_ALL_SORTING: 'Clear all Sorting',
8 | TEXT_CLEAR_PINNING: 'Unfreeze Columns/Rows',
9 | TEXT_COLLAPSE_ALL_GROUPS: 'Collapse all Groups',
10 | TEXT_COLUMNS: 'Columns',
11 | TEXT_COLUMN_RESIZE_BY_CONTENT: 'Resize by Content',
12 | TEXT_COMMANDS: 'Commands',
13 | TEXT_CONTAINS: 'Contains',
14 | TEXT_COPY: 'Copy',
15 | TEXT_EMPTY_DATA_WARNING_MESSAGE: 'No data to display.',
16 | TEXT_ENDS_WITH: 'Ends With',
17 | TEXT_EQUALS: 'Equals',
18 | TEXT_EQUAL_TO: 'Equal to',
19 | TEXT_EXPAND_ALL_GROUPS: 'Étendre tous les groupes',
20 | TEXT_EXPORT_TO_CSV: 'Export in CSV format',
21 | TEXT_EXPORT_TO_EXCEL: 'Export to Excel',
22 | TEXT_EXPORT_TO_TAB_DELIMITED: 'Export in Text format (Tab delimited)',
23 | TEXT_EXPORT_TO_TEXT_FORMAT: 'Export in Text format',
24 | TEXT_FILTER_SHORTCUTS: 'Filter Shortcuts',
25 | TEXT_FORCE_FIT_COLUMNS: 'Force fit columns',
26 | TEXT_FREEZE_COLUMNS: 'Freeze Columns',
27 | TEXT_GREATER_THAN: 'Greater than',
28 | TEXT_GREATER_THAN_OR_EQUAL_TO: 'Greater than or equal to',
29 | TEXT_GROUP_BY: 'Group By',
30 | TEXT_HIDE_COLUMN: 'Hide Column',
31 | TEXT_LESS_THAN: 'Less than',
32 | TEXT_LESS_THAN_OR_EQUAL_TO: 'Less than or equal to',
33 | TEXT_LOADING: 'Loading...',
34 | TEXT_NO_ELEMENTS_FOUND: 'No elements found',
35 | TEXT_NOT_CONTAINS: 'Not contains',
36 | TEXT_NOT_EQUAL_TO: 'Not equal to',
37 | TEXT_OK: 'OK',
38 | TEXT_REMOVE_FILTER: 'Remove Filter',
39 | TEXT_REMOVE_SORT: 'Remove Sort',
40 | TEXT_SAVE: 'Save',
41 | TEXT_SELECT_ALL: 'Select All',
42 | TEXT_SORT_ASCENDING: 'Sort Ascending',
43 | TEXT_SORT_DESCENDING: 'Sort Descending',
44 | TEXT_STARTS_WITH: 'Starts With',
45 | TEXT_X_OF_Y_SELECTED: '# of % selected',
46 |
47 | // optional locale texts (depending on which features of the grid you use, you might (or not) need them or not)
48 | TEXT_BLANK_VALUES: 'Blank Values',
49 | TEXT_NON_BLANK_VALUES: 'Non-Blank Values',
50 | TEXT_FUTURE: 'Future',
51 | TEXT_ITEMS: 'items',
52 | TEXT_ITEMS_PER_PAGE: 'items per page',
53 | TEXT_ITEMS_SELECTED: 'items selected',
54 | TEXT_LAST_UPDATE: 'Last Update',
55 | TEXT_NEXT_20_DAYS: 'Next 20 days',
56 | TEXT_OF: 'of',
57 | TEXT_PAGE: 'Page',
58 | TEXT_PAST: 'Past',
59 | TEXT_REFRESH_DATASET: 'Refresh Dataset',
60 | TEXT_SYNCHRONOUS_RESIZE: 'Synchronous resize',
61 | TEXT_TODAY: 'Today',
62 | TEXT_TOGGLE_FILTER_ROW: 'Toggle Filter Row',
63 | TEXT_TOGGLE_PRE_HEADER_ROW: 'Toggle Pre-Header Row',
64 | };
65 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghiscoding/angular-slickgrid-demos/3aa8510aed2002fede6ecbf7b90d981bca37fd3b/bootstrap5-demo-with-locales/src/assets/.gitkeep
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/assets/angular-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghiscoding/angular-slickgrid-demos/3aa8510aed2002fede6ecbf7b90d981bca37fd3b/bootstrap5-demo-with-locales/src/assets/angular-logo.png
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/assets/angular-logo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghiscoding/angular-slickgrid-demos/3aa8510aed2002fede6ecbf7b90d981bca37fd3b/bootstrap5-demo-with-locales/src/assets/angular-logo2.png
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghiscoding/angular-slickgrid-demos/3aa8510aed2002fede6ecbf7b90d981bca37fd3b/bootstrap5-demo-with-locales/src/favicon.ico
--------------------------------------------------------------------------------
/bootstrap5-demo-with-locales/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 3 | Example 31: Custom Backend Server Pagination 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | A simple component to show that it is possible to create a custom Backend Service for any other backend querying, the example below is
16 | for Oracle.
17 |
18 |
19 |
20 |
30 |
21 |
26 |
22 | Custom Pagination URL:
23 |
24 |
25 |
27 |
29 |
2 |
22 |
30 |
31 |
43 | 44 |
49 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example02.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 1: Basic Grids 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | Basic Grids with fixed sizes (800 x 225) set by "gridHeight" & "gridWidth"
16 |
20 |
21 | -
17 |
- Wiki HOWTO link 18 |
22 |
23 | Grid 1
24 |
28 |
29 |
30 |
31 |
32 |
39 |
40 |
41 |
42 | 43 | 44 |
Grid 2 (with local Pagination)
45 |
46 |
47 |
48 |
2 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example07.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 2: Grid with Formatters 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | Grid with Custom and/or included Slickgrid Formatters (Wiki docs).
20 |
32 |
33 |
36 |
37 | -
21 |
- The 2 last columns are using Custom Formatters 22 |
- The "Completed" column uses a the "onCellClick" event and a formatter to simulate a toggle action 24 |
- 26 | Support Excel Copy Buffer (SlickGrid Copy Manager Plugin), you can use it by simply enabling "enableExcelCopyBuffer" flag. Note that 27 | it will only evaluate Formatter when the "exportWithFormatter" flag is enabled (through "ExportOptions" or the column definition) 28 | 29 |
- This example also has auto-resize enabled, and we also demo how you can pause the resizer if you wish to 30 |
-
23 |
2 |
44 |
45 |
46 |
47 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example07.component.scss:
--------------------------------------------------------------------------------
1 | /* 1st grid */
2 | #grid7-1 {
3 | --slick-header-button-float: right;
4 | }
5 |
6 | /* 2nd grid */
7 | #grid7-2 {
8 | --slick-header-button-margin: 4px 0 50px 0;
9 | --slick-header-button-float: left;
10 | }
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example08.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 7: Header Button Plugin 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | This example demonstrates using the Slick.Plugins.HeaderButtons plugin to easily add buttons to colum headers. These buttons can
16 | be specified directly in the column definition, and are very easy to configure and use. (Wiki docs)
21 |
35 |
36 | -
22 |
- Resize the 1st column to see all icon/command 23 |
- Mouse hover the 2nd column to see it's icon/command 24 |
- For all the other columns, click on top-right red circle icon to enable highlight of negative numbers. 25 |
- 26 | Use override callback functions to change the properties of show/hide, enable/disable the menu or certain item(s) from the list 27 | 28 |
- These callbacks are: "itemVisibilityOverride", "itemUsabilityOverride" 30 |
- for example the "Column E" does not show the header button via "itemVisibilityOverride" 31 |
- for example the "Column J" header button is displayed but it not usable via "itemUsabilityOverride" 32 |
-
29 |
Grid 1
37 |47 |
Grid 2 - with both Header Buttons & Menus
48 |
2 |
52 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example08.component.scss:
--------------------------------------------------------------------------------
1 | @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
2 | $slick-header-menu-button-border-width: 0px 1px,
3 | $slick-header-menu-button-icon-svg-path: "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M7,10L12,15L17,10H7Z",
4 | $slick-header-menu-button-icon-size: 16px,
5 | $slick-header-menu-button-padding: 10px 0 0 3px,
6 | $slick-sort-indicator-hint-opacity: 0,
7 | );
8 |
9 | .blue {
10 | color: rgb(73, 73, 255);
11 | }
12 | .orange {
13 | color: orange;
14 | }
15 | .red {
16 | color: red;
17 | }
18 | .bold {
19 | font-weight: bold;
20 | }
21 | .italic {
22 | font-style: italic;
23 | }
24 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example09.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 8: Header Menu Plugin 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | This example demonstrates using the Slick.Plugins.HeaderMenu plugin to easily add menus to colum headers.
16 | These menus can be specified directly in the column definition, and are very easy to configure and use. (Wiki docs) 21 |
38 |
39 |
43 | Locale:
44 |
45 | {{ selectedLanguage + '.json' }}
46 |
47 |
48 | 16 | These menus can be specified directly in the column definition, and are very easy to configure and use. (Wiki docs) 21 |
-
22 |
- Now enabled by default in the Global Grid Options, it will add the default commands of (hide column, sort asc/desc) 23 |
- Hover over any column header to see an arrow showing up on the right 24 |
- Try Sorting (multi-sort) the 2 columns "Duration" and "% Complete" (the other ones are disabled) 25 |
- Try hiding any columns (you use the "Column Picker" plugin by doing a right+click on the header to show the column back) 26 |
- Note: The "Header Button" & "Header Menu" Plugins cannot be used at the same time 27 |
- You can change the menu icon via SASS variables as shown in this demo (check all SASS variables) 28 |
- 29 | Use override callback functions to change the properties of show/hide, enable/disable the menu or certain item(s) from the list 30 | 31 |
- These callbacks are: "itemVisibilityOverride", "itemUsabilityOverride" 33 |
- for example if we want to disable the "Help" command over the "Title" and "Completed" column 34 |
- for example don't show Help on column "% Complete" 35 |
-
32 |
49 |
50 |
51 |
2 |
56 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example09.component.scss:
--------------------------------------------------------------------------------
1 | @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
2 | $slick-column-picker-icon-checked-svg-path: "M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,5V19H5V5H19M10,17L6,13L7.41,11.58L10,14.17L16.59,7.58L18,9",
3 | $slick-column-picker-icon-unchecked-svg-path: "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z",
4 | $slick-column-picker-icon-font-size: 16px,
5 | $slick-checkbox-opacity-hover: 0.35,
6 | );
7 |
8 | .blue {
9 | color: rgb(73, 73, 255);
10 | }
11 | .orange {
12 | color: orange;
13 | }
14 | .red {
15 | color: red;
16 | }
17 | .bold {
18 | font-weight: bold;
19 | }
20 | .italic {
21 | font-style: italic;
22 | }
23 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example14.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 9: Grid Menu Control 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | This example demonstrates using the Slick.Controls.GridMenu plugin to easily add a Grid Menu (aka hamburger menu) on the top
16 | right corner of the grid. (Wiki docs)
19 |
20 |
32 |
33 |
37 |
41 |
42 | Locale:
43 | {{ selectedLanguage + '.json' }}
44 |
45 | 20 |
-
21 |
- 22 | You can change the Grid Menu icon, for example "mdi-dots-vertical" (which is shown in this example) 24 | 25 |
- By default the Grid Menu shows all columns which you can show/hide them 26 |
- You can configure multiple custom "commands" to show up in the Grid Menu and use the "onGridMenuCommand()" callback 27 |
- Doing a "right + click" over any column header will also provide a way to show/hide a column (via the Column Picker Plugin) 28 |
- You can change the icons of both picker via SASS variables as shown in this demo (check all SASS variables) 29 |
- You can also show the Grid Menu anywhere on your page 30 |
46 |
53 |
54 |
55 |
2 |
30 |
31 |
32 | 33 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example14.component.scss:
--------------------------------------------------------------------------------
1 | /** You can change the pinned/frozen border styling through this css override */
2 |
3 | .slick-row .slick-cell.frozen:last-child,
4 | .slick-headerrow-column.frozen:last-child,
5 | .slick-footerrow-column.frozen:last-child {
6 | border-right: 1px solid #969696 !important;
7 | }
8 |
9 | .slick-pane-bottom {
10 | border-top: 1px solid #969696 !important;
11 | }
12 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example15.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 14: Column Span & Header Grouping 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | This example demonstrates how to easily span a row over multiple columns & how to group header titles.
16 |
27 |
28 | -
17 |
- 18 | Note that you can add Sort but remember that it will sort by the data which the row contains, even if the data is visually hidden by 19 | colspan it will still sort it 20 | 21 |
- 22 | Header Grouping spanning accross multiple columns is working but has some UI issues on window resize. If anyone can fix it, probably 23 | some CSS issues, please let us know. 24 | 25 |
Grid 1 (with Header Grouping & Colspan)
29 |32 | 33 |
Grid 2 (with Header Grouping & Frozen/Pinned Columns)
34 |
35 |
38 |
41 |
42 |
2 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example17.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 15: Grid State & Presets using Local Storage 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | Grid State & Preset (Wiki docs)
20 |
21 |
31 |
32 |
36 |
37 |
41 | Locale:
42 |
43 | {{ selectedLanguage + '.json' }}
44 |
45 |
46 | 21 |
-
22 |
- Uses Local Storage to persist the Grid State and uses Grid Options "presets" to put the grid back to it's previous state 23 |
- 25 | to demo this, simply change any columns (position reorder, visibility, size, filter, sort), then refresh your browser with (F5) 26 | 27 |
- Local Storage is just one option, you can use whichever is more convenient for you (Local Storage, Session Storage, DB, ...) 29 |
-
24 |
2 |
47 | 48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example19-rowdetail.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 17: Dynamically Create Grid from CSV / Excel import 4 | 5 | 10 | code 11 | 12 | 13 | 16 |
17 | 18 |
19 | Allow creating a grid dynamically by importing an external CSV or Excel file. This script demo will read the CSV file and will consider
20 | the first row as the column header and create the column definitions accordingly, while the next few rows will be considered the
21 | dataset. Note that this example is demoing a CSV file import but in your application you could easily implemnt an Excel file uploading.
22 |
23 |
24 | A default CSV file can be download here.
25 |
26 |
27 |
45 |
46 |
28 |
29 |
36 |
37 | or
38 |
39 |
42 |
43 |
44 | 47 | 48 |
2 |
27 | 28 |
41 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example19-rowdetail.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { SlickDataView, SlickGrid } from 'angular-slickgrid';
3 | import { Example19Component } from './example19.component';
4 |
5 | @Component({
6 | styles: ['.detail-label { display: inline-flex; align-items: center; gap: 4px; padding: 4px; }', 'label { font-weight: 600; }'],
7 | templateUrl: './example19-rowdetail.component.html',
8 | standalone: false,
9 | })
10 | export class Example19RowDetailComponent {
11 | model!: {
12 | duration: Date;
13 | percentComplete: number;
14 | reporter: string;
15 | start: Date;
16 | finish: Date;
17 | effortDriven: boolean;
18 | assignee: string;
19 | title: string;
20 | };
21 |
22 | // you also have access to the following objects (it must match the exact property names shown below)
23 | addon: any; // row detail addon instance
24 | grid!: SlickGrid;
25 | dataView!: SlickDataView;
26 |
27 | // you can also optionally use the Parent Component reference
28 | // NOTE that you MUST provide it through the "parentRef" property in your "rowDetail" grid options
29 | parentRef!: Example19Component;
30 |
31 | alertAssignee(name: string) {
32 | if (typeof name === 'string') {
33 | alert(`Assignee on this task is: ${name.toUpperCase()}`);
34 | } else {
35 | alert('No one is assigned to this task.');
36 | }
37 | }
38 |
39 | deleteRow(model: any) {
40 | if (confirm(`Are you sure that you want to delete ${model.title}?`)) {
41 | // you first need to collapse all rows (via the 3rd party addon instance)
42 | this.addon.collapseAll();
43 |
44 | // then you can delete the item from the dataView
45 | this.dataView.deleteItem(model.rowId);
46 |
47 | this.parentRef.showFlashMessage(`Deleted row with ${model.title}`, 'danger');
48 | }
49 | }
50 |
51 | callParentMethod(model: any) {
52 | this.parentRef.showFlashMessage(`We just called Parent Method from the Row Detail Child Component on ${model.title}`);
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example20.component.html:
--------------------------------------------------------------------------------
1 | {{ model?.title }}
3 |
4 |
5 |
15 |
16 |
6 | {{ model?.reporter }}
7 |
8 |
9 | {{ model?.duration | number: '1.2-2' }}
10 |
11 |
12 | {{ model?.percentComplete }}
13 |
14 |
17 |
24 |
25 |
26 |
18 | {{ model?.start | date: 'yyyy-MM-dd' }}
19 |
20 |
21 | {{ model?.finish | date: 'yyyy-MM-dd' }}
22 |
23 | 27 | 28 |
29 |
36 | 30 | Find out who is the Assignee 31 | 32 | 33 | 34 |
35 |
37 |
38 |
39 |
40 |
2 |
75 |
76 |
77 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example20.component.scss:
--------------------------------------------------------------------------------
1 | /** You can change the pinned/frozen border styling through this css override */
2 |
3 | .slick-row .slick-cell.frozen:last-child,
4 | .slick-headerrow-column.frozen:last-child,
5 | .slick-footerrow-column.frozen:last-child {
6 | border-right: 1px solid #969696 !important;
7 | }
8 |
9 | .slick-pane-bottom {
10 | border-top: 1px solid #969696 !important;
11 | }
12 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example21.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 20: Pinned (frozen) Columns/Rows 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | This example demonstrates the use of Pinned (aka frozen) Columns and/or Rows (Wiki docs)
20 |
27 |
28 | -
21 |
- Option to pin any number of columns (left only) or rows 22 |
- Option to pin the rows at the bottom instead of the top (default) 23 |
- You can also dynamically any of these options, through SlickGrid "setOptions()" 24 |
- Possibility to change the styling of the line border between pinned columns/rows 25 |
29 |
45 |
46 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
47 |
63 |
48 |
51 |
54 |
55 |
56 |
59 | : {{ isFrozenBottom ? 'Bottom' : 'Top' }}
60 |
61 |
62 |
64 |
65 |
66 | 65 |
2 |
77 | 78 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example21.component.scss:
--------------------------------------------------------------------------------
1 | // sort indication will show behind Grid Menu since we don't have scroll,
2 | // we can offset these icons to fix that
3 | #grid21 {
4 | .slick-header-column:last-child {
5 | .slick-header-menu-button,
6 | .slick-resizable-handle,
7 | .slick-sort-indicator,
8 | .slick-sort-indicator-numbered {
9 | margin-right: 18px; // grid menu icon width
10 | }
11 | }
12 | }
13 |
14 | .duration-bg {
15 | background-color: #e9d4f1 !important;
16 | }
17 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example22.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 21: Grid AutoHeight 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | The SlickGrid option "autoHeight" can be used if you wish to keep the full height of the grid without any scrolling
16 |
25 |
26 | -
17 |
- You define a fixed grid width via "gridWidth" in the View 18 |
- You can still use the "autoResize" for the width to be resized automatically (the height will never change in this case) 19 |
- 20 | This dataset has 25 rows, if you scroll down the page you can see the entire set is shown without any grid scrolling (though you 21 | might have browser scrolling) 22 | 23 |
27 |
75 |
76 |
28 |
29 |
30 |
31 |
40 |
41 |
42 |
51 |
52 |
53 |
54 |
74 |
55 |
65 |
72 |
73 | 77 | 78 |
2 |
42 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example24.component.scss:
--------------------------------------------------------------------------------
1 | .bold {
2 | font-weight: bold;
3 | }
4 |
5 | .italic {
6 | font-style: italic;
7 | }
8 |
9 | .grey {
10 | color: grey;
11 | }
12 |
13 | .orange {
14 | color: orange;
15 | }
16 |
17 | .red {
18 | color: red;
19 | }
20 |
21 | .yellow {
22 | color: rgb(255, 235, 52);
23 | }
24 |
25 | .pointer {
26 | cursor: pointer;
27 | }
28 |
29 | .cell-menu-dropdown-outline {
30 | border: 1px solid #a0a0a0;
31 | border-radius: 4px;
32 | width: max-content;
33 | padding: 2px 14px;
34 | cursor: pointer;
35 | &:hover:not(.disabled) {
36 | background-color: #a3a3a3;
37 | color: #ffffff;
38 | }
39 |
40 | .mdi-caret-down {
41 | margin-left: 5px;
42 | }
43 | }
44 |
45 | .disabled {
46 | color: #d4d4d4;
47 | border: 1px solid #d8d8d8;
48 | }
49 | .slick-dark-mode {
50 | .disabled {
51 | border: 1px solid #616161;
52 | color: #686868;
53 | }
54 | }
55 |
56 | .row.locale {
57 | margin-top: 5px;
58 | }
59 |
60 | span.cell-menu {
61 | margin-left: 15px;
62 | }
63 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example25.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 22: Grids in Bootstrap Tabs 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | This example demonstrate the creation of multiple grids in Bootstrap Tabs
16 |
21 |
22 | -
17 |
- Regular mocked data with javascript 18 |
- Load dataset through Http-Client. Also note we need to call a "resizeGrid()" after focusing on this tab 19 |
23 |
24 |
25 |
27 |
28 |
29 |
37 |
38 |
39 |
40 |
41 | Grid 1 - Load Local Data
26 |Grid 2 - Load a JSON dataset through Http-Client
30 |
2 |
60 |
61 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example25.component.scss:
--------------------------------------------------------------------------------
1 | // @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
2 | // $slick-preheader-font-size: 18px,
3 | // $slick-preheader-border-right: 1px solid lightgrey,
4 | // );
5 |
6 | .alert {
7 | padding: 8px;
8 | }
9 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example26.component.scss:
--------------------------------------------------------------------------------
1 | h3 {
2 | font-style: normal;
3 | color: #3d3d3d;
4 | }
5 |
6 | #slickGridContainer-grid22 {
7 | /* you can change all filters heights via CSS variable */
8 | --slick-header-input-height: 34px;
9 |
10 | .slickgrid-container {
11 | .slick-headerrow-column {
12 | .ng-input {
13 | input {
14 | height: 100%;
15 | }
16 | }
17 | }
18 | }
19 | }
20 |
21 | .slick-headerrow-column ng-component,
22 | .ng-select {
23 | width: 100%;
24 | }
25 |
26 | .ng-select-focused {
27 | box-shadow: 0 0 0 0.25rem #0d6efd40;
28 | }
29 |
30 | .cell-menu-dropdown {
31 | border: 1px solid #a3a3a3;
32 | border-radius: 5px;
33 | display: flex;
34 | align-items: center;
35 | height: 100%;
36 | width: max-content;
37 | padding: 0 14px;
38 | cursor: pointer;
39 | &:hover {
40 | background-color: #a3a3a3;
41 | color: #ffffff;
42 | }
43 |
44 | .mdi-chevron-down {
45 | margin-left: 5px;
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example27.component.scss:
--------------------------------------------------------------------------------
1 | /* make sure to add the @use the SlickGrid Theme AFTER the variables changes */
2 | // @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.lite.scss';
3 |
4 | #grid27 {
5 | .slick-cell {
6 | display: inline-flex;
7 | align-items: center;
8 | gap: 4px;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example28.component.scss:
--------------------------------------------------------------------------------
1 | // @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
2 |
3 | #grid28 {
4 | .slick-cell {
5 | display: inline-flex;
6 | align-items: center;
7 | gap: 4px;
8 | }
9 |
10 | .avg-total {
11 | color: #a365ff;
12 | }
13 | .bold {
14 | font-weight: bold;
15 | }
16 | .total-suffix {
17 | margin-left: 10px;
18 | }
19 | .hidden {
20 | display: none;
21 | }
22 |
23 | .mdi-file-pdf-outline {
24 | color: #f14668;
25 | opacity: 0.9;
26 | }
27 |
28 | .mdi-folder, .mdi-folder-open {
29 | color: #ffa500;
30 | opacity: 0.9;
31 | }
32 | .mdi-file-music-outline {
33 | color: #3298dc;
34 | opacity: 0.9;
35 | }
36 | .mdi-file-excel-outline {
37 | color: #1E9F75;
38 | opacity: 0.9;
39 | }
40 | .mdi-file-document-outline,
41 | .mdi-file-question-outline {
42 | color: #686868;
43 | opacity: 0.9;
44 | }
45 |
46 | .display-inline-block {
47 | display: inline-block;
48 | }
49 | }
50 |
51 | // create a few 15px indentation multiplied by level number
52 | @for $i from 1 through 6 {
53 | .width-#{$i*15}px { width: #{$i * 15}px; }
54 | }
55 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example29.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 25: GraphQL Basic API without Pagination 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 |
47 |
48 |
16 | Use basic GraphQL query with any external public APIs (Wiki docs).
21 |
46 | -
22 |
- 23 | This Examples uses a Public GraphQL API that you can find at this link 24 | https://countries.trevorblades.com/ 25 | 26 |
- Compare to the regular and default GraphQL implementation, you will find the following differences 27 |
- 29 | There are no Pagination and we only use GraphQL once to load the data, then we use the grid as a regular local in-memory 30 | grid 31 | 32 |
- 33 | We enabled the following 2 flags "useLocalFiltering" and "useLocalSorting" to use regular (in memory) DataView filtering/sorting 34 | 35 |
- 37 | NOTE - This Example calls multiple GraphQL queries, this is ONLY for demo purposes, you would typically only call 1 query 38 | (which is what GraphQL is good at) 39 | 40 |
- 41 | This example is mainly to demo the use of GraphqlService to build the query and retrieve the data but also to demo how to mix that 42 | with local (in-memory) Filtering/Sorting strategies 43 | 44 |
-
28 |
49 |
58 |
59 |
50 |
57 |
51 | Status: {{ status.text }}
52 |
53 |
54 |
55 |
56 |
2 |
22 |
23 |
25 |
26 |
27 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example29.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Column, GridOption, Formatters } from 'angular-slickgrid';
3 |
4 | const NB_ITEMS = 995;
5 |
6 | @Component({
7 | template: `
8 | 3 | Example 29: Custom header & footer Templates 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | Basic Grid with templates for custom headers and footers
16 |
20 |
21 | -
17 |
- Pass in custom templates to be rendered at predefined header and footer destinations 18 |
Grid with header and footer slot
24 |You've clicked me {{ clickedTimes }} time(s)
`,
9 | selector: 'custom-footer',
10 | standalone: false,
11 | })
12 | export class CustomFooterComponent {
13 | clickedTimes = 0;
14 |
15 | clickMe() {
16 | this.clickedTimes++;
17 | }
18 | }
19 |
20 | @Component({
21 | templateUrl: './example29.component.html',
22 | standalone: false,
23 | })
24 | export class Example29Component implements OnInit {
25 | columnDefinitions: Column[] = [];
26 | gridOptions!: GridOption;
27 | dataset!: any[];
28 |
29 | ngOnInit(): void {
30 | this.columnDefinitions = [
31 | { id: 'title', name: 'Title', field: 'title', sortable: true },
32 | { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true },
33 | { id: '%', name: '% Complete', field: 'percentComplete', sortable: true },
34 | { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso },
35 | { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso },
36 | { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true },
37 | ];
38 | this.gridOptions = {
39 | enableAutoResize: false,
40 | enableSorting: true,
41 | gridHeight: 225,
42 | gridWidth: 800,
43 | };
44 |
45 | this.dataset = this.mockData(NB_ITEMS);
46 | }
47 |
48 | mockData(count: number) {
49 | // mock a dataset
50 | const mockDataset = [];
51 | for (let i = 0; i < count; i++) {
52 | const randomYear = 2000 + Math.floor(Math.random() * 10);
53 | const randomMonth = Math.floor(Math.random() * 11);
54 | const randomDay = Math.floor(Math.random() * 29);
55 | const randomPercent = Math.round(Math.random() * 100);
56 |
57 | mockDataset[i] = {
58 | id: i,
59 | title: 'Task ' + i,
60 | duration: Math.round(Math.random() * 100) + '',
61 | percentComplete: randomPercent,
62 | start: new Date(randomYear, randomMonth + 1, randomDay),
63 | finish: new Date(randomYear + 1, randomMonth + 1, randomDay),
64 | effortDriven: i % 5 === 0,
65 | };
66 | }
67 |
68 | return mockDataset;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example30.component.scss:
--------------------------------------------------------------------------------
1 | $slick-button-border-color: #ababab !default;
2 |
3 | .editable-field {
4 | // box-shadow: inset 0 0 0 1px lightblue !important;
5 | background-color: rgba(227, 240, 251, 0.569) !important;
6 | }
7 | .slick-dark-mode .editable-field {
8 | background-color: rgb(105 123 145 / 57%) !important
9 | }
10 | .unsaved-editable-field {
11 | background-color: #fbfdd1 !important;
12 | }
13 | .slick-dark-mode .unsaved-editable-field {
14 | background-color: rgba(255, 183, 50, 0.8) !important;
15 | color: white;
16 | }
17 |
18 | .slick-dark-mode {
19 | --bs-btn-color: #bebebe;
20 | }
21 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example32.component.scss:
--------------------------------------------------------------------------------
1 | $slick-button-border-color: #ababab !default;
2 |
3 | .editable-field {
4 | background-color: rgba(227, 240, 251, 0.569) !important;
5 | }
6 | .unsaved-editable-field {
7 | background-color: #fbfdd1 !important;
8 | }
9 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example33.component.html:
--------------------------------------------------------------------------------
1 |
2 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example33.component.scss:
--------------------------------------------------------------------------------
1 | // @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
2 | // $slick-button-border-color: #ababab
3 | // );
4 |
5 | // --
6 | // Custom Tooltips CSS Variables (or SASS equivalent)
7 | // ----------------------------------------------------
8 | // :root {
9 | // --slick-tooltip-background-color: #363636;
10 | // --slick-tooltip-border-color: #252525;
11 | // --slick-tooltip-border: 2px solid #252525;
12 | // --slick-tooltip-color: #ffffff;
13 | // }
14 |
15 | .editable-field {
16 | background-color: rgba(227, 240, 251, 0.57) !important;
17 | }
18 | .unsaved-editable-field {
19 | background-color: #fbfdd1 !important;
20 | }
21 |
22 | .header-tooltip-title {
23 | font-weight: bold;
24 | font-size: 14px;
25 | }
26 | .headerrow-tooltip-title {
27 | color: #ad0041;
28 | font-style: italic;
29 | font-size: 13px;
30 | font-weight: bold;
31 | }
32 |
33 | // it's preferable to use CSS Variables (or SASS) but if you want to change colors of your tooltip for 1 column in particular you can do it this way
34 | // e.g. change css of 5th column 4 (zero index: l4)
35 | .l4 {
36 | --slick-tooltip-color: #fff;
37 | }
38 | .l4 .header-tooltip-title,
39 | .l4 .headerrow-tooltip-title {
40 | color: #ffffff;
41 | }
42 | .l4.slick-custom-tooltip {
43 | color: #ffffff;
44 | background-color: #363636;
45 | border: 2px solid #252525;
46 | }
47 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example34.component.scss:
--------------------------------------------------------------------------------
1 | // @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.lite.scss';
2 |
3 | $sparkline-color: #00b78d;
4 | // $sparkline-color: #573585;
5 |
6 | .trading-platform.full-screen {
7 | position: absolute;
8 | top: 0;
9 | left: 0;
10 | right: 0;
11 | bottom: 0;
12 | padding: 10px 12px 0 10px;
13 | background-color: white;
14 | z-index: 1040;
15 | position: fixed;
16 | }
17 | .changed-gain {
18 | background-color: #eafae8 !important;
19 | }
20 | .changed-loss {
21 | background-color: #ffeae8 !important;
22 | }
23 | .simulation-form {
24 | input[type=number] {
25 | height: 32px;
26 | width: 50px;
27 | border: 1px solid #c0c0c0;
28 | border-radius: 3px;
29 | }
30 | div.range {
31 | display: contents;
32 | width: 200px;
33 | label.form-label {
34 | margin: 0;
35 | }
36 | input.form-range {
37 | width: 120px;
38 | }
39 | }
40 | .refresh-rate input {
41 | height: 30px;
42 | width: 46px;
43 | }
44 | }
45 | .sparkline {
46 | stroke: $sparkline-color;
47 | fill: rgba($sparkline-color, 0.05);
48 | }
49 | *[hidden] {
50 | display: none;
51 | }
52 |
53 | .trading-tooltip {
54 | position: absolute;
55 | background: rgba(0, 0, 0, .7);
56 | color: #fff;
57 | padding: 2px 5px;
58 | font-size: 12px;
59 | white-space: nowrap;
60 | z-index: 9999;
61 | }
62 |
63 | .slick-dark-mode,
64 | .dark-mode {
65 | .text-success {
66 | color: #42b47f !important
67 | }
68 | .changed-gain {
69 | background-color: #00ff001d !important;
70 | }
71 | .changed-loss {
72 | background-color: #ff00001b !important;
73 | }
74 | .trading-platform.full-screen {
75 | background-color: #33393e;
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example35.component.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | // turn on/off the following variables to see the difference in styling
3 |
4 | // --slick-row-based-edit-editmode-bgcolor: rgb(82, 235, 158);
5 | // --slick-row-based-edit-editmode-hover-bgcolor: cyan;
6 | // --slick-row-based-edit-unsaved-cell-bgcolor: rgb(190, 114, 127);
7 | // --slick-row-based-edit-editmode-active-bgcolor: rgb(82, 235, 158);
8 | // --slick-row-based-edit-editmode-active-hover-bgcolor: cyan;
9 | }
10 |
11 | .alert {
12 | padding: 8px;
13 | margin-bottom: 10px
14 | }
15 |
16 | .status-container {
17 | min-height: 50px;
18 | }
19 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example36.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 33: Regular & Custom Tooltips 4 | 5 | 10 | code 11 | 12 | 13 | 16 |
17 |
18 | This demo shows how to create Regular & Custom Tooltips (Wiki docs)
23 |
24 |
31 |
32 | 24 |
-
25 |
- optionally parse regular [title] attributes and transform them into tooltips 26 |
- create your own Custom Tooltip via a Custom Formatter 27 |
- create an Async Custom Tooltip (Promise/Observable) to allowing fetching data from an API 28 |
- optionally add Custom Tooltip on Column Header & Column Header-Row (filters) 29 |
33 |
41 |
42 |
34 |
35 |
36 |
37 |
38 | Lazy loading collection...
39 |
40 |
2 |
26 |
46 |
47 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example36.component.scss:
--------------------------------------------------------------------------------
1 | input[type=number].narrow {
2 | height: 32px;
3 | width: 50px;
4 | border: 1px solid #c0c0c0;
5 | border-radius: 3px;
6 | }
7 |
8 | #grid36 {
9 | .slick-row:not(.slick-group) >.cell-unselectable {
10 | background: #ececec !important;
11 | font-weight: bold;
12 | }
13 |
14 | .text-sub-total {
15 | font-style: italic;
16 | color: rgb(33, 80, 115) !important;
17 | }
18 | .text-taxes {
19 | font-style: italic;
20 | color: rgb(198, 89, 17);
21 | }
22 | .text-total {
23 | font-weight: bold;
24 | color: rgb(0, 90, 158);
25 | }
26 | }
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example37.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 36: Excel Export Formulas 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | Grid with Excel Formulas (Wiki docs). Calculate Totals via Formatters in the UI, but use Excel Formula when exporting via
20 |
24 |
25 | excelExportOptions.valueParserCallback When Grouped we will also calculate the Group Totals in the UI via Group Formatter
21 | and we again use Excel Formula to calculate the Group Totals (sum) dynamically. For Grouping we need to use
22 | groupTotalsExcelExportOptions.valueParserCallback instead.
23 |
27 |
31 |
32 |
35 |
38 |
39 |
40 | Tax Rate (%):
41 |
42 |
43 |
44 |
45 |
2 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example38.component.scss:
--------------------------------------------------------------------------------
1 | .demo38 {
2 | .badge {
3 | display: none;
4 | &.fully-loaded {
5 | display: inline-flex;
6 | }
7 | }
8 | }
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example39.component.scss:
--------------------------------------------------------------------------------
1 | .demo39 {
2 | .badge {
3 | display: none;
4 | &.fully-loaded {
5 | display: inline-flex;
6 | }
7 | }
8 | }
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example40.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 37: Footer Totals Row 4 | 8 | 9 | 14 | code 15 | 16 | 17 |
18 |Display a totals row at the end of the grid.
19 |
20 |
2 |
75 |
76 |
77 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example41.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 40: Infinite Scroll from JSON data 4 | 5 | 10 | code 11 | 12 | 13 | 16 |
17 | 18 |
19 |
30 |
31 | -
20 |
- 21 | Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. In its simplest 22 | form, the more the user scrolls down, the more rows get loaded. 23 | 24 |
-
25 | NOTES:
presets.paginationis not supported with Infinite Scroll and will revert to the first page, simply because since 26 | we keep appending data, we always have to start from index zero (no offset). 27 |
28 |
32 |
55 |
56 |
33 |
42 |
45 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
57 | Metrics:
58 |
59 | {{ metrics.endTime | date: 'dd MMM, h:mm:ssa' }} —
60 | {{ metrics.totalItemCount }}
61 | items
62 |
63 |
64 |
65 |
2 |
16 |
22 |
23 |
51 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example41.component.scss:
--------------------------------------------------------------------------------
1 | .drag-message {
2 | position: absolute;
3 | display: inline-block;
4 | padding: 4px 10px;
5 | background: #e0e0e0;
6 | border: 1px solid gray;
7 | z-index: 99999;
8 | border-radius: 8px;
9 | box-shadow: 2px 2px 6px silver;
10 | }
11 |
12 | .grid-header {
13 | display: flex;
14 | align-items: center;
15 | box-sizing: border-box;
16 | font-weight: bold;
17 | height: 35px;
18 | padding-left: 8px;
19 | width: 100%;
20 | }
21 |
22 | .recycle-bin {
23 | background: transparent;
24 | cursor: default;
25 | width: 120px;
26 | border: 2px solid #e4e4e4;
27 | background: beige;
28 | padding: 4px;
29 | font-size: 12pt;
30 | font-weight: bold;
31 | color: black;
32 | text-align: center;
33 | border-radius: 10px;
34 |
35 | &.drag-dropzone {
36 | border: 2px dashed pink;
37 | }
38 | &.drag-hover {
39 | background: pink;
40 | cursor: crosshair;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example42.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 41: Drag & Drop 4 | 5 | 10 | code 11 | 12 | 13 |
14 | 15 |
16 |
17 | - Click to select, Ctrl-click to toggle selection(s).
18 | - Drag one or more rows by the handle icon to reorder.
19 | - Drag one or more rows by selection and drag to the recycle bin to delete.
20 |
21 |
22 |
23 |
24 |
50 |
25 |
45 |
46 |
26 |
37 |
38 |
42 |
43 |
44 |
39 |
40 |
41 |
47 |
49 | Recycle Bin
48 |
2 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example43.component.scss:
--------------------------------------------------------------------------------
1 | #grid43 {
2 | --slick-border-color: #d4d4d4;
3 | // --slick-cell-border-left: 1px solid var(--slick-border-color);
4 | --slick-header-menu-display: none;
5 | --slick-header-column-height: 20px;
6 | --slick-grid-border-color: #d4d4d4;
7 | --slick-row-selected-color: #d4ebfd;
8 | --slick-cell-active-box-shadow: inset 0 0 0 1px #3ca4ff;
9 |
10 | --slick-row-mouse-hover-box-shadow: 0;
11 | --slick-cell-odd-background-color: #fff;
12 | --slick-cell-border-right: 1px solid var(--slick-border-color);
13 | --slick-cell-border-bottom: 0;
14 | --slick-cell-border-top: 1px solid var(--slick-border-color);
15 | --slick-header-filter-row-border-bottom: 1px solid var(--slick-border-color);
16 | --slick-cell-border-left: 0;
17 | --slick-cell-box-shadow: none;
18 | --slick-row-mouse-hover-color: #fff;
19 | --slick-cell-display: flex;
20 |
21 | .slick-cell.rowspan {
22 | // background: white;
23 | z-index: 9;
24 | }
25 | .slick-cell {
26 | display: flex;
27 | align-items: center;
28 | /* justify-content: center; */
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example44.component.scss:
--------------------------------------------------------------------------------
1 | #grid44 {
2 | --slick-cell-active-box-shadow: inset 0 0 0 1px #e35ddc;
3 |
4 | .slick-row.even .slick-cell.cell-very-high {
5 | background-color: #f0ffe0;
6 | }
7 | .slick-row.odd .slick-cell.cell-var-span {
8 | background-color: #87ceeb;
9 | }
10 | .slick-row .slick-cell.rowspan {
11 | background-color: #95b7a2;
12 | z-index: 10;
13 | }
14 | .slick-row[data-row='3'] .slick-cell.l3.rowspan {
15 | background-color: #95b7a2;
16 | }
17 | .slick-row[data-row='2'] .slick-cell.l3.r5 {
18 | background-color: #ddfffc;
19 | }
20 | .slick-row[data-row='0'] .slick-cell.rowspan,
21 | .slick-row[data-row='8'] .slick-cell.rowspan {
22 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQ0lEQVQYV2N8/fr1fwY84M6dOwyM+BSBFKioqOBWBFMAsgSrScgKsCpCV4ChCJsCFEW4FMAV4VMAVnT8+PH/IG/iAwDA1DlezHn8bwAAAABJRU5ErkJggg==);
23 | }
24 | .slick-row[data-row='8'] .slick-cell.rowspan:nth-child(4) {
25 | background: #f0ffe0;
26 | }
27 | .slick-row[data-row='12'] .slick-cell.rowspan {
28 | background: #bd8b8b;
29 | }
30 | .slick-row[data-row='15'] .slick-cell.rowspan {
31 | background: #edc12e;
32 | }
33 | .slick-row[data-row='85'] .slick-cell.rowspan {
34 | background: #8baebd;
35 | }
36 | .slick-cell.active {
37 | /* use a different active cell color to make it a bit more obvious */
38 | box-shadow: inset 0 0 0 1px #e35ddc;
39 | }
40 | .cellValue {
41 | float: right;
42 | font-size: 14px;
43 | }
44 | .valueComment {
45 | color: #7c8983;
46 | font-size: 12px;
47 | font-style: italic;
48 | width: fit-content;
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example45-detail.component.html:
--------------------------------------------------------------------------------
1 | 3 | Example 42: Custom Pagination 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | You can create a Custom Pagination by passing an Angular Custom Component and it must
19 |
20 | implements BasePaginationComponent.
16 | Any of the pagination controls could be moved anywhere on the page (for example we purposely moved the page size away from the rest of
17 | the pagination elements).
18 |
21 |
25 |
26 |
27 | Page Size
28 |
36 |
37 |
38 |
39 |
2 |
16 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/example45.component.scss:
--------------------------------------------------------------------------------
1 | #grid45 {
2 | --slick-cell-active-box-shadow: inset 0 0 0 1px #e35ddc;
3 |
4 | .slick-row.even .slick-cell.cell-very-high {
5 | background-color: #f0ffe0;
6 | }
7 | .slick-row.odd .slick-cell.cell-var-span {
8 | background-color: #87ceeb;
9 | }
10 | .slick-row .slick-cell.rowspan {
11 | background-color: #95b7a2;
12 | z-index: 10;
13 | }
14 | .slick-row[data-row='3'] .slick-cell.l3.rowspan {
15 | background-color: #95b7a2;
16 | }
17 | .slick-row[data-row='2'] .slick-cell.l3.r5 {
18 | background-color: #ddfffc;
19 | }
20 | .slick-row[data-row='0'] .slick-cell.rowspan,
21 | .slick-row[data-row='8'] .slick-cell.rowspan {
22 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQ0lEQVQYV2N8/fr1fwY84M6dOwyM+BSBFKioqOBWBFMAsgSrScgKsCpCV4ChCJsCFEW4FMAV4VMAVnT8+PH/IG/iAwDA1DlezHn8bwAAAABJRU5ErkJggg==);
23 | }
24 | .slick-row[data-row='8'] .slick-cell.rowspan:nth-child(4) {
25 | background: #f0ffe0;
26 | }
27 | .slick-row[data-row='12'] .slick-cell.rowspan {
28 | background: #bd8b8b;
29 | }
30 | .slick-row[data-row='15'] .slick-cell.rowspan {
31 | background: #edc12e;
32 | }
33 | .slick-row[data-row='85'] .slick-cell.rowspan {
34 | background: #8baebd;
35 | }
36 | .slick-cell.active {
37 | /* use a different active cell color to make it a bit more obvious */
38 | box-shadow: inset 0 0 0 1px #e35ddc;
39 | }
40 | .cellValue {
41 | float: right;
42 | font-size: 14px;
43 | }
44 | .valueComment {
45 | color: #7c8983;
46 | font-size: 12px;
47 | font-style: italic;
48 | width: fit-content;
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/filter-ng-select.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Subject } from 'rxjs';
3 |
4 | // the appendTo="body" (necessary for SlickGrid filter) requires the body to be position relative like so
5 | //
6 | @Component({
7 | template: ` {{ model.companyName }} - Order Details (id: {{ model.id }})
3 |
4 |
13 |
14 |
15 |
2 |
3 |
4 |
5 | {{ currentPagination?.dataFrom }} -
6 |
7 | {{ currentPagination?.dataTo }}
8 |
9 | of
10 |
11 |
12 | {{ currentPagination?.totalItems }}
13 | items
14 |
15 |
16 |
17 |
61 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/grid-custom-pager.component.scss:
--------------------------------------------------------------------------------
1 | @use 'sass:color';
2 |
3 | .custom-pagination {
4 | display: flex;
5 | justify-content: flex-end;
6 | margin: 10px;
7 | font-size: 13px;
8 |
9 | .custom-pagination-settings {
10 | display: inline-flex;
11 | align-items: center;
12 | margin-right: 30px;
13 | }
14 |
15 | .custom-pagination-nav {
16 | display: flex;
17 | align-items: center;
18 | list-style-type: none;
19 |
20 | .page-item {
21 | display: flex;
22 | width: 26px;
23 | justify-content: center;
24 | margin: 0;
25 | &.disabled .pagination-link {
26 | color: rgb(180, 179, 179);
27 | background-color: rgb(180, 179, 179);
28 | }
29 | }
30 |
31 | .page-number {
32 | padding: 0 5px;
33 | .page-number {
34 | display: inline-flex;
35 | justify-content: center;
36 | width: 20px;
37 | }
38 | }
39 |
40 | nav {
41 | ul.custom-pagination-ul {
42 | display: flex;
43 | list-style-type: none;
44 | margin: 0;
45 | padding: 0 5px;
46 | color: #0d6efd;
47 |
48 | .pagination-link {
49 | color: #0d6efd;
50 | &:hover {
51 | color: color.adjust(#0d6efd, $lightness: 10%);
52 | }
53 | }
54 | }
55 | }
56 | }
57 | }
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/grid-remote.component.html:
--------------------------------------------------------------------------------
1 |
18 |
38 |
60 |
39 | Page
40 | {{ currentPagination?.pageNumber }}
41 | of
42 | {{ currentPagination?.pageCount }}
43 |
44 |
59 |
2 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/home.component.html:
--------------------------------------------------------------------------------
1 | 3 | {{ title }} 4 | 5 | 10 | code 11 | 12 | 13 |
14 | 15 | 16 |
17 |
18 |
19 |
20 |
21 |
22 | Note:
23 | this demo no longer displays any results because the WebAPI Key to connect and query the Octopart Component Search is no longer
24 | valid. However the concept remains valid, which is to use your own Custom DataView instead of the default SlickGrid DataView used by
25 | this library.
26 |
27 |
28 |
29 |
30 | Loading...
31 |
32 |
33 |
2 |
6 | 7 |
26 | Like my work? You can support me with caffeine :) 27 | 28 |
29 | 30 | 31 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | templateUrl: './home.component.html',
5 | standalone: false,
6 | })
7 | export class HomeComponent { }
8 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/rowdetail-preload.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | template: `Angular-Slickgrid - Demo Site
3 |This site is to demo multiple usage of Angular-Slickgrid, choose an example from the left side menu
4 |
5 | 6 | 7 |
Quick intro
8 |9 | One of the best javascript datagrid 10 | SlickGrid which was originally developed by @mleibman is now 11 | available to Angular. I have tried, and used, a few datagrids and SlickGrid beats most of them in terms of functionalities and 12 | performance (it can easily even handle a million row). 13 |
14 |Documentation
15 |
16 | The documentation is powered by GitBook and can be found at this link
17 | Angular-Slickgrid - Documentation, so be sure to consult
18 | it before opening any new issue.
19 |
20 | The
21 | HOWTO - Quick Start
22 | is the best starting point to get going with this library.
23 |
26 | Like my work? You can support me with caffeine :) 27 | 28 |
29 | 30 | 31 |
38 |
39 | 5 | 6 | Loading... 7 |
`, 8 | standalone: false, 9 | }) 10 | export class RowDetailPreloadComponent {} 11 | -------------------------------------------------------------------------------- /bootstrap5-demo-with-translate/src/app/examples/swt-common-grid-test.component.html: -------------------------------------------------------------------------------- 1 |
2 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/app/examples/utilities.ts:
--------------------------------------------------------------------------------
1 | export function randomNumber(min: number, max: number, floor = true) {
2 | const number = Math.random() * (max - min + 1) + min;
3 | return floor ? Math.floor(number) : number;
4 | }
5 |
6 | export function zeroPadding(input: string | number) {
7 | const number = parseInt(input as string, 10);
8 | return number < 10 ? `0${number}` : number;
9 | }
10 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghiscoding/angular-slickgrid-demos/3aa8510aed2002fede6ecbf7b90d981bca37fd3b/bootstrap5-demo-with-translate/src/assets/.gitkeep
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/assets/angular-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghiscoding/angular-slickgrid-demos/3aa8510aed2002fede6ecbf7b90d981bca37fd3b/bootstrap5-demo-with-translate/src/assets/angular-logo.png
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/assets/angular-logo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghiscoding/angular-slickgrid-demos/3aa8510aed2002fede6ecbf7b90d981bca37fd3b/bootstrap5-demo-with-translate/src/assets/angular-logo2.png
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/environments/environment.dev.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: false
3 | };
4 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ghiscoding/angular-slickgrid-demos/3aa8510aed2002fede6ecbf7b90d981bca37fd3b/bootstrap5-demo-with-translate/src/favicon.ico
--------------------------------------------------------------------------------
/bootstrap5-demo-with-translate/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 3 | Example 31: Custom Backend Server Pagination 4 | 5 | 10 | code 11 | 12 | 13 |
14 |
15 | A simple component to show that it is possible to create a custom Backend Service for any other backend querying, the example below is
16 | for Oracle.
17 |
18 |
19 |
20 |
30 |
21 |
26 |
22 | Custom Pagination URL:
23 |
24 |
25 |
27 |
29 |