Tenga en cuenta que este control ha quedado obsoleto y reemplazado por 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.

    Descripción general de la cuadrícula de datos Blazor

    La Ignite UI for Blazor es un componente de cuadrícula tabular Blazor que le permite vincular y mostrar rápidamente sus datos con poca codificación o configuración. Las características de la cuadrícula de datos Blazor incluyen filtrado, ordenamiento, plantillas, selección de filas, agrupación de filas, fijación de filas y columnas movibles. Las tablas Blazor están optimizadas para datos en vivo y en tiempo real, con la capacidad de manejar un tamaño de conjunto de datos ilimitado en cantidad de filas o columnas.

    Ejemplo de cuadrícula de datos de Blazor

    Esta demostración implementa algunas de las funciones que están disponibles en la cuadrícula: filtrado, agrupación, fijar/desanclar columnas, reposicionar columnas, ordenar y resúmenes.

    EXAMPLE
    MODULES
    DATA GENERATOR
    DATA SOURCE
    RAZOR
    JS
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Empezando

    dependencias

    Consulte estos temas sobre cómo agregar el paquete IgniteUI.Blazor.

    Luego, puede comenzar a implementar el control agregando los siguientes espacios de nombres:

    @using IgniteUI.Blazor.Controls
    razor

    Módulos de componentes

    El IgbGrid requiere los siguientes módulos:

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbDataGridModule));
    razor

    Módulos opcionales

    Las características opcionales IgbGrid, vistas arriba, requieren los siguientes módulos:

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(
        typeof(IgbDataGridModule),
        typeof(IgbDataGridToolbarModule),
        typeof(IgbSparklineModule)
    );
    razor

    Fuente de datos de muestra

    Ahora que se ha importado el módulo de cuadrícula de datos Blazor, el siguiente paso es la configuración básica de la cuadrícula Blazor que se vincula a los datos locales.

    @code {
    
        public List<SaleInfo> DataSource { get; set;}
        Random Rand = new Random();
    
        protected override void OnInitialized()
        {
            GenerateData();
        }
    
        public void GenerateData()
        {
            string[] names = new string[] {
                "Intel CPU", "AMD CPU",
                "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard",
                "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU",
                "Corsair Memory", "Patriot Memory", "Skill Memory",
                "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD",
                "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD",
                "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" };
    
            string[] countries = new string[] {
                "USA", "UK", "France", "Canada", "Poland",
                "Denmark", "Croatia", "Australia", "Seychelles",
                "Sweden", "Germany", "Japan", "Ireland",
                "Barbados", "Jamaica", "Cuba", "Spain", };
            string[] status = new string[] { "Packing", "Shipped", "Delivered" };
    
            var sales = new List<SaleInfo>();
    
            for (var i = 0; i < 200; i++)
            {
                var price = GetRandomNumber(10000, 90000) / 100;
                var items = GetRandomNumber(4, 30);
                var value = Math.Round(price * items);
                var margin = GetRandomNumber(2, 5);
                var profit = Math.Round((price * margin / 100) * items);
                var country = GetRandomItem(countries);
    
                var item = new SaleInfo()
                {
                    Country = country,
                    CountryFlag = GetCountryFlag(country),
                    Margin = margin,
                    OrderDate = GetRandomDate(),
                    OrderItems = items,
                    OrderValue = value,
                    ProductID = 1001 + i,
                    ProductName = GetRandomItem(names),
                    ProductPrice = price,
                    Profit = Math.Round(profit),
                    Status = GetRandomItem(status)
                };
                sales.Add(item);
            }
    
            this.DataSource = sales;
        }
    
        public double GetRandomNumber(double min, double max)
        {
            return Math.Round(min + (Rand.NextDouble() * (max - min)));
        }
    
        public string GetRandomItem(string[] array)
        {
            var index = (int)Math.Round(GetRandomNumber(0, array.Length - 1));
            return array[index];
        }
    
        public DateTime GetRandomDate() {
            var today = new DateTime();
            var year = today.Year;
            var month = this.GetRandomNumber(1, 9);
            var day = this.GetRandomNumber(10, 27);
            return new DateTime(year, (int)month, (int)day);
        }
    
        public string GetCountryFlag(string country)
        {
            var flag = "https://static.infragistics.com/xplatform/images/flags/" + country + ".png";
            return flag;
        }
    
        public class SaleInfo
        {
            public string? Status { get; set; }
            public string? ProductName { get; set; }
            public string? CountryFlag { get; set; }
            public string? Country { get; set; }
            public DateTime OrderDate { get; set; }
            public double Profit { get; set; }
            public double ProductPrice { get; set; }
            public double ProductID { get; set; }
            public double OrderValue { get; set; }
            public double OrderItems { get; set; }
            public double Margin { get; set; }
        }
    }
    razor

    Generar columnas automáticamente

    El siguiente código demuestra cómo vincular la cuadrícula de datos Blazor a los datos locales anteriores.

     <IgbDataGrid Height="100%"
        Width="100%"
        DataSource="DataSource"
        AutoGenerateColumns="true"
        DefaultColumnMinWidth="100"
        SummaryScope="SummaryScope.Root"
        IsColumnOptionsEnabled="true"
        IsGroupCollapsable="true"
        GroupSummaryDisplayMode="GroupSummaryDisplayMode.RowBottom"
        ColumnMovingMode="ColumnMovingMode.Deferred"
        ColumnMovingAnimationMode="ColumnMovingAnimationMode.SlideOver"
        ColumnMovingSeparatorWidth="2"
        ColumnShowingAnimationMode="ColumnShowingAnimationMode.SlideFromRightAndFadeIn"
        ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToRightAndFadeOut"
        SelectionMode="GridSelectionMode.SingleRow"
        CornerRadiusTopLeft="0"
        CornerRadiusTopRight="0" />
    razor

    Definir columnas manualmente

    <IgbDataGrid Height="100%"
        Width="100%"
        DataSource="DataSource"
        AutoGenerateColumns="false">
        <IgbNumericColumn Field="ProductID" HeaderText="Product ID" />
        <IgbTextColumn Field="ProductName" HeaderText="Product Name" />
        <IgbTextColumn Field="QuantityPerUnit" HeaderText="Quantity Per Unit" />
        <IgbNumericColumn Field="UnitsInStock" HeaderText="Units In Stock" />
        <IgbDateTimeColumn Field="OrderDate" HeaderText="Order Date" />
    </IgbDataGrid>
    razor

    Estilo de columnas

    El siguiente código demuestra cómo aplicar estilo a columnas específicas utilizando las propiedades de la columna proporcionada.

    <IgbTextColumn
        Background="SkyBlue"
        FontStyle="italic"
        FontWeight="bold"
        FontFamily="Times New Roman"
        FontSize="16"
    />
    razor

    Vídeo tutorial

    Obtenga más información sobre cómo crear una cuadrícula de datos Blazor en nuestro breve video tutorial:

    Recursos adicionales

    Referencias de API