Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Blazor Grid Column Chooser Overview

La Ignite UI for Blazor Data Grid admite la capacidad de mostrar y ocultar columnas con la interfaz de usuario a través del componente IgbDataGridToolbar o mediante el componente ColumnChooser, que brinda flexibilidad para colocarlo en cualquier lugar de la página. La propiedad IsHidden en las columnas también se puede utilizar para ocultar o mostrar rápidamente una sola columna de manera programática para la generación manual de columnas, y el valor de IsHidden se reflejará en el componente ColumnChooser. Cada enfoque se puede utilizar indistintamente para cambiar el estado visible de las columnas.

すぐに使用できる機能のフルセット は、ページング、ソート、フィルタリング、編集、グループ化から行と列の仮想化まで、あらゆる機能をカバーします。.NET 開発者には制限はありません。

無料で試してみる

Blazor Grid Column Chooser Example

EXAMPLE

MODULES

DATA GENERATOR

DATA SOURCE

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbDataGridModule),
                typeof(IgbDataGridToolbarModule),
                typeof(IgbGridColumnOptionsModule)
);
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;
using System.Linq;

namespace Infragistics.Samples
{
    public static class DataGenerator
    {
        readonly static string[] websites = { ".com", ".gov", ".edu", ".org" };
        readonly static string[] emails = { "gmail.com", "yahoo.com", "twitter.com" };
        readonly static string[] genders = { "male", "female" };
        readonly static string[] maleNames = { "Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce" };
        readonly static string[] femaleNames = { "Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally" };
        readonly static string[] lastNames = { "Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla" };
        readonly static string[] countries = { "USA", "UK", "France", "Canada", "Poland" };
        readonly static string[] citiesUS = { "New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas" };
        readonly static string[] citiesUK = { "London", "Liverpool", "Manchester" };
        readonly static string[] citiesFR = { "Paris", "Marseille", "Lyon" };
        readonly static string[] citiesCA = { "Toronto", "Vancouver", "Montreal" };
        readonly static string[] citiesPL = { "Krakow", "Warsaw", "Wroclaw", "Gdansk" };
        readonly static string[] citiesJP = { "Tokyo", "Osaka", "Kyoto", "Yokohama" };
        readonly static string[] citiesGR = { "Berlin", "Bonn", "Cologne", "Munich", "Hamburg" };
        readonly static string[] roadSuffixes = { "Road", "Street", "Way" };
        readonly static string[] roadNames = { "Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill" };

        public static Random Rand = new Random();

        public static string GetWebsite()
        {
            return GetItem(websites);
        }

        public static string GetEmail()
        {
            return GetItem(emails);
        }

        public static double GetNumber(double min, double max)
        {
            return Math.Round(min + (Rand.NextDouble() * (max - min)));
        }

        public static int GetInteger(double min, double max)
        {
            return (int)GetNumber(min, max);
        }

        public static string GetPhone()
        {
            var phoneCode = GetNumber(100, 900);
            var phoneNum1 = GetNumber(100, 900);
            var phoneNum2 = GetNumber(1000, 9000);
            var phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
            return phone;
        }

        public static string GetGender()
        {
            return GetItem(genders);
        }

        public static string GetNameFirst(string gender)
        {
            if (gender == "male")
                return GetItem(maleNames);
            else
                return GetItem(femaleNames);
        }

        public static string GetNameLast()
        {
            return GetItem(lastNames);
        }

        public static string GetItem(string[] array)
        {
            var index = (int)Math.Round(GetNumber(0, array.Length - 1));
            return array[index];
        }

        public static string GetCountry()
        {
            return GetItem(countries);
        }

        public static string GetCity(string country)
        {
            if (country == "Canada")
            {
                return GetItem(citiesCA);
            }
            else if (country == "France")
            {
                return GetItem(citiesFR);
            }
            else if (country == "Poland")
            {
                return GetItem(citiesPL);
            }
            else if (country == "USA")
            {
                return GetItem(citiesUS);
            }
            else if (country == "Japan")
            {
                return GetItem(citiesJP);
            }
            else if (country == "Germany")
            {
                return GetItem(citiesGR);
            }
            else
            { // if (country === "United Kingdom") {
                return GetItem(citiesUK);
            }
        }

