Blazor TreeGrid - alto rendimiento Componente
- Cargue grandes cantidades de datos cargando dinámicamente datos secundarios bajo demanda.
- Incluya interacciones de IU flexibles como expandir y colapsar registros padres, edición en diálogos y más.
- Apariencia de IU atractiva con temas integrados como Fabric, Bootstrap, etc.
Quick Overview Video
Confiado por las empresas líderes del mundo
Descripción general
El Blazor Tree Grid es un componente rico en funciones diseñado para visualizar eficazmente datos jerárquicos autorreferenciales (estructura tipo árbol) en un formato tabular. Su amplio conjunto de características incluye funcionalidades como vinculación de datos, edición, ordenación, filtrado, paginación, agregación de filas y exportación a formatos Excel, CSV y PDF.
¿Por qué elegir Syncfusion Essential Studio® Blazor Tree Grid?
Alto rendimiento
Muestre datos jerárquicamente; su diseño optimizado proporciona un alto rendimiento y permite cargar millones de registros en solo unos segundos.
Vinculación de datos fluida
Vincule datos sin problemas con diversas fuentes de datos locales y remotas como JSON, OData, WCF y servicios web RESTful con la ayuda de un administrador de datos.
Cuadrícula jerárquica y autorreferencial
Tree Grid está diseñado para visualizar datos autorreferenciales y jerárquicos en un formato tabular. Esto a su vez muestra la relación entre los registros padres e hijos.
Edición flexible
El Blazor Tree Grid realiza operaciones de creación, lectura, actualización y eliminación (CRUD) con datos observables. Permite editar con un Array de JSON o servicios de datos remotos mediante el administrador de datos.
Se adapta a cualquier resolución
El Tree Grid tiene un diseño altamente responsivo y optimizado para computadoras de escritorio, pantallas táctiles y teléfonos inteligentes. Funciona correctamente en todos los teléfonos móviles que utilizan iOS, Android o Windows OS.
Cree sus propios diseños de plantilla
Mediante el uso de plantillas, los usuarios pueden crear una IU personalizada en el Blazor Tree Grid según las necesidades de su aplicación utilizando una amplia gama de opciones de plantillas.
Atractivos temas personalizables
Diseño de vanguardia con más de 5 temas integrados como Fluent, Tailwind CSS, Bootstrap, Material, Fabric y más. Utilice la herramienta online Theme Studio para personalizar fácilmente los temas de Tree Grid.
Globalización y localización
Permite a los usuarios de diferentes regiones utilizar el Tree Grid formateando fechas, monedas y números según sus preferencias.
Ejemplo de código de Blazor Tree Grid
Comience fácilmente con el Blazor Tree Grid utilizando unas pocas líneas simples de código C# como se demuestra a continuación. También explore nuestro Ejemplo de Blazor Tree Grid que le muestra cómo representar y configurar el Blazor Tree Grid.
@using Syncfusion.Blazor.TreeGrid
<SfTreeGrid DataSource="@TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="1">
<TreeGridColumns>
<TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="145"></TreeGridColumn>
<TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
<TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn>
</TreeGridColumns>
</SfTreeGrid>
@code{
public List<SelfReferenceData> TreeData { get; set; }
protected override void OnInitialized()
{
this.TreeData = SelfReferenceData.GetTree().Take(30).ToList();
}
public class SelfReferenceData
{
public static List<SelfReferenceData> tree = new List<SelfReferenceData>();
public int TaskID { get; set; }
public string TaskName { get; set; }
public String Progress { get; set; }
public int Duration { get; set; }
public int? ParentID { get; set; }
public SelfReferenceData() { }
public static List<SelfReferenceData> GetTree()
{
if (tree.Count == 0)
{
int root = -1;
for (var t = 1; t <= 10000; t++)
{
Random ran = new Random();
string progr = (ran.Next() % 3) == 0 ? "Started" : (ran.Next() % 2) == 0 ? "Open" : "In Progress";
root++;
int rootItem = tree.Count + root + 1;
tree.Add(new SelfReferenceData() { TaskID = rootItem, TaskName = "Parent task " + rootItem.ToString(), Progress = progr, Duration = ran.Next(1, 50) });
int parent = tree.Count;
for (var c = 0; c < 2; c++)
{
root++;
progr = (ran.Next() % 3) == 0 ? "In Progress" : (ran.Next() % 2) == 0 ? "Open" : "Validated";
int iD = tree.Count + root + 1;
tree.Add(new SelfReferenceData() { TaskID = iD, TaskName = "Child task " + iD.ToString(), ParentID = rootItem, Progress = progr, Duration = ran.Next(1, 50) });
}
}
}
return tree;
}
}
}Diseño de IU adaptativo
La interfaz de usuario del Blazor Tree Grid está personalizada y rediseñada para ofrecer excelentes vistas y usabilidad en pantallas pequeñas. Los diálogos de filtro, búsqueda y edición se adaptan al tamaño de la pantalla.
Columna
Las columnas definen el esquema de una fuente de datos en el componente Blazor Tree Grid. Admite formato, definiciones de columna, congelación de columnas, expansión de columnas, ajuste de texto, selector de columnas, menú de columnas, reordenación de columnas y otras funciones.
Paginación
A través de la paginación, se puede visualizar un segmento de datos de la fuente de datos asignada. El Blazor Tree Grid ofrece una interfaz de usuario de paginador integrada con opciones para personalizar toda su IU. También cuenta con un modo de paginación bajo demanda para una recuperación efectiva de datos desde servicios web remotos.
Ordenación
El Blazor Tree Grid permite a los usuarios ordenar una columna simplemente haciendo clic en el encabezado. Ctrl + clic en el encabezado realiza una ordenación múltiple. Permite ordenar los datos en orden ascendente o descendente.
Filtrado
El filtrado ayuda a ver registros específicos o relacionados que cumplen con un criterio de filtrado determinado. Admite varios tipos de filtros, incluido un potente filtro tipo Excel. El filtro de Blazor Tree Grid permite a los usuarios elegir tipos de filtros adecuados, definir su propia lógica de filtrado personalizada y personalizar la interfaz de filtrado según las necesidades de su aplicación. Se puede definir el filtrado con registros padres o hijos relacionados.
Selección
El Blazor Tree Grid permite seleccionar filas o celdas. También se pueden seleccionar una o más filas o celdas manteniendo presionado Ctrl o Command, o de forma programática.
Fila
Las filas en Tree Grid representan la información de cada objeto de datos de la fuente de datos. Admite expandir/colapsar filas hijas, reordenar filas, sangrar/anular sangría de filas para cambiar sus niveles jerárquicos y muchas más funciones.
Edición
El Blazor Tree Grid proporciona soporte completo para operaciones de creación, lectura, actualización y eliminación (CRUD). Además de los componentes editores integrados para editar un valor de columna específico, mediante el uso de plantillas, los usuarios pueden crear componentes editores personalizados que se adapten a las necesidades de su aplicación. Realiza operaciones de edición con una lista de objetos de negocio o servicios de datos remotos con la ayuda del administrador de datos.
Arrastrar y soltar filas
El Blazor Tree Grid permite a los usuarios arrastrar y soltar filas dentro de la misma cuadrícula o en otro Tree Grid. Esta funcionalidad es especialmente útil para reorganizar datos y crear una experiencia de usuario más intuitiva.
Agregación
Los agregados para valores de columna se pueden mostrar fácilmente utilizando la función de agregación. Los agregados se pueden personalizar para mostrar valores en filas de resumen individuales.
Columnas congeladas
Las columnas congeladas son visibles a la izquierda, a la derecha o en ambos lados del Tree Grid y hacen que el resto del contenido de la cuadrícula sea desplazable. Se utiliza principalmente para comparar valores de celdas. Los usuarios pueden incluir o excluir las columnas de la congelación interactuando con los separadores de líneas congeladas entre las columnas.
Exportación
Exportación a Excel, PDF, CSV
Exporte fácilmente el componente Blazor Tree Grid en formatos de archivo como Excel, PDF o CSV.
Impresión
Permite a los usuarios imprimir datos utilizando la opción de impresión de la barra de herramientas o mediante programación. Imprima todas las filas de un Blazor Tree Grid independientemente del número de páginas o imprima solo la página que se está visualizando actualmente.
Características adicionales
Altura de fila
La altura de fila es un factor importante al mostrar el número de registros en el área de visualización, y es fácilmente personalizable según los requisitos de IU de la aplicación. También es posible establecer la altura de la fila de forma condicional.
Copiar al portapapeles
El portapapeles proporciona una opción para copiar los datos de las filas o celdas seleccionadas al portapapeles. Utilice las combinaciones de teclas Ctrl+C y Ctrl+Shift+H para copiar datos con y sin encabezados, respectivamente.
Menú contextual
El menú contextual mejora la acción del usuario con el Blazor Tree Grid utilizando un menú emergente. Aparece cuando se hace clic derecho en la celda, el encabezado o el paginador. Además de los elementos de menú predeterminados integrados, le permite agregar elementos de menú contextual personalizados.
Ancho y alto
Permite cambiar el tamaño del Blazor Tree Grid estableciendo las propiedades de ancho y alto. Aparecerán barras de desplazamiento horizontal y vertical cuando el contenido exceda el elemento Blazor Tree Grid. Para que el Blazor Tree Grid ocupe su contenedor padre, el usuario simplemente debe establecer el alto y el ancho en 100%.
Encabezados apilados
Los encabezados apilados permiten agrupar y visualizar los encabezados de las columnas de manera apilada. No hay límite en el número de columnas que se pueden apilar. Permite al usuario realizar todas las acciones de Blazor Tree Grid, incluso cuando las columnas están apiladas.
Accesibilidad
Navegación por teclado
Blazor Tree Grid garantiza que cada celda sea accesible mediante el teclado. Las funciones principales como expandir o colapsar filas hijas, ordenar, seleccionar y editar se pueden realizar utilizando solo comandos de teclado; no se requiere interacción con el mouse. Esto ayuda a crear aplicaciones altamente accesibles utilizando este componente.
Lector de pantalla
El Blazor Tree Grid tiene soporte completo de accesibilidad WAI-ARIA. La interfaz de usuario de Blazor Tree Grid incluye elementos visuales de alto contraste, lo que ayuda a las personas con discapacidad visual a tener la mejor experiencia de visualización. Además, las descripciones de IU válidas son fácilmente accesibles a través de tecnologías de asistencia como los lectores de pantalla.
De derecha a izquierda (RTL)
La representación de derecha a izquierda permite mostrar el texto y el diseño del Tree Grid de derecha a izquierda. Esto mejora la experiencia del usuario y la accesibilidad para los idiomas RTL.
Otros Frameworks compatibles
El Tree Grid está disponible para los Frameworks React, Angular, JavaScript y Vue. Explore sus opciones específicas de plataforma a través de los siguientes enlaces:
Navegadores compatibles
El Blazor Tree Grid funciona bien con todos los navegadores web modernos, incluidos Chrome, Firefox, Edge, Safari y Opera.
¿No está seguro de cómo crear su primer Blazor Tree Grid? Nuestros videos tutoriales y documentación pueden ayudar.
Me encantaría verlo ahora Me encantaría leerlo ahoraComponentes de Blazor: más de 155 componentes de interfaz de usuario y DataViz
TODOS LOS COMPONENTES
COMPONENTES INTELIGENTES
CUADRÍCULAS
VISUALIZACIÓN DE DATOS
ENTRADAS DE DATOS
MENÚS DESPLEGABLES
BOTONES
CHAT INTERACTIVO
NAVEGACIÓN
NOTIFICACIÓN
FORMULARIOS
Preguntas frecuentes
¿Por qué debería elegir Syncfusion Essential Studio® Blazor Tree Grid?
Vinculación de datos flexible con soporte para usar fuentes de datos como Web API, OData, Entity Framework y más.
Tiempo de carga ultrarrápido y rica interacción de IU y navegación por teclado tanto en aplicaciones Blazor del lado del servidor como del lado del cliente (WebAssembly).
Equipado con un conjunto de características con opciones de personalización adecuadas para construir aplicaciones complejas a gran escala.
Operaciones CRUD utilizando varios modos de edición y reglas de validación integradas.
- Configuración y API sencillas.
- Compatible con todos los navegadores modernos.
- Compatible con dispositivos móviles táctiles y responsivo.
Amplias demos, documentación y videos para aprender rápidamente y comenzar con Blazor Tree Grid.
¿Dónde puedo encontrar la demo de Syncfusion Blazor Tree Grid?
Puede encontrar nuestra demo de Blazor Tree Grid, que demuestra cómo representar y configurar el Tree Grid.
¿Es gratuito Syncfusion Blazor Tree Grid?
No, este es un producto comercial y requiere una licencia paga. Sin embargo, también está disponible una licencia comunitaria gratuita para empresas e individuos cuyas organizaciones tengan menos de $1 millón de USD en ingresos brutos anuales y cinco o menos desarrolladores.
¿Cómo empiezo con Syncfusion Blazor Tree Grid?
Un buen lugar para comenzar sería nuestra completa documentación de inicio.
Nuestros clientes nos aman
Con un excelente conjunto de herramientas y un gran equipo de soporte, Syncfusion® reduce el tiempo de desarrollo de los clientes.Estas son algunas de sus experiencias.
Blazor components
The speed how they adding new Blazor controls and update theirs functionality. I am using Blazor components. Searching for Blazor components I found that Syncfusion very fast adopted theirs controls for new development platform. Tech support is fast and excellent. The best of best is that they provide free controls for small business.
Igor L
CEO
Syncfusion objects with a Blazor
I have used some of the Syncfusion objects with a Blazor application. The support group has always been very helpful.
customer-image
Kris B
Software Development Consultant
Ver historias de éxito reales
Desarrolladores de todo el mundo confían en Essential Studio de Syncfusion para simplificar proyectos complejos y acelerar la entrega. Con una amplia biblioteca de controles de interfaz de usuario, potentes SDK y soporte confiable, Essential Studio ayuda a los equipos a crear aplicaciones de nivel empresarial con confianza.
Explorar estudios de casoIndustria
Desarrollo de software
75% Reducción de costos
50% Desarrollo más rápido
Industria
Servicios públicos (petróleo y gas)
450+ horas ahorradas
Procesos optimizados y horas de esfuerzo de desarrollo ahorradas.
Funciones avanzadas y flexibles
Usuarios potenciados mediante una funcionalidad sólida y versátil.
Industria
Software y tecnología
1000+ horas ahorradas
Desarrollo acelerado con componentes de interfaz de usuario listos para empresa.
Gestión eficiente de archivos
Flujos de trabajo optimizados con bibliotecas de documentos sin crearlas desde cero.
Industria
Software y tecnología
2 años de retraso evitado
Se evitaron dos años de retrasos gracias a la planificación proactiva.
Entrega punctual
Proyectos entregados a tiempo utilizando controles de confianza.
Industria
Servicios de TI y consultoría de TI
Rendimiento Mejorado
Grandes conjuntos de datos gestionados con fácil personalización y depuración rápida.
Altamente personalizable
Controles plug-and-play con integración rápida de plantillas.
Industria
Servicios profesionales
Acceso instantáneo
Disponibilidad rápida de funciones y recursos.
Dependencias reducidas
Menos dependencias para un desarrollo más rápido.
Calificado por usuarios de todo el mundo
Recursos de Syncfusion Blazor Tree Grid
Soporte Técnico
Contactar a Soporte
Foros de la comunidad
Solicitudes de funciones y reportes de errores
Contactar a Soporte
Foros de la comunidad
Solicitudes de funciones y reportes de errores
Kits de UI
Descarga de Figma
Descarga de Figma
Premios
Grandeza: Decir que la tienes es una cosa, pero significa más cuando otros la reconocen. Syncfusion® se enorgullece de haber recibido los siguientes premios de la industria.
