[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Blazor Column Types
Ignite UI for Blazor 5가지 열 유형과 템플릿 열 유형을 지원하여 Blazor 데이터 그리드에 데이터가 표시되는 방식에 대한 완전한 유연성을 제공합니다. 지원되는 열 유형은 텍스트 열, 숫자 열, 날짜/시간 열, 이미지 열, ComboBox 및 템플릿입니다.
각 열은 Field
속성을 Blazor 데이터 그리드에 바인딩된 기본 데이터 소스 항목의 해당 속성 이름으로 설정하여 데이터에 바인딩됩니다.
Blazor Column Types Example
Text Column
Blazor 데이터 그리드는 연결된 셀에 서식이 지정된 텍스트를 표시하는 데 사용됩니다. 문자열 유형의 데이터를 표시하는 데 사용되는 기본 열 유형입니다.
Numeric Column
IgbNumericColumn
은 관련 셀에 서식이 지정된 숫자 값을 표시하는 데 사용되며 셀 내 소수점 자리 배치를 제어하고 소수 자릿수를 표시할 수 있습니다.
DateTime Column
IgbDateTimeColumn
은 연결된 셀에 Date 개체를 표시하는 데 사용되며 원하는 대로 Date 개체의 형식을 지정하도록 제어할 수 있습니다.
Image Column
IgbImageColumn
은 셀 내의 이미지를 표시하는 데 사용되며 ImageStretchOption
옵션을 사용하여 셀에 대한 이미지 늘이기 사용자 정의 옵션을 표시합니다.
ImageResourceType
옵션을 설정하여 이미지의 리소스 유형을 선택할 수도 있습니다.
ComboBox Column
IgbComboBoxColumn
은 최종 사용자가 단일 항목을 선택할 수 있는 드롭다운 목록을 표시하는 데 사용됩니다.
열의 DataSource
속성을 통해 복잡한 개체의 배열을 사용하여 데이터 바인딩을 수행할 수 있습니다.
TextField
속성은 사용자가 선택할 때 표시되는 값을 결정합니다.
ValueField
속성은 선택한 기본 데이터 항목의 바인딩된 값을 결정합니다. 이는 개체 목록에 여러 속성이 있는 경우 필요합니다.
Template Column
IgbTemplateColumn
은 셀 템플릿과 함께 사용됩니다. 이를 통해 열의 셀에 사용자 정의 템플릿을 적용할 수 있습니다. 이는 템플릿 열의 CellUpdating
이벤트를 처리하여 수행됩니다.
CellUpdating
이벤트의 인수는 이벤트를 실행하는 IgbTemplateColumn
과 IgbTemplateCellUpdatingEventArgs
매개 변수를 노출합니다. 이 이벤트 인수 매개변수는 열의 관련 셀 내에 배치될 HTMLDivElement를 반환하는 Content
속성을 노출합니다. 그런 다음 이 div에 새 요소를 추가할 수 있습니다.
IgbTemplateCellUpdatingEventArgs
는 TemplateCellInfo
개체를 가져오는 데 사용할 수 있는 CellInfo
속성도 노출합니다. 이 개체는 인덱스, 기본 데이터 항목, 셀 모양 등 셀과 행에 대한 정보를 노출합니다.
Sparkline Column
IgbTemplateColumn
에 Sparkline 구성 요소를 포함하여 더 복잡한 데이터 구조를 표시할 수 있습니다. 이 작업을 수행하는 방법에 대한 자세한 내용은 열 스파크라인 항목을 참조하세요.
Code Snippet
다음은 이 주제에 설명된 각 열의 구현을 보여줍니다.
다음은 위 열에 사용할 샘플 데이터 소스입니다.
<IgbDataGrid Height="100%" Width="100%"
DefaultColumnMinWidth="120"
AutoGenerateColumns="false"
DataSource="DataSource">
<IgbTextColumn Field="FirstName" HeaderText="First Name" />
<IgbTextColumn Field="LastName" HeaderText="Last Name" />
<IgbComboBoxColumn Field="City" />
<IgbTemplateColumn Field="Address" HeaderText="Address" CellUpdatingScript="onUpdatingAddressColumn" />
<IgbImageColumn Field="Photo" HeaderText="Photo" />
<IgbNumericColumn Field="Age" HeaderText="Age" />
<IgbDateTimeColumn Field="Birthday" HeaderText="Date of Birth" />
</IgbDataGrid>
// In JS file:
function onUpdatingAddressColumn(grid, args) {
let content = args.content;
let info = args.cellInfo;
let item = info.rowItem;
let span1 = null;
let span2 = null;
if (content.childElementCount === 0) {
content.style.fontFamily = "Verdana";
content.style.fontSize = "13px";
content.style.verticalAlign = "center";
content.style.lineHeight = "normal";
content.style.display = "flex";
content.style.flexDirection = "column";
content.style.justifyContent = "center";
content.style.height = "100%";
content.style.width = "100%";
content.style.color = "rgb(24, 29, 31)";
// stacking above elements in the content of grid's cell
span1 = document.createElement("span");
span2 = document.createElement("span");
content.appendChild(span1);
content.appendChild(span2);
}
else {
span1 = content.children[0];
span2 = content.children[1];
}
if (span1 && span2) {
// updating elements in the content of grid's cell
span1.textContent = item.Street;
span2.textContent = item.City + ", " + item.Country;
}
}
igRegisterScript("onUpdatingAddressColumn", onUpdatingAddressColumn, false);
API References
IgbGrid
CellInfo
CellUpdating
IgbComboBoxColumn
Content
DataSource
IgbDateTimeColumn
Field
IgbImageColumn
ImageResourceType
ImageStretchOption
IgbNumericColumn
TemplateCellInfo
IgbTemplateCellUpdatingEventArgs
IgbTemplateColumn
TextField
ValueField