        public static string GetStreet()
        {
            var num = Math.Round(GetNumber(100, 300)).ToString();
            var road = GetItem(roadNames);
            var suffix = GetItem(roadSuffixes);
            return num + " " + road + " " + suffix;
        }

        public static DateTime GetBirthday()
        {
            var year = DateTime.Now.Year - GetInteger(30, 50);
            var month = GetNumber(10, 12);
            var day = GetNumber(20, 27);
            return new DateTime(year, (int)month, (int)day);
        }

        public static DateTime GetDate()
        {
            var year = DateTime.Now.Year;
            var month = GetNumber(10, 12);
            var day = GetNumber(20, 27);
            return new DateTime(year, (int)month, (int)day);
        }

        public static string Pad(int num, int size)
        {
            var s = num + "";
            while (s.Length < size)
            {
                s = "0" + s;
            }
            return s;
        }

        public static string GetPhotoMale(int id)
        {
            return "https://static.infragistics.com/xplatform/images/people/GUY" + Pad(id, 2) + ".png";
        }

        public static string GetPhotoFemale(int id)
        {
            return "https://static.infragistics.com/xplatform/images/people/GIRL" + Pad(id, 2) + ".png";
        }

        private static int maleCount = 0;
        private static int femaleCount = 0;
        public static string GetPhoto(string gender)
        {
            if (gender == "male")
            {
                maleCount++;
                if (maleCount > 24) maleCount = 1;
                return GetPhotoMale(maleCount);
            }
            else
            {
                femaleCount++;
                if (femaleCount > 24) femaleCount = 1;
                return GetPhotoFemale(femaleCount);
            }
        }

        public static string GetGenderPhoto(string gender)
        {
            return "https://static.infragistics.com/xplatform/images/genders/" + gender + ".png";
        }

        public static string GetCountryFlag(string country)
        {
            return "https://static.infragistics.com/xplatform/images/flags/" + country + ".png";
        }

        public static string GetIncomeRange(double salary)
        {
            if (salary < 50000)
            {
                return "Low";
            }
            else if (salary < 100000)
            {
                return "Average";
            }
            else
            {
                return "High";
            }
        }

    }

}csコピー

using System;
using System.Collections.Generic;

namespace Infragistics.Samples
{
    public class SaleInfo
    {
        public DateTime OrderDate { get; set; }
        public string ID { get; set; }
        public string ProductName { get; set; }
        public double ProductPrice { get; set; }
        public double BundlePrice { get; set; }
        public double Margin { get; set; }
        public double OrderItems { get; set; }
        public double OrderValue { get; set; }
        public double Profit { get; set; }
        public string Country { get; set; }
        public string CountryFlag { get; set; }
        public string City { get; set; }
        public string Status { get; set; }
    }

