Blazor 그리드 셀 선택

Blazor Grid의 Ignite UI for Blazor 풍부한 데이터 선택 기능을 제공하고 IgbGrid 구성 요소에서 강력한 API를 제공합니다. Blazor Grid는 세 가지 선택 모드를 지원합니다.

• 그리드 다중 셀 선택
• 그리드 단일 선택
• 그리드 없음 선택

각 옵션에 대해 자세히 알아보겠습니다.

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

無料で試してみる

Blazor Grid Cell Selection Example

아래 샘플은 IgbGrid의 셀 선택 동작의 세 가지 유형을 보여줍니다. 아래 버튼을 사용하여 사용 가능한 각 선택 모드를 활성화합니다. 스낵바 메시지 상자를 통해 각 버튼 상호작용에 대한 간략한 설명이 제공됩니다.

EXAMPLE

DATA

MODULES

RAZOR

CSS

using System;
using System.Collections.Generic;
public class NwindDataItem
{
    public double ProductID { get; set; }
    public string ProductName { get; set; }
    public double SupplierID { get; set; }
    public double CategoryID { get; set; }
    public string QuantityPerUnit { get; set; }
    public double UnitPrice { get; set; }
    public double UnitsInStock { get; set; }
    public double UnitsOnOrder { get; set; }
    public double ReorderLevel { get; set; }
    public bool Discontinued { get; set; }
    public string OrderDate { get; set; }
    public double Rating { get; set; }
    public List<NwindDataItem_LocationsItem> Locations { get; set; }
}
public class NwindDataItem_LocationsItem
{
    public string Shop { get; set; }
    public string LastInventory { get; set; }
}

