Tenga en cuenta que este control ha quedado obsoleto y reemplazado con el componente Grid y, como tal, recomendamos migrar a ese control. Esto no recibirá ninguna característica nueva, las correcciones de errores no tendrán prioridad. Para obtener ayuda o preguntas sobre la migración de su código base a Data Grid, comuníquese con el soporte.
Web Components Descripción general de las opciones de columna de cuadrícula
La cuadrícula de datos de Ignite UI for Web Components admite la capacidad de agrupar, ocultar, ordenar, mover, anclar, filtrar y ordenar columnas directamente desde una interfaz de usuario expuesta en cada encabezado de columna.
Para habilitar la interfaz de usuario de opciones de columna, puede establecer la propiedad isColumnOptionsEnabled de la cuadrícula en verdadero.
Ejemplo de opciones de columna de cuadrícula de Web Components
<!DOCTYPE html><html><head><title>DataGridColumnOptions</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-data-gridid="grid"height="100%"width="100%"auto-generate-columns="false"is-column-options-enabled="true" ><igc-text-columnfield="ProductID"header-text="ID"width="*>90"horizontal-alignment="center"></igc-text-column><igc-text-columnfield="ProductName"header-text="Product"width="*>155"></igc-text-column><igc-image-columnis-filtering-enabled="false"field="CountryFlag"header-text="Country"width="*>120"contentOpacity="1"horizontal-alignment="center"padding-top="5"padding-bottom="5"></igc-image-column><igc-numeric-columnfield="ProductPrice"header-text="Price"width="*>95"positive-prefix="$"show-grouping-separator="true"min-fraction-digits="2" ></igc-numeric-column><igc-numeric-columnfield="OrderItems"header-text="Orders"width="*>110"></igc-numeric-column><igc-numeric-columnfield="OrderValue"header-text="Order Value"width="*>145"positive-prefix="$"show-grouping-separator="true" ></igc-numeric-column><igc-date-time-columnfield="OrderDate"header-text="Order Date"width="*>145"horizontal-alignment="right"dateTimeFormat="DateShort" ></igc-date-time-column><igc-numeric-columnfield="Margin"header-text="Margin"width="*>110"positive-suffix="%"horizontal-alignment="center" ></igc-numeric-column><igc-numeric-columnfield="Profit"header-text="Profit"width="*>100"positive-prefix="$"show-grouping-separator="true" ></igc-numeric-column><igc-text-columnfield="Status"header-text="Status"width="*>110"horizontal-alignment="center"></igc-text-column></igc-data-grid></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Configuraciones de opciones de columna
El filtrado se puede alternar por columna configurando la propiedad IsFilteringEnabled de la columna. Establecer verdadero o falso mostrará u ocultará la sección de filtrado en la interfaz de usuario de opciones de la columna.
La clasificación se puede alternar para toda la cuadrícula si se aplica la propiedad headerClickAction. Establecer esto en None, por ejemplo, eliminará por completo la clasificación de la cuadrícula y se reflejará en las opciones de la interfaz de usuario para cada columna. Y configurar SortByOneColumnOnly por ejemplo, seguirá permitiendo ordenar una columna a la vez.
Fragmento de código
El siguiente código demuestra cómo habilitar mediante programación las opciones de columna de la interfaz de usuario y ajustar el filtrado y la clasificación en las opciones de columna de la interfaz de usuario ajustando la cuadrícula y la columna.