Blazor Grid 열 선택 개요
Ignite UI for Blazor의 Blazor Grid Column Selection 기능은 한 번의 클릭으로 전체 열을 선택하고 강조 표시하는 간소화되고 Excel과 유사한 방법을 제공합니다. columnSelection
입력을 통해 활성화할 수 있습니다. 풍부한 API 덕분에 이 기능을 사용하면 선택 상태를 쉽게 조작하고, 선택한 분수에서 데이터를 추출하고, 데이터 분석 작업을 수행하고, 시각화할 수 있습니다.
Blazor Grid 열 선택 예제
아래 샘플은 IgbGrid
의 열 선택 동작의 세 가지 유형을 보여줍니다. 사용 가능한 각 선택 모드를 활성화하려면 아래 열 선택 드롭다운을 사용하세요.
* 연락처 제목, 도시 및 주소 열은 열 선택이 비활성화되어 있습니다.
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();
}
}
}
csusing 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="options vertical">
<IgbPropertyEditorPanel
Name="PropertyEditor"
@ref="propertyEditor"
DescriptionType="WebGrid"
IsHorizontal="true"
IsWrappingEnabled="true">
<IgbPropertyEditorPropertyDescription
PropertyPath="ColumnSelection"
Name="columnSelectionEditor"
@ref="columnSelectionEditor"
Label="Column Selection">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<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="ContactTitle"
Header="Title"
Selectable="false">
</IgbColumn>
<IgbColumn
Field="City"
Selectable="false">
</IgbColumn>
<IgbColumn
Field="Country">
</IgbColumn>
<IgbColumn
Field="PostalCode"
Header="Postal Code">
</IgbColumn>
<IgbColumn
Field="Address"
Selectable="false">
</IgbColumn>
</IgbGrid>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var propertyEditor = this.propertyEditor;
var columnSelectionEditor = this.columnSelectionEditor;
var grid = this.grid;
this.BindElements = () => {
propertyEditor.Target = this.grid;
};
this.BindElements();
}
private IgbPropertyEditorPanel propertyEditor;
private IgbPropertyEditorPropertyDescription columnSelectionEditor;
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
이 샘플이 마음에 드시나요? Ignite UI for Blazor에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
기본 사용법
열 선택 기능은 다음을 통해 활성화할 수 있습니다. ColumnSelection
입력, 소요되는 GridSelectionMode
가치.
상호 작용
기본 선택 모드는 None
입니다. Single
또는 Multiple
으로 설정하면 표시되는 모든 열이 Selectable
집니다. 즉, 열을 선택하려면 하나를 클릭하기만 하면 됩니다. 그러면 해당 열이 Selected
로 표시됩니다. 열을 선택할 수 없는 경우 마우스를 가져가는 동안 헤더에 선택 스타일이 적용되지 않습니다.
다중 열 머리글 기능은 선택 가능한 입력에 반영되지 않습니다. ColumnGroupComponent는 하위 항목 중 하나 이상이 선택 동작을 활성화한 경우 선택 가능합니다. 또한 선택 가능한 하위 항목이 모두 선택되면 구성 요소가 선택됨으로 표시됩니다.
* 국가 정보 열 그룹에서는 도시 및 우편번호 열만 선택할 수 있습니다.
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),
typeof(IgbColumnGroupModule)
);
await builder.Build().RunAsync();
}
}
}
csusing 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
Name="grid"
@ref="grid"
Id="grid"
Data="CustomersData"
ColumnSelection="GridSelectionMode.Multiple">
<IgbColumnGroup
Header="General Information">
<IgbColumn
Field="Company"
Header="Company">
</IgbColumn>
<IgbColumnGroup
Header="Personal Details">
<IgbColumn
Field="ContactName"
Header="Name"
Hidden="true">
</IgbColumn>
<IgbColumn
Field="ContactTitle"
Header="Title"
Selectable="false">
</IgbColumn>
</IgbColumnGroup>
</IgbColumnGroup>
<IgbColumn
Field="ID">
</IgbColumn>
<IgbColumnGroup
Header="Country Information">
<IgbColumnGroup
Header="Region Information">
<IgbColumn
Field="Country"
Selectable="false">
</IgbColumn>
<IgbColumn
Field="City">
</IgbColumn>
<IgbColumn
Field="PostalCode">
</IgbColumn>
</IgbColumnGroup>
<IgbColumnGroup
Header="City Information">
<IgbColumn
Field="Fax"
Selectable="false">
</IgbColumn>
<IgbColumn
Field="Address"
Selectable="false">
</IgbColumn>
</IgbColumnGroup>
</IgbColumnGroup>
</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
키보드 조합
키보드 조합은 그리드 ColumnSelection 입력이 다중으로 설정된 경우에만 사용할 수 있습니다.
열 선택 기능의 키보드 탐색에는 두 가지 시나리오가 있습니다.
- 다중 열 선택 - 보유 Ctrl 키 + 딸깍 하는 소리 매 선택 가능 헤더 셀.
- 범위 열 선택 -Shift 키를 누른 채 클릭하면 사이에서 선택 가능한 모든 열이 선택됩니다.
API 조작
그만큼 API 몇 가지 추가 기능을 제공합니다. 눈에 보이지 않는 열은 모든 숨겨진 열은 다음과 같이 표시될 수 있습니다. Selected
해당 설정을 통해 세터.
위의 문은 Selected 속성이 변경될 때 해당 하위 항목의 상태가 변경된다는 점을 제외하고 ColumnGroupComponent에도 적용됩니다.
API 조작에 관한 자세한 내용은 API 참조 섹션에서 확인할 수 있습니다.
스타일링
사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 class
설정해야 합니다.
<IgbGrid class="grid"></IgbGrid>
razor
그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.
.grid {
--ig-grid-row-selected-background: #0062A3;
--ig-grid-row-selected-text-color: #ecaa53;
--ig-grid-row-selected-hover-background: #0062A3;
--ig-grid-header-selected-text-color: #ecaa53;
--ig-grid-header-selected-background: #0062A3;
--ig-grid-row-selected-hover-text-color: #ecaa53;
--ig-grid-row-selected-hover-background: #0062A3;
}
css
데모
API 참조
열 선택 UI에는 아래에 나열된 몇 가지 API가 더 있습니다.
IgbGrid
properties:
IgbColumn
properties:
IgbColumnGroup
properties:
IgbGrid
events:
OnColumnsSelectionChange
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.