public class NwindData
    : List<NwindDataItem>
{
    public NwindData()
    {
        this.Add(new NwindDataItem()
        {
            ProductID = 1,
            ProductName = @"Chai",
            SupplierID = 1,
            CategoryID = 1,
            QuantityPerUnit = @"10 boxes x 20 bags",
            UnitPrice = 18,
            UnitsInStock = 39,
            UnitsOnOrder = 30,
            ReorderLevel = 10,
            Discontinued = false,
            OrderDate = @"2012-02-12",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Fun-Tasty Co.",
                    LastInventory = @"2018-06-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 2,
            ProductName = @"Chang",
            SupplierID = 1,
            CategoryID = 1,
            QuantityPerUnit = @"24 - 12 oz bottles",
            UnitPrice = 19,
            UnitsInStock = 17,
            UnitsOnOrder = 40,
            ReorderLevel = 25,
            Discontinued = true,
            OrderDate = @"2003-03-17",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 3,
            ProductName = @"Aniseed Syrup",
            SupplierID = 1,
            CategoryID = 2,
            QuantityPerUnit = @"12 - 550 ml bottles",
            UnitPrice = 10,
            UnitsInStock = 13,
            UnitsOnOrder = 70,
            ReorderLevel = 25,
            Discontinued = false,
            OrderDate = @"2006-03-17",
            Rating = 3,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Street Market",
                    LastInventory = @"2018-12-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"24/7 Market",
                    LastInventory = @"2018-11-11"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 4,
            ProductName = @"Chef Antons Cajun Seasoning",
            SupplierID = 2,
            CategoryID = 2,
            QuantityPerUnit = @"48 - 6 oz jars",
            UnitPrice = 22,
            UnitsInStock = 53,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2016-03-17",
            Rating = 3,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Fun-Tasty Co.",
                    LastInventory = @"2018-06-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Street Market",
                    LastInventory = @"2018-12-12"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 5,
            ProductName = @"Chef Antons Gumbo Mix",
            SupplierID = 2,
            CategoryID = 2,
            QuantityPerUnit = @"36 boxes",
            UnitPrice = 21.35,
            UnitsInStock = 0,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = true,
            OrderDate = @"2011-11-11",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 6,
            ProductName = @"Grandmas Boysenberry Spread",
            SupplierID = 3,
            CategoryID = 2,
            QuantityPerUnit = @"12 - 8 oz jars",
            UnitPrice = 25,
            UnitsInStock = 0,
            UnitsOnOrder = 30,
            ReorderLevel = 25,
            Discontinued = false,
            OrderDate = @"2017-12-17",
            Rating = 4,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 7,
            ProductName = @"Uncle Bobs Organic Dried Pears",
            SupplierID = 3,
            CategoryID = 7,
            QuantityPerUnit = @"12 - 1 lb pkgs.",
            UnitPrice = 30,
            UnitsInStock = 150,
            UnitsOnOrder = 30,
            ReorderLevel = 10,
            Discontinued = false,
            OrderDate = @"2016-07-17",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Fun-Tasty Co.",
                    LastInventory = @"2018-06-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Street Market",
                    LastInventory = @"2018-12-12"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 8,
            ProductName = @"Northwoods Cranberry Sauce",
            SupplierID = 3,
            CategoryID = 2,
            QuantityPerUnit = @"12 - 12 oz jars",
            UnitPrice = 40,
            UnitsInStock = 6,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2018-01-17",
            Rating = 4,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Fun-Tasty Co.",
                    LastInventory = @"2018-06-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 9,
            ProductName = @"Mishi Kobe Niku",
            SupplierID = 4,
            CategoryID = 6,
            QuantityPerUnit = @"18 - 500 g pkgs.",
            UnitPrice = 97,
            UnitsInStock = 29,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = true,
            OrderDate = @"2010-02-17",
            Rating = 4,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 10,
            ProductName = @"Ikura",
            SupplierID = 4,
            CategoryID = 8,
            QuantityPerUnit = @"12 - 200 ml jars",
            UnitPrice = 31,
            UnitsInStock = 31,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2008-05-17",
            Rating = 3,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Wall Market",
                    LastInventory = @"2018-12-06"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 11,
            ProductName = @"Queso Cabrales",
            SupplierID = 5,
            CategoryID = 4,
            QuantityPerUnit = @"1 kg pkg.",
            UnitPrice = 21,
            UnitsInStock = 22,
            UnitsOnOrder = 30,
            ReorderLevel = 30,
            Discontinued = false,
            OrderDate = @"2009-01-17",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Fun-Tasty Co.",
                    LastInventory = @"2018-06-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 12,
            ProductName = @"Queso Manchego La Pastora",
            SupplierID = 5,
            CategoryID = 4,
            QuantityPerUnit = @"10 - 500 g pkgs.",
            UnitPrice = 38,
            UnitsInStock = 86,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2015-11-17",
            Rating = 3,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 13,
            ProductName = @"Konbu",
            SupplierID = 6,
            CategoryID = 8,
            QuantityPerUnit = @"2 kg box",
            UnitPrice = 6,
            UnitsInStock = 24,
            UnitsOnOrder = 30,
            ReorderLevel = 5,
            Discontinued = false,
            OrderDate = @"2015-03-17",
            Rating = 2,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 14,
            ProductName = @"Tofu",
            SupplierID = 6,
            CategoryID = 7,
            QuantityPerUnit = @"40 - 100 g pkgs.",
            UnitPrice = 23.25,
            UnitsInStock = 35,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2017-06-17",
            Rating = 4,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Street Market",
                    LastInventory = @"2018-12-12"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 15,
            ProductName = @"Genen Shouyu",
            SupplierID = 6,
            CategoryID = 2,
            QuantityPerUnit = @"24 - 250 ml bottles",
            UnitPrice = 15.5,
            UnitsInStock = 39,
            UnitsOnOrder = 30,
            ReorderLevel = 5,
            Discontinued = false,
            OrderDate = @"2014-03-17",
            Rating = 4,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Local Market",
                    LastInventory = @"2018-07-03"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Wall Market",
                    LastInventory = @"2018-12-06"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 16,
            ProductName = @"Pavlova",
            SupplierID = 7,
            CategoryID = 3,
            QuantityPerUnit = @"32 - 500 g boxes",
            UnitPrice = 17.45,
            UnitsInStock = 29,
            UnitsOnOrder = 30,
            ReorderLevel = 10,
            Discontinued = false,
            OrderDate = @"2018-03-28",
            Rating = 2,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Street Market",
                    LastInventory = @"2018-12-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"24/7 Market",
                    LastInventory = @"2018-11-11"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 17,
            ProductName = @"Alice Mutton",
            SupplierID = 7,
            CategoryID = 6,
            QuantityPerUnit = @"20 - 1 kg tins",
            UnitPrice = 39,
            UnitsInStock = 0,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = true,
            OrderDate = @"2015-08-17",
            Rating = 2,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 18,
            ProductName = @"Carnarvon Tigers",
            SupplierID = 7,
            CategoryID = 8,
            QuantityPerUnit = @"16 kg pkg.",
            UnitPrice = 62.5,
            UnitsInStock = 42,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2005-09-27",
            Rating = 2,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"24/7 Market",
                    LastInventory = @"2018-11-11"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 19,
            ProductName = @"Teatime Chocolate Biscuits",
            SupplierID = 8,
            CategoryID = 3,
            QuantityPerUnit = @"",
            UnitPrice = 9.2,
            UnitsInStock = 25,
            UnitsOnOrder = 30,
            ReorderLevel = 5,
            Discontinued = false,
            OrderDate = @"2001-03-17",
            Rating = 2,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Local Market",
                    LastInventory = @"2018-07-03"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 20,
            ProductName = @"Sir Rodneys Marmalade",
            SupplierID = 8,
            CategoryID = 3,
            QuantityPerUnit = @"4 - 100 ml jars",
            UnitPrice = 4.5,
            UnitsInStock = 40,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2005-03-17",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
    }
}csコピー

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

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="options vertical">
        <IgbPropertyEditorPanel
        Name="PropertyEditor"
        @ref="propertyEditor"

        DescriptionType="WebGrid"
        IsHorizontal="true"
        IsWrappingEnabled="true">
            <IgbPropertyEditorPropertyDescription
            PropertyPath="CellSelection"
            Name="CellSelectionEditor"
            @ref="cellSelectionEditor"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "None", "Single", "Multiple" })"
            DropDownValues="@(new string[] { "NOne", "Single", "Multiple" })">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <div class="container vertical fill">
        <IgbGrid
        AutoGenerate="false"
        Name="grid"
        @ref="grid"
        Data="NwindData">
            <IgbColumn
            Field="ProductID"
            Header="Product ID">
            </IgbColumn>

            <IgbColumn
            Field="ProductName"
            Header="Product Name">
            </IgbColumn>

            <IgbColumn
            Field="UnitsInStock"
            Header="Units In Stock"
            DataType="GridColumnDataType.Number">
            </IgbColumn>

            <IgbColumn
            Field="UnitPrice"
            Header="Units Price"
            DataType="GridColumnDataType.Number">
            </IgbColumn>

            <IgbColumn
            Field="Discontinued"
            DataType="GridColumnDataType.Boolean">
            </IgbColumn>

            <IgbColumn
            Field="OrderDate"
            Header="Order Date"
            DataType="GridColumnDataType.Date">
            </IgbColumn>

        </IgbGrid>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

        this.BindElements = () => {
            propertyEditor.Target = this.grid;
        };
        this.BindElements();

    }

    private IgbPropertyEditorPanel propertyEditor;
    private IgbPropertyEditorPropertyDescription cellSelectionEditor;
    private IgbGrid grid;

    private NwindData _nwindData = null;
    public NwindData NwindData
    {
        get
        {
            if (_nwindData == null)
            {
                _nwindData = new NwindData();
            }
            return _nwindData;
        }
    }

}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.

