You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/grid/templates.md
+33-11Lines changed: 33 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -242,17 +242,7 @@ Bound columns render the name of the field or their `Title` in their header. Thr
242
242
<GridColumn Field="@(nameof(SampleData.ID))" Title="This title will not be rendered">
243
243
<HeaderTemplate>
244
244
<div style="text-align:center">Id</div>
245
-
@* this is a block element and it will push the sorting indicator, keep this in mind
246
-
A rule like this one can move the sort indicator out of the static order of the elements
247
-
<style>
248
-
.k-grid th.k-header .k-icon.k-i-sort-asc-sm,
249
-
.k-grid th.k-header .k-icon.k-i-sort-desc-sm {
250
-
position: absolute;
251
-
right: 0;
252
-
top: 8px;
253
-
}
254
-
</style>
255
-
*@
245
+
@* this is a block element and it will push the sorting indicator, see the notes below *@
256
246
</HeaderTemplate>
257
247
</GridColumn>
258
248
<GridColumn Field="@(nameof(SampleData.Name))">
@@ -317,6 +307,38 @@ Bound columns render the name of the field or their `Title` in their header. Thr
317
307
318
308
>note Header Templates are not available for the `GridCheckboxColumn` and the `GridCommandColumn`.
319
309
310
+
>note If you need to use block elements in the header templates, keep in mind that they will push the sort indicator out of its expected position. If you cannot avoid block elements (such as in the `ID` column in the example above), add a CSS rule like the ones below to adjust the sort indicator.
311
+
312
+
>caption Sort indicator adjustments when block elements are in the header template
313
+
314
+
````CSS
315
+
.k-gridth.k-header.k-icon.k-i-sort-asc-sm,
316
+
.k-gridth.k-header.k-icon.k-i-sort-desc-sm {
317
+
position: absolute;
318
+
right: 0;
319
+
top: 8px;
320
+
}
321
+
322
+
/* OR */
323
+
324
+
.k-grid-header.k-header>.k-link {
325
+
padding-right: 1.5em;
326
+
}
327
+
328
+
.k-grid-header.k-header>.k-link>.k-icon {
329
+
position: absolute;
330
+
top: 50%;
331
+
right: 0.5em;
332
+
transform: translateY(-50%);
333
+
margin-left: 0;
334
+
}
335
+
336
+
.k-grid-header.k-sort-order {
337
+
position: absolute;
338
+
right: 0.25em;
339
+
}
340
+
````
341
+
320
342
## Column Group Footer
321
343
322
344
When the grid is grouped, the columns can display a footer with information about the column data [aggregates]({%slug grid-aggregates%}) and some custom text/logic. The template is strongly typed and exposes the available aggregates values.
0 commit comments