Blazor 그리드 열 크기 조정 개요

Blazor Grid의 Ignite UI for Blazor 열 크기 조정 기능을 사용하면 사용자가 IgbGrid의 열 너비를 쉽게 조정할 수 있습니다. 기본적으로 드래그 크기 조정 작업이 적용되는 동안 임시 크기 조정 표시기가 표시됩니다. 사용 가능한 크기 조정 옵션은 여러 가지가 있습니다. 픽셀/백분율로 열 크기 조정, 열 크기 조정 제한, 더블 클릭 시 열 크기 자동 조정, 초기화 시 열 크기 자동 조정.

Blazor 그리드 열 크기 조정 예제

EXAMPLE

MODULES

DATA

RAZOR

JS

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(IgbGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;
public class CustomersDataItem
{
    public string ID { get; set; }
    public string Company { get; set; }
    public string ContactName { get; set; }
    public string ContactTitle { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Region { get; set; }
    public double PostalCode { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string Fax { get; set; }
}

public class CustomersData
    : List<CustomersDataItem>
{
    public CustomersData()
    {
        this.Add(new CustomersDataItem() { ID = @"ALFKI", Company = @"Alfreds Futterkiste", ContactName = @"Maria Anders", ContactTitle = @"Sales Representative", Address = @"Obere Str. 57", City = @"Berlin", Region = @"East", PostalCode = 12209, Country = @"Germany", Phone = @"030-0074321", Fax = @"030-0076545" });
        this.Add(new CustomersDataItem() { ID = @"ANATR", Company = @"Ana Trujillo Emparedados y helados", ContactName = @"Ana Trujillo", ContactTitle = @"Owner", Address = @"Avda. de la Constitución 2222", City = @"México D.F.", Region = @"South", PostalCode = 5021, Country = @"Mexico", Phone = @"(5) 555-4729", Fax = @"(5) 555-3745" });
        this.Add(new CustomersDataItem() { ID = @"ANTON", Company = @"Antonio Moreno Taquería", ContactName = @"Antonio Moreno", ContactTitle = @"Owner", Address = @"Mataderos 2312", City = @"México D.F.", Region = @"South", PostalCode = 5023, Country = @"Mexico", Phone = @"(5) 555-3932", Fax = @"(5) 555-3745" });
        this.Add(new CustomersDataItem() { ID = @"AROUT", Company = @"Around the Horn", ContactName = @"Thomas Hardy", ContactTitle = @"Sales Representative", Address = @"120 Hanover Sq.", City = @"London", Region = @"East", PostalCode = 22000, Country = @"UK", Phone = @"(171) 555-7788", Fax = @"(171) 555-6750" });
        this.Add(new CustomersDataItem() { ID = @"BERGS", Company = @"Berglunds snabbköp", ContactName = @"Christina Berglund", ContactTitle = @"Order Administrator", Address = @"Berguvsvägen 8", City = @"Luleå", Region = @"South", PostalCode = 17000, Country = @"Sweden", Phone = @"0921-12 34 65", Fax = @"0921-12 34 67" });
        this.Add(new CustomersDataItem() { ID = @"BLAUS", Company = @"Blauer See Delikatessen", ContactName = @"Hanna Moos", ContactTitle = @"Sales Representative", Address = @"Forsterstr. 57", City = @"Mannheim", Region = @"East", PostalCode = 68306, Country = @"Germany", Phone = @"0621-08460", Fax = @"0621-08924" });
        this.Add(new CustomersDataItem() { ID = @"BLONP", Company = @"Blondesddsl père et fils", ContactName = @"Frédérique Citeaux", ContactTitle = @"Marketing Manager", Address = @"24, place Kléber", City = @"Strasbourg", Region = @"East", PostalCode = 67000, Country = @"France", Phone = @"88.60.15.31", Fax = @"88.60.15.32" });
        this.Add(new CustomersDataItem() { ID = @"BOLID", Company = @"Bólido Comidas preparadas", ContactName = @"Martín Sommer", ContactTitle = @"Owner", Address = @"C/ Araquil, 67", City = @"Madrid", Region = @"East", PostalCode = 28023, Country = @"Spain", Phone = @"(91) 555 22 82", Fax = @"(91) 555 91 99" });
        this.Add(new CustomersDataItem() { ID = @"BONAP", Company = @"Bon app'", ContactName = @"Laurence Lebihan", ContactTitle = @"Owner", Address = @"12, rue des Bouchers", City = @"Marseille", Region = @"West", PostalCode = 13008, Country = @"France", Phone = @"91.24.45.40", Fax = @"91.24.45.41" });
        this.Add(new CustomersDataItem() { ID = @"BOTTM", Company = @"Bottom-Dollar Markets", ContactName = @"Elizabeth Lincoln", ContactTitle = @"Accounting Manager", Address = @"23 Tsawassen Blvd.", City = @"Tsawassen", Region = @"BC", PostalCode = 28000, Country = @"Canada", Phone = @"(604) 555-4729", Fax = @"(604) 555-3745" });
        this.Add(new CustomersDataItem() { ID = @"BSBEV", Company = @"B's Beverages", ContactName = @"Victoria Ashworth", ContactTitle = @"Sales Representative", Address = @"Fauntleroy Circus", City = @"London", Region = @"South", PostalCode = 10000, Country = @"UK", Phone = @"(171) 555-1212", Fax = @"(5) 555-3745" });
        this.Add(new CustomersDataItem() { ID = @"CACTU", Company = @"Cactus Comidas para llevar", ContactName = @"Patricio Simpson", ContactTitle = @"Sales Agent", Address = @"Cerrito 333", City = @"Buenos Aires", Region = @"East", PostalCode = 1010, Country = @"Argentina", Phone = @"(1) 135-5555", Fax = @"(1) 135-4892" });
        this.Add(new CustomersDataItem() { ID = @"CENTC", Company = @"Centro comercial Moctezuma", ContactName = @"Francisco Chang", ContactTitle = @"Marketing Manager", Address = @"Sierras de Granada 9993", City = @"México D.F.", Region = @"South", PostalCode = 5022, Country = @"Mexico", Phone = @"(5) 555-3392", Fax = @"(5) 555-7293" });
        this.Add(new CustomersDataItem() { ID = @"CHOPS", Company = @"Chop-suey Chinese", ContactName = @"Yang Wang", ContactTitle = @"Owner", Address = @"Hauptstr. 29", City = @"Bern", Region = @"East", PostalCode = 3012, Country = @"Switzerland", Phone = @"0452-076545", Fax = @"(5) 555-3745" });
        this.Add(new CustomersDataItem() { ID = @"COMMI", Company = @"Comércio Mineiro", ContactName = @"Pedro Afonso", ContactTitle = @"Sales Associate", Address = @"Av. dos Lusíadas, 23", City = @"Sao Paulo", Region = @"SP", PostalCode = 34000, Country = @"Brazil", Phone = @"(11) 555-7647", Fax = @"(5) 555-3745" });
        this.Add(new CustomersDataItem() { ID = @"CONSH", Company = @"Consolidated Holdings", ContactName = @"Elizabeth Brown", ContactTitle = @"Sales Representative", Address = @"Berkeley Gardens 12 Brewery", City = @"London", Region = @"South", PostalCode = 27000, Country = @"UK", Phone = @"(171) 555-2282", Fax = @"(171) 555-9199" });
        this.Add(new CustomersDataItem() { ID = @"DRACD", Company = @"Drachenblut Delikatessen", ContactName = @"Sven Ottlieb", ContactTitle = @"Order Administrator", Address = @"Walserweg 21", City = @"Aachen", Region = @"South", PostalCode = 52066, Country = @"Germany", Phone = @"0241-039123", Fax = @"0241-059428" });
        this.Add(new CustomersDataItem() { ID = @"DUMON", Company = @"Du monde entier", ContactName = @"Janine Labrune", ContactTitle = @"Owner", Address = @"67, rue des Cinquante Otages", City = @"Nantes", Region = @"East", PostalCode = 44000, Country = @"France", Phone = @"40.67.88.88", Fax = @"40.67.89.89" });
        this.Add(new CustomersDataItem() { ID = @"EASTC", Company = @"Eastern Connection", ContactName = @"Ann Devon", ContactTitle = @"Sales Agent", Address = @"35 King George", City = @"London", Region = @"East", PostalCode = 41000, Country = @"UK", Phone = @"(171) 555-0297", Fax = @"(171) 555-3373" });
        this.Add(new CustomersDataItem() { ID = @"ERNSH", Company = @"Ernst Handel", ContactName = @"Roland Mendel", ContactTitle = @"Sales Manager", Address = @"Kirchgasse 6", City = @"Graz", Region = @"South", PostalCode = 8010, Country = @"Austria", Phone = @"7675-3425", Fax = @"7675-3426" });
        this.Add(new CustomersDataItem() { ID = @"FAMIA", Company = @"Familia Arquibaldo", ContactName = @"Aria Cruz", ContactTitle = @"Marketing Assistant", Address = @"Rua Orós, 92", City = @"Sao Paulo", Region = @"SP", PostalCode = 27000, Country = @"Brazil", Phone = @"(11) 555-9857", Fax = @"(5) 555-3745" });
        this.Add(new CustomersDataItem() { ID = @"FISSA", Company = @"FISSA Fabrica Inter. Salchichas S.A.", ContactName = @"Diego Roel", ContactTitle = @"Accounting Manager", Address = @"C/ Moralzarzal, 86", City = @"Madrid", Region = @"East", PostalCode = 28034, Country = @"Spain", Phone = @"(91) 555 94 44", Fax = @"(91) 555 55 93" });
        this.Add(new CustomersDataItem() { ID = @"FOLIG", Company = @"Folies gourmandes", ContactName = @"Martine Rancé", ContactTitle = @"Assistant Sales Agent", Address = @"184, chaussée de Tournai", City = @"Lille", Region = @"South", PostalCode = 59000, Country = @"France", Phone = @"20.16.10.16", Fax = @"20.16.10.17" });
        this.Add(new CustomersDataItem() { ID = @"FOLKO", Company = @"Folk och fä HB", ContactName = @"Maria Larsson", ContactTitle = @"Owner", Address = @"Åkergatan 24", City = @"Bräcke", Region = @"East", PostalCode = 36000, Country = @"Sweden", Phone = @"0695-34 67 21", Fax = @"0695 33-4455" });
        this.Add(new CustomersDataItem() { ID = @"FRANK", Company = @"Frankenversand", ContactName = @"Peter Franken", ContactTitle = @"Marketing Manager", Address = @"Berliner Platz 43", City = @"München", Region = @"East", PostalCode = 80805, Country = @"Germany", Phone = @"089-0877310", Fax = @"089-0877451" });
        this.Add(new CustomersDataItem() { ID = @"FRANR", Company = @"France restauration", ContactName = @"Carine Schmitt", ContactTitle = @"Marketing Manager", Address = @"54, rue Royale", City = @"Nantes", Region = @"South", PostalCode = 44000, Country = @"France", Phone = @"40.32.21.21", Fax = @"40.32.21.20" });
        this.Add(new CustomersDataItem() { ID = @"FRANS", Company = @"Franchi S.p.A.", ContactName = @"Paolo Accorti", ContactTitle = @"Sales Representative", Address = @"Via Monte Bianco 34", City = @"Torino", Region = @"East", PostalCode = 10100, Country = @"Italy", Phone = @"011-4988260", Fax = @"011-4988261" });
    }
}csコピー

@using IgniteUI.Blazor.Controls

@inject IJSRuntime JS

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbGrid
        AutoGenerate="false"
        Data="CustomersData"
        Id="grid"
        Name="grid"
        @ref="grid"
        ColumnResizedScript="WebGridColumnResized">
            <IgbColumn
            Field="ID"
            Header="ID">
            </IgbColumn>

            <IgbColumn
            Field="Company"
            Header="Company"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="ContactName"
            Header="Name"
            MinWidth="60px"
            MaxWidth="230px"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="ContactTitle"
            Header="Title"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Address"
            Header="Address"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="City"
            Header="City">
            </IgbColumn>

            <IgbColumn
            Field="Region"
            Header="Region"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="PostalCode"
            Header="Postal Code"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Country"
            Header="Country"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Phone"
            Header="Phone"
            Resizable="true">
            </IgbColumn>

        </IgbGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var grid = this.grid;

    }

    private IgbGrid grid;

    private CustomersData _customersData = null;
    public CustomersData CustomersData
    {
        get
        {
            if (_customersData == null)
            {
                _customersData = new CustomersData();
            }
            return _customersData;
        }
    }

}razorコピー

igRegisterScript("WebGridColumnResized", (event) => {
    console.log("TODO WebGridColumnResized");
}, false);

jsコピー

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

열 크기 조정은 열 수준별로 활성화됩니다. 즉, IgbGrid 에는 크기 조정 가능한 열과 크기 조정 불가능한 열이 혼합되어 있을 수 있습니다. 이는 IgbColumn의 Resizable 입력을 통해 수행됩니다.

<IgbColumn Field="ID" Resizable=true Width="100px"></IgbColumn>
razor

다음을 구독할 수 있습니다. ColumnResized의 이벤트 IgbGrid 열 크기가 조정될 때 일부 사용자 정의 논리를 구현합니다. 이전 및 새 열 너비뿐만 아니라 IgbColumn 개체는 이벤트 인수를 통해 노출됩니다.

<IgbGrid Data=data AutoGenerate=false ColumnResized="onResize">
    <IgbColumn Field="ID" Resizable=true Width="100px"></IgbColumn>
    <IgbColumn Field="CompanyName" Resizable=true Width="100px"></IgbColumn>
</IgbGrid>

@code {
    private void onResize(IgbColumnResizeEventArgs args)
    {
        IgbColumnType col = args.Detail.Column;
        string pWidth = args.Detail.PrevWidth;
        string nWidth = args.Detail.NewWidth;
    }
}
razor

픽셀/백분율 단위로 열 크기 조정

사용자 시나리오에 따라 열 너비는 픽셀, 백분율 또는 두 가지의 혼합으로 정의될 수 있습니다. 이러한 모든 시나리오는 열 크기 조정 기능으로 지원됩니다. 기본적으로 열에 너비가 설정되지 않은 경우 너비가 픽셀 단위로 설정된 사용 가능한 공간에 맞춰집니다.

이는 다음 구성이 가능함을 의미합니다.

<IgbGrid Data=data AutoGenerate=false ColumnResized="onResize">
    <IgbColumn Field="ID" Resizable=true Width="10%"></IgbColumn>
    <IgbColumn Field="CompanyName" Resizable=true Width="100px"></IgbColumn>
    <IgbColumn Field="ContactTitle" Resizable=true></IgbColumn>
</IgbGrid>
razor

픽셀 및 백분율로 설정된 열에 대해 크기 조정이 작동하는 방식에는 약간의 차이가 있습니다.

픽셀

너비(픽셀)로 열 크기를 조정하는 작업은 열 크기에서 마우스 이동의 수평 크기를 직접 더하거나 빼는 방식으로 수행됩니다.

백분율

너비(%)로 열 크기를 조정할 때 마우스 이동의 수평 크기(픽셀)는 대략 그리드 너비에 대한 백분율 크기로 변환됩니다. 열은 계속 반응하며 향후 그리드 크기 조정은 여전히 열에 반영됩니다.

열 크기 조정 제한

허용되는 최소 및 최대 열 너비를 구성할 수도 있습니다. 이는 IgbColumn의 MinWidth 및 MaxWidth 입력을 통해 수행됩니다. 이 경우 크기 조정 표시기 끌기 작업은 MinWidth 및 MaxWidth로 정의된 경계 밖에서 열 크기를 조정할 수 없음을 사용자에게 알리기 위해 제한됩니다.

<IgbColumn Field="ContactTitle" Resizable=true Width="100px" MinWidth="60px" MaxWidth="230px"></IgbColumn>
razor

최소 및 최대 열 너비 값 유형(픽셀 또는 백분율)을 혼합하는 것이 허용됩니다. 최소값과 최대값에 대해 설정된 값이 백분율로 설정되면 각 열 크기는 픽셀과 유사한 정확한 크기로 제한됩니다.

이는 다음과 같은 구성이 가능함을 의미합니다.

<IgbColumn Field="ContactTitle" Resizable=true Width="10%" MinWidth="60px" MaxWidth="230px"></IgbColumn>
razor

또는

<IgbColumn Field="ID" Resizable=true Width="100px" MinWidth="5%" MaxWidth="15%"></IgbColumn>
razor

두 번 클릭 시 열 크기 자동 조정

헤더의 오른쪽을 두 번 클릭하면 각 열의 크기가 자동으로 조정될 수 있습니다. 열의 크기는 헤더 자체를 포함하여 현재 표시되는 가장 긴 셀 값으로 조정됩니다. 이 동작은 기본적으로 활성화되어 있으며 추가 구성이 필요하지 않습니다. 그러나 해당 열에 MaxWidth 설정되어 있고 새 너비가 MaxWidth 값을 초과하는 경우 열 크기가 자동으로 조정되지 않습니다. 이 경우 열은 미리 설정된 MaxWidth 값에 따라 크기가 조정됩니다.

또한 IgbColumn에 노출된 Autosize 메서드를 사용하여 열 크기를 동적으로 자동 조정할 수도 있습니다.

@code {
    private IgbGrid gridRef;

    private void AutosizeColumn()
    {
        IgbColumn column = gridRef.Columns.Where((col) => { return col.Field == "ID"; }).FirstOrDefault();
        column.Autosize(false);
    }
}
razor

초기화 시 열 자동 크기 조정

​Width 'auto'로 설정하여 초기화 시 각 열의 크기가 자동으로 조정되도록 설정할 수 있습니다.

<IgbColumn Width="auto"></IgbColumn>
razor

열이 뷰에서 처음 초기화되면 너비가 표시되는 가장 긴 셀이나 머리글의 크기로 확인됩니다. 표시되는 행 외부에 있는 셀은 포함되지 않습니다.

이 접근 방식은 초기화 후 자동 크기 조정보다 성능이 더 최적화되어 있으며 특히 많은 수의 열 크기를 자동 조정해야 하는 경우에 권장됩니다.

EXAMPLE

MODULES

DATA

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(IgbGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;
public class CustomersDataItem
{
    public string ID { get; set; }
    public string Company { get; set; }
    public string ContactName { get; set; }
    public string ContactTitle { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Region { get; set; }
    public double PostalCode { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string Fax { get; set; }
}

public class CustomersData
    : List<CustomersDataItem>
{
    public CustomersData()
    {
        this.Add(new CustomersDataItem() { ID = @"ALFKI", Company = @"Alfreds Futterkiste", ContactName = @"Maria Anders", ContactTitle = @"Sales Representative", Address = @"Obere Str. 57", City = @"Berlin", Region = @"East", PostalCode = 12209, Country = @"Germany", Phone = @"030-0074321", Fax = @"030-0076545" });
        this.Add(new CustomersDataItem() { ID = @"ANATR", Company = @"Ana Trujillo Emparedados y helados", ContactName = @"Ana Trujillo", ContactTitle = @"Owner", Address = @"Avda. de la Constitución 2222", City = @"México D.F.", Region = @"South", PostalCode = 5021, Country = @"Mexico", Phone = @"(5) 555-4729", Fax = @"(5) 555-3745" });
        this.Add(new CustomersDataItem() { ID = @"ANTON", Company = @"Antonio Moreno Taquería", ContactName = @"Antonio Moreno", ContactTitle = @"Owner", Address = @"Mataderos 2312", City = @"México D.F.", Region = @"South", PostalCode = 5023, Country = @"Mexico", Phone = @"(5) 555-3932", Fax = @"(5) 555-3745" });
        this.Add(new CustomersDataItem() { ID = @"AROUT", Company = @"Around the Horn", ContactName = @"Thomas Hardy", ContactTitle = @"Sales Representative", Address = @"120 Hanover Sq.", City = @"London", Region = @"East", PostalCode = 22000, Country = @"UK", Phone = @"(171) 555-7788", Fax = @"(171) 555-6750" });
        this.Add(new CustomersDataItem() { ID = @"BERGS", Company = @"Berglunds snabbköp", ContactName = @"Christina Berglund", ContactTitle = @"Order Administrator", Address = @"Berguvsvägen 8", City = @"Luleå", Region = @"South", PostalCode = 17000, Country = @"Sweden", Phone = @"0921-12 34 65", Fax = @"0921-12 34 67" });
        this.Add(new CustomersDataItem() { ID = @"BLAUS", Company = @"Blauer See Delikatessen", ContactName = @"Hanna Moos", ContactTitle = @"Sales Representative", Address = @"Forsterstr. 57", City = @"Mannheim", Region = @"East", PostalCode = 68306, Country = @"Germany", Phone = @"0621-08460", Fax = @"0621-08924" });
        this.Add(new CustomersDataItem() { ID = @"BLONP", Company = @"Blondesddsl père et fils", ContactName = @"Frédérique Citeaux", ContactTitle = @"Marketing Manager", Address = @"24, place Kléber", City = @"Strasbourg", Region = @"East", PostalCode = 67000, Country = @"France", Phone = @"88.60.15.31", Fax = @"88.60.15.32" });
        this.Add(new CustomersDataItem() { ID = @"BOLID", Company = @"Bólido Comidas preparadas", ContactName = @"Martín Sommer", ContactTitle = @"Owner", Address = @"C/ Araquil, 67", City = @"Madrid", Region = @"East", PostalCode = 28023, Country = @"Spain", Phone = @"(91) 555 22 82", Fax = @"(91) 555 91 99" });
        this.Add(new CustomersDataItem() { ID = @"BONAP", Company = @"Bon app'", ContactName = @"Laurence Lebihan", ContactTitle = @"Owner", Address = @"12, rue des Bouchers", City = @"Marseille", Region = @"West", PostalCode = 13008, Country = @"France", Phone = @"91.24.45.40", Fax = @"91.24.45.41" });
        this.Add(new CustomersDataItem() { ID = @"BOTTM", Company = @"Bottom-Dollar Markets", ContactName = @"Elizabeth Lincoln", ContactTitle = @"Accounting Manager", Address = @"23 Tsawassen Blvd.", City = @"Tsawassen", Region = @"BC", PostalCode = 28000, Country = @"Canada", Phone = @"(604) 555-4729", Fax = @"(604) 555-3745" });
        this.Add(new CustomersDataItem() { ID = @"BSBEV", Company = @"B's Beverages", ContactName = @"Victoria Ashworth", ContactTitle = @"Sales Representative", Address = @"Fauntleroy Circus", City = @"London", Region = @"South", PostalCode = 10000, Country = @"UK", Phone = @"(171) 555-1212", Fax = @"(5) 555-3745" });
        this.Add(new CustomersDataItem() { ID = @"CACTU", Company = @"Cactus Comidas para llevar", ContactName = @"Patricio Simpson", ContactTitle = @"Sales Agent", Address = @"Cerrito 333", City = @"Buenos Aires", Region = @"East", PostalCode = 1010, Country = @"Argentina", Phone = @"(1) 135-5555", Fax = @"(1) 135-4892" });
        this.Add(new CustomersDataItem() { ID = @"CENTC", Company = @"Centro comercial Moctezuma", ContactName = @"Francisco Chang", ContactTitle = @"Marketing Manager", Address = @"Sierras de Granada 9993", City = @"México D.F.", Region = @"South", PostalCode = 5022, Country = @"Mexico", Phone = @"(5) 555-3392", Fax = @"(5) 555-7293" });
        this.Add(new CustomersDataItem() { ID = @"CHOPS", Company = @"Chop-suey Chinese", ContactName = @"Yang Wang", ContactTitle = @"Owner", Address = @"Hauptstr. 29", City = @"Bern", Region = @"East", PostalCode = 3012, Country = @"Switzerland", Phone = @"0452-076545", Fax = @"(5) 555-3745" });
        this.Add(new CustomersDataItem() { ID = @"COMMI", Company = @"Comércio Mineiro", ContactName = @"Pedro Afonso", ContactTitle = @"Sales Associate", Address = @"Av. dos Lusíadas, 23", City = @"Sao Paulo", Region = @"SP", PostalCode = 34000, Country = @"Brazil", Phone = @"(11) 555-7647", Fax = @"(5) 555-3745" });
        this.Add(new CustomersDataItem() { ID = @"CONSH", Company = @"Consolidated Holdings", ContactName = @"Elizabeth Brown", ContactTitle = @"Sales Representative", Address = @"Berkeley Gardens 12 Brewery", City = @"London", Region = @"South", PostalCode = 27000, Country = @"UK", Phone = @"(171) 555-2282", Fax = @"(171) 555-9199" });
        this.Add(new CustomersDataItem() { ID = @"DRACD", Company = @"Drachenblut Delikatessen", ContactName = @"Sven Ottlieb", ContactTitle = @"Order Administrator", Address = @"Walserweg 21", City = @"Aachen", Region = @"South", PostalCode = 52066, Country = @"Germany", Phone = @"0241-039123", Fax = @"0241-059428" });
        this.Add(new CustomersDataItem() { ID = @"DUMON", Company = @"Du monde entier", ContactName = @"Janine Labrune", ContactTitle = @"Owner", Address = @"67, rue des Cinquante Otages", City = @"Nantes", Region = @"East", PostalCode = 44000, Country = @"France", Phone = @"40.67.88.88", Fax = @"40.67.89.89" });
        this.Add(new CustomersDataItem() { ID = @"EASTC", Company = @"Eastern Connection", ContactName = @"Ann Devon", ContactTitle = @"Sales Agent", Address = @"35 King George", City = @"London", Region = @"East", PostalCode = 41000, Country = @"UK", Phone = @"(171) 555-0297", Fax = @"(171) 555-3373" });
        this.Add(new CustomersDataItem() { ID = @"ERNSH", Company = @"Ernst Handel", ContactName = @"Roland Mendel", ContactTitle = @"Sales Manager", Address = @"Kirchgasse 6", City = @"Graz", Region = @"South", PostalCode = 8010, Country = @"Austria", Phone = @"7675-3425", Fax = @"7675-3426" });
        this.Add(new CustomersDataItem() { ID = @"FAMIA", Company = @"Familia Arquibaldo", ContactName = @"Aria Cruz", ContactTitle = @"Marketing Assistant", Address = @"Rua Orós, 92", City = @"Sao Paulo", Region = @"SP", PostalCode = 27000, Country = @"Brazil", Phone = @"(11) 555-9857", Fax = @"(5) 555-3745" });
        this.Add(new CustomersDataItem() { ID = @"FISSA", Company = @"FISSA Fabrica Inter. Salchichas S.A.", ContactName = @"Diego Roel", ContactTitle = @"Accounting Manager", Address = @"C/ Moralzarzal, 86", City = @"Madrid", Region = @"East", PostalCode = 28034, Country = @"Spain", Phone = @"(91) 555 94 44", Fax = @"(91) 555 55 93" });
        this.Add(new CustomersDataItem() { ID = @"FOLIG", Company = @"Folies gourmandes", ContactName = @"Martine Rancé", ContactTitle = @"Assistant Sales Agent", Address = @"184, chaussée de Tournai", City = @"Lille", Region = @"South", PostalCode = 59000, Country = @"France", Phone = @"20.16.10.16", Fax = @"20.16.10.17" });
        this.Add(new CustomersDataItem() { ID = @"FOLKO", Company = @"Folk och fä HB", ContactName = @"Maria Larsson", ContactTitle = @"Owner", Address = @"Åkergatan 24", City = @"Bräcke", Region = @"East", PostalCode = 36000, Country = @"Sweden", Phone = @"0695-34 67 21", Fax = @"0695 33-4455" });
        this.Add(new CustomersDataItem() { ID = @"FRANK", Company = @"Frankenversand", ContactName = @"Peter Franken", ContactTitle = @"Marketing Manager", Address = @"Berliner Platz 43", City = @"München", Region = @"East", PostalCode = 80805, Country = @"Germany", Phone = @"089-0877310", Fax = @"089-0877451" });
        this.Add(new CustomersDataItem() { ID = @"FRANR", Company = @"France restauration", ContactName = @"Carine Schmitt", ContactTitle = @"Marketing Manager", Address = @"54, rue Royale", City = @"Nantes", Region = @"South", PostalCode = 44000, Country = @"France", Phone = @"40.32.21.21", Fax = @"40.32.21.20" });
        this.Add(new CustomersDataItem() { ID = @"FRANS", Company = @"Franchi S.p.A.", ContactName = @"Paolo Accorti", ContactTitle = @"Sales Representative", Address = @"Via Monte Bianco 34", City = @"Torino", Region = @"East", PostalCode = 10100, Country = @"Italy", Phone = @"011-4988260", Fax = @"011-4988261" });
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbGrid
        AutoGenerate="false"
        Data="CustomersData"
        PrimaryKey="ProductID"
        Name="grid"
        @ref="grid">
            <IgbColumn
            Field="ID"
            Width="auto"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Company"
            Header="Company Name"
            Width="auto"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="ContactName"
            Header="Name"
            Width="auto"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="ContactTitle"
            Header="Title"
            Width="auto"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Address"
            Width="auto"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="City"
            Width="auto"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Region"
            Width="auto"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="PostalCode"
            Header="Postal Code"
            Width="auto"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Phone"
            Width="auto"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Fax"
            Width="auto"
            Resizable="true">
            </IgbColumn>

        </IgbGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var grid = this.grid;

    }

    private IgbGrid grid;

    private CustomersData _customersData = null;
    public CustomersData CustomersData
    {
        get
        {
            if (_customersData == null)
            {
                _customersData = new CustomersData();
            }
            return _customersData;
        }
    }

}razorコピー

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

스타일링

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 크기 조정 핸들의 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

<IgbGrid class="grid"></IgbGrid>
razor

그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

.grid {
    --ig-grid-resize-line-color: #f35b04;
}
css

데모

EXAMPLE

API 참조

• IgbColumn
• IgbGrid

추가 리소스

• 가상화 및 성능
• 페이징
• 필터링
• 정렬
• 요약
• 열 이동
• 열 고정
• 선택

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브