Descripción general de los encabezados de varias columnas Blazor Grid
La función Ignite UI for Blazor en Blazor Grid le permite agrupar columnas colocándolas bajo un encabezado múltiple común. Cada grupo de encabezados de varias columnas en IgbGrid
podría ser una representación de combinaciones entre otros grupos o columnas. Esta característica es particularmente útil cuando se trata de conjuntos de datos grandes donde el desplazamiento horizontal puede resultar engorroso.
Blazor Grid Multi-Column Headers Example
La declaración de encabezados de varias columnas se logra envolviendo un conjunto de columnas en un componente IgbColumnGroup
con la información del título IgbHeader
pasada.
<IgbGrid Data=data AllowFiltering=true>
<IgbColumnGroup Header="Contact Information">
<IgbColumn Field="Phone" Sortable=true Resizable=true></IgbColumn>
<IgbColumn Field="Fax" Sortable=true Resizable=true></IgbColumn>
<IgbColumn Field="PostalCode" Sortable=true Resizable=true></IgbColumn>
</IgbColumnGroup>
</IgbGrid>
Para lograr n-th
nivel de encabezados anidados, se debe seguir la declaración anterior. Entonces, al anidar IgbColumnGroup
se obtiene el resultado deseado.
<IgbGrid Data=data AllowFiltering=true>
<IgbColumnGroup Header="General Information">
<IgbColumn Field="CompanyName" Sortable=true Resizable=true Movable=true></IgbColumn>
<IgbColumnGroup Header="Person Details" Movable=true>
<IgbColumn Field="ContactName" Sortable=true Resizable=true Movable=true></IgbColumn>
<IgbColumn Field="ContactTitle" Sortable=true Resizable=true Movable=true></IgbColumn>
</IgbColumnGroup>
</IgbColumnGroup>
</IgbGrid>
Cada IgbColumnGroup
admite movimiento, fijación y ocultación.
[!Note] When there is a set of columns and column groups, pinning works only for top level column parents. More specifically pinning per nested column groups or columns is not allowed.
Moving between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the samegroup
.
Whencolumns/column-groups
are not wrapped by currentgroup
which means they are top levelcolumns
, moving is allowed between whole visible columns.
<IgbGrid Data=data AllowFiltering=true>
<IgbColumnGroup Header="General Information" Pinned=true>
<IgbColumn Field="CompanyName" Sortable=true Resizable=true Movable=true></IgbColumn>
</IgbColumnGroup>
<IgbColumn Field="Phone" Sortable=true Resizable=true></IgbColumn>
<IgbColumn Field="Fax" Sortable=true Resizable=true></IgbColumn>
<IgbColumn Field="PostalCode" Sortable=true Resizable=true></IgbColumn>
</IgbGrid>
Multi-Column Header Template
Se puede crear una plantilla para cada uno de los grupos de columnas de la cuadrícula por separado. El grupo de columnas espera RenderFragment
para la propiedad HeaderTemplate
. La expresión se proporciona con el objeto de grupo de columnas como contexto.
<IgbColumnGroup Header="Address Information" HeaderTemplate="Template">
</IgbColumnGroup>
@code {
public RenderFragment<IgbColumnTemplateContext> Template = (ctx) => {
string value = ctx.Column.Header.ToUpper();
return @<span>@value</span>;
};
}
Si desea volver a utilizar una sola plantilla para varios grupos de columnas, puede establecer la HeaderTemplate
propiedad del grupo de columnas de la siguiente manera:
<IgbColumnGroup Header="General Information" HeaderTemplate="Template">
</IgbColumnGroup>
<IgbColumnGroup Header="Address Information" HeaderTemplate="Template">
</IgbColumnGroup>
@code {
public RenderFragment<IgbColumnTemplateContext> Template = (ctx) => {
string value = ctx.Column.Header.ToUpper();
return @<span>@value</span>;
};
}
[!Note] If a header is re-templated and the corresponding column group is movable, you have to set the draggable attribute to false on the templated elements, so that you can handle any of the events that are applied!
@code {
public Dictionary<string, object> DraggableAttributes { get; set; } =
new Dictionary<string, object>()
{
{ "draggable", "false" }
};
public RenderFragment<IgbColumnTemplateContext> Template = (ctx) => {
return @<IgbIcon AdditionalAttributes="DraggableAttributes" @onclick="onClick"/>;
};
}
El siguiente ejemplo demuestra cómo implementar grupos de columnas contraíbles utilizando plantillas de encabezado.
Styling
Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:
<IgbGrid class="grid"></IgbGrid>
Luego establezca las propiedades CSS relacionadas con esta clase:
.grid {
--ig-grid-header-background: #e0f3ff;
--ig-grid-header-text-color: #e41c77;
--ig-grid-header-border-width: 1px;
--ig-grid-header-border-style: solid;
--ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
}
Demo
API References
Additional Resources
- Descripción general de la cuadrícula
- Virtualización y rendimiento
- Paginación
- Filtración
- Clasificación
- resúmenes
- Cambio de tamaño de columna
- Selección
- Agrupar por
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.