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 열 옵션 개요
Ignite UI for Blazor 각 열 머리글에 노출된 UI에서 직접 열을 그룹화, 숨기기, 정렬, 이동, 고정, 필터링, 정렬하는 기능을 지원합니다.
열 옵션 UI를 활성화하려면 그리드의 IsColumnOptionsEnabled 속성을 true로 설정하면 됩니다.
Blazor Grid Column Options Example
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(IgbGridColumnOptionsModule)
);
await builder.Build().RunAsync();
}
}
}csusing 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";
}
}
}
}csusing 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)
{
<div style="overflow: hidden">
<IgbDataGrid Height="100%" Width="100%"
DefaultColumnMinWidth="120"
DataSource="Data"
AutoGenerateColumns="false"
IsColumnOptionsEnabled="true">
<IgbTextColumn Field="ID" HeaderText="ID" Width="90" HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
<IgbTextColumn Field="ProductName" HeaderText="Product" 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" 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>
</div>
@code {
private List<SaleInfo> Data;
protected override void OnInitialized()
{
this.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.
Column Options Configurations
열의 IsFilteringEnabled 속성을 설정하여 열별로 필터링을 전환할 수 있습니다. true 또는 false를 설정하면 열의 옵션 UI에 필터링 섹션이 표시되거나 숨겨집니다.
HeaderClickAction 속성을 적용하면 전체 그리드에 대해 정렬을 전환할 수 있습니다. 예를 들어 이를 None으로 설정하면 그리드에서 정렬이 완전히 제거되고 각 열의 옵션 UI에 반영됩니다. 예를 들어 SortByOneColumnOnly 설정하면 한 번에 하나의 열만 계속 정렬할 수 있습니다.
Code Snippet
다음 코드는 표와 열을 조정하여 열 옵션 UI 조정 필터링 및 정렬을 프로그래밍 방식으로 활성화하는 방법을 보여줍니다.
<IgbDataGrid Height="100%" Width="100%"
DataSource="DataSource"
HeaderClickAction="HeaderClickAction.SortByOneColumnOnly"
IsColumnOptionsEnabled="true">
<IgbTextColumn Field="ID" IsFilteringEnabled="false" />
</IgbDataGrid>
razorAPI References
HeaderClickActionIsColumnOptionsEnabledIsFilteringEnabledSortByOneColumnOnly