Skip to content

Commit 97d3abf

Browse files
ghiscodingghiscoding
authored
chore: enable header menu+buttons in header bar demo [refresh gh-pages] (#2583)
* chore: enable header menu+buttons in header bar demo [refresh gh-pages] * chore: add docs and make it single column header row
1 parent a10d4c8 commit 97d3abf

20 files changed

Lines changed: 414 additions & 9 deletions

File tree

‎demos/aurelia/src/examples/slickgrid/example53.scss‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,27 @@
11
/* 1st grid */
2-
#grid53 {
2+
#slickGridContainer-grid53 {
33
--slick-header-button-float: left;
44
--slick-header-button-margin: 0px 0 100px 8px;
5+
--slick-header-menu-display: none;
6+
--slick-header-row-count: 1;
7+
--slick-icon-sort-position-right: auto;
8+
9+
.slickgrid-container .slick-header-columns {
10+
.slick-header-column {
11+
height: 25x;
12+
13+
.slick-sort-indicator,
14+
.slick-sort-indicator-numbered {
15+
top: 4px;
16+
}
17+
.slick-sort-indicator-numbered {
18+
top: 10px;
19+
margin-left: 18px;
20+
left: auto;
21+
right: auto;
22+
}
23+
}
24+
}
525
}
626

727
.top-filters {

‎demos/aurelia/src/examples/slickgrid/example53.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,10 @@ export class Example53 {
9393

9494
this.gridOptions = {
9595
enableAutoResize: true,
96+
97+
// enabling both header buttons & menus could conflict unless you use `--slick-header-button-float: left`
9698
enableHeaderButton: true,
97-
enableHeaderMenu: false,
99+
enableHeaderMenu: true,
98100
autoCommitEdit: true,
99101
autoEdit: true,
100102
editable: true,

‎demos/react/src/examples/slickgrid/Example53.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,10 @@ const Example53: React.FC = () => {
8888

8989
const gridOptions: GridOption = {
9090
enableAutoResize: true,
91+
92+
// enabling both header buttons & menus could conflict unless you use `--slick-header-button-float: left`
9193
enableHeaderButton: true,
92-
enableHeaderMenu: false,
94+
enableHeaderMenu: true,
9395
autoCommitEdit: true,
9496
autoEdit: true,
9597
editable: true,

‎demos/react/src/examples/slickgrid/example53.scss‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,27 @@
11
/* 1st grid */
2-
#grid53 {
2+
#slickGridContainer-grid53 {
33
--slick-header-button-float: left;
44
--slick-header-button-margin: 0px 0 100px 8px;
5+
--slick-header-menu-display: none;
6+
--slick-header-row-count: 1;
7+
--slick-icon-sort-position-right: auto;
8+
9+
.slickgrid-container .slick-header-columns {
10+
.slick-header-column {
11+
height: 25x;
12+
13+
.slick-sort-indicator,
14+
.slick-sort-indicator-numbered {
15+
top: 4px;
16+
}
17+
.slick-sort-indicator-numbered {
18+
top: 10px;
19+
margin-left: 18px;
20+
left: auto;
21+
right: auto;
22+
}
23+
}
24+
}
525
}
626

727
.top-filters {

‎demos/vanilla/src/examples/example42.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,26 @@
22
.grid42 {
33
--slick-header-button-float: left;
44
--slick-header-button-margin: 0px 0 100px 8px;
5+
--slick-header-menu-display: none;
6+
--slick-header-row-count: 1;
7+
--slick-icon-sort-position-right: auto;
8+
9+
.slickgrid-container .slick-header-columns {
10+
.slick-header-column {
11+
height: 25x;
12+
13+
.slick-sort-indicator,
14+
.slick-sort-indicator-numbered {
15+
top: 4px;
16+
}
17+
.slick-sort-indicator-numbered {
18+
top: 10px;
19+
margin-left: 18px;
20+
left: auto;
21+
right: auto;
22+
}
23+
}
24+
}
525
}
626

727
.top-filters {

‎demos/vanilla/src/examples/example42.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,10 @@ export default class Example42 {
100100

101101
this.gridOptions = {
102102
enableAutoResize: true,
103+
104+
// enabling both header buttons & menus could conflict unless you use `--slick-header-button-float: left`
103105
enableHeaderButton: true,
104-
enableHeaderMenu: false,
106+
enableHeaderMenu: true,
105107
autoCommitEdit: true,
106108
autoEdit: true,
107109
editable: true,

‎demos/vue/src/components/Example53.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,10 @@ function defineGrid() {
6767
6868
gridOptions.value = {
6969
enableAutoResize: true,
70+
71+
// enabling both header buttons & menus could conflict unless you use `--slick-header-button-float: left`
7072
enableHeaderButton: true,
71-
enableHeaderMenu: false,
73+
enableHeaderMenu: true,
7274
autoCommitEdit: true,
7375
autoEdit: true,
7476
editable: true,

‎demos/vue/src/components/example53.scss‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,27 @@
11
/* 1st grid */
2-
#grid53 {
2+
#slickGridContainer-grid53 {
33
--slick-header-button-float: left;
44
--slick-header-button-margin: 0px 0 100px 8px;
5+
--slick-header-menu-display: none;
6+
--slick-header-row-count: 1;
7+
--slick-icon-sort-position-right: auto;
8+
9+
.slickgrid-container .slick-header-columns {
10+
.slick-header-column {
11+
height: 25x;
12+
13+
.slick-sort-indicator,
14+
.slick-sort-indicator-numbered {
15+
top: 4px;
16+
}
17+
.slick-sort-indicator-numbered {
18+
top: 10px;
19+
margin-left: 18px;
20+
left: auto;
21+
right: auto;
22+
}
23+
}
24+
}
525
}
626

727
.top-filters {

‎docs/TOC.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212

1313
* [Dark Mode](styling/dark-mode.md)
1414
* [Styling CSS/SASS/Themes](styling/styling.md)
15+
* [Multiple Column Header Rows](styling/multiple-column-header-rows.md)
1516

1617
## Column Functionalities
1718

‎docs/styling/multiple-column-header-rows.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
## Multiple Column Header Rows
2+
3+
### Description
4+
5+
Angular-Slickgrid by default will use 2 rows to display each Column Headers, in some cases you might want to change that.
6+
7+
### Using SASS variable
8+
9+
If you use SASS, you can simply change the $slick-header-row-count variable and you're good to go. However, please note that this affects all your grids. If that is not what you want then keep reading.
10+
11+
Example:
12+
13+
```scss
14+
$slick-header-row-count: 2;
15+
@import '../node_modules/angular-slickgrid/styles/sass/slickgrid-theme-bootstrap.scss';
16+
```
17+
18+
### Change x rows for only 1 grid
19+
20+
In the case that you want to change the number of rows used to display each Column Headers, you will have to use a little bit more SASS code and the gridId of your grid.
21+
22+
For example, let say your grid as the gridId of mygrid, with the following code
23+
24+
```html
25+
<angular-slickgrid
26+
gridId="mygrid"
27+
[columnDefinitions]="columnDefinitions"
28+
[gridOptions]="gridOptions"
29+
[dataset]="dataset">
30+
</angular-slickgrid>
31+
```
32+
33+
You have to copy the id mygrid into the SASS code shown below (replace mygrid to your need). You also need to adjust the height in pixels, for 3 rows 55px seems to be a good number to use. You can also move the sort indicators as shown below.
34+
35+
```scss
36+
#slickGridContainer-mygrid {
37+
.slickgrid-container .slick-header-columns {
38+
.slick-header-column {
39+
height: 55px;
40+
41+
.slick-sort-indicator, .slick-sort-indicator-numbered {
42+
top: 40px;
43+
}
44+
}
45+
}
46+
}
47+
```
48+
49+
Also note that if you use a stylesheet attached to your component (or inline), you might need to change the encapsulation to use the ViewEncapsulation.None, like this:
50+
51+
```ts
52+
@Component({
53+
selector: 'demo',
54+
encapsulation: ViewEncapsulation.None,
55+
styleUrls: ['./demo.component.scss'],
56+
templateUrl: './demo.component.html'
57+
})
58+
```

0 commit comments

Comments
 (0)