Skip to content

Commit 2b7d333

Browse files
AmbrozyAmbrozy
authored
DataGrid demos - fix toolbar customization demo appearance for small screen width (DevExpress#28716)
Co-authored-by: CORP\vladimir.bushmanov <[email protected]>
1 parent 8fcb541 commit 2b7d333

16 files changed

+164
-73
lines changed

‎apps/demos/Demos/DataGrid/ToolbarCustomization/Angular/app/app.component.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
<span>Total Count</span>
3131
</div>
3232
</dxi-item>
33-
<dxi-item location="before">
33+
<dxi-item location="before" locateInMenu="auto">
3434
<div *dxTemplate>
3535
<dx-select-box
3636
width="225"
@@ -44,20 +44,20 @@
4444
</dx-select-box>
4545
</div>
4646
</dxi-item>
47-
<dxi-item location="before">
48-
<div *dxTemplate>
49-
<dx-button
50-
[text]="this.expandAll ? 'Collapse All' : 'Expand All'"
51-
width="136"
52-
(onClick)="toggleExpandAll()"
53-
>
54-
</dx-button>
55-
</div>
47+
<dxi-item
48+
location="before"
49+
locateInMenu="auto"
50+
widget="dxButton"
51+
[options]="toggleButtonOptions"
52+
>
5653
</dxi-item>
57-
<dxi-item location="after">
58-
<div *dxTemplate>
59-
<dx-button icon="refresh" (onClick)="refreshDataGrid()"> </dx-button>
60-
</div>
54+
<dxi-item
55+
location="after"
56+
locateInMenu="auto"
57+
showText="inMenu"
58+
widget="dxButton"
59+
[options]="refreshButtonOptions"
60+
>
6161
</dxi-item>
6262
<dxi-item name="columnChooserButton"></dxi-item>
6363
</dxo-toolbar>

‎apps/demos/Demos/DataGrid/ToolbarCustomization/Angular/app/app.component.ts‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
DxTemplateModule,
1010
DxButtonModule,
1111
} from 'devextreme-angular';
12+
import { DxButtonTypes } from 'devextreme-angular/ui/button';
1213
import query from 'devextreme/data/query';
1314
import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
1415
import { Service, Order } from './app.service';
@@ -46,6 +47,26 @@ export class AppComponent {
4647
text: 'Grouping by Employee',
4748
}];
4849