Selection Types

Grid Multiple-Cell Selection

셀을 선택하는 방법:

• ​마우스 드래그- 셀의 직사각형 데이터 선택이 수행됩니다.
• ​Ctrl 키 누르기 + 마우스 끌기- 여러 범위 선택이 수행됩니다. 다른 기존 셀 선택은 유지됩니다.
• ​Shift 키를 사용하여 즉시 다중 셀 선택. 단일 셀을 선택하고 Shift 키를 누른 채 다른 단일 셀을 선택합니다. 두 셀 사이의 셀 범위가 선택됩니다. Shift 키를 누른 상태에서 다른 두 번째 셀을 선택하면 셀 선택 범위는 처음 선택한 셀 위치(시작점)를 기준으로 업데이트됩니다.
• ​Shift 키를 누른 상태에서 화살표 키를 사용하여 키보드 다중 셀 선택. 선택된 셀을 기준으로 다중 셀 선택 범위가 생성됩니다.
• ​Shift 키를 누른 상태에서 Ctrl + ↑ ↓ ←​ ​→ 키와 Ctrl + Home / End를 사용하여 키보드 다중 셀 선택. 선택된 셀을 기준으로 다중 셀 선택 범위가 생성됩니다.
• 로 클릭하면 마우스 왼쪽 키를 누른 상태에서 Ctrl 키 키는 선택한 셀 컬렉션에 단일 셀 범위를 추가합니다.
• 마우스로 클릭하고 드래그하면 연속적인 다중 셀 선택이 가능합니다.

