セルを選択して 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
このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
