Skip to content

Commit 9a152e1

Browse files
docs(grid): header template and sorting - better workarounds
1 parent b4c1995 commit 9a152e1

File tree

1 file changed

+33
-11
lines changed

1 file changed

+33
-11
lines changed

components/grid/templates.md

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -242,17 +242,7 @@ Bound columns render the name of the field or their `Title` in their header. Thr
242242
<GridColumn Field="@(nameof(SampleData.ID))" Title="This title will not be rendered">
243243
<HeaderTemplate>
244244
<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 *@
256246
</HeaderTemplate>
257247
</GridColumn>
258248
<GridColumn Field="@(nameof(SampleData.Name))">
@@ -317,6 +307,38 @@ Bound columns render the name of the field or their `Title` in their header. Thr
317307

318308
>note Header Templates are not available for the `GridCheckboxColumn` and the `GridCommandColumn`.
319309
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-grid th.k-header .k-icon.k-i-sort-asc-sm,
316+
.k-grid th.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+
320342
## Column Group Footer
321343

322344
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

Comments
 (0)