Blazor Tree Grid의 Ignite UI for Blazor Keyboard Navigation 기능은 사용자에게 다양한 키보드 상호 작용을 제공합니다. IgbTreeGrid의 접근성을 향상시키고 사용자가 내부의 모든 유형의 요소(셀, 행, 열 머리글, 도구 모음, 바닥글 등)를 탐색할 수 있도록 합니다. 이 기능은 기본적으로 활성화되어 있으며 개발자는 모든 기본 동작을 쉽게 재정의할 수 있습니다.
탐색이 W3C 접근성 표준을 준수하고 사용하기 편리하도록 표 IgbTreeGrid가 축소되었습니다.
Due to this change, navigating between the cells with tab and Shift + Tab is no longer supported in the IgbTreeGrid. Pressing the Tab key now goes through the tab stops in the following order: GroupBy / Toolbar -> Headers -> Body -> Summaries -> Footer / Paginator.
Exposing any focusable element into the IgbTreeGrid body via template may introduce side effects in the keyboard navigation, since the default browser behavior is not prevented. It is the developer's responsibility to prevent or modify it appropriately.
전체 키보드 탐색에서 지원 IgbTreeGrid 이제 헤더가 도입되었습니다. 열 머리글은 화살표 키를 사용하여 쉽게 탐색할 수 있습니다. 또한 다음과 같은 열에서 작업을 트리거하는 여러 키 조합이 있습니다. 필터링, 정렬, 그룹화 그리고 등등. 때 IgbTreeGrid 헤더 컨테이너에 초점이 맞춰져 있는 경우 다음 키 조합을 사용할 수 있습니다.
Key Combinations
↑ 헤더에서 한 셀 위로 이동합니다(반복 없음). 다중 행 레이아웃(MRL) 또는 다중 열 헤더(MCH)가 정의된 경우에만 사용할 수 있습니다.
↓ 헤더에서 한 셀 아래로 이동합니다(줄 바꿈 없음). 다중 행 레이아웃(MRL) 또는 다중 열 헤더(MCH)가 정의된 경우에만 사용할 수 있습니다.
← 한 셀을 왼쪽으로 이동합니다(반복 없음).
→ 한 셀 오른쪽으로 이동합니다(줄 사이에 줄 바꿈 없음).
Ctrl + ←는 행의 가장 왼쪽 셀로 이동합니다. MRL 또는 MCH가 활성화된 경우 동일한 수준의 가장 왼쪽 셀로 이동합니다.
홈은 행의 가장 왼쪽 셀로 이동합니다. MRL 또는 MCH가 활성화된 경우 동일한 수준의 가장 왼쪽 셀로 이동합니다.
Ctrl + → 행의 가장 오른쪽 셀로 이동합니다. MRL 또는 MCH가 활성화된 경우 동일한 수준의 가장 오른쪽 셀로 이동합니다.
End는 행의 가장 오른쪽 셀로 이동합니다. MRL 또는 MCH가 활성화된 경우 동일한 수준의 가장 오른쪽 셀로 이동합니다.
고급 필터링이 활성화된 경우 Alt + L은 고급 필터링 대화 상자를 엽니다.
Ctrl + Shift + L은 Excel 스타일 필터 대화 상자를 열거나 열을 필터링할 수 있는 경우 기본(행) 필터를 엽니다.
Ctrl + ↑는 활성 열 헤더를 ASC 순서로 정렬합니다. 열이 이미 ASC로 정렬되어 있는 경우 정렬 상태가 지워집니다.
Ctrl + ↓는 활성 열 머리글을 DSC 순서로 정렬합니다. DSC에서 열이 이미 정렬된 경우 정렬 상태가 지워집니다.
Space는 열을 선택합니다. 열이 이미 선택된 경우 선택이 취소됩니다.
Shift + Alt + → 열이 그룹화 가능으로 표시된 경우 열의 그룹을 해제합니다.
Alt + ← 또는 Alt + ↑는 헤더가 아직 축소되지 않은 경우 열 그룹 헤더를 축소합니다.
Alt + → 또는 Alt + ↓는 헤더가 아직 확장되지 않은 경우 열 그룹 헤더를 확장합니다.
편집 모드에 셀이 있는 경우에만 탭을 사용할 수 있습니다. 행의 편집 가능한 다음 셀로 포커스를 이동합니다. 행의 마지막 셀에 도달한 후 다음 행의 편집 가능한 첫 번째 셀로 포커스를 이동합니다. 행 편집이 활성화되면 포커스는 가장 오른쪽의 편집 가능한 셀에서 CANCEL 및 DONE 버튼으로 이동하고 DONE 버튼에서 행의 가장 왼쪽의 편집 가능한 셀로 이동됩니다.
Shift + Tab- 편집 모드에 셀이 있는 경우에만 사용할 수 있습니다. 행의 편집 가능한 이전 셀로 포커스를 이동합니다. 행의 첫 번째 셀에 도달한 후 이전 행의 편집 가능한 마지막 셀로 포커스를 이동합니다. 행 편집이 활성화되면 행의 가장 오른쪽 편집 가능한 셀에서 CANCEL 및 DONE 버튼으로 포커스가 이동하고 DONE 버튼에서 행의 가장 오른쪽 편집 가능한 셀로 포커스가 이동됩니다.
Alt + → or Alt + ↓ -
over Group Row - expands the group.
현재 노드를 확장합니다.
아래 데모 샘플에서 위에 언급된 모든 작업을 연습해 보세요. 탐색 가능한 그리드 요소에 초점을 맞추면 해당 요소에 사용 가능한 일부 작업이 포함된 목록이 표시되어 안내됩니다.
Custom Keyboard Navigation
특정 키 또는 키 조합에 대한 기본 동작을 재정의하는 것은 키보드 탐색 기능이 제공하는 이점 중 하나입니다. 예를 들어 다음 셀이나 아래 셀로 이동하려면 Enter 또는 Tab 키를 누르세요. 이 탐색 시나리오나 다른 탐색 시나리오는 키보드 탐색 API를 통해 쉽게 달성할 수 있습니다.
API
설명
인수
GridKeydown
위에서 설명한 키 누름/조합이 수행될 때 발생하는 이벤트입니다. 취소될 수 있습니다. 다른 키 누르기/조합의 경우 기본값을 사용하십시오.onkeydown 이벤트.
// In JavaScript
igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
const args = evtArgs.detail;
const target = args.target;
const evt = args.event;
const type = args.targetType;
const grid = document.getElementById("grid1");
if (type === 'dataCell' && target.editMode && evt.key.toLowerCase() === 'tab') {
// 1. USER INPUT VALIDATION ON TAB
} else if (type === 'dataCell' && evt.key.toLowerCase() === 'enter') {
// 2. CUSTOM NAVIGATION ON ENTER KEY PRESS
}
}, false);
razor
이벤트 인수 값을 기반으로 우리는 자체 논리를 제공할 수 있는 두 가지 사례를 식별했습니다(위 참조). 이제 API의 메서드를 사용하여 원하는 작업을 수행해 보겠습니다. 사용자가 편집 모드에서 셀 위에서 Tab 키를 누르면 입력에 대한 유효성 검사가 수행됩니다. 사용자가 셀 위에서 Enter 키를 누르면 초점이 다음 행의 셀로 이동됩니다.
Please refer to the sample code for full implementation details.
아래 데모를 사용하여 방금 구현한 사용자 지정 시나리오를 시험해 보세요.
숫자 열의 셀을 두 번 클릭하거나 F2 키를 누르고 값을 7로 변경한 다음 Tab 키를 누릅니다. 프롬프트 메시지가 표시됩니다.
셀을 선택하고 Enter 키를 두 번 누릅니다. 키를 누를 때마다 동일한 열 아래의 다음 행에 있는 셀로 초점이 이동합니다.
데모
EXAMPLE
DATA
MODULES
RAZOR
JS
CSS
using System;
using System.Collections.Generic;
publicclassEmployeesNestedDataItem
{
publicdouble ID { get; set; }
publicdouble Age { get; set; }
publicdouble Salary { get; set; }
publicdouble Productivity { get; set; }
publicstring City { get; set; }
publicstring Country { get; set; }
publicstring Phone { get; set; }
publicstring HireDate { get; set; }
publicstring Name { get; set; }
publicstring Title { get; set; }
public List<EmployeesNestedDataItem_EmployeesItem> Employees { get; set; }
}
publicclassEmployeesNestedDataItem_EmployeesItem
{
publicdouble Age { get; set; }
publicdouble Salary { get; set; }
publicdouble Productivity { get; set; }
publicstring City { get; set; }
publicstring Country { get; set; }
publicstring Phone { get; set; }
publicstring HireDate { get; set; }
publicdouble ID { get; set; }
publicstring Name { get; set; }
publicstring Title { get; set; }
}
publicclassEmployeesNestedData
: List<EmployeesNestedDataItem>
{
publicEmployeesNestedData()
{
this.Add(new EmployeesNestedDataItem()
{
ID = 1,
Age = 55,
Salary = 80000,
Productivity = 90,
City = @"Berlin",
Country = @"Germany",
Phone = @"609-202-505",
HireDate = @"2008-03-20",
Name = @"John Winchester",
Title = @"Development Manager",
Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
{
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 43,
Salary = 70000,
Productivity = 80,
City = @"Hamburg",
Country = @"Germany",
Phone = @"609-444-555",
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
Title = @"Senior Software Developer"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 29,
Salary = 60000,
Productivity = 80,
City = @"Munich",
Country = @"Germany",
Phone = @"609-333-444",
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
Title = @"Senior Software Developer"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 31,
Salary = 90000,
Productivity = 80,
City = @"Warasw",
Country = @"Poland",
Phone = @"609-222-205",
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
Title = @"Software Development Team Lead"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 35,
Salary = 70000,
Productivity = 70,
City = @"Koln",
Country = @"Germany",
Phone = @"609-502-525",
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
Title = @"Senior Software Developer"
}}
});
this.Add(new EmployeesNestedDataItem()
{
ID = 4,
Age = 42,
Salary = 90000,
Productivity = 80,
City = @"Kielce",
Country = @"Poland",
Phone = @"609-202-505",
HireDate = @"2014-01-22",
Name = @"Ana Sanders",
Title = @"CEO",
Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
{
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 44,
Salary = 80000,
Productivity = 80,
City = @"Warasw",
Country = @"Poland",
Phone = @"609-202-505",
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
Title = @"Director"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 25,
Salary = 85000,
Productivity = 55,
City = @"Paris",
Country = @"France",
Phone = @"609-202-505",
HireDate = @"2017-11-09",
ID = 5,
Name = @"Elizabeth Richards",
Title = @"Vice President"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 39,
Salary = 88000,
Productivity = 88,
City = @"London",
Country = @"UK",
Phone = @"609-202-505",
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
Title = @"Director"
}}
});
this.Add(new EmployeesNestedDataItem()
{
ID = 18,
Age = 49,
Salary = 77000,
Productivity = 70,
City = @"Manchester",
Country = @"UK",
Phone = @"222-555-577",
HireDate = @"2014-01-22",
Name = @"Victoria Lincoln",
Title = @"Senior Accountant",
Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
{
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 43,
Salary = 70000,
Productivity = 80,
City = @"Hamburg",
Country = @"Germany",
Phone = @"609-444-555",
HireDate = @"2011-06-03",
ID = 23,
Name = @"Thomas Burke",
Title = @"Senior Accountant"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 29,
Salary = 60000,
Productivity = 80,
City = @"Munich",
Country = @"Germany",
Phone = @"609-333-444",
HireDate = @"2009-06-19",
ID = 22,
Name = @"Michael Anderson",
Title = @"Junior Accountant"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 31,
Salary = 90000,
Productivity = 80,
City = @"Warasw",
Country = @"Poland",
Phone = @"609-222-205",
HireDate = @"2014-08-18",
ID = 21,
Name = @"Roland Reyes",
Title = @"Accountant Team Lead"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 35,
Salary = 70000,
Productivity = 70,
City = @"Koln",
Country = @"Germany",
Phone = @"609-502-525",
HireDate = @"2015-09-17",
ID = 24,
Name = @"Monica Mendel",
Title = @"Senior Software Developer"
}}
});
this.Add(new EmployeesNestedDataItem()
{
ID = 10,
Age = 61,
Salary = 85000,
Productivity = 890,
City = @"Lyon",
Country = @"France",
Phone = @"259-266-887",
HireDate = @"2010-01-01",
Name = @"Yang Wang",
Title = @"Localization Developer",
Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
{
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 31,
Salary = 90000,
Productivity = 80,
City = @"Warasw",
Country = @"Poland",
Phone = @"609-222-205",
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
Title = @"Software Development Team Lead"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 35,
Salary = 70000,
Productivity = 70,
City = @"Koln",
Country = @"Germany",
Phone = @"609-502-525",
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
Title = @"Senior Software Developer"
}}
});
this.Add(new EmployeesNestedDataItem()
{
ID = 35,
Age = 35,
Salary = 75000,
Productivity = 75,
City = @"Warasw",
Country = @"Poland",
Phone = @"688-244-844",
HireDate = @"2014-01-22",
Name = @"Janine Munoz",
Title = @"HR",
Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
{
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 43,
Salary = 70000,
Productivity = 80,
City = @"Hamburg",
Country = @"Germany",
Phone = @"609-444-555",
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
Title = @"Senior Software Developer"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 31,
Salary = 90000,
Productivity = 80,
City = @"Warasw",
Country = @"Poland",
Phone = @"609-222-205",
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
Title = @"Software Development Team Lead"
}}
});
this.Add(new EmployeesNestedDataItem()
{
ID = 10,
Age = 49,
Salary = 95000,
Productivity = 80,
City = @"Krakow",
Country = @"Poland",
Phone = @"677-266-555",
HireDate = @"2010-01-01",
Name = @"Yang Wang",
Title = @"Sales Manager",
Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
{
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 29,
Salary = 60000,
Productivity = 80,
City = @"Munich",
Country = @"Germany",
Phone = @"609-333-444",
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
Title = @"Senior Software Developer"
},
new EmployeesNestedDataItem_EmployeesItem()
{
Age = 35,
Salary = 70000,
Productivity = 70,
City = @"Koln",
Country = @"Germany",
Phone = @"609-502-525",
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
Title = @"Senior Software Developer"
}}
});
}
}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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS<divclass="container vertical ig-typography"><divclass="container vertical fill"><IgbTreeGridAutoGenerate="false"Name="treeGrid"
@ref="treeGrid"Id="treeGrid"Data="EmployeesNestedData"ChildDataKey="Employees"RowSelection="GridSelectionMode.Multiple"Moving="true"AllowFiltering="true"GridKeydownScript="WebGridCustomKBNav"><IgbPaginatorPerPage="15"></IgbPaginator><IgbColumnField="Name"Header="Name"DataType="GridColumnDataType.String"Sortable="true"Editable="true"Resizable="true"></IgbColumn><IgbColumnField="HireDate"Header="Hire Date"DataType="GridColumnDataType.Date"Sortable="true"Editable="true"Resizable="true"></IgbColumn><IgbColumnField="Age"Header="Age"DataType="GridColumnDataType.Number"Sortable="true"Editable="true"Resizable="true"></IgbColumn></IgbTreeGrid></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
}
private IgbTreeGrid treeGrid;
private EmployeesNestedData _employeesNestedData = null;
public EmployeesNestedData EmployeesNestedData
{
get
{
if (_employeesNestedData == null)
{
_employeesNestedData = new EmployeesNestedData();
}
return _employeesNestedData;
}
}
}razor
igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
const args = evtArgs.detail;
const target = args.target;
const evt = args.event;
const type = args.targetType;
var grid = args.target.grid;
if (type === 'dataCell' && target.editMode && evt.key.toLowerCase() === 'tab') {
// Value validation for number column.// This covers both 'tab' and 'shift+tab' key interactions.
args.event.preventDefault();
args.cancel = true;
if (target.column.dataType === 'number' && target.editValue < 10) {
alert('The value should be bigger than 10');
return;
}
const cell = evt.shiftKey ?
grid.getPreviousCell(target.row.index, target.column.visibleIndex, (col) => col.editable) :
grid.getNextCell(target.row.index, target.column.visibleIndex, (col) => col.editable);
grid.navigateTo(cell.rowIndex, cell.visibleColumnIndex,
(obj) => { obj.target.activate(); });
} elseif (type === 'dataCell' && evt.key.toLowerCase() === 'enter') {
// Perform column based kb navigation with 'enter' key press
args.cancel = true;
grid.navigateTo(target.row.index + 1, target.column.visibleIndex, (obj) => {
obj.target.activate();
});
}
}, false);
js
/*
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.
Known Limitations
한정
설명
스크롤 가능한 상위 컨테이너를 사용하여 그리드 내부를 탐색합니다.
그리드가 스크롤 가능한 상위 컨테이너 내부에 배치되고 사용자가 보이지 않는 그리드 셀로 이동하는 경우 상위 컨테이너는 스크롤되지 않습니다.
