Blazor Grid 行のピン固定
Blazor Grid の Ignite UI for Blazor 行ピン固定機能を使用すると、1 つまたは複数の行をグリッドの上部または下部にピン固定できます。行ピン固定を使用すると、エンドユーザーは特定の順序で行をピン固定し、IgbGrid
を垂直にスクロールしても常に表示される特別な領域に行を複製できます。Blazor Grid には組み込みの行ピン固定 UI が含まれており、Grid のコンテキストで IgbActionStrip
コンポーネントを初期化することで有効になります。その他、カスタム UI を定義し、行のピン固定 API を介して行のピン固定状態を変更できます。
Blazor Grid 行ピン固定の例
using System;
using System.Collections.Generic;
public class CustomersDataLocalItem
{
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 CustomersDataLocal
: List<CustomersDataLocalItem>
{
public CustomersDataLocal()
{
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"AROUT",
Company = @"Around the Horn",
ContactName = @"Thomas Hardy",
ContactTitle = @"Sales Representative",
Address = @"120 Hanover Sq.",
City = @"London",
Region = @"East",
PostalCode = 15000,
Country = @"UK",
Phone = @"(171) 555-7788",
Fax = @"(171) 555-6750"
});
this.Add(new CustomersDataLocalItem()
{
ID = @"BERGS",
Company = @"Berglunds snabbköp",
ContactName = @"Christina Berglund",
ContactTitle = @"Order Administrator",
Address = @"Berguvsvägen 8",
City = @"Luleå",
Region = @"South",
PostalCode = 44000,
Country = @"Sweden",
Phone = @"0921-12 34 65",
Fax = @"0921-12 34 67"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"BOTTM",
Company = @"Bottom-Dollar Markets",
ContactName = @"Elizabeth Lincoln",
ContactTitle = @"Accounting Manager",
Address = @"23 Tsawassen Blvd.",
City = @"Tsawassen",
Region = @"BC",
PostalCode = 19000,
Country = @"Canada",
Phone = @"(604) 555-4729",
Fax = @"(604) 555-3745"
});
this.Add(new CustomersDataLocalItem()
{
ID = @"BSBEV",
Company = @"B's Beverages",
ContactName = @"Victoria Ashworth",
ContactTitle = @"Sales Representative",
Address = @"Fauntleroy Circus",
City = @"London",
Region = @"South",
PostalCode = 49000,
Country = @"UK",
Phone = @"(171) 555-1212",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"COMMI",
Company = @"Comércio Mineiro",
ContactName = @"Pedro Afonso",
ContactTitle = @"Sales Associate",
Address = @"Av. dos Lusíadas, 23",
City = @"Sao Paulo",
Region = @"SP",
PostalCode = 46000,
Country = @"Brazil",
Phone = @"(11) 555-7647",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataLocalItem()
{
ID = @"CONSH",
Company = @"Consolidated Holdings",
ContactName = @"Elizabeth Brown",
ContactTitle = @"Sales Representative",
Address = @"Berkeley Gardens 12 Brewery",
City = @"London",
Region = @"South",
PostalCode = 12000,
Country = @"UK",
Phone = @"(171) 555-2282",
Fax = @"(171) 555-9199"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"EASTC",
Company = @"Eastern Connection",
ContactName = @"Ann Devon",
ContactTitle = @"Sales Agent",
Address = @"35 King George",
City = @"London",
Region = @"East",
PostalCode = 22000,
Country = @"UK",
Phone = @"(171) 555-0297",
Fax = @"(171) 555-3373"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"FAMIA",
Company = @"Familia Arquibaldo",
ContactName = @"Aria Cruz",
ContactTitle = @"Marketing Assistant",
Address = @"Rua Orós, 92",
City = @"Sao Paulo",
Region = @"SP",
PostalCode = 29000,
Country = @"Brazil",
Phone = @"(11) 555-9857",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"FOLKO",
Company = @"Folk och fä HB",
ContactName = @"Maria Larsson",
ContactTitle = @"Owner",
Address = @"Åkergatan 24",
City = @"Bräcke",
Region = @"East",
PostalCode = 29000,
Country = @"Sweden",
Phone = @"0695-34 67 21",
Fax = @"0695 33-4455"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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"
});
}
}
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(IgbPropertyEditorPanelModule),
typeof(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS
<div class="container vertical ig-typography">
<div class="options vertical">
<IgbPropertyEditorPanel
DescriptionType="WebGrid"
IsHorizontal="true"
IsWrappingEnabled="false"
Name="propertyEditorPanel1"
@ref="propertyEditorPanel1">
<IgbPropertyEditorPropertyDescription
Name="rowPinningEditor"
@ref="rowPinningEditor"
ValueType="PropertyEditorValueType.EnumValue"
Label="Row Pinning toggle"
DropDownNames="@(new string[] { "Top", "Bottom" })"
DropDownValues="@(new string[] { "Top", "Bottom" })"
ChangedScript="WebGridSetRowPinning">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="container vertical fill">
<IgbGrid
AutoGenerate="false"
Name="grid"
@ref="grid"
Id="grid"
Data="CustomersDataLocal"
Pinning="PinningConfig1"
PrimaryKey="ID"
CellSelection="GridSelectionMode.None"
RowEditable="true">
<IgbColumn
Field="Company"
Header="Company"
Width="300px">
</IgbColumn>
<IgbColumn
Field="ContactName"
Header="Name">
</IgbColumn>
<IgbColumn
Field="ContactTitle"
Header="Title">
</IgbColumn>
<IgbColumn
Field="Address"
Header="Address">
</IgbColumn>
<IgbColumn
Field="City"
Header="City">
</IgbColumn>
<IgbColumn
Field="PostalCode"
Header="Postal Code">
</IgbColumn>
<IgbColumn
Field="Phone"
Header="Phone">
</IgbColumn>
<IgbColumn
Field="Fax"
Header="Fax">
</IgbColumn>
<IgbActionStrip
Name="actionStrip"
@ref="actionStrip">
<IgbGridPinningActions
>
</IgbGridPinningActions>
</IgbActionStrip>
</IgbGrid>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var propertyEditorPanel1 = this.propertyEditorPanel1;
var rowPinningEditor = this.rowPinningEditor;
var grid = this.grid;
var actionStrip = this.actionStrip;
this.BindElements = () => {
propertyEditorPanel1.Target = this.grid;
};
this.BindElements();
}
private IgbPropertyEditorPanel propertyEditorPanel1;
private IgbPropertyEditorPropertyDescription rowPinningEditor;
private IgbGrid grid;
private IgbPinningConfig _pinningConfig1 = null;
public IgbPinningConfig PinningConfig1
{
get
{
if (this._pinningConfig1 == null)
{
var pinningConfig1 = new IgbPinningConfig();
pinningConfig1.Rows = RowPinningPosition.Top;
this._pinningConfig1 = pinningConfig1;
}
return this._pinningConfig1;
}
}
private IgbActionStrip actionStrip;
private CustomersDataLocal _customersDataLocal = null;
public CustomersDataLocal CustomersDataLocal
{
get
{
if (_customersDataLocal == null)
{
_customersDataLocal = new CustomersDataLocal();
}
return _customersDataLocal;
}
}
}
razor
igRegisterScript("WebGridSetRowPinning", (sender, evtArgs) => {
var item = sender;
var newVal = item.primitiveValue;
var grid = document.getElementById("treeGrid") || document.getElementById("grid");
grid.pinning.rows = newVal === "Top" ? 0 : 1;
}, 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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
行のピン固定 UI
組み込みの行ピン固定 UI は、IgbGridPinningActions
コンポーネントと IgbActionStrip
コンポーネントを追加することで有効になります。アクション ストリップは、行にカーソルを合わせると自動的に表示され、表示されている行の状態に基づいてピン固定またはピン固定解除ボタンのアイコンが表示されます。ピン固定された行のコピーをビューにスクロールする追加のアクションがピン固定された行ごとに表示されます。
<IgbGrid Width="100%"
Height="100%"
PrimaryKey="Key"
AutoGenerate=true
Data=northwindEmployees
RowEditable=true>
<IgbColumn Field="ID" Editable=false></IgbColumn>
<IgbColumn Field="ContactName"></IgbColumn>
<IgbColumn Field="ContactTitle"></IgbColumn>
<IgbColumn Field="City" Sortable=true></IgbColumn>
<IgbColumn Field="CompanyName" Sortable=true></IgbColumn>
<IgbColumn Field="Fax" Sortable=true></IgbColumn>
<IgbColumn Field="Address" Sortable=true></IgbColumn>
<IgbColumn Field="PostalCode" Sortable=true></IgbColumn>
<IgbColumn Field="Country" Sortable=true></IgbColumn>
<IgbColumn Field="Phone" Sortable=true></IgbColumn>
<IgbActionStrip>
<IgbGridPinningActions></IgbGridPinningActions>
<IgbGridEditingActions></IgbGridEditingActions>
</IgbActionStrip>
</IgbGrid>
razor
行のピン固定 API
行のピン固定は Row
の Pinned
入力によって制御されます。デフォルトでピン固定行は IgbGrid
の上側に固定して描画され、IgbGrid
本体のピン固定されていない行は垂直スクロールされます。
this.Grid.PinRowAsync("ALFKI", 0);
razor
IgbGrid
の PinRow
または UnpinRow
メソッドを使用して ID によって行をピン固定またはピン固定解除できます。
this.Grid.PinRowAsync("ALFKI", 0);
this.Grid.UnpinRowAsync("ALFKI");
razor
注: 行の ID は、グリッドの PrimaryKey
またはレコード インスタンス自体によって定義される主キー値です。両方のメソッドは操作に成功したかどうかを示すブール値を返します。よくある失敗の原因に行がすでにその状態になっていることがあります。
行は、最後にピンされた行の下にピン固定されます。ピン固定行の順序を変更するには、RowPinning
イベントでイベント引数の InsertAtIndex
プロパティを適切な位置インデックスに変更します。
<IgbGrid Width="100%"
Id="grid"
RowPinningScript="rowPinningHandler"
Height="100%"
PrimaryKey="Key"
AutoGenerate="true"
Data="northwindEmployees">
</IgbGrid>
razor
*** In JavaScript ***
function rowPinningHandler(event) {
event.detail.insertAtIndex = 0;
}
igRegisterScript("rowPinningHandler", rowPinningHandler, false);
razor
ピン固定の位置
Pinning
設定オプションを使用して、行のピン固定の位置を変更できます。ピン固定の位置を Top または Bottom のいずれかに設定できます。
Bottom に設定すると、行がピン固定されていない行の後に、グリッドの一番下にレンダリングされます。ピン固定されていない行は垂直にスクロールできますが、ピン固定された行は下側に固定されます。
<IgbGrid Id="grid"
Width="100%"
Height="100%"
Pinning=PinningConfig
PrimaryKey="Key"
AutoGenerate=true
Data=northwindEmployees>
</IgbGrid>
@code {
public string Key = "ID";
private Northwind.EmployeesType[] northwindEmployees = Array.Empty<Northwind.EmployeesType>();
public IgbPinningConfig PinningConfig = new IgbPinningConfig()
{
Rows = RowPinningPosition.Bottom
};
protected override async Task OnInitializedAsync()
{
northwindEmployees = await this.northwindService.GetEmployees() ?? northwindEmployees;
}
}
razor
カスタム行ピン固定 UI
カスタム UI を定義し、関連する API を介して行のピン状態を変更できます。
アイコン付きの追加の列による
アクション ストリップの代わりに、すべての行にピンのアイコンを表示し、エンドユーザーが特定の行のピン状態をクリックして変更できます。 カスタム アイコンを含むセル テンプレートの列を追加することで実行できます。
<IgbColumn Width="70px" BodyTemplateScript="WebGridRowPinCellTemplate"/>
// In Javascript
igRegisterScript("WebGridRowPinCellTemplate", (ctx) => {
var html = window.igTemplating.html;
window.toggleRowPin = function toggleRowPin(index) {
var grid = document.getElementsByTagName("igc-grid")[0];
grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
}
const index = ctx.cell.id.rowIndex;
return html`<div>
<span onpointerdown='toggleRowPin("${index}")'>📌</span>
</div>`;
}, false);
razor
デモ
using System;
using System.Collections.Generic;
public class CustomersDataLocalItem
{
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 CustomersDataLocal
: List<CustomersDataLocalItem>
{
public CustomersDataLocal()
{
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"AROUT",
Company = @"Around the Horn",
ContactName = @"Thomas Hardy",
ContactTitle = @"Sales Representative",
Address = @"120 Hanover Sq.",
City = @"London",
Region = @"East",
PostalCode = 15000,
Country = @"UK",
Phone = @"(171) 555-7788",
Fax = @"(171) 555-6750"
});
this.Add(new CustomersDataLocalItem()
{
ID = @"BERGS",
Company = @"Berglunds snabbköp",
ContactName = @"Christina Berglund",
ContactTitle = @"Order Administrator",
Address = @"Berguvsvägen 8",
City = @"Luleå",
Region = @"South",
PostalCode = 44000,
Country = @"Sweden",
Phone = @"0921-12 34 65",
Fax = @"0921-12 34 67"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"BOTTM",
Company = @"Bottom-Dollar Markets",
ContactName = @"Elizabeth Lincoln",
ContactTitle = @"Accounting Manager",
Address = @"23 Tsawassen Blvd.",
City = @"Tsawassen",
Region = @"BC",
PostalCode = 19000,
Country = @"Canada",
Phone = @"(604) 555-4729",
Fax = @"(604) 555-3745"
});
this.Add(new CustomersDataLocalItem()
{
ID = @"BSBEV",
Company = @"B's Beverages",
ContactName = @"Victoria Ashworth",
ContactTitle = @"Sales Representative",
Address = @"Fauntleroy Circus",
City = @"London",
Region = @"South",
PostalCode = 49000,
Country = @"UK",
Phone = @"(171) 555-1212",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"COMMI",
Company = @"Comércio Mineiro",
ContactName = @"Pedro Afonso",
ContactTitle = @"Sales Associate",
Address = @"Av. dos Lusíadas, 23",
City = @"Sao Paulo",
Region = @"SP",
PostalCode = 46000,
Country = @"Brazil",
Phone = @"(11) 555-7647",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataLocalItem()
{
ID = @"CONSH",
Company = @"Consolidated Holdings",
ContactName = @"Elizabeth Brown",
ContactTitle = @"Sales Representative",
Address = @"Berkeley Gardens 12 Brewery",
City = @"London",
Region = @"South",
PostalCode = 12000,
Country = @"UK",
Phone = @"(171) 555-2282",
Fax = @"(171) 555-9199"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"EASTC",
Company = @"Eastern Connection",
ContactName = @"Ann Devon",
ContactTitle = @"Sales Agent",
Address = @"35 King George",
City = @"London",
Region = @"East",
PostalCode = 22000,
Country = @"UK",
Phone = @"(171) 555-0297",
Fax = @"(171) 555-3373"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"FAMIA",
Company = @"Familia Arquibaldo",
ContactName = @"Aria Cruz",
ContactTitle = @"Marketing Assistant",
Address = @"Rua Orós, 92",
City = @"Sao Paulo",
Region = @"SP",
PostalCode = 29000,
Country = @"Brazil",
Phone = @"(11) 555-9857",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"FOLKO",
Company = @"Folk och fä HB",
ContactName = @"Maria Larsson",
ContactTitle = @"Owner",
Address = @"Åkergatan 24",
City = @"Bräcke",
Region = @"East",
PostalCode = 29000,
Country = @"Sweden",
Phone = @"0695-34 67 21",
Fax = @"0695 33-4455"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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"
});
}
}
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(IgbPropertyEditorPanelModule),
typeof(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbGrid
Name="grid"
@ref="grid"
Data="CustomersDataLocal"
PrimaryKey="ID"
CellSelection="GridSelectionMode.None">
<IgbColumn
Width="70px"
Filterable="false"
Pinned="true"
BodyTemplateScript="WebGridRowPinCellTemplate"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="ID"
Width="150px"
Hidden="true">
</IgbColumn>
<IgbColumn
Field="Company"
Header="Company"
Width="350px">
</IgbColumn>
<IgbColumn
Field="ContactName"
Header="Name">
</IgbColumn>
<IgbColumn
Field="ContactTitle"
Header="Contact Tiasdsadtle">
</IgbColumn>
<IgbColumn
Field="Address">
</IgbColumn>
<IgbColumn
Field="City">
</IgbColumn>
<IgbColumn
Field="PostalCode"
Header="Postal Code">
</IgbColumn>
<IgbColumn
Field="Phone">
</IgbColumn>
<IgbColumn
Field="Fax">
</IgbColumn>
</IgbGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
var column1 = this.column1;
}
private IgbGrid grid;
private IgbColumn column1;
private CustomersDataLocal _customersDataLocal = null;
public CustomersDataLocal CustomersDataLocal
{
get
{
if (_customersDataLocal == null)
{
_customersDataLocal = new CustomersDataLocal();
}
return _customersDataLocal;
}
}
}
razor
igRegisterScript("WebGridRowPinCellTemplate", (ctx) => {
var html = window.igTemplating.html;
window.toggleRowPin = function toggleRowPin(index) {
var grid = document.getElementsByTagName("igc-grid")[0];
grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
}
const index = ctx.cell.id.rowIndex;
return html`<div>
<span onpointerdown='toggleRowPin("${index}")'>📌</span>
</div>`;
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
行ピン固定の制限
- データソースに存在するレコードのみをピン固定できます。
- 行のピン固定状態は Excel にエクスポートされません。グリッドは行のピン固定が適用されずにエクスポートされます。
- グリッドのスクロール可能領域におけるピン固定行のコピーは、ピン固定行が存在する状態で他のグリッド機能が動作するのに不可欠な役割を果たします。そのため、その生成を無効化または削除することはできません。
- 行選択 は 行 ID のみで動作するため、ピン固定行を選択するとそのコピーも選択されます (逆も同様)。さらに、ピン固定領域での範囲選択 (Shift + クリックにより) は、スクロール可能な領域で行を範囲選択する場合と同じように機能します。結果として、間にある行はピン固定されていなくてもすべて選択されます。API を 介して選択した行を取得すると、選択した各レコードの単一のインスタンスのみを返します。
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
<IgbGrid class="grid"></IgbGrid>
razor
次に、そのクラスに関連する CSS プロパティを設定します。
.grid {
--ig-grid-pinned-border-width: 5px;
--ig-grid-pinned-border-style: double;
--ig-grid-pinned-border-color: #FFCD0F;
--ig-grid-cell-active-border-color: #FFCD0F;
}
css
デモ
using System;
using System.Collections.Generic;
public class CustomersDataLocalItem
{
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 CustomersDataLocal
: List<CustomersDataLocalItem>
{
public CustomersDataLocal()
{
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"AROUT",
Company = @"Around the Horn",
ContactName = @"Thomas Hardy",
ContactTitle = @"Sales Representative",
Address = @"120 Hanover Sq.",
City = @"London",
Region = @"East",
PostalCode = 15000,
Country = @"UK",
Phone = @"(171) 555-7788",
Fax = @"(171) 555-6750"
});
this.Add(new CustomersDataLocalItem()
{
ID = @"BERGS",
Company = @"Berglunds snabbköp",
ContactName = @"Christina Berglund",
ContactTitle = @"Order Administrator",
Address = @"Berguvsvägen 8",
City = @"Luleå",
Region = @"South",
PostalCode = 44000,
Country = @"Sweden",
Phone = @"0921-12 34 65",
Fax = @"0921-12 34 67"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"BOTTM",
Company = @"Bottom-Dollar Markets",
ContactName = @"Elizabeth Lincoln",
ContactTitle = @"Accounting Manager",
Address = @"23 Tsawassen Blvd.",
City = @"Tsawassen",
Region = @"BC",
PostalCode = 19000,
Country = @"Canada",
Phone = @"(604) 555-4729",
Fax = @"(604) 555-3745"
});
this.Add(new CustomersDataLocalItem()
{
ID = @"BSBEV",
Company = @"B's Beverages",
ContactName = @"Victoria Ashworth",
ContactTitle = @"Sales Representative",
Address = @"Fauntleroy Circus",
City = @"London",
Region = @"South",
PostalCode = 49000,
Country = @"UK",
Phone = @"(171) 555-1212",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"COMMI",
Company = @"Comércio Mineiro",
ContactName = @"Pedro Afonso",
ContactTitle = @"Sales Associate",
Address = @"Av. dos Lusíadas, 23",
City = @"Sao Paulo",
Region = @"SP",
PostalCode = 46000,
Country = @"Brazil",
Phone = @"(11) 555-7647",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataLocalItem()
{
ID = @"CONSH",
Company = @"Consolidated Holdings",
ContactName = @"Elizabeth Brown",
ContactTitle = @"Sales Representative",
Address = @"Berkeley Gardens 12 Brewery",
City = @"London",
Region = @"South",
PostalCode = 12000,
Country = @"UK",
Phone = @"(171) 555-2282",
Fax = @"(171) 555-9199"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"EASTC",
Company = @"Eastern Connection",
ContactName = @"Ann Devon",
ContactTitle = @"Sales Agent",
Address = @"35 King George",
City = @"London",
Region = @"East",
PostalCode = 22000,
Country = @"UK",
Phone = @"(171) 555-0297",
Fax = @"(171) 555-3373"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"FAMIA",
Company = @"Familia Arquibaldo",
ContactName = @"Aria Cruz",
ContactTitle = @"Marketing Assistant",
Address = @"Rua Orós, 92",
City = @"Sao Paulo",
Region = @"SP",
PostalCode = 29000,
Country = @"Brazil",
Phone = @"(11) 555-9857",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
ID = @"FOLKO",
Company = @"Folk och fä HB",
ContactName = @"Maria Larsson",
ContactTitle = @"Owner",
Address = @"Åkergatan 24",
City = @"Bräcke",
Region = @"East",
PostalCode = 29000,
Country = @"Sweden",
Phone = @"0695-34 67 21",
Fax = @"0695 33-4455"
});
this.Add(new CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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 CustomersDataLocalItem()
{
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"
});
}
}
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(IgbGridModule),
typeof(IgbActionStripModule)
);
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/
*/
#grid {
--ig-grid-pinned-border-width: 5px;
--ig-grid-pinned-border-style: double;
--ig-grid-pinned-border-color: #FFCD0F;
--ig-grid-cell-active-border-color: #FFCD0F;
}
</style>
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbGrid
AutoGenerate="false"
Name="grid"
@ref="grid"
Id="grid"
Data="CustomersDataLocal"
PrimaryKey="ID"
CellSelection="GridSelectionMode.None"
RenderedScript="WebGridPinRowOnRendered"
Pinning="PinningConfig1">
<IgbColumn
Name="Company"
@ref="company"
Field="Company"
Header="Company"
Width="300px">
</IgbColumn>
<IgbColumn
Name="ContactName"
@ref="contactName"
Field="ContactName"
Header="Name">
</IgbColumn>
<IgbColumn
Name="ContactTitle"
@ref="contactTitle"
Field="ContactTitle"
Header="Title">
</IgbColumn>
<IgbColumn
Name="Address"
@ref="address"
Field="Address"
Header="Address">
</IgbColumn>
<IgbColumn
Name="City"
@ref="city"
Field="City"
Header="City">
</IgbColumn>
<IgbColumn
Name="PostalCode"
@ref="postalCode"
Field="PostalCode"
Header="Postal Code">
</IgbColumn>
<IgbColumn
Name="Phone"
@ref="phone"
Field="Phone"
Header="Phone">
</IgbColumn>
<IgbColumn
Name="Fax"
@ref="fax"
Field="Fax"
Header="Fax">
</IgbColumn>
<IgbActionStrip
>
<IgbGridPinningActions
>
</IgbGridPinningActions>
</IgbActionStrip>
</IgbGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
var company = this.company;
var contactName = this.contactName;
var contactTitle = this.contactTitle;
var address = this.address;
var city = this.city;
var postalCode = this.postalCode;
var phone = this.phone;
var fax = this.fax;
}
private IgbGrid grid;
private IgbPinningConfig _pinningConfig1 = null;
public IgbPinningConfig PinningConfig1
{
get
{
if (this._pinningConfig1 == null)
{
var pinningConfig1 = new IgbPinningConfig();
pinningConfig1.Rows = RowPinningPosition.Top;
this._pinningConfig1 = pinningConfig1;
}
return this._pinningConfig1;
}
}
private IgbColumn company;
private IgbColumn contactName;
private IgbColumn contactTitle;
private IgbColumn address;
private IgbColumn city;
private IgbColumn postalCode;
private IgbColumn phone;
private IgbColumn fax;
private CustomersDataLocal _customersDataLocal = null;
public CustomersDataLocal CustomersDataLocal
{
get
{
if (_customersDataLocal == null)
{
_customersDataLocal = new CustomersDataLocal();
}
return _customersDataLocal;
}
}
}
razor
igRegisterScript("WebGridPinRowOnRendered", (event) => {
var grid = document.getElementById("grid");
grid.pinRow("ALFKI");
grid.pinRow("AROUT");
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#grid {
--ig-grid-pinned-border-width: 5px;
--ig-grid-pinned-border-style: double;
--ig-grid-pinned-border-color: #FFCD0F;
--ig-grid-cell-active-border-color: #FFCD0F;
}
css
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。