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

Ignite UI for Blazor는 IgbDataGridToolbar 구성 요소를 통해 UI에서 열을 표시하거나 숨기는 기능을 지원하거나 페이지의 아무 곳에나 배치할 수 있는 유연성을 제공하는 ColumnChooser 구성 요소를 지원합니다. 열의 IsHidden 속성을 사용하여 수동 열 생성을 위해 단일 열을 프로그래밍 방식으로 빠르게 숨기거나 표시할 수도 있으며 IsHidden 값은 ColumnChooser 구성 요소에 반영됩니다. 각 접근 방식은 열의 표시 상태를 변경하는 데 상호 교환하여 사용할 수 있습니다.

すぐに使用できる機能のフルセット は、ページング、ソート、フィルタリング、編集、グループ化から行と列の仮想化まで、あらゆる機能をカバーします。.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

열 선택기 UI는 그리드와 별도로 IgbDataGridToolbar 구성 요소 내에서 액세스할 수 있습니다. 이를 위해 우리가 해야 할 일은 도구 모음의 ColumnChooser 속성을 true로 설정하는 것뿐입니다. 그러면 도구 모음에 IgbButton 표시되고, 클릭하면 열 선택기 UI가 표시됩니다. 이 버튼은 숨겨진 열의 합계도 표시합니다. 도구 모음이 생성되지 않은 경우 IgbColumnChooser 속성을 활성화해도 효과가 없으며 버튼이 숨겨집니다.

그만큼 IgbDataGridToolbar 도구 모음에 제목을 추가하는 등의 추가 속성을 제공합니다. ToolbarTitle 속성, 텍스트 배치 IgbButton 설정하여 ColumnChooserText 속성을 설정하고 열 선택기 UI에 제목 헤더를 추가합니다. ColumnChooserTitle.

열 선택기는 그리드의 ColumnHidingAnimationMode 및 ColumnShowingAnimationMode 속성을 설정하여 애니메이션으로 구성할 수 있습니다.

Code Snippet

다음은 Blazor Data Grid에 대한 열 선택 도구 모음 UI를 구현하는 방법을 보여줍니다.

<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

도구 모음 없이 IgbColumnChooser UI를 수동으로 표시하고 이를 페이지의 원하는 위치에 배치한다고 가정해 보겠습니다. 이는 마크업에서 구성 요소의 인스턴스를 생성하기만 하면 쉽게 수행할 수 있습니다.

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

다음은 데이터 그리드에 대한 열 선택기 UI를 구현하는 방법을 보여줍니다.

<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