fix(html): move Grid selection aggregates outside of aria-root

telerik · Dec 2, 2024 · 848b733 · 848b733
1 parent c85350d
commit 848b733
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 29 deletions.
diff --git a/packages/html/src/grid/grid.spec.tsx b/packages/html/src/grid/grid.spec.tsx
@@ -17,6 +17,7 @@ export type KendoGridProps = KendoGridOptions & {
     pager?: React.JSX.Element;
     pagerPosition?: 'top' | 'bottom';
     groupingHeader?: React.JSX.Element;
+    gridSelectionAggregates?: React.JSX.Element;
     _renderAriaRoot?: boolean;
 };
 
@@ -35,6 +36,7 @@ export const Grid = (
         toolbar,
         pager,
         groupingHeader,
+        gridSelectionAggregates,
         _renderAriaRoot,
         ...other
     } = props;
@@ -54,6 +56,7 @@ export const Grid = (
             { props.children && _renderAriaRoot ?
                 <div className="k-grid-aria-root">{props.children}</div> : props.children
             }
+            {gridSelectionAggregates}
             {pagerPosition === 'bottom' && pager}
         </div>
     );

diff --git a/packages/html/src/grid/templates/grid-with-selection-aggregates.tsx b/packages/html/src/grid/templates/grid-with-selection-aggregates.tsx
@@ -69,39 +69,43 @@ export const GridWithSelectionAggregates = ({ aggregated = false, contentClassNa
                         </GridTable>
                     </GridContent>
                 </GridContainer>
+            </>
+        )}
+        gridSelectionAggregates={
+            (
                 <div className="k-selection-aggregates k-grid-selection-aggregates">
-                    { aggregated ?
-                        <>
-                            <div className="k-selection-aggregates-item">
-                                <span className="k-selection-aggregates-item-text">Sum:</span>
-                                <span className="k-selection-aggregates-item-value">122.00</span>
-                            </div>
-                            <div className="k-selection-aggregates-item">
-                                <span className="k-selection-aggregates-item-text">Avg:</span>
-                                <span className="k-selection-aggregates-item-value">30.50</span>
-                            </div>
-                            <div className="k-selection-aggregates-item">
-                                <span className="k-selection-aggregates-item-text">Min:</span>
-                                <span className="k-selection-aggregates-item-value">13</span>
-                            </div>
-                            <div className="k-selection-aggregates-item">
-                                <span className="k-selection-aggregates-item-text">Max:</span>
-                                <span className="k-selection-aggregates-item-value">53</span>
-                            </div>
-                            <div className="k-selection-aggregates-item">
-                                <span className="k-selection-aggregates-item-text">Count:</span>
-                                <span className="k-selection-aggregates-item-value">8</span>
-                            </div>
-                        </>
-                        :
+                { aggregated ?
+                    <>
+                        <div className="k-selection-aggregates-item">
+                            <span className="k-selection-aggregates-item-text">Sum:</span>
+                            <span className="k-selection-aggregates-item-value">122.00</span>
+                        </div>
+                        <div className="k-selection-aggregates-item">
+                            <span className="k-selection-aggregates-item-text">Avg:</span>
+                            <span className="k-selection-aggregates-item-value">30.50</span>
+                        </div>
+                        <div className="k-selection-aggregates-item">
+                            <span className="k-selection-aggregates-item-text">Min:</span>
+                            <span className="k-selection-aggregates-item-value">13</span>
+                        </div>
+                        <div className="k-selection-aggregates-item">
+                            <span className="k-selection-aggregates-item-text">Max:</span>
+                            <span className="k-selection-aggregates-item-value">53</span>
+                        </div>
                         <div className="k-selection-aggregates-item">
                             <span className="k-selection-aggregates-item-text">Count:</span>
-                            <span className="k-selection-aggregates-item-value">0</span>
+                            <span className="k-selection-aggregates-item-value">8</span>
                         </div>
-                    }
-                </div>
-            </>
-        )}
+                    </>
+                    :
+                    <div className="k-selection-aggregates-item">
+                        <span className="k-selection-aggregates-item-text">Count:</span>
+                        <span className="k-selection-aggregates-item-value">0</span>
+                    </div>
+                }
+            </div>
+            )
+        }
         {...other}>
 
     </Grid>