50+
refreshButtonOptions: DxButtonTypes.Properties = {
51+
icon: 'refresh',
52+
text: 'Refresh',
53+
onClick: () => {
54+
this.dataGrid.instance.refresh();
55+
},
56+
};
57+
58+
toggleButtonOptions: DxButtonTypes.Properties = {
59+
text: this.expandAll ? 'Collapse All' : 'Expand All',
60+
width: 136,
61+
onClick: () => {
62+
this.toggleExpandAll();
63+
this.toggleButtonOptions = {
64+
...this.toggleButtonOptions,
65+
text: this.expandAll ? 'Collapse All' : 'Expand All',
66+
};
67+
},
68+
};
69+
4970
constructor(service: Service) {
5071
this.orders = service.getOrders();
5172
this.totalCount = this.getGroupCount('CustomerStoreState');
@@ -66,10 +87,6 @@ export class AppComponent {
6687
toggleExpandAll() {
6788
this.expandAll = !this.expandAll;
6889
}
69-
70-
refreshDataGrid() {
71-
this.dataGrid.instance.refresh();
72-
}
7390
}
7491

7592
@NgModule({

‎apps/demos/Demos/DataGrid/ToolbarCustomization/React/App.tsx‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import React, { useCallback, useRef, useState } from 'react';
2-
import Button from 'devextreme-react/button';
1+
import React, { useCallback, useMemo, useRef, useState } from 'react';
32
import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box';
43
import DataGrid, {
54
Grouping, Column, ColumnChooser, LoadPanel, Toolbar, Item, DataGridRef,
@@ -39,9 +38,19 @@ const App = () => {
3938
setExpandAll(!expandAll);
4039
}, [expandAll]);
4140

42-
const refreshDataGrid = useCallback(() => {
43-
dataGridRef.current.instance().refresh();
44-
}, []);
41+
const toggleButtonOptions = useMemo(() => ({
42+
text: expandAll ? 'Collapse All' : 'Expand All',
43+
width: 136,
44+
onClick: () => toggleExpandAll(),
45+
}), [expandAll, toggleExpandAll]);
46+
47+
const refreshButtonOptions = useMemo(() => ({
48+
icon: 'refresh',
49+
text: 'Refresh',
50+
onClick: () => {
51+
dataGridRef.current.instance().refresh();
52+
},
53+
}), []);
4554

4655
return (
4756
<DataGrid
@@ -66,7 +75,7 @@ const App = () => {
6675
<span>Total Count</span>
6776
</div>
6877
</Item>
69-
<Item location="before">
78+
<Item location="before" locateInMenu="auto">
7079
<SelectBox
7180
width="225"
7281
items={groupingValues}
@@ -76,17 +85,17 @@ const App = () => {
7685
value={groupColumn}
7786
onValueChanged={toggleGroupColumn} />
7887
</Item>
79-
<Item location="before">
80-
<Button
81-
text={expandAll ? 'Collapse All' : 'Expand All'}
82-
width='136'
83-
onClick={toggleExpandAll} />
84-
</Item>
85-
<Item location="after">
86-
<Button
87-
icon='refresh'
88-
onClick={refreshDataGrid} />
89-
</Item>
88+
<Item
89+
location="before"
90+
locateInMenu="auto"
91+
widget="dxButton"
92+
options={toggleButtonOptions} />
93+
<Item
94+
location="after"
95+
locateInMenu="auto"
96+
showText="inMenu"
97+
widget="dxButton"
98+
options={refreshButtonOptions} />
9099
<Item name="columnChooserButton" />
91100
</Toolbar>
92101
</DataGrid>

‎apps/demos/Demos/DataGrid/ToolbarCustomization/ReactJs/App.js‎

Lines changed: 38 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import React, { useCallback, useRef, useState } from 'react';
2-
import Button from 'devextreme-react/button';
1+
import React, {
2+
useCallback, useMemo, useRef, useState,
3+
} from 'react';
34
import SelectBox from 'devextreme-react/select-box';
45
import DataGrid, {
56
Grouping,
@@ -39,9 +40,24 @@ const App = () => {
3940
const toggleExpandAll = useCallback(() => {
4041
setExpandAll(!expandAll);
4142
}, [expandAll]);
42-
const refreshDataGrid = useCallback(() => {
43-
dataGridRef.current.instance().refresh();
44-
}, []);
43+
const toggleButtonOptions = useMemo(
44+
() => ({
45+
text: expandAll ? 'Collapse All' : 'Expand All',
46+
width: 136,
47+
onClick: () => toggleExpandAll(),
48+
}),
49+
[expandAll, toggleExpandAll],
50+
);
51+
const refreshButtonOptions = useMemo(
52+
() => ({
53+
icon: 'refresh',
54+
text: 'Refresh',
55+
onClick: () => {
56+
dataGridRef.current.instance().refresh();
57+
},
58+
}),
59+
[],
60+
);
4561
return (
4662
<DataGrid
4763
id="gridContainer"
@@ -80,7 +96,10 @@ const App = () => {
8096
<span>Total Count</span>
8197
</div>
8298
</Item>
83-
<Item location="before">
99+
<Item
100+
location="before"
101+
locateInMenu="auto"
102+
>
84103
<SelectBox
85104
width="225"
86105
items={groupingValues}
@@ -91,19 +110,19 @@ const App = () => {
91110
onValueChanged={toggleGroupColumn}
92111
/>
93112
</Item>
94-
<Item location="before">
95-
<Button
96-
text={expandAll ? 'Collapse All' : 'Expand All'}
97-
width="136"
98-
onClick={toggleExpandAll}
99-
/>
100-
</Item>
101-
<Item location="after">
102-
<Button
103-
icon="refresh"
104-
onClick={refreshDataGrid}
105-
/>
106-
</Item>
113+
<Item
114+
location="before"
115+
locateInMenu="auto"
116+
widget="dxButton"
117+
options={toggleButtonOptions}
118+
/>
119+
<Item
120+
location="after"
121+
locateInMenu="auto"
122+
showText="inMenu"
123+
widget="dxButton"
124+
options={refreshButtonOptions}
125+
/>
107126
<Item name="columnChooserButton" />
108127
</Toolbar>
109128
</DataGrid>

‎apps/demos/Demos/DataGrid/ToolbarCustomization/Vue/App.vue‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,21 @@
3636
/>
3737
<DxItem
3838
location="before"
39+
locateInMenu="auto"
3940
template="groupingTemplate"
4041
/>
4142
<DxItem
4243
location="before"
43-
template="collapseTemplate"
44+
locateInMenu="auto"
45+
widget="dxButton"
46+
:options="toggleButtonOptions"
4447
/>
4548
<DxItem
4649
location="after"
47-
template="refreshTemplate"
50+
locateInMenu="auto"
51+
showText="inMenu"
52+
widget="dxButton"
53+
:options="refreshButtonOptions"
4854
/>
4955
<DxItem
5056
name="columnChooserButton"
@@ -67,23 +73,10 @@
6773
@value-changed="toggleGroupColumn"
6874
/>
6975
</template>
70-
<template #collapseTemplate>
71-
<DxButton
72-
:text="expandAll ? 'Collapse All' : 'Expand All'"
73-
width="136"
74-
@click="toggleExpandAll"
75-
/>
76-
</template>
77-
<template #refreshTemplate>
78-
<DxButton
79-
icon="refresh"
80-
@click="refreshDataGrid"
81-
/>
82-
</template>
8376
</DxDataGrid>
8477
</template>
8578
<script setup lang="ts">
86-
import { ref } from 'vue';
79+
import { computed, ref } from 'vue';
8780
import {
8881
DxDataGrid,
8982
DxColumn,
@@ -94,7 +87,6 @@ import {
9487
DxItem,
9588
} from 'devextreme-vue/data-grid';
9689
import { DxSelectBox, DxSelectBoxTypes } from 'devextreme-vue/select-box';
97-
import { DxButton } from 'devextreme-vue/button';
9890
import query from 'devextreme/data/query';
9991
import { orders } from './data.ts';
10092
@@ -125,8 +117,18 @@ const toggleExpandAll = () => {
125117
expandAll.value = !expandAll.value;
126118
};
127119
128-
const refreshDataGrid = () => {
129-
dataGridRef.value!.instance!.refresh();
120+
const toggleButtonOptions = computed(() => ({
121+
text: expandAll.value ? 'Collapse All' : 'Expand All',
122+
width: 136,
123+
onClick: toggleExpandAll,
124+
}));
125+
126+
const refreshButtonOptions = {
127+
icon: 'refresh',
128+
text: 'Refresh',
129+
onClick: () => {
130+
dataGridRef.value!.instance!.refresh();
131+
},
130132
};
131133
</script>
132134
<style scoped>

‎apps/demos/Demos/DataGrid/ToolbarCustomization/jQuery/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ $(() => {
4141
},
4242
}, {
4343
location: 'before',
44+
locateInMenu: 'auto',
4445
widget: 'dxSelectBox',
4546
options: {
4647
width: 225,
@@ -62,6 +63,7 @@ $(() => {
6263
},
6364
}, {
6465
location: 'before',
66+
locateInMenu: 'auto',
6567
widget: 'dxButton',
6668
options: {
6769
text: 'Collapse All',
@@ -74,9 +76,12 @@ $(() => {
7476
},
7577
}, {
7678
location: 'after',
79+
locateInMenu: 'auto',
80+
showText: 'inMenu',
7781
widget: 'dxButton',
7882
options: {
7983
icon: 'refresh',
84+
text: 'Refresh',
8085
onClick() {
8186
dataGrid.refresh();
8287
},

‎apps/demos/testing/widgets/datagrid/ToolbarCustomization.test.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
2+
import { Selector as $ } from 'testcafe';
3+
import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper';
4+
import { testScreenshot } from '../../../utils/visual-tests/helpers/theme-utils';
5+
6+
fixture('DataGrid.ToolbarCustomization')
7+
.page('http://localhost:8080/')
8+
.before(async (ctx) => {
9+
ctx.initialWindowSize = [900, 600];
10+
});
11+
12+
runManualTest('DataGrid', 'ToolbarCustomization', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
13+
test('ToolbarCustomization', async (t) => {
14+
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
15+
const menuButtonSelector = $('.dx-toolbar').find('.dx-toolbar-menu-container').find('.dx-button');
16+
const menuItemsSelector = $('.dx-overlay-wrapper').find('.dx-list-item');
17+
18+
await testScreenshot(t, takeScreenshot, 'toolbar_customization_wide.png');
19+
20+
await t
21+
.resizeWindow(490, 600)
22+
.click(menuButtonSelector);
23+
24+
await testScreenshot(t, takeScreenshot, 'toolbar_customization_medium.png');
25+
26+
await t
27+
.click($('body'), { offsetX: 0, offsetY: 0 })
28+
.resizeWindow(320, 600)
29+
.click(menuButtonSelector)
30+
.expect(menuItemsSelector.count)
31+
.eql(4);
32+
33+
await testScreenshot(t, takeScreenshot, 'toolbar_customization_thin.png');
34+
35+
await t
36+
.expect(compareResults.isValid())
37+
.ok(compareResults.errorMessages());
38+
});
39+
});

‎apps/demos/testing/widgets/datagrid/etalons/toolbar_customization_medium (fluent.blue.light).png‎

65 KB
Loading

‎apps/demos/testing/widgets/datagrid/etalons/toolbar_customization_medium (material.blue.light).png‎

65.4 KB
Loading

‎apps/demos/testing/widgets/datagrid/etalons/toolbar_customization_medium.png‎

84.4 KB
Loading

0 commit comments

Comments
 (0)