데모

EXAMPLE

MODULES

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) });

            // TODO update names of the following modules for the IgbGrid
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbGridModule),
                typeof(IgbRadioModule),
                typeof(IgbRadioGroupModule),
                typeof(IgbSnackbarModule),
                typeof(IgbIconModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container horizontal">
    <div class="container vertical">
        @if (mainData != null)
        {
            <div>
                <IgbGrid Id="grid1" @ref="GridRef" Height="100%" Width="95%" Data="mainData" AutoGenerate=false CellSelection="GridSelectionMode.Multiple" RangeSelectedScript="RangeSelectionChanging">
                     <IgbColumn Field="ProductID" />
                     <IgbColumn Field="ProductName" />
                     <IgbColumn Field="OrderItems" />
                     <IgbColumn Field="OrderValue" />
                </IgbGrid>
            </div>
        }
    </div>
    <div class="container vertical">
            <div>
                <IgbGrid Id="grid2" Height="550px" Width="100%" AutoGenerate=false>
                    <IgbColumn Field="ProductID" />
                    <IgbColumn Field="ProductName" />
                    <IgbColumn Field="OrderItems" />
                    <IgbColumn Field="OrderValue" />
                </IgbGrid>
            </div>
    </div>
</div>

@code {

    private List<SaleInfo> mainData;
    private Random Rand = new Random();
    public IgbGrid GridRef { get; set; }

    protected override void OnInitialized()
    {

        GenerateData();
    }

    public void GenerateData()
    {
        string[] names = new string[] {
            "Intel CPU", "AMD CPU",
            "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard",
            "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU",
            "Corsair Memory", "Patriot Memory", "Skill Memory",
            "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD",
            "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD",
            "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" };

        string[] countries = new string[] {
            "USA", "UK", "France", "Canada", "Poland",
            "Denmark", "Croatia", "Australia", "Seychelles",
            "Sweden", "Germany", "Japan", "Ireland",
            "Barbados", "Jamaica", "Cuba", "Spain", };
        string[] status = new string[] { "Packing", "Shipped", "Delivered" };

        var sales = new List<SaleInfo>();

        for (var i = 0; i < 200; i++)
        {
            var price = GetRandomNumber(10000, 90000) / 100;
            var items = GetRandomNumber(4, 30);
            var value = Math.Round(price * items);
            var margin = GetRandomNumber(2, 5);
            var profit = Math.Round((price * margin / 100) * items);
            var country = GetRandomItem(countries);

            var item = new SaleInfo()
            {
                Country = country,
                CountryFlag = GetCountryFlag(country),
                Margin = margin,
                OrderDate = GetRandomDate(),
                OrderItems = items,
                OrderValue = value,
                ProductID = 1001 + i,
                ProductName = GetRandomItem(names),
                ProductPrice = price,
                Profit = Math.Round(profit),
                Status = GetRandomItem(status)
            };
            sales.Add(item);
        }

        this.mainData = sales;
    }

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

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

    public DateTime GetRandomDate()
    {
        var today = new DateTime();
        var year = today.Year;
        var month = this.GetRandomNumber(1, 9);
        var day = this.GetRandomNumber(10, 27);
        return new DateTime(year, (int)month, (int)day);
    }

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

    public class SaleInfo
    {
        public string Status { get; set; }
        public string ProductName { get; set; }
        public string CountryFlag { get; set; }
        public string Country { get; set; }
        public DateTime OrderDate { get; set; }
        public double Profit { get; set; }
        public double ProductPrice { get; set; }
        public double ProductID { get; set; }
        public double OrderValue { get; set; }
        public double OrderItems { get; set; }
        public double Margin { get; set; }
    }
}razorコピー

function RangeSelectionChanging(o, e) {
    var g1 = document.querySelector("#grid1");
    var g2 = document.querySelector("#grid2");
    g2.data = g1.getSelectedData();
}

igRegisterScript("RangeSelectionChanging", RangeSelectionChanging, false);jsコピー

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

그리드 단일 선택

​CellSelection​ ​Single로 설정하면 그리드에서 한 번에 하나의 셀만 선택할 수 있습니다. 또한 모드 마우스 끌기는 작동하지 않으며 셀을 선택하는 대신 기본 텍스트 선택이 됩니다.

단일 셀을 선택한 경우 Selected 이벤트가 발생합니다. 선택 모드 ~이다 하나의 또는 다수의. 다중 셀 선택 모드에서 셀 범위를 선택할 때 RangeSelected 이벤트가 방출됩니다.

그리드 없음 선택

셀 선택을 비활성화하려면 CellSelection​ ​none으로 설정하면 됩니다. 이 모드에서 셀을 클릭하거나 키보드로 탐색하려고 하면 셀이 선택되지 않고​ ​활성화 스타일만 적용되며 페이지의 다른 요소를 스크롤하거나 클릭하면 셀이 손실됩니다. 선택을 정의하는 유일한 방법은 아래에 설명된 API 메서드를 사용하는 것입니다.

Keyboard Navigation Interactions

While Shift Key is Pressed

• 현재 선택 항목에 위 셀을 추가하려면 Shift + ↑를 누르세요.
• 현재 선택 항목에 아래 셀을 추가하려면 Shift + ↓를 누르세요.
• 현재 선택 항목에 왼쪽 셀을 추가하려면 Shift + ←를 누르세요.
• Shift + → 현재 선택 항목에 오른쪽 셀을 추가합니다.

While Ctrl + Shift Keys are Pressed

• Ctrl + Shift + ↑를 사용하면 열에서 초점이 맞춰진 셀 위의 모든 셀을 선택할 수 있습니다.
• Ctrl + Shift + ↓를 눌러 열에서 초점이 맞춰진 셀 아래의 모든 셀을 선택합니다.
• Ctrl + Shift + ←를 누르면 행 시작 부분까지 모든 셀을 선택합니다.
• Ctrl + Shift + → 행 끝까지의 모든 셀을 선택합니다.
• Ctrl + Shift + Home: 초점이 맞춰진 셀부터 그리드의 첫 번째 셀까지 모든 셀을 선택합니다.
• Ctrl + Shift + End -초점이 맞춰진 셀부터 그리드의 마지막 셀까지 모든 셀을 선택합니다.

Continuous scroll is possible only within Grid's body.

Api Usage

다음은 범위를 선택하거나, 선택 항목을 지우거나, 선택한 셀 데이터를 가져오는 데 사용할 수 있는 방법입니다.

Select range

SelectRange- API를 사용하여 셀 범위를 선택합니다. rowStart 및 rowEnd는 행 인덱스를 사용해야 하며 columnStart 및 columnEnd는 열 인덱스 또는 열 데이터 필드 값을 사용할 수 있습니다.

<IgbGrid @ref=grid  CellSelection="GridSelectionMode.Multiple" AutoGenerate=true></<IgbGrid>

@code {
    private IgbGrid grid;

    private async void SetSelection()
    {        
        IgbGridSelectionRange selectionRange = new IgbGridSelectionRange();
        selectionRange.ColumnStart = 1;
        selectionRange.ColumnEnd = 1;
        selectionRange.RowStart = 2;
        selectionRange.RowEnd = 2;

        this.grid.SelectRange(new IgbGridSelectionRange[] {});
    }
}
razor

Clear cell selection

ClearCellSelection 현재 셀 선택을 지웁니다.

@code {
    private async void ClearSelection()
    {
        await this.grid.ClearCellSelectionAsync();
    }
}
razor

Get Selected Data

GetSelectedData 선택한 데이터의 배열을 사전 형식으로 반환합니다. 아래 예:

<IgbGrid @ref=grid  CellSelection="GridSelectionMode.Multiple" AutoGenerate=true></<IgbGrid>

@code {
    private IgbGrid grid;

    private async void GetSelectedData()
    {
        object[] data = await this.grid.GetSelectedDataAsync(true, true);
    }
}
razor

Features Integration

다중 셀 선택은 인덱스 기반입니다(DOM 요소 선택).

• Sorting- 정렬이 수행되면 선택이 지워지지 않습니다. 오름차순 또는 내림차순으로 정렬하는 동안 현재 선택된 셀은 동일하게 유지됩니다.
• Paging- 페이징 시 선택한 셀이 지워집니다. 선택 항목은 여러 페이지에 걸쳐 유지되지 않습니다.
• Filtering- 필터링이 수행되면 선택이 지워지지 않습니다. 필터링이 지워지면 처음에 선택한 셀이 반환됩니다.
• Resizing- 열 크기 조정 시 선택한 셀이 지워지지 않습니다.
• Hiding- 선택한 셀을 지우지 않습니다. 열이 숨겨져 있으면 표시되는 다음 열의 셀이 선택됩니다.
• Pinning- 선택한 셀이 지워지지 않습니다. 숨기는 것도 마찬가지
• GroupBy- 열 그룹화 시 선택한 셀이 지워지지 않습니다.

Styling

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

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

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

.grid {
    --ig-grid-cell-selected-text-color: #FFFFFF;
    --ig-grid-cell-active-border-color: #f2c43c;
    --ig-grid-cell-selected-background: #0062A3;
}
css

데모

EXAMPLE

DATA

MODULES

RAZOR

CSS

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 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 IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/

#grid {
    --cell-selected-text-color: #FFFFFF;
    --cell-active-border-color: #f2c43c;
    --cell-selected-background: #0062a3;
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbGrid
        Name="grid"
        @ref="grid"
        Id="grid"
        Data="CustomersData"
        ColumnSelection="GridSelectionMode.Single">
            <IgbColumn
            Field="ID">
            </IgbColumn>

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

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

            <IgbColumn
            Field="PostalCode"
            Header="Postal Code">
            </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/
*/

#grid {
    --cell-selected-text-color: #FFFFFF;
    --cell-active-border-color: #f2c43c;
    --cell-selected-background: #0062a3;
}

cssコピー

API References

• IgbGrid

Additional Resources

• 선택
• 행 선택
• 필터링
• 정렬
• 요약
• 열 이동
• 열 고정
• 열 크기 조정
• 가상화 및 성능

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

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