Skip to content

Commit 342b7f0

Browse files
TeyaVesTeyaVes
committed
fix(html): add k-grid-draggable-header to Grid groupable header
The k-grid-draggable-header class should be added to k-grid-header. It adds touch-action: none style to the header and thus, no k-touch-action-none utility class is needed for the th elements.
1 parent 848b733 commit 342b7f0

9 files changed

Lines changed: 50 additions & 37 deletions

‎packages/html/src/grid/grid-header.spec.tsx‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,31 @@ import { classNames } from '../misc';
22

33
const className = `k-grid-header`;
44

5+
export type KendoGridHeaderProps = {
6+
draggable?: boolean;
7+
};
8+
59
export const GridHeader = (
6-
props: React.HTMLAttributes<HTMLDivElement>
7-
) => (
8-
<div
9-
{...props}
10-
className={classNames(
11-
props.className,
12-
className,
13-
)}
14-
>
10+
props: KendoGridHeaderProps &
11+
React.HTMLAttributes<HTMLDivElement>
12+
) => {
13+
const {
14+
draggable
15+
} = props;
16+
17+
return (
18+
19+
<div
20+
{...props}
21+
className={classNames(
22+
props.className,
23+
className,
24+
{[`k-grid-draggable-header`]: draggable},
25+
)}
26+
>
1527

16-
{props.children}
28+
{props.children}
1729

18-
</div>
19-
);
30+
</div>
31+
);
32+
};

‎packages/html/src/grid/templates/grid-with-grouping.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const GridWithGrouping = ({ contentClassName, ...other }: any) => (
2525
)}
2626
children={(
2727
<>
28-
<GridHeader>
28+
<GridHeader draggable>
2929
<div className="k-grid-header-wrap">
3030
<GridHeaderTable>
3131
<colgroup>

‎packages/html/src/grid/tests/grid-grouping-blazor.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export default () =>(
8888
</ChipList>
8989
</GridGroupingHeader>
9090
)}>
91-
<GridHeader>
91+
<GridHeader draggable>
9292
<div className="k-grid-header-wrap">
9393
<GridHeaderTable>
9494
<colgroup>
@@ -187,7 +187,7 @@ export default () =>(
187187
</ChipList>
188188
</GridGroupingHeader>
189189
)}>
190-
<GridHeader>
190+
<GridHeader draggable>
191191
<div className="k-grid-header-wrap">
192192
<GridHeaderTable>
193193
<colgroup>

‎packages/html/src/grid/tests/grid-grouping-detail-template.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default () =>(
1111
<div id="test-area" className="k-d-grid">
1212
<span>Base</span>
1313
<GridNormal dir="ltr" pager={false}>
14-
<GridHeader>
14+
<GridHeader draggable>
1515
<div className="k-grid-header-wrap">
1616
<GridHeaderTable>
1717
<colgroup>
@@ -27,8 +27,8 @@ export default () =>(
2727
<GridHeaderCell rowspan={1} colspan={1}>
2828
<Checkbox id="k-grid0-select-all" />
2929
</GridHeaderCell>
30-
<GridHeaderCell className="k-grid-draggable-header" rowspan={1} colspan={1} columnTitle="ID"></GridHeaderCell>
31-
<GridHeaderCell className="k-grid-draggable-header" rowspan={1} colspan={1} columnTitle="Name"></GridHeaderCell>
30+
<GridHeaderCell rowspan={1} colspan={1} columnTitle="ID"></GridHeaderCell>
31+
<GridHeaderCell rowspan={1} colspan={1} columnTitle="Name"></GridHeaderCell>
3232
<GridHeaderCell rowspan={1} colspan={1} columnTitle="Command"></GridHeaderCell>
3333
</TableRow>
3434
</TableThead>
@@ -88,7 +88,7 @@ export default () =>(
8888
</ChipList>
8989
</GridGroupingHeader>
9090
)}>
91-
<GridHeader>
91+
<GridHeader draggable>
9292
<div className="k-grid-header-wrap">
9393
<GridHeaderTable>
9494
<colgroup>
@@ -106,8 +106,8 @@ export default () =>(
106106
<GridHeaderCell rowspan={1} colspan={1}>
107107
<Checkbox />
108108
</GridHeaderCell>
109-
<GridHeaderCell className="k-grid-draggable-header" rowspan={1} colspan={1} columnTitle="ID"></GridHeaderCell>
110-
<GridHeaderCell className="k-grid-draggable-header" rowspan={1} colspan={1} columnTitle="Name"></GridHeaderCell>
109+
<GridHeaderCell rowspan={1} colspan={1} columnTitle="ID"></GridHeaderCell>
110+
<GridHeaderCell rowspan={1} colspan={1} columnTitle="Name"></GridHeaderCell>
111111
<GridHeaderCell rowspan={1} colspan={1} columnTitle="Command"></GridHeaderCell>
112112
</TableRow>
113113
</TableThead>
@@ -179,15 +179,15 @@ export default () =>(
179179
</GridWithGrouping>
180180

181181
<span>Two Groups</span>
182-
<GridWithGrouping dir="ltr"groupingHeader={(
182+
<GridWithGrouping dir="ltr" groupingHeader={(
183183
<GridGroupingHeader>
184184
<ChipList>
185185
<Chip icon="sort-asc-small" text="ID" actions={ <ChipAction type="remove"/> } />
186186
<Chip icon="sort-asc-small" text="Name" actions={ <ChipAction type="remove"/> } />
187187
</ChipList>
188188
</GridGroupingHeader>
189189
)}>
190-
<GridHeader>
190+
<GridHeader draggable>
191191
<div className="k-grid-header-wrap">
192192
<GridHeaderTable>
193193
<colgroup>
@@ -207,8 +207,8 @@ export default () =>(
207207
<GridHeaderCell rowspan={1} colspan={1}>
208208
<Checkbox />
209209
</GridHeaderCell>
210-
<GridHeaderCell className="k-grid-draggable-header" rowspan={1} colspan={1} columnTitle="ID"></GridHeaderCell>
211-
<GridHeaderCell className="k-grid-draggable-header" rowspan={1} colspan={1} columnTitle="Name"></GridHeaderCell>
210+
<GridHeaderCell rowspan={1} colspan={1} columnTitle="ID"></GridHeaderCell>
211+
<GridHeaderCell rowspan={1} colspan={1} columnTitle="Name"></GridHeaderCell>
212212
<GridHeaderCell rowspan={1} colspan={1} columnTitle="Command"></GridHeaderCell>
213213
</TableRow>
214214
</TableThead>
@@ -308,7 +308,7 @@ export default () =>(
308308
</ChipList>
309309
</GridGroupingHeader>
310310
)}>
311-
<GridHeader>
311+
<GridHeader draggable>
312312
<div className="k-grid-header-wrap">
313313
<GridHeaderTable>
314314
<colgroup>
@@ -328,8 +328,8 @@ export default () =>(
328328
<GridHeaderCell rowspan={1} colspan={1}>
329329
<Checkbox />
330330
</GridHeaderCell>
331-
<GridHeaderCell className="k-grid-draggable-header" rowspan={1} colspan={1} columnTitle="ID"></GridHeaderCell>
332-
<GridHeaderCell className="k-grid-draggable-header" rowspan={1} colspan={1} columnTitle="Name"></GridHeaderCell>
331+
<GridHeaderCell rowspan={1} colspan={1} columnTitle="ID"></GridHeaderCell>
332+
<GridHeaderCell rowspan={1} colspan={1} columnTitle="Name"></GridHeaderCell>
333333
<GridHeaderCell rowspan={1} colspan={1} columnTitle="Command"></GridHeaderCell>
334334
</TableRow>
335335
</TableThead>

‎packages/html/src/grid/tests/grid-size-sm-comp-sm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -298,7 +298,7 @@ export default () =>(
298298
</ChipList>
299299
</GridGroupingHeader>
300300
)}>
301-
<GridHeader>
301+
<GridHeader draggable>
302302
<div className="k-grid-header-wrap">
303303
<GridHeaderTable size="small">
304304
<colgroup>

‎packages/html/src/grid/tests/grid-size-sm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@ export default () =>(
295295
</ChipList>
296296
</GridGroupingHeader>
297297
)}>
298-
<GridHeader>
298+
<GridHeader draggable>
299299
<div className="k-grid-header-wrap">
300300
<GridHeaderTable size="small">
301301
<colgroup>

‎packages/html/src/grid/tests/grid-sticky-column-states.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export default () => (
124124
<Chip text="Active Projects" actions={ <ChipAction type="remove"/> } />
125125
</ChipList>
126126
</GridGroupingHeader>
127-
<GridHeader>
127+
<GridHeader draggable>
128128
<div className="k-grid-header-wrap">
129129
<GridHeaderTable>
130130
<colgroup>
@@ -139,8 +139,8 @@ export default () => (
139139
<TableRow>
140140
<GridHeaderCell colspan={1} rowspan={1} className="k-group-cell"></GridHeaderCell>
141141
<GridHeaderCell colspan={1} columnTitle="Name"></GridHeaderCell>
142-
<GridHeaderCell className="k-grid-header-sticky" columnTitle="Team" colspan={1} style={{ left: '0px', right: '0px' }}></GridHeaderCell>
143-
<GridHeaderCell className="k-grid-header-sticky" columnTitle="Active Projects" colspan={1}></GridHeaderCell>
142+
<GridHeaderCell sticky columnTitle="Team" colspan={1} style={{ left: '0px', right: '0px' }}></GridHeaderCell>
143+
<GridHeaderCell sticky columnTitle="Active Projects" colspan={1}></GridHeaderCell>
144144
<GridHeaderCell colspan={1} columnTitle="Salary"></GridHeaderCell>
145145
<GridHeaderCell colspan={1} columnTitle="On Vacation"></GridHeaderCell>
146146
</TableRow>

‎packages/html/src/grid/tests/grid-sticky-columns-rtl.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default () =>(
2323
)}
2424
pager={( <GridPager adaptive pageSizes={false} dir="rtl" info={false} />
2525
)}>
26-
<GridHeader>
26+
<GridHeader draggable>
2727
<div className="k-grid-header-wrap">
2828
<GridHeaderTable style={{ width: "1434px" }}>
2929
<colgroup>

‎packages/html/src/grid/tests/grid-sticky-columns.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default () =>(
1414
<Chip text="Active Projects" actions={ <ChipAction type="remove"/> } />
1515
</ChipList>
1616
</GridGroupingHeader>
17-
<GridHeader>
17+
<GridHeader draggable>
1818
<div className="k-grid-header-wrap">
1919
<GridHeaderTable>
2020
<colgroup>
@@ -29,8 +29,8 @@ export default () =>(
2929
<TableRow>
3030
<GridHeaderCell colspan={1} rowspan={1} className="k-group-cell"></GridHeaderCell>
3131
<GridHeaderCell colspan={1} columnTitle="Name"></GridHeaderCell>
32-
<GridHeaderCell className="k-grid-header-sticky" columnTitle="Team" colspan={1} style={{ left: '0px', right: '0px' }}></GridHeaderCell>
33-
<GridHeaderCell className="k-grid-header-sticky" columnTitle="Active Projects" colspan={1}></GridHeaderCell>
32+
<GridHeaderCell sticky columnTitle="Team" colspan={1} style={{ left: '0px', right: '0px' }}></GridHeaderCell>
33+
<GridHeaderCell sticky columnTitle="Active Projects" colspan={1}></GridHeaderCell>
3434
<GridHeaderCell colspan={1} columnTitle="Salary"></GridHeaderCell>
3535
<GridHeaderCell colspan={1} columnTitle="On Vacation"></GridHeaderCell>
3636
</TableRow>

0 commit comments

Comments
 (0)