    public class SalesDataService
    {
        public static List<SaleInfo> Create(int? count)
        {
            if (count == null) count = 100;

            string[] names = {
                "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",
                "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD",
                "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" };
            string[] countries = { "USA", "UK", "France", "Canada", "Poland", "Japan", "Germany" };
            string[] status = { "Packing", "Shipped", "Delivered" };

            var sales = new List<SaleInfo>();
            for (var i = 0; i < count; i++)
            {
                var price = DataGenerator.GetNumber(100, 900);
                var items = DataGenerator.GetNumber(10, 80);
                var value = price * items;
                var margin = DataGenerator.GetNumber(3, 10);
                var profit = Math.Round((price * margin / 100) * items);
                var country = DataGenerator.GetItem(countries);
                var city = DataGenerator.GetCity(country);

                sales.Add(new SaleInfo
                {
                    ID = DataGenerator.Pad(1001 + i, 4),
                    BundlePrice = price,
                    ProductPrice = price,
                    Margin = margin,
                    OrderDate = DataGenerator.GetDate(),
                    OrderItems = items,
                    OrderValue = value,
                    ProductName = DataGenerator.GetItem(names),
                    Profit = profit,
                    City = city,
                    Country = country,
                    CountryFlag = DataGenerator.GetCountryFlag(country),
                    Status = DataGenerator.GetItem(status)
                });
            }
            return sales;
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        @if (Data != null)
        {
            <IgbDataGridToolbar ToolbarTitle="Global Sales" ColumnChooser="true" TargetGrid="@DataGridRef"/>

            <IgbDataGrid Height="100%" Width="100%" @ref="DataGridRef"
                      DefaultColumnMinWidth="120"
                      DataSource="Data"
                      AutoGenerateColumns="false"
                      IsColumnOptionsEnabled="true">
                <IgbTextColumn Field="ID" HeaderText="ID" IsHidden="true" Width="90" HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
                <IgbTextColumn Field="ProductName" HeaderText="Product" IsHidden="true" Width="@("*>120")" />
                <IgbImageColumn IsEditable="false" Field="CountryFlag" HeaderText="Country" Width="@("*>120")" PaddingTop="5" PaddingBottom="5" ContentOpacity="1" HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
                <IgbNumericColumn Field="ProductPrice" HeaderText="Price" IsHidden="true" Width="@("*>110")" PositivePrefix="$" ShowGroupingSeparator="true" MinFractionDigits="2" />
                <IgbNumericColumn Field="OrderItems" HeaderText="Orders" Width="@("*>110")" />
                <IgbNumericColumn Field="OrderValue" HeaderText="Order Value" Width="@("*>150")" PositivePrefix="$" ShowGroupingSeparator="true" />
                <IgbDateTimeColumn Field="OrderDate" HeaderText="Order Date" Width="@("*>150")" HorizontalAlignment="@CellContentHorizontalAlignment.Right" DateTimeFormat="@DateTimeFormats.DateShort" />
                <IgbNumericColumn Field="Margin" HeaderText="Margin" Width="@("*>120")" PositiveSuffix="%" HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
                <IgbNumericColumn Field="Profit" HeaderText="Profit" Width="@("*>120")" PositivePrefix="$" ShowGroupingSeparator="true" />
                <IgbTextColumn Field="Status" HeaderText="Status" Width="@("*>110")" HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
            </IgbDataGrid>
        }
    </div>
</div>

@code {

    private IgbDataGrid _grid;
    public IgbDataGrid DataGridRef
    {
        get
        {
            return _grid;
        }
        set
        {
            _grid = value;
            StateHasChanged();
        }
    }

    private List<SaleInfo> Data;

    protected override void OnInitialized()
    {

        Data = SalesDataService.Create(100);
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Toolbar's Column Chooser UI

Se puede acceder a la interfaz de usuario del Selector de columnas desde el componente IgbDataGridToolbar separado de la cuadrícula. Para ello todo lo que tenemos que hacer es establecer la propiedad ColumnChooser de la barra de herramientas en verdadero. La barra de herramientas mostrará un IgbButton y, al hacer clic en él, se mostrará la interfaz de usuario del selector de columnas. Este botón también muestra el total de columnas ocultas. Si no se crea la barra de herramientas, habilitar la propiedad IgbColumnChooser no tendrá ningún efecto y ocultará el botón.

​IgbDataGridToolbar proporciona propiedades adicionales, como agregar un título a la barra de herramientas mediante la propiedad ToolbarTitle, colocar texto en IgbButton configurando la propiedad ColumnChooserText y agregar un encabezado de título a la interfaz de usuario del selector de columnas configurando ColumnChooserTitle.

El Selector de columnas se puede configurar con animaciones configurando las propiedades ColumnHidingAnimationMode y ColumnShowingAnimationMode de la cuadrícula.

Code Snippet

A continuación se muestra cómo implementar la interfaz de usuario de la barra de herramientas del selector de columnas para la cuadrícula de datos Blazor:

<IgbDataGridToolbar ToolbarTitle="Grid Title"
    ColumnChooser="true"
    ColumnChooserText="Columns"
    ColumnChooserTitle="Column Chooser"
    TargetGrid="DataGridRef" />
<IgbDataGrid Height="100%" Width="100%"
    @ref="DataGridRef"
    DefaultColumnMinWidth="120"
    DataSource="@DataSource"
    ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToLeft">
</IgbDataGrid>

@code {
    private DataGrid grid;
    public DataGrid DataGridRef
    {
        get
        {
            return grid;
        }
        set
        {
            grid = value;
            StateHasChanged();
        }
    }
}
razor

Simple Column Chooser

Digamos que queremos mostrar manualmente la interfaz de usuario IgbColumnChooser sin la barra de herramientas y colocarla en cualquier lugar que queramos en nuestra página. Esto se puede hacer fácilmente simplemente creando una instancia del componente en nuestro marcado.

Demo

EXAMPLE

MODULES

DATA GENERATOR

DATA SOURCE

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbDataGridModule),
                typeof(IgbColumnChooserModule),
                typeof(IgbGridColumnOptionsModule)
);
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;
using System.Linq;

namespace Infragistics.Samples
{
    public static class DataGenerator
    {
        readonly static string[] websites = { ".com", ".gov", ".edu", ".org" };
        readonly static string[] emails = { "gmail.com", "yahoo.com", "twitter.com" };
        readonly static string[] genders = { "male", "female" };
        readonly static string[] maleNames = { "Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce" };
        readonly static string[] femaleNames = { "Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally" };
        readonly static string[] lastNames = { "Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla" };
        readonly static string[] countries = { "USA", "UK", "France", "Canada", "Poland" };
        readonly static string[] citiesUS = { "New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas" };
        readonly static string[] citiesUK = { "London", "Liverpool", "Manchester" };
        readonly static string[] citiesFR = { "Paris", "Marseille", "Lyon" };
        readonly static string[] citiesCA = { "Toronto", "Vancouver", "Montreal" };
        readonly static string[] citiesPL = { "Krakow", "Warsaw", "Wroclaw", "Gdansk" };
        readonly static string[] citiesJP = { "Tokyo", "Osaka", "Kyoto", "Yokohama" };
        readonly static string[] citiesGR = { "Berlin", "Bonn", "Cologne", "Munich", "Hamburg" };
        readonly static string[] roadSuffixes = { "Road", "Street", "Way" };
        readonly static string[] roadNames = { "Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill" };

        public static Random Rand = new Random();

        public static string GetWebsite()
        {
            return GetItem(websites);
        }

        public static string GetEmail()
        {
            return GetItem(emails);
        }

        public static double GetNumber(double min, double max)
        {
            return Math.Round(min + (Rand.NextDouble() * (max - min)));
        }

        public static int GetInteger(double min, double max)
        {
            return (int)GetNumber(min, max);
        }

        public static string GetPhone()
        {
            var phoneCode = GetNumber(100, 900);
            var phoneNum1 = GetNumber(100, 900);
            var phoneNum2 = GetNumber(1000, 9000);
            var phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
            return phone;
        }

        public static string GetGender()
        {
            return GetItem(genders);
        }

        public static string GetNameFirst(string gender)
        {
            if (gender == "male")
                return GetItem(maleNames);
            else
                return GetItem(femaleNames);
        }

        public static string GetNameLast()
        {
            return GetItem(lastNames);
        }

        public static string GetItem(string[] array)
        {
            var index = (int)Math.Round(GetNumber(0, array.Length - 1));
            return array[index];
        }

        public static string GetCountry()
        {
            return GetItem(countries);
        }

        public static string GetCity(string country)
        {
            if (country == "Canada")
            {
                return GetItem(citiesCA);
            }
            else if (country == "France")
            {
                return GetItem(citiesFR);
            }
            else if (country == "Poland")
            {
                return GetItem(citiesPL);
            }
            else if (country == "USA")
            {
                return GetItem(citiesUS);
            }
            else if (country == "Japan")
            {
                return GetItem(citiesJP);
            }
            else if (country == "Germany")
            {
                return GetItem(citiesGR);
            }
            else
            { // if (country === "United Kingdom") {
                return GetItem(citiesUK);
            }
        }

        public static string GetStreet()
        {
            var num = Math.Round(GetNumber(100, 300)).ToString();
            var road = GetItem(roadNames);
            var suffix = GetItem(roadSuffixes);
            return num + " " + road + " " + suffix;
        }

        public static DateTime GetBirthday()
        {
            var year = DateTime.Now.Year - GetInteger(30, 50);
            var month = GetNumber(10, 12);
            var day = GetNumber(20, 27);
            return new DateTime(year, (int)month, (int)day);
        }

        public static DateTime GetDate()
        {
            var year = DateTime.Now.Year;
            var month = GetNumber(10, 12);
            var day = GetNumber(20, 27);
            return new DateTime(year, (int)month, (int)day);
        }

        public static string Pad(int num, int size)
        {
            var s = num + "";
            while (s.Length < size)
            {
                s = "0" + s;
            }
            return s;
        }

        public static string GetPhotoMale(int id)
        {
            return "https://static.infragistics.com/xplatform/images/people/GUY" + Pad(id, 2) + ".png";
        }

        public static string GetPhotoFemale(int id)
        {
            return "https://static.infragistics.com/xplatform/images/people/GIRL" + Pad(id, 2) + ".png";
        }

        private static int maleCount = 0;
        private static int femaleCount = 0;
        public static string GetPhoto(string gender)
        {
            if (gender == "male")
            {
                maleCount++;
                if (maleCount > 24) maleCount = 1;
                return GetPhotoMale(maleCount);
            }
            else
            {
                femaleCount++;
                if (femaleCount > 24) femaleCount = 1;
                return GetPhotoFemale(femaleCount);
            }
        }

        public static string GetGenderPhoto(string gender)
        {
            return "https://static.infragistics.com/xplatform/images/genders/" + gender + ".png";
        }

        public static string GetCountryFlag(string country)
        {
            return "https://static.infragistics.com/xplatform/images/flags/" + country + ".png";
        }

        public static string GetIncomeRange(double salary)
        {
            if (salary < 50000)
            {
                return "Low";
            }
            else if (salary < 100000)
            {
                return "Average";
            }
            else
            {
                return "High";
            }
        }

    }

}csコピー

using System;
using System.Collections.Generic;

namespace Infragistics.Samples
{
    public class SaleInfo
    {
        public DateTime OrderDate { get; set; }
        public string ID { get; set; }
        public string ProductName { get; set; }
        public double ProductPrice { get; set; }
        public double BundlePrice { get; set; }
        public double Margin { get; set; }
        public double OrderItems { get; set; }
        public double OrderValue { get; set; }
        public double Profit { get; set; }
        public string Country { get; set; }
        public string CountryFlag { get; set; }
        public string City { get; set; }
        public string Status { get; set; }
    }

    public class SalesDataService
    {
        public static List<SaleInfo> Create(int? count)
        {
            if (count == null) count = 100;

            string[] names = {
                "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",
                "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD",
                "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" };
            string[] countries = { "USA", "UK", "France", "Canada", "Poland", "Japan", "Germany" };
            string[] status = { "Packing", "Shipped", "Delivered" };

            var sales = new List<SaleInfo>();
            for (var i = 0; i < count; i++)
            {
                var price = DataGenerator.GetNumber(100, 900);
                var items = DataGenerator.GetNumber(10, 80);
                var value = price * items;
                var margin = DataGenerator.GetNumber(3, 10);
                var profit = Math.Round((price * margin / 100) * items);
                var country = DataGenerator.GetItem(countries);
                var city = DataGenerator.GetCity(country);

                sales.Add(new SaleInfo
                {
                    ID = DataGenerator.Pad(1001 + i, 4),
                    BundlePrice = price,
                    ProductPrice = price,
                    Margin = margin,
                    OrderDate = DataGenerator.GetDate(),
                    OrderItems = items,
                    OrderValue = value,
                    ProductName = DataGenerator.GetItem(names),
                    Profit = profit,
                    City = city,
                    Country = country,
                    CountryFlag = DataGenerator.GetCountryFlag(country),
                    Status = DataGenerator.GetItem(status)
                });
            }
            return sales;
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container horizontal">
    <div class="container vertical" style="width: auto; margin-left: 0.5rem; margin-top: 2px; margin-right: 0.5rem; margin-bottom: 0.25rem; padding: 0.5rem; background: rgb(248, 248, 248); border-radius: 10px; box-shadow: 1px 1px 2px 2px rgb(50 50 50 / 25%);">
        <IgbColumnChooser Height="100%" Width="100%" Title="Column Chooser" TargetGrid="@DataGridRef" />
    </div>

    <div class="container vertical">
        @if (Data != null)
        {
            <IgbDataGrid Height="100%" Width="100%" @ref="DataGridRef"
                      DefaultColumnMinWidth="120"
                      DataSource="Data"
                      AutoGenerateColumns="false"
                      IsColumnOptionsEnabled="true">
                <IgbTextColumn Field="ID" HeaderText="ID" IsHidden="true" Width="90" HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
                <IgbTextColumn Field="ProductName" HeaderText="Product" IsHidden="true" Width="@("*>120")" />
                <IgbImageColumn IsEditable="false" Field="CountryFlag" HeaderText="Country" Width="@("*>120")" PaddingTop="5" PaddingBottom="5" ContentOpacity="1" HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
                <IgbNumericColumn Field="ProductPrice" HeaderText="Price" IsHidden="true" Width="@("*>110")" PositivePrefix="$" ShowGroupingSeparator="true" MinFractionDigits="2" />
                <IgbNumericColumn Field="OrderItems" HeaderText="Orders" Width="@("*>110")" />
                <IgbNumericColumn Field="OrderValue" HeaderText="Order Value" Width="@("*>150")" PositivePrefix="$" ShowGroupingSeparator="true" />
                <IgbDateTimeColumn Field="OrderDate" HeaderText="Order Date" Width="@("*>150")" HorizontalAlignment="@CellContentHorizontalAlignment.Right" DateTimeFormat="@DateTimeFormats.DateShort" />
                <IgbNumericColumn Field="Margin" HeaderText="Margin" Width="@("*>120")" PositiveSuffix="%" HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
                <IgbNumericColumn Field="Profit" HeaderText="Profit" Width="@("*>120")" PositivePrefix="$" ShowGroupingSeparator="true" />
                <IgbTextColumn Field="Status" HeaderText="Status" Width="@("*>110")" HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
            </IgbDataGrid>
        }
    </div>
</div>

@code {

    private IgbDataGrid _grid;
    public IgbDataGrid DataGridRef
    {
        get
        {
            return _grid;
        }
        set
        {
            _grid = value;
            StateHasChanged();
        }
    }

    private List<SaleInfo> Data;

    protected override void OnInitialized()
    {

        Data = SalesDataService.Create(100);
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Code Snippet

A continuación se muestra cómo implementar la interfaz de usuario del selector de columnas para Data Grid:

<IgbColumnChooser Height="100%" Width="200px"
    Title="Column Chooser"
    TargetGrid="DataGridRef" />
<IgbDataGrid Height="100%" Width="100%"
    @ref="DataGridRef"
    DataSource="DataSource"
    ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToLeft" />

@code {
    private IgbDataGrid grid;
    public IgbDataGrid DataGridRef
    {
        get
        {
            return grid;
        }
        set
        {
            grid = value;
            StateHasChanged();
        }
    }
}
razor

API References

• IgbButton
• ColumnChooserText
• ColumnChooserTitle
• IgbColumnChooser
• ColumnHidingAnimationMode
• ColumnShowingAnimationMode
• IgbDataGridToolbar