Blazor Tree Grid Column Pinning
Blazor Tree Grid의 Ignite UI for Blazor Column Pinning 기능을 사용하면 개발자가 특정 열을 원하는 순서로 잠그고 사용자가 IgbGrid
가로로 스크롤하더라도 항상 가시성을 확보할 수 있습니다. Blazor Tree Grid 툴바를 통해 액세스할 수 있는 Column Pinning을 위한 통합 UI가 있습니다. 또한 개발자는 열의 고정 상태를 변경하는 사용자 지정 사용자 인터페이스를 빌드할 수 있는 유연성을 갖추고 있습니다.
Blazor Tree Grid Column Pinning Example
이 예에서는 IgbTreeGrid
의 왼쪽 또는 오른쪽에 하나 이상의 열을 고정하는 방법을 보여줍니다.
using System;
using System.Collections.Generic;
public class EmployeesFlatDataItem
{
public double Age { get; set; }
public string HireDate { get; set; }
public double ID { get; set; }
public string Name { get; set; }
public string Phone { get; set; }
public bool OnPTO { get; set; }
public double ParentID { get; set; }
public string Title { get; set; }
}
public class EmployeesFlatData
: List<EmployeesFlatDataItem>
{
public EmployeesFlatData()
{
this.Add(new EmployeesFlatDataItem()
{
Age = 55,
HireDate = @"2008-03-20",
ID = 1,
Name = @"Johnathan Winchester",
Phone = @"0251-031259",
OnPTO = false,
ParentID = -1,
Title = @"Development Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 42,
HireDate = @"2014-01-22",
ID = 4,
Name = @"Ana Sanders",
Phone = @"(21) 555-0091",
OnPTO = true,
ParentID = -1,
Title = @"CEO"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 49,
HireDate = @"2014-01-22",
ID = 18,
Name = @"Victoria Lincoln",
Phone = @"(071) 23 67 22 20",
OnPTO = true,
ParentID = -1,
Title = @"Accounting Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 61,
HireDate = @"2010-01-01",
ID = 10,
Name = @"Yang Wang",
Phone = @"(21) 555-0091",
OnPTO = false,
ParentID = -1,
Title = @"Localization Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 43,
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
Phone = @"0452-076545",
OnPTO = true,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 29,
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
Phone = @"(14) 555-8122",
OnPTO = false,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 31,
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
Phone = @"7675-3425",
OnPTO = false,
ParentID = 1,
Title = @"Software Development Team Lead"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 35,
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2009-10-11",
ID = 12,
Name = @"Sven Cooper",
Phone = @"0695-34 67 21",
OnPTO = true,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
Phone = @"981-443655",
OnPTO = false,
ParentID = 4,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 5,
Name = @"Elizabeth Richards",
Phone = @"(2) 283-2951",
OnPTO = true,
ParentID = 4,
Title = @"Vice President"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
Phone = @"981-443655",
OnPTO = true,
ParentID = 5,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 17,
Name = @"Antonio Moreno",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 18,
Title = @"Senior Accountant"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 50,
HireDate = @"2007-11-18",
ID = 7,
Name = @"Pedro Rodriguez",
Phone = @"035-640230",
OnPTO = false,
ParentID = 10,
Title = @"Senior Localization Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 27,
HireDate = @"2016-02-19",
ID = 8,
Name = @"Casey Harper",
Phone = @"0342-023176",
OnPTO = true,
ParentID = 10,
Title = @"Senior Localization"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 15,
Name = @"Patricia Simpson",
Phone = @"069-0245984",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 9,
Name = @"Francisco Chang",
Phone = @"(91) 745 6200",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2018-03-18",
ID = 16,
Name = @"Peter Lewis",
Phone = @"069-0245984",
OnPTO = true,
ParentID = 7,
Title = @"Localization Intern"
});
}
}
csusing 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(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
Data="EmployeesFlatData"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbGridToolbar
>
<IgbGridToolbarActions
>
<IgbGridToolbarPinning
>
</IgbGridToolbarPinning>
</IgbGridToolbarActions>
</IgbGridToolbar>
<IgbColumn
Field="Name"
DataType="GridColumnDataType.String"
Pinned="true">
</IgbColumn>
<IgbColumn
Field="Title"
DataType="GridColumnDataType.String">
</IgbColumn>
<IgbColumn
Field="Phone"
DataType="GridColumnDataType.String"
Pinned="true">
</IgbColumn>
<IgbColumn
Field="Age"
DataType="GridColumnDataType.Number">
</IgbColumn>
<IgbColumn
Field="HireDate"
DataType="GridColumnDataType.Date">
</IgbColumn>
<IgbColumn
Field="OnPTO"
DataType="GridColumnDataType.Boolean">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
}
private IgbTreeGrid treeGrid;
private EmployeesFlatData _employeesFlatData = null;
public EmployeesFlatData EmployeesFlatData
{
get
{
if (_employeesFlatData == null)
{
_employeesFlatData = new EmployeesFlatData();
}
return _employeesFlatData;
}
}
}
razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.
Column Pinning API
열 고정은 IgbColumn
의 Pinned
속성을 통해 제어됩니다. 고정된 열은 기본적으로 IgbTreeGrid
의 왼쪽에 렌더링되며 IgbTreeGrid
본문에서 고정 해제된 열의 가로 스크롤을 통해 고정된 상태로 유지됩니다.
IgbTreeGrid
의 PinColumn
또는 IgbTreeGrid
의 UnpinColumn
메서드를 사용하여 필드 이름으로 열을 고정하거나 고정 해제할 수도 있습니다.
두 메서드 모두 해당 작업의 성공 여부를 나타내는 부울 값을 반환합니다. 일반적으로 실패하는 이유는 열이 이미 원하는 상태에 있기 때문입니다.
열은 가장 오른쪽에 고정된 열의 오른쪽에 고정되어 있습니다. 고정된 열의 순서를 변경하려면 ColumnPin
이벤트를 구독하고 이벤트 인수의 InsertAtIndex
속성을 원하는 위치 인덱스로 변경하면 됩니다.
열은 가장 오른쪽에 고정된 열의 오른쪽에 고정됩니다. 고정된 열의 순서 변경은 이벤트를 구독 ColumnPinScript
하고 이벤트 인수의 속성을 원하는 위치 인덱스로 변경 InsertAtIndex
하기 위한 JavaScript 함수를 제공하여 수행할 수 있습니다.
<IgbTreeGrid Data=data AutoGenerate=true ColumnPinScript="onColumnPin"/>
//In JavaScript
function onColumnPin(e) {
if (e.detail.column.field == "Country") {
e.detail.insertAtIndex = 0;
}
}
igRegisterScript("onColumnPin", onColumnPin, false);
razor
Pinning Position
Pinning
구성 옵션을 통해 열 고정 위치를 변경할 수 있습니다. 열 위치를 시작 또는 끝으로 설정할 수 있습니다. 끝으로 설정하면 열이 고정 해제된 열 뒤의 그리드 끝에서 렌더링됩니다. 고정되지 않은 열은 가로로 스크롤할 수 있지만 고정된 열은 오른쪽에 고정된 상태로 유지됩니다.
<IgbTreeGrid Data=data AutoGenerate=true Pinning="pinningConfig"></IgbTreeGrid>
@code {
private IgbPinningConfig pinningConfig = new() {
Columns = ColumnPinningPosition.End
};
}
razor
Demo
using System;
using System.Collections.Generic;
public class EmployeesFlatDetailsItem
{
public string Address { get; set; }
public double Age { get; set; }
public string City { get; set; }
public string Country { get; set; }
public string Fax { get; set; }
public string HireDate { get; set; }
public double ID { get; set; }
public string Name { get; set; }
public double ParentID { get; set; }
public string Phone { get; set; }
public double PostalCode { get; set; }
public string Title { get; set; }
public string LastName { get; set; }
public string FullAddress { get; set; }
}
public class EmployeesFlatDetails
: List<EmployeesFlatDetailsItem>
{
public EmployeesFlatDetails()
{
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Obere Str. 57",
Age = 55,
City = @"Berlin",
Country = @"Germany",
Fax = @"030-0076545",
HireDate = @"2008-03-20",
ID = 1,
Name = @"Johnathan Winchester",
ParentID = -1,
Phone = @"030-0074321",
PostalCode = 12209,
Title = @"Development Manager",
LastName = @"Winchester",
FullAddress = @"Obere Str. 57, Berlin, Germany"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Avda. de la Constitución 2222",
Age = 42,
City = @"México D.F.",
Country = @"Mexico",
Fax = @"(51) 555-3745",
HireDate = @"2014-01-22",
ID = 4,
Name = @"Ana Sanders",
ParentID = -1,
Phone = @"(5) 555-4729",
PostalCode = 5021,
Title = @"CEO",
LastName = @"Sanders",
FullAddress = @"Avda. de la Constitución 2222, México D.F., Mexico"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Mataderos 2312",
Age = 49,
City = @"México D.F.",
Country = @"Mexico",
Fax = @"(5) 555-3995",
HireDate = @"2014-01-22",
ID = 18,
Name = @"Victoria Lincoln",
ParentID = -1,
Phone = @"(5) 555-3932",
PostalCode = 5023,
Title = @"Accounting Manager",
LastName = @"Lincoln",
FullAddress = @"Mataderos 2312, México D.F., Mexico"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"120 Hanover Sq.",
Age = 61,
City = @"London",
Country = @"UK",
Fax = @"(171) 555-6750",
HireDate = @"2010-01-01",
ID = 10,
Name = @"Yang Wang",
ParentID = -1,
Phone = @"(171) 555-7788",
PostalCode = 39000,
Title = @"Localization Manager",
LastName = @"Wang",
FullAddress = @"120 Hanover Sq., London, UK"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Berguvsvägen 8",
Age = 43,
City = @"Luleå",
Country = @"Sweden",
Fax = @"0921-12 34 67",
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
ParentID = 1,
Phone = @"0921-12 34 65",
PostalCode = 29000,
Title = @"Senior Software Developer",
LastName = @"Burke",
FullAddress = @"Berguvsvägen 8, Luleå, Sweden"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Forsterstr. 57",
Age = 29,
City = @"Mannheim",
Country = @"Germany",
Fax = @"0621-08924",
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
ParentID = 1,
Phone = @"0621-08460",
PostalCode = 68306,
Title = @"Senior Software Developer",
LastName = @"Anderson",
FullAddress = @"Forsterstr. 57, Mannheim, Germany"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"24, place Kléber",
Age = 31,
City = @"Strasbourg",
Country = @"France",
Fax = @"88.60.15.32",
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
ParentID = 1,
Phone = @"88.60.15.31",
PostalCode = 67000,
Title = @"Software Development Team Lead",
LastName = @"Reyes",
FullAddress = @"24, place Kléber, Strasbourg, France"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"C/ Araquil, 67",
Age = 35,
City = @"Madrid",
Country = @"Spain",
Fax = @"(911) 555 91 99",
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
ParentID = 11,
Phone = @"(91) 555 22 82",
PostalCode = 28023,
Title = @"Senior Software Developer",
LastName = @"Mendel",
FullAddress = @"C/ Araquil, 67, Madrid, Spain"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"12, rue des Bouchers",
Age = 44,
City = @"Marseille",
Country = @"France",
Fax = @"91.24.45.41",
HireDate = @"2009-10-11",
ID = 12,
Name = @"Sven Cooper",
ParentID = 11,
Phone = @"91.24.45.40",
PostalCode = 13008,
Title = @"Senior Software Developer",
LastName = @"Cooper",
FullAddress = @"12, rue des Bouchers, Marseille, France"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"23 Tsawassen Blvd.",
Age = 44,
City = @"Tsawassen",
Country = @"Canada",
Fax = @"(604) 555-3745",
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
ParentID = 4,
Phone = @"(604) 555-4729",
PostalCode = 19000,
Title = @"Director",
LastName = @"Johnson",
FullAddress = @"23 Tsawassen Blvd., Tsawassen, Canada"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Fauntleroy Circus",
Age = 25,
City = @"London",
Country = @"UK",
Fax = @"(125) 555-3798",
HireDate = @"2017-11-9",
ID = 5,
Name = @"Elizabeth Richards",
ParentID = 4,
Phone = @"(171) 555-1212",
PostalCode = 30000,
Title = @"Vice President",
LastName = @"Richards",
FullAddress = @"Fauntleroy Circus, London, UK"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Cerrito 333",
Age = 39,
City = @"Buenos Aires",
Country = @"Argentina",
Fax = @"(121) 135-4892",
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
ParentID = 5,
Phone = @"(1) 135-5555",
PostalCode = 1010,
Title = @"Director",
LastName = @"Ashworth",
FullAddress = @"Cerrito 333, Buenos Aires, Argentina"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Sierras de Granada 9993",
Age = 44,
City = @"México D.F.",
Country = @"Mexico",
Fax = @"(153) 555-7293",
HireDate = @"2014-04-04",
ID = 17,
Name = @"Antonio Moreno",
ParentID = 18,
Phone = @"(5) 555-3392",
PostalCode = 5022,
Title = @"Senior Accountant",
LastName = @"Moreno",
FullAddress = @"Sierras de Granada 9993, México D.F., Mexico"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Hauptstr. 29",
Age = 50,
City = @"Sao Paulo",
Country = @"Brazil",
Fax = @"(531) 555-6691",
HireDate = @"2007-11-18",
ID = 7,
Name = @"Pedro Rodriguez",
ParentID = 10,
Phone = @"0452-076545",
PostalCode = 3012,
Title = @"Senior Localization Developer",
LastName = @"Rodriguez",
FullAddress = @"Hauptstr. 29, Sao Paulo, Brazil"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Av. dos Lusíadas, 23",
Age = 27,
City = @"Bern",
Country = @"Switzerland",
Fax = @"(271) 335-357",
HireDate = @"2016-02-19",
ID = 8,
Name = @"Casey Harper",
ParentID = 10,
Phone = @"(11) 555-7647",
PostalCode = 40000,
Title = @"Senior Localization",
LastName = @"Harper",
FullAddress = @"Av. dos Lusíadas, 23, Bern, Switzerland"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Berkeley Gardens 12",
Age = 25,
City = @"London",
Country = @"UK",
Fax = @"(171) 555-9199",
HireDate = @"2017-11-09",
ID = 15,
Name = @"Patricia Simpson",
ParentID = 7,
Phone = @"(171) 555-2282",
PostalCode = 26000,
Title = @"Localization Intern",
LastName = @"Simpson",
FullAddress = @"Berkeley Gardens 12, London, UK"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Walserweg 21",
Age = 39,
City = @"Aachen",
Country = @"Germany",
Fax = @"0241-059428",
HireDate = @"2010-03-22",
ID = 9,
Name = @"Francisco Chang",
ParentID = 7,
Phone = @"0241-039123",
PostalCode = 52066,
Title = @"Localization Intern",
LastName = @"Chang",
FullAddress = @"Walserweg 21, Aachen, Germany"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"35 King George",
Age = 25,
City = @"London",
Country = @"UK",
Fax = @"(171) 555-3373",
HireDate = @"2018-03-18",
ID = 16,
Name = @"Peter Lewis",
ParentID = 7,
Phone = @"(171) 555-0297",
PostalCode = 48000,
Title = @"Localization Intern",
LastName = @"Lewis",
FullAddress = @"35 King George, London, UK"
});
}
}
csusing 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(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
Data="EmployeesFlatDetails"
PrimaryKey="ID"
ForeignKey="ParentID"
Pinning="PinningConfig1">
<IgbGridToolbar
>
<IgbGridToolbarActions
>
<IgbGridToolbarPinning
>
</IgbGridToolbarPinning>
</IgbGridToolbarActions>
</IgbGridToolbar>
<IgbColumn
Field="Name"
DataType="GridColumnDataType.String"
Width="250">
</IgbColumn>
<IgbColumn
Field="Title"
DataType="GridColumnDataType.String"
Width="300"
Pinned="true">
</IgbColumn>
<IgbColumn
Field="HireDate"
Header="Hire Date"
DataType="GridColumnDataType.Date"
Width="200">
</IgbColumn>
<IgbColumn
Field="Age"
DataType="GridColumnDataType.Number"
Width="100">
</IgbColumn>
<IgbColumn
Field="Address"
DataType="GridColumnDataType.String"
Width="200">
</IgbColumn>
<IgbColumn
Field="City"
DataType="GridColumnDataType.String"
Width="200">
</IgbColumn>
<IgbColumn
Field="Country"
DataType="GridColumnDataType.String"
Width="200">
</IgbColumn>
<IgbColumn
Field="Fax"
DataType="GridColumnDataType.String"
Width="200">
</IgbColumn>
<IgbColumn
Field="PostalCode"
Header="Postal Code"
DataType="GridColumnDataType.String"
Width="200">
</IgbColumn>
<IgbColumn
Field="Phone"
DataType="GridColumnDataType.String"
Width="200">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
}
private IgbTreeGrid treeGrid;
private IgbPinningConfig _pinningConfig1 = null;
public IgbPinningConfig PinningConfig1
{
get
{
if (this._pinningConfig1 == null)
{
var pinningConfig1 = new IgbPinningConfig();
pinningConfig1.Columns = ColumnPinningPosition.End;
this._pinningConfig1 = pinningConfig1;
}
return this._pinningConfig1;
}
}
private EmployeesFlatDetails _employeesFlatDetails = null;
public EmployeesFlatDetails EmployeesFlatDetails
{
get
{
if (_employeesFlatDetails == null)
{
_employeesFlatDetails = new EmployeesFlatDetails();
}
return _employeesFlatDetails;
}
}
}
razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Custom Column Pinning UI
관련 API를 통해 사용자 정의 UI를 정의하고 열의 핀 상태를 변경할 수 있습니다.
도구 모음 대신 최종 사용자가 클릭하여 특정 열의 핀 상태를 변경할 수 있는 열 헤더에 핀 아이콘을 정의한다고 가정해 보겠습니다.
이는 사용자 정의 아이콘이 있는 열의 헤더 템플릿을 생성하여 수행할 수 있습니다.
<IgbTreeGrid AutoGenerate="false" Name="treeGrid" @ref="treeGrid" Data="EmployeesFlatData" PrimaryKey="ID" ForeignKey="ParentID">
<IgbColumn Field="Name" DataType="String" Pinned="true"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column1" @ref="column1"></IgbColumn>
<IgbColumn Field="Title" DataType="String" Pinned="true"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column2" @ref="column2"></IgbColumn>
<IgbColumn Field="Phone" DataType="String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column3" @ref="column3"></IgbColumn>
<IgbColumn Field="Age" DataType="Number"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column4" @ref="column4"></IgbColumn>
<IgbColumn Field="HireDate" DataType="Date"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column5" @ref="column5"></IgbColumn>
<IgbColumn Field="OnPTO" DataType="Boolean"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column6" @ref="column6"></IgbColumn>
</IgbTreeGrid>
// In JavaScript
igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
var html = window.igTemplating.html;
window.toggleColumnPin = function toggleColumnPin(field) {
var grid = document.getElementsByTagName("igc-tree-grid")[0];
var col = grid.getColumnByName(field);
col.pinned = !col.pinned;
grid.markForCheck();
}
return html`<div>
<span style="float:left">${ctx.column.field}</span>
<span style="float:right" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
</div>`;
}, false);
razor
Demo
using System;
using System.Collections.Generic;
public class EmployeesFlatDataItem
{
public double Age { get; set; }
public string HireDate { get; set; }
public double ID { get; set; }
public string Name { get; set; }
public string Phone { get; set; }
public bool OnPTO { get; set; }
public double ParentID { get; set; }
public string Title { get; set; }
}
public class EmployeesFlatData
: List<EmployeesFlatDataItem>
{
public EmployeesFlatData()
{
this.Add(new EmployeesFlatDataItem()
{
Age = 55,
HireDate = @"2008-03-20",
ID = 1,
Name = @"Johnathan Winchester",
Phone = @"0251-031259",
OnPTO = false,
ParentID = -1,
Title = @"Development Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 42,
HireDate = @"2014-01-22",
ID = 4,
Name = @"Ana Sanders",
Phone = @"(21) 555-0091",
OnPTO = true,
ParentID = -1,
Title = @"CEO"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 49,
HireDate = @"2014-01-22",
ID = 18,
Name = @"Victoria Lincoln",
Phone = @"(071) 23 67 22 20",
OnPTO = true,
ParentID = -1,
Title = @"Accounting Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 61,
HireDate = @"2010-01-01",
ID = 10,
Name = @"Yang Wang",
Phone = @"(21) 555-0091",
OnPTO = false,
ParentID = -1,
Title = @"Localization Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 43,
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
Phone = @"0452-076545",
OnPTO = true,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 29,
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
Phone = @"(14) 555-8122",
OnPTO = false,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 31,
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
Phone = @"7675-3425",
OnPTO = false,
ParentID = 1,
Title = @"Software Development Team Lead"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 35,
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2009-10-11",
ID = 12,
Name = @"Sven Cooper",
Phone = @"0695-34 67 21",
OnPTO = true,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
Phone = @"981-443655",
OnPTO = false,
ParentID = 4,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 5,
Name = @"Elizabeth Richards",
Phone = @"(2) 283-2951",
OnPTO = true,
ParentID = 4,
Title = @"Vice President"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
Phone = @"981-443655",
OnPTO = true,
ParentID = 5,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 17,
Name = @"Antonio Moreno",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 18,
Title = @"Senior Accountant"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 50,
HireDate = @"2007-11-18",
ID = 7,
Name = @"Pedro Rodriguez",
Phone = @"035-640230",
OnPTO = false,
ParentID = 10,
Title = @"Senior Localization Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 27,
HireDate = @"2016-02-19",
ID = 8,
Name = @"Casey Harper",
Phone = @"0342-023176",
OnPTO = true,
ParentID = 10,
Title = @"Senior Localization"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 15,
Name = @"Patricia Simpson",
Phone = @"069-0245984",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 9,
Name = @"Francisco Chang",
Phone = @"(91) 745 6200",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2018-03-18",
ID = 16,
Name = @"Peter Lewis",
Phone = @"069-0245984",
OnPTO = true,
ParentID = 7,
Title = @"Localization Intern"
});
}
}
csusing 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(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
Data="EmployeesFlatData"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbColumn
Field="Name"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Pinned="true"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="Title"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Pinned="true"
Name="column2"
@ref="column2">
</IgbColumn>
<IgbColumn
Field="Phone"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column3"
@ref="column3">
</IgbColumn>
<IgbColumn
Field="Age"
DataType="GridColumnDataType.Number"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column4"
@ref="column4">
</IgbColumn>
<IgbColumn
Field="HireDate"
DataType="GridColumnDataType.Date"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column5"
@ref="column5">
</IgbColumn>
<IgbColumn
Field="OnPTO"
DataType="GridColumnDataType.Boolean"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column6"
@ref="column6">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
var column1 = this.column1;
var column2 = this.column2;
var column3 = this.column3;
var column4 = this.column4;
var column5 = this.column5;
var column6 = this.column6;
}
private IgbTreeGrid treeGrid;
private IgbColumn column1;
private IgbColumn column2;
private IgbColumn column3;
private IgbColumn column4;
private IgbColumn column5;
private IgbColumn column6;
private EmployeesFlatData _employeesFlatData = null;
public EmployeesFlatData EmployeesFlatData
{
get
{
if (_employeesFlatData == null)
{
_employeesFlatData = new EmployeesFlatData();
}
return _employeesFlatData;
}
}
}
razor
igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
var html = window.igTemplating.html;
window.toggleColumnPin = function toggleColumnPin(field) {
var grid = document.getElementsByTagName("igc-tree-grid")[0];
var col = grid.getColumnByName(field);
col.pinned = !col.pinned;
grid.markForCheck();
}
return html`<div>
<span style="float:left">${ctx.column.field}</span>
<span style="float:right" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
</div>`;
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Pinning Limitations
- 열 너비를 백분율(%)로 설정하면 고정된 열이 있을 때
IgbTreeGrid
본문과 헤더 내용이 잘못 정렬됩니다. 열 고정이 올바르게 작동하려면 열 너비가 픽셀(px) 단위이거나IgbTreeGrid
에 의해 자동 할당되어야 합니다.
Styling
사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드의 ID
설정해야 합니다.
<IgbTreeGrid Id="grid"></IgbTreeGrid>
razor
그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.
#grid {
--ig-grid-pinned-border-width: 5px;
--ig-grid-pinned-border-color: #FFCD0F;
--ig-grid-pinned-border-style: double;
--ig-grid-cell-active-border-color: #FFCD0F;
}
css
Demo
using System;
using System.Collections.Generic;
public class EmployeesFlatDataItem
{
public double Age { get; set; }
public string HireDate { get; set; }
public double ID { get; set; }
public string Name { get; set; }
public string Phone { get; set; }
public bool OnPTO { get; set; }
public double ParentID { get; set; }
public string Title { get; set; }
}
public class EmployeesFlatData
: List<EmployeesFlatDataItem>
{
public EmployeesFlatData()
{
this.Add(new EmployeesFlatDataItem()
{
Age = 55,
HireDate = @"2008-03-20",
ID = 1,
Name = @"Johnathan Winchester",
Phone = @"0251-031259",
OnPTO = false,
ParentID = -1,
Title = @"Development Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 42,
HireDate = @"2014-01-22",
ID = 4,
Name = @"Ana Sanders",
Phone = @"(21) 555-0091",
OnPTO = true,
ParentID = -1,
Title = @"CEO"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 49,
HireDate = @"2014-01-22",
ID = 18,
Name = @"Victoria Lincoln",
Phone = @"(071) 23 67 22 20",
OnPTO = true,
ParentID = -1,
Title = @"Accounting Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 61,
HireDate = @"2010-01-01",
ID = 10,
Name = @"Yang Wang",
Phone = @"(21) 555-0091",
OnPTO = false,
ParentID = -1,
Title = @"Localization Manager"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 43,
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
Phone = @"0452-076545",
OnPTO = true,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 29,
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
Phone = @"(14) 555-8122",
OnPTO = false,
ParentID = 1,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 31,
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
Phone = @"7675-3425",
OnPTO = false,
ParentID = 1,
Title = @"Software Development Team Lead"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 35,
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2009-10-11",
ID = 12,
Name = @"Sven Cooper",
Phone = @"0695-34 67 21",
OnPTO = true,
ParentID = 11,
Title = @"Senior Software Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
Phone = @"981-443655",
OnPTO = false,
ParentID = 4,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 5,
Name = @"Elizabeth Richards",
Phone = @"(2) 283-2951",
OnPTO = true,
ParentID = 4,
Title = @"Vice President"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
Phone = @"981-443655",
OnPTO = true,
ParentID = 5,
Title = @"Director"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 17,
Name = @"Antonio Moreno",
Phone = @"(505) 555-5939",
OnPTO = false,
ParentID = 18,
Title = @"Senior Accountant"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 50,
HireDate = @"2007-11-18",
ID = 7,
Name = @"Pedro Rodriguez",
Phone = @"035-640230",
OnPTO = false,
ParentID = 10,
Title = @"Senior Localization Developer"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 27,
HireDate = @"2016-02-19",
ID = 8,
Name = @"Casey Harper",
Phone = @"0342-023176",
OnPTO = true,
ParentID = 10,
Title = @"Senior Localization"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 15,
Name = @"Patricia Simpson",
Phone = @"069-0245984",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 9,
Name = @"Francisco Chang",
Phone = @"(91) 745 6200",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesFlatDataItem()
{
Age = 25,
HireDate = @"2018-03-18",
ID = 16,
Name = @"Peter Lewis",
Phone = @"069-0245984",
OnPTO = true,
ParentID = 7,
Title = @"Localization Intern"
});
}
}
csusing 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(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS
<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#treeGrid {
--pinned-border-width: 5px;
--pinned-border-style: double;
--pinned-border-color: #FFCD0F;
--cell-active-border-color: #FFCD0F;
}
</style>
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
Data="EmployeesFlatData"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbColumn
Field="Name"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Pinned="true"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="Title"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Pinned="true"
Name="column2"
@ref="column2">
</IgbColumn>
<IgbColumn
Field="Phone"
DataType="GridColumnDataType.String"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column3"
@ref="column3">
</IgbColumn>
<IgbColumn
Field="Age"
DataType="GridColumnDataType.Number"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column4"
@ref="column4">
</IgbColumn>
<IgbColumn
Field="HireDate"
DataType="GridColumnDataType.Date"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column5"
@ref="column5">
</IgbColumn>
<IgbColumn
Field="OnPTO"
DataType="GridColumnDataType.Boolean"
HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
Name="column6"
@ref="column6">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
var column1 = this.column1;
var column2 = this.column2;
var column3 = this.column3;
var column4 = this.column4;
var column5 = this.column5;
var column6 = this.column6;
}
private IgbTreeGrid treeGrid;
private IgbColumn column1;
private IgbColumn column2;
private IgbColumn column3;
private IgbColumn column4;
private IgbColumn column5;
private IgbColumn column6;
private EmployeesFlatData _employeesFlatData = null;
public EmployeesFlatData EmployeesFlatData
{
get
{
if (_employeesFlatData == null)
{
_employeesFlatData = new EmployeesFlatData();
}
return _employeesFlatData;
}
}
}
razor
igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
var html = window.igTemplating.html;
window.toggleColumnPin = function toggleColumnPin(field) {
var grid = document.getElementsByTagName("igc-tree-grid")[0];
var col = grid.getColumnByName(field);
col.pinned = !col.pinned;
grid.markForCheck();
}
return html`<div>
<span style="float:left">${ctx.column.field}</span>
<span style="float:right" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
</div>`;
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#treeGrid {
--pinned-border-width: 5px;
--pinned-border-style: double;
--pinned-border-color: #FFCD0F;
--cell-active-border-color: #FFCD0F;
}
css
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.