Как добавить липкие заголовки в Blazorise DataGrid? - PullRequest
Новая
       86

Как добавить липкие заголовки в Blazorise DataGrid?

2 голосов
/ 03 августа 2020

Недавно у меня был запрос на добавление функциональности Sticky Header в DataGrid в одном из моих серверных проектов Blazor. Я использую Blazorise и не видел каких-либо существующих функций для липких заголовков и нашел ограниченную информацию в Интернете, поэтому решил, что задокументирую свое решение.

1 Ответ

3 голосов
/ 03 августа 2020

Я предваряю свой ответ тем фактом, что это решение было создано для chrome и, возможно, его необходимо настроить для разных браузеров.

Для начала я добавил на свой сайт класс с липким заголовком. css файл: 

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
}

    .sticky-header::before {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        top: -1px;
        left: 0;
        background-color: #fcfcfc;
        z-index: -1;
    }

    .sticky-header + .sticky-header::after {
        content: '';
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        left: -1px;
        background-color: #fcfcfc;
        z-index: -1;
    }

Несколько замечаний по поводу css. Для top установлено значение 0, чтобы заголовки располагались в верхней части экрана, а для z-index нужно просто установить более высокий индекс, чем для окружающих элементов, чтобы он оставался перед другими элементами.

Кроме того, я заметил, что position: sticky избавился от моих границ, и в результате я использовал псевдоклассы ::before и ::after, чтобы помочь действовать как внутренняя граница, но эта часть кода не обязательно требуется для липкого заголовки для работы.

Как только у вас будет указанная выше css, вы захотите добавить ее в свой DataGrid. Для каждого столбца DataGridColumn, который вы определяете в разделе DataGridColumns, вам нужно добавить следующий код: 

<DataGrid>
   <DataGridColumns>
      <DataGridColumn HeaderCellClass="sticky-header" TItem="TEntity" Field="@nameof(TEntity.SomeProperty)" Caption="Some Caption" />
   </DataGridColumns>
</DataGrid>
...