Blazor Grid の複数行レイアウト

Grid のレンダリング機能を拡張します。この機能により、単一のデータレコードを複数の表示行に分割することができます。

すぐに使用できる機能のフルセット は、ページング、ソート、フィルタリング、編集、グループ化から行と列の仮想化まで、あらゆる機能をカバーします。.NET 開発者には制限はありません。

無料で試してみる

Blazor Grid 複数行レイアウトの例

EXAMPLE

DATA

MODULES

RAZOR

CSS

using System;
using System.Collections.Generic;
public class CustomersDataItem
{
    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 CustomersData
    : List<CustomersDataItem>
{
    public CustomersData()
    {
        this.Add(new CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            ID = @"AROUT",
            Company = @"Around the Horn",
            ContactName = @"Thomas Hardy",
            ContactTitle = @"Sales Representative",
            Address = @"120 Hanover Sq.",
            City = @"London",
            Region = @"East",
            PostalCode = 22000,
            Country = @"UK",
            Phone = @"(171) 555-7788",
            Fax = @"(171) 555-6750"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"BERGS",
            Company = @"Berglunds snabbköp",
            ContactName = @"Christina Berglund",
            ContactTitle = @"Order Administrator",
            Address = @"Berguvsvägen 8",
            City = @"Luleå",
            Region = @"South",
            PostalCode = 17000,
            Country = @"Sweden",
            Phone = @"0921-12 34 65",
            Fax = @"0921-12 34 67"
        });
        this.Add(new CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            ID = @"BOTTM",
            Company = @"Bottom-Dollar Markets",
            ContactName = @"Elizabeth Lincoln",
            ContactTitle = @"Accounting Manager",
            Address = @"23 Tsawassen Blvd.",
            City = @"Tsawassen",
            Region = @"BC",
            PostalCode = 28000,
            Country = @"Canada",
            Phone = @"(604) 555-4729",
            Fax = @"(604) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"BSBEV",
            Company = @"B's Beverages",
            ContactName = @"Victoria Ashworth",
            ContactTitle = @"Sales Representative",
            Address = @"Fauntleroy Circus",
            City = @"London",
            Region = @"South",
            PostalCode = 10000,
            Country = @"UK",
            Phone = @"(171) 555-1212",
            Fax = @"(5) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            ID = @"COMMI",
            Company = @"Comércio Mineiro",
            ContactName = @"Pedro Afonso",
            ContactTitle = @"Sales Associate",
            Address = @"Av. dos Lusíadas, 23",
            City = @"Sao Paulo",
            Region = @"SP",
            PostalCode = 34000,
            Country = @"Brazil",
            Phone = @"(11) 555-7647",
            Fax = @"(5) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"CONSH",
            Company = @"Consolidated Holdings",
            ContactName = @"Elizabeth Brown",
            ContactTitle = @"Sales Representative",
            Address = @"Berkeley Gardens 12 Brewery",
            City = @"London",
            Region = @"South",
            PostalCode = 27000,
            Country = @"UK",
            Phone = @"(171) 555-2282",
            Fax = @"(171) 555-9199"
        });
        this.Add(new CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            ID = @"EASTC",
            Company = @"Eastern Connection",
            ContactName = @"Ann Devon",
            ContactTitle = @"Sales Agent",
            Address = @"35 King George",
            City = @"London",
            Region = @"East",
            PostalCode = 41000,
            Country = @"UK",
            Phone = @"(171) 555-0297",
            Fax = @"(171) 555-3373"
        });
        this.Add(new CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            ID = @"FAMIA",
            Company = @"Familia Arquibaldo",
            ContactName = @"Aria Cruz",
            ContactTitle = @"Marketing Assistant",
            Address = @"Rua Orós, 92",
            City = @"Sao Paulo",
            Region = @"SP",
            PostalCode = 27000,
            Country = @"Brazil",
            Phone = @"(11) 555-9857",
            Fax = @"(5) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            ID = @"FOLKO",
            Company = @"Folk och fä HB",
            ContactName = @"Maria Larsson",
            ContactTitle = @"Owner",
            Address = @"Åkergatan 24",
            City = @"Bräcke",
            Region = @"East",
            PostalCode = 36000,
            Country = @"Sweden",
            Phone = @"0695-34 67 21",
            Fax = @"0695 33-4455"
        });
        this.Add(new CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            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 CustomersDataItem()
        {
            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"
        });
    }
}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 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)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbGrid
        Name="grid"
        @ref="grid"
        Data="CustomersData"
        RowEditable="true"
        AllowFiltering="true"
        FilterMode="FilterMode.ExcelStyleFilter"
        PrimaryKey="Company"
        GroupingExpressions="GroupingExpression1">
            <IgbGridToolbar
            >
                <IgbGridToolbarTitle
                >
                </IgbGridToolbarTitle>

                <IgbGridToolbarActions
                >
                    <IgbGridToolbarPinning
                    >
                    </IgbGridToolbarPinning>

                    <IgbGridToolbarHiding
                    >
                    </IgbGridToolbarHiding>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumnLayout
            Header="ID">
                <IgbColumn
                Field="ID"
                RowStart="1"
                ColStart="1"
                RowEnd="3"
                Filterable="false"
                Width="150px">
                </IgbColumn>

            </IgbColumnLayout>

            <IgbColumnLayout
            Pinned="true"
            Header="Contact Details">
                <IgbColumn
                Field="Company"
                Header="Company"
                RowStart="1"
                ColStart="1"
                ColEnd="3"
                Sortable="true"
                Width="350px">
                </IgbColumn>

                <IgbColumn
                Field="ContactName"
                Header="Name"
                RowStart="2"
                ColStart="1"
                ColEnd="2"
                Groupable="true">
                </IgbColumn>

                <IgbColumn
                Field="ContactTitle"
                Header="Title"
                RowStart="2"
                ColStart="2"
                ColEnd="3"
                Groupable="true">
                </IgbColumn>

            </IgbColumnLayout>

            <IgbColumnLayout
            Pinned="false"
            Header="Address Details">
                <IgbColumn
                Field="Country"
                RowStart="1"
                ColStart="1"
                ColEnd="3"
                Groupable="true"
                Filterable="false"
                Width="220px">
                </IgbColumn>

                <IgbColumn
                Field="Region"
                RowStart="1"
                ColStart="3"
                ColEnd="5"
                Groupable="true"
                Filterable="false"
                Width="220px">
                </IgbColumn>

                <IgbColumn
                Field="PostalCode"
                RowStart="1"
                ColStart="5"
                ColEnd="7"
                Groupable="true"
                Filterable="false"
                Width="220px">
                </IgbColumn>

                <IgbColumn
                Field="City"
                RowStart="2"
                ColStart="1"
                ColEnd="4"
                Groupable="true"
                Filterable="false"
                Width="220px">
                </IgbColumn>

                <IgbColumn
                Field="Address"
                RowStart="2"
                ColStart="4"
                ColEnd="7"
                Filterable="false">
                </IgbColumn>

            </IgbColumnLayout>

            <IgbColumnLayout
            Header="Phone Details">
                <IgbColumn
                Field="Phone"
                RowStart="1"
                ColStart="1"
                ColEnd="2"
                Filterable="false"
                Width="220px">
                </IgbColumn>

                <IgbColumn
                Field="Fax"
                RowStart="2"
                ColStart="1"
                ColEnd="2"
                Filterable="false"
                Width="220px">
                </IgbColumn>

            </IgbColumnLayout>

        </IgbGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var grid = this.grid;

    }

    private IgbGrid grid;
    private IgbGroupingExpression[] _groupingExpression1 = null;
    public IgbGroupingExpression[] GroupingExpression1
    {
        get
        {
            if (this._groupingExpression1 == null)
            {
                var groupingExpression1 = new IgbGroupingExpression[1];
                var groupingExpression2 = new IgbGroupingExpression();
                groupingExpression2.FieldName = "Country";
                groupingExpression2.IgnoreCase = false;
                groupingExpression2.Dir = SortingDirection.Asc;
                groupingExpression1[0] = groupingExpression2;
                this._groupingExpression1 = groupingExpression1;
            }
            return this._groupingExpression1;
        }
    }

    private CustomersData _customersData = null;
    public CustomersData CustomersData
    {
        get
        {
            if (_customersData == null)
            {
                _customersData = new CustomersData();
            }
            return _customersData;
        }
    }

}razorコピー

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssコピー

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

複数行レイアウトの宣言は、IgbColumnLayout コンポーネントによって実現されます。各 IgbColumnLayout コンポーネントは、単一または複数の IgbColumn コンポーネントを含むブロックと見なします。一部のグリッド機能はブロック レベルで機能します (下記の「機能の統合」セクション参照)。たとえば、仮想化ではブロックを使用して仮想チャンクを決定します。そのため、レイアウトで許容される場合は、パフォーマンスを向上させるために列を更に IgbColumnLayout ブロックに分割します。複数行のレイアウトを設定するときは、これらのブロックの外側に列がなく、IgbColumnGroup を使用しないでください。複数行のレイアウトは、グリッド レイアウト仕様上に実装されており、その要件に準拠する必要があります。

IgbColumn は各セルの位置と範囲を決めるために 4 つの IgbInput プロパティを公開します。

• ColStart - フィールドの開始位置となる列インデックス。このプロパティは必須です。
• RowStart - フィールドの開始位置となる行インデックス。このプロパティは必須です。
• ColEnd - 現在のフィールドが終了する位置の列インデックス。colStart と colEnd の間の列数によって、そのフィールドまでの列の幅が決まります。このプロパティはオプションです。設定されていない場合、デフォルトは colStart + 1 になります。
• RowEnd - 現在のフィールドが終了する行インデックス。rowStart と rowEnd の間の行数によって、そのフィールドにまたがる行数が決まります。このプロパティはオプションです。設定されていない場合は、デフォルトで rowStart + 1 に設定されます。

<IgbColumnLayout>
    <IgbColumn RowStart="1" RowEnd="3" ColStart="1" Field="ID"></IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout>
    <IgbColumn RowStart="1" ColStart="1" ColEnd="3" Field="CompanyName"></IgbColumn>
    <IgbColumn RowStart="2" ColStart="1" ColEnd="2" Field="ContactName"></IgbColumn>
    <IgbColumn RowStart="2" ColStart="2" ColEnd="3" Field="ContactTitle"></IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout>
    <IgbColumn RowStart="1" ColStart="1" ColEnd="3" Field="Country"></IgbColumn>
    <IgbColumn RowStart="1" ColStart="3" ColEnd="5" Field="Region"></IgbColumn>
    <IgbColumn RowStart="1" ColStart="5" ColEnd="7" Field="PostalCode"></IgbColumn>
    <IgbColumn RowStart="2" ColStart="1" ColEnd="4" Field="City"></IgbColumn>
    <IgbColumn RowStart="2" ColStart="4" ColEnd="7" Field="Address"></IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout>
    <IgbColumn RowStart="1" ColStart="1" Field="Phone"></IgbColumn>
    <IgbColumn RowStart="2" ColStart="1" Field="Fax"></IgbColumn>
</IgbColumnLayout>
razor

上記の設定の結果は、以下のスクリーンショットで確認できます。

RowStart と ColStart プロパティは、IgbColumnLayout 内の各 IgbColumn に設定する必要があります。IgbColumnLayout コンポーネントはレイアウトが正しいかどうかを検証しておらず、それについてエラーや警告をスローしません。開発者は、レイアウトの宣言が正しく、完全であることを確認し、誤った配置、オーバーラップ、ブラウザーでの不整合、レイアウトの崩れなどを回避する必要があります。

機能の統合

複数行レイアウトのレンダリング方法は全く異なるため、列ピン固定や列非表示など一部の列機能は IgbColumnLayout コンポーネントでのみ機能します。その他の機能ソートとグループ化などは、IgbColumn コンポーネントで同じように機能します。

• フィルタリング - Excel スタイルのフィルタリングのみがサポートされています。FilterMode を FilterMode.quickFilter に明示的に設定しても効果はありません。
• ページング - 表示行ではなくレコードで機能します。
• グループ化 - HideGroupedColumns オプションは、複数行レイアウトでは効果がありません。グループ化された列は常に表示されます。

以下の機能は現在サポートされません。

• 列の移動
• 複数列ヘッダー
• Excel へのエクスポート
• 集計

キーボード ナビゲーション

複数行レイアウトを持つ IgbGrid は、ビルトインのキーボード ナビゲーションを提供します。

水平ナビゲーション

• ← または → は、現在行内の左右に隣接するセルに移動します。定義されている列レイアウトの影響を受けません。現在のセルが複数の行にまたがる場合は、他の隣接するセルへ移動した場合を除き、← と → は、同じ rowStart で左右の最初のセルに移動します。ナビゲーションはナビゲーション開始セルを格納し、可能であれば同じ rowStart を持つセルに移動します。
• Ctrl + ← (HOME) または Ctrl + → (END) - 行の先頭または末尾に移動し、ナビゲーション開始セルに従ってセルを選択します。

垂直ナビゲーション

• ↑ または ↓ - 開始位置に対して上下のセルに移動し、行の影響は受けません。現在のセルが複数の列にまたがる場合は、次のアクティブ セルがナビゲーション開始セルに従って選択されます。
• Ctrl + ↑ または Ctrl + ↓ - 最初の行または最後の行の同じ列に移動してフォーカスを適用します。
• Ctrl + Home または Ctrl + End - 最初の行に移動して最初のセルに移動するか、最後のセルに移動します。最後のセルに移動してフォーカスを合わせます。

複数の行または列にわたるセルを介したナビゲーションは、ナビゲーション開始セルに従って行われ、反対方向のキーを使用して開始セルに戻ることができます。グループ行を移動するときにも同じ方法が使用されます。

選択と複数セル選択はレイアウトで使用できます。つまり、セルがアクティブになると、そのレイアウトが選択されます。ドラッグ選択などの複数選択のすべての機能も適用可能であり、セルごとではなくレイアウトごとに機能します。

カスタム キーボード ナビゲーション

グリッドでは、特定のキーが押されたときのデフォルトのナビゲーション動作をカスタマイズできます。隣りのセルまたは下のセルへ移動するような操作は、キーボード ナビゲーション API を使用して簡単に処理できます。

• GridKeydown が公開されています。イベントは IGridKeydownEventArgs を発生します。このイベントは、キーボードで上記のキー組み合わせを介してのみ使用できます。他のすべてのキー操作では、KeyDown イベントを使用できます。
• NavigateTo - このメソッドを使用すると、提供された RowIndex と VisibleColumnIndex に基づいて位置に移動できます。

以下のデモでは、Excel と同じように、Enter と Shift + Enter キーを使って追加のナビゲーションを使用します。

デモ

EXAMPLE

DATA

MODULES

RAZOR

JS

CSS

using System;
using System.Collections.Generic;
public class CompanyDataItem
{
    public string ID { get; set; }
    public string Company { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public double LifetimeSales { get; set; }
    public double QuarterlySales { get; set; }
    public double YearlySales { get; set; }
    public double MarketPotential { get; set; }
    public double AssetsCash { get; set; }
    public double AccountsReceivable { get; set; }
    public double AssetsBooks { get; set; }
}

public class CompanyData
    : List<CompanyDataItem>
{
    public CompanyData()
    {
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1000",
            Company = @"Sportan",
            Address = @"Rapelye Street",
            City = @"Oceola",
            Country = @"VU",
            LifetimeSales = 40882580.18,
            QuarterlySales = 430845.78,
            YearlySales = 1197420.17,
            MarketPotential = 4210805124.61,
            AssetsCash = 264714.71,
            AccountsReceivable = 63084.44,
            AssetsBooks = 7534.74
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1001",
            Company = @"Bugsall",
            Address = @"Hoyt Street",
            City = @"Rosine",
            Country = @"FM",
            LifetimeSales = 29231147.89,
            QuarterlySales = 227299.97,
            YearlySales = 1486467.06,
            MarketPotential = 2505447478.96,
            AssetsCash = 370690.39,
            AccountsReceivable = 69242.24,
            AssetsBooks = 12507.92
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1002",
            Company = @"Hydrocom",
            Address = @"Sunnyside Court",
            City = @"Cornfields",
            Country = @"KE",
            LifetimeSales = 35628528.18,
            QuarterlySales = 226007.91,
            YearlySales = 1092555.78,
            MarketPotential = 4930069033.99,
            AssetsCash = 403038.64,
            AccountsReceivable = 56183.05,
            AssetsBooks = 8113.52
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1003",
            Company = @"Eclipto",
            Address = @"Remsen Avenue",
            City = @"Orin",
            Country = @"TZ",
            LifetimeSales = 20178683.42,
            QuarterlySales = 319645.81,
            YearlySales = 1249194.57,
            MarketPotential = 2488740024.16,
            AssetsCash = 237368.76,
            AccountsReceivable = 50048.48,
            AssetsBooks = 13100.31
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1004",
            Company = @"Paprikut",
            Address = @"Bay Parkway",
            City = @"Motley",
            Country = @"LR",
            LifetimeSales = 25575955.42,
            QuarterlySales = 347046.85,
            YearlySales = 1611555.66,
            MarketPotential = 1923959087.58,
            AssetsCash = 235064.57,
            AccountsReceivable = 74596.25,
            AssetsBooks = 17057.85
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1005",
            Company = @"Unia",
            Address = @"Richards Street",
            City = @"Herlong",
            Country = @"DZ",
            LifetimeSales = 13462122.23,
            QuarterlySales = 368636.73,
            YearlySales = 489642.54,
            MarketPotential = 1679474693.72,
            AssetsCash = 498174.1,
            AccountsReceivable = 92476.88,
            AssetsBooks = 6961.9
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1006",
            Company = @"Isologix",
            Address = @"Williams Court",
            City = @"Marysville",
            Country = @"JO",
            LifetimeSales = 38448387.27,
            QuarterlySales = 298248.71,
            YearlySales = 1904695.32,
            MarketPotential = 4696918929,
            AssetsCash = 383266.93,
            AccountsReceivable = 76247.35,
            AssetsBooks = 6818.03
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1007",
            Company = @"Deepends",
            Address = @"Independence Avenue",
            City = @"Riegelwood",
            Country = @"NO",
            LifetimeSales = 13730298.02,
            QuarterlySales = 323612.72,
            YearlySales = 953860.54,
            MarketPotential = 4825809829.87,
            AssetsCash = 416146.08,
            AccountsReceivable = 62282.5,
            AssetsBooks = 13686.42
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1008",
            Company = @"Quantasis",
            Address = @"Berriman Street",
            City = @"Unionville",
            Country = @"ID",
            LifetimeSales = 19875841.19,
            QuarterlySales = 468274.38,
            YearlySales = 1569184.18,
            MarketPotential = 3489758844.49,
            AssetsCash = 415699.26,
            AccountsReceivable = 54628.5,
            AssetsBooks = 19321.38
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1009",
            Company = @"Playce",
            Address = @"India Street",
            City = @"Joppa",
            Country = @"VI",
            LifetimeSales = 45960329.03,
            QuarterlySales = 448358.99,
            YearlySales = 1855678.13,
            MarketPotential = 2740892152.3,
            AssetsCash = 447054.49,
            AccountsReceivable = 69204.65,
            AssetsBooks = 23522.18
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1010",
            Company = @"Ezent",
            Address = @"Decatur Street",
            City = @"Lithium",
            Country = @"CV",
            LifetimeSales = 43613913.07,
            QuarterlySales = 140288.25,
            YearlySales = 594517.52,
            MarketPotential = 1419141218.99,
            AssetsCash = 324254.03,
            AccountsReceivable = 78826.89,
            AssetsBooks = 20581.79
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1011",
            Company = @"Corepan",
            Address = @"Jefferson Street",
            City = @"Roland",
            Country = @"CA",
            LifetimeSales = 19334236.7,
            QuarterlySales = 413597.57,
            YearlySales = 1871048.41,
            MarketPotential = 3524818686.77,
            AssetsCash = 464374.02,
            AccountsReceivable = 68634.68,
            AssetsBooks = 16572.39
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1012",
            Company = @"Quonata",
            Address = @"Bristol Street",
            City = @"Belgreen",
            Country = @"ER",
            LifetimeSales = 21467135.56,
            QuarterlySales = 224717.89,
            YearlySales = 657562.96,
            MarketPotential = 3686684834.77,
            AssetsCash = 345941.49,
            AccountsReceivable = 51842.73,
            AssetsBooks = 12948.79
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1013",
            Company = @"Empirica",
            Address = @"Eaton Court",
            City = @"Hampstead",
            Country = @"LY",
            LifetimeSales = 21711544.57,
            QuarterlySales = 290740.22,
            YearlySales = 1202336.44,
            MarketPotential = 2343942535.11,
            AssetsCash = 331479.28,
            AccountsReceivable = 61027.27,
            AssetsBooks = 6199.99
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1014",
            Company = @"Eventix",
            Address = @"Gain Court",
            City = @"Dowling",
            Country = @"NG",
            LifetimeSales = 27108803.74,
            QuarterlySales = 322969.25,
            YearlySales = 951465.66,
            MarketPotential = 4841022751.3,
            AssetsCash = 287818.89,
            AccountsReceivable = 79152.96,
            AssetsBooks = 9047.59
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1015",
            Company = @"Dogspa",
            Address = @"Quay Street",
            City = @"Marne",
            Country = @"TW",
            LifetimeSales = 15372014.44,
            QuarterlySales = 376294.9,
            YearlySales = 978453.71,
            MarketPotential = 1275418042.2,
            AssetsCash = 374628.65,
            AccountsReceivable = 84888.29,
            AssetsBooks = 20578.59
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1016",
            Company = @"Jumpstack",
            Address = @"Quincy Street",
            City = @"Hobucken",
            Country = @"CF",
            LifetimeSales = 38882346.28,
            QuarterlySales = 140607.23,
            YearlySales = 1197166.82,
            MarketPotential = 4820347822.28,
            AssetsCash = 231516.29,
            AccountsReceivable = 87415.74,
            AssetsBooks = 12896.54
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1017",
            Company = @"Sybixtex",
            Address = @"Ryder Street",
            City = @"Alderpoint",
            Country = @"IO",
            LifetimeSales = 21445732.45,
            QuarterlySales = 369036.23,
            YearlySales = 499606.34,
            MarketPotential = 2807389991.36,
            AssetsCash = 408474.47,
            AccountsReceivable = 65344.38,
            AssetsBooks = 8862.63
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1018",
            Company = @"Dognosis",
            Address = @"Wolcott Street",
            City = @"Edgewater",
            Country = @"GL",
            LifetimeSales = 41661881.98,
            QuarterlySales = 141108.09,
            YearlySales = 522969.48,
            MarketPotential = 4374478218.15,
            AssetsCash = 225730.61,
            AccountsReceivable = 72839.21,
            AssetsBooks = 8728.07
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1019",
            Company = @"Twiggery",
            Address = @"Irwin Street",
            City = @"Blackgum",
            Country = @"ZM",
            LifetimeSales = 36017506.06,
            QuarterlySales = 354562.4,
            YearlySales = 1449893.92,
            MarketPotential = 1948021644.72,
            AssetsCash = 376383.08,
            AccountsReceivable = 62385.03,
            AssetsBooks = 14270.75
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1020",
            Company = @"Bizmatic",
            Address = @"Jerome Street",
            City = @"Sylvanite",
            Country = @"MM",
            LifetimeSales = 11722193.14,
            QuarterlySales = 213212.65,
            YearlySales = 1310614.58,
            MarketPotential = 3463018300.01,
            AssetsCash = 252123.01,
            AccountsReceivable = 57229.43,
            AssetsBooks = 19165.76
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1021",
            Company = @"Accel",
            Address = @"Louisiana Avenue",
            City = @"Cornucopia",
            Country = @"IE",
            LifetimeSales = 27607249.98,
            QuarterlySales = 236774.12,
            YearlySales = 1546611.47,
            MarketPotential = 2024251139.72,
            AssetsCash = 294508.31,
            AccountsReceivable = 71612.5,
            AssetsBooks = 18155.66
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1022",
            Company = @"Brainquil",
            Address = @"Tompkins Avenue",
            City = @"Hanover",
            Country = @"MX",
            LifetimeSales = 25699331.36,
            QuarterlySales = 186296.88,
            YearlySales = 736119.79,
            MarketPotential = 1098592989.14,
            AssetsCash = 321341.22,
            AccountsReceivable = 82055.95,
            AssetsBooks = 10149.55
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1023",
            Company = @"Eplode",
            Address = @"Desmond Court",
            City = @"Lupton",
            Country = @"GA",
            LifetimeSales = 22446181.35,
            QuarterlySales = 346390.58,
            YearlySales = 712190.68,
            MarketPotential = 2534215258.43,
            AssetsCash = 266537.14,
            AccountsReceivable = 87164.54,
            AssetsBooks = 24489.71
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1024",
            Company = @"Crustatia",
            Address = @"Woodhull Street",
            City = @"Conestoga",
            Country = @"GR",
            LifetimeSales = 48060275.78,
            QuarterlySales = 319385.17,
            YearlySales = 1662973.16,
            MarketPotential = 3562317203.73,
            AssetsCash = 471269.15,
            AccountsReceivable = 98834.5,
            AssetsBooks = 10641.41
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1025",
            Company = @"Buzzness",
            Address = @"Guider Avenue",
            City = @"Gratton",
            Country = @"MD",
            LifetimeSales = 26377352.6,
            QuarterlySales = 439844.54,
            YearlySales = 601430.59,
            MarketPotential = 1486755775.28,
            AssetsCash = 252524.24,
            AccountsReceivable = 51795.96,
            AssetsBooks = 10315.84
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1026",
            Company = @"Helixo",
            Address = @"Logan Street",
            City = @"Broadlands",
            Country = @"RE",
            LifetimeSales = 31633703.02,
            QuarterlySales = 256392.06,
            YearlySales = 602291.9,
            MarketPotential = 4323633265.68,
            AssetsCash = 468025.56,
            AccountsReceivable = 95638.46,
            AssetsBooks = 22985.41
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1027",
            Company = @"Geekosis",
            Address = @"Dictum Court",
            City = @"Bellamy",
            Country = @"NF",
            LifetimeSales = 29268437.79,
            QuarterlySales = 147691.1,
            YearlySales = 1691764.93,
            MarketPotential = 1362207226.45,
            AssetsCash = 434628.23,
            AccountsReceivable = 66871.54,
            AssetsBooks = 12574.59
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1028",
            Company = @"Zipak",
            Address = @"Hendrix Street",
            City = @"Enetai",
            Country = @"MH",
            LifetimeSales = 18691983.29,
            QuarterlySales = 218666.54,
            YearlySales = 1038077.26,
            MarketPotential = 1362313421.44,
            AssetsCash = 276294.7,
            AccountsReceivable = 59302.02,
            AssetsBooks = 11183.04
        });
    }
}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 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(IgbColumnLayoutModule)
            );
            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-size: var(--ig-size-medium);
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbGrid
        AutoGenerate="false"
        Name="grid"
        @ref="grid"
        Id="grid"
        Data="CompanyData"
        GridKeydownScript="WebGridMRLCustomNavigationEvent">
            <IgbColumnLayout
            Name="CompanyInfo"
            @ref="companyInfo"
            Header="Company">
                <IgbColumn
                Name="Company"
                @ref="company"
                Field="Company"
                Header="Company"
                RowStart="1"
                ColStart="1"
                ColEnd="3">
                </IgbColumn>

                <IgbColumn
                Name="Country"
                @ref="country"
                Field="Country"
                Header="Country"
                RowStart="2"
                ColStart="1">
                </IgbColumn>

                <IgbColumn
                Name="City"
                @ref="city"
                Field="City"
                Header="City"
                RowStart="2"
                ColStart="2">
                </IgbColumn>

                <IgbColumn
                Name="Address"
                @ref="address"
                Field="Address"
                Header="Address"
                RowStart="3"
                ColStart="1"
                ColEnd="3">
                </IgbColumn>

            </IgbColumnLayout>

            <IgbColumnLayout
            Name="Sales"
            @ref="sales"
            Header="Sales">
                <IgbColumn
                Name="LifetimeSales"
                @ref="lifetimeSales"
                Field="LifetimeSales"
                Header="Lifetime Sales"
                RowStart="1"
                RowEnd="3"
                ColStart="1"
                ColEnd="3">
                </IgbColumn>

                <IgbColumn
                Name="Quarterly"
                @ref="quarterly"
                Field="QuarterlySales"
                Header="Quarterly"
                RowStart="3"
                ColStart="1">
                </IgbColumn>

                <IgbColumn
                Name="Yearly"
                @ref="yearly"
                Field="YearlySales"
                Header="Yearly"
                RowStart="3"
                ColStart="2">
                </IgbColumn>

            </IgbColumnLayout>

            <IgbColumnLayout
            Name="MarketPotentialInfo"
            @ref="marketPotentialInfo"
            Header="Market Potential">
                <IgbColumn
                Name="MarketPotential"
                @ref="marketPotential"
                Field="MarketPotential"
                Header="Market Potential"
                RowStart="1"
                RowEnd="4"
                ColStart="1">
                </IgbColumn>

            </IgbColumnLayout>

            <IgbColumnLayout
            Name="Assets"
            @ref="assets"
            Header="Assets">
                <IgbColumn
                Name="AssetsCash"
                @ref="assetsCash"
                Field="AssetsCash"
                Header="Assets Cash"
                RowStart="1"
                ColStart="1">
                </IgbColumn>

                <IgbColumn
                Name="AccountsReceivable"
                @ref="accountsReceivable"
                Field="AccountsReceivable"
                Header="Accounts Receivable"
                RowStart="1"
                ColStart="2"
                ColEnd="4">
                </IgbColumn>

                <IgbColumn
                Name="AssetsBooks"
                @ref="assetsBooks"
                Field="AssetsBooks"
                Header="Assets Books"
                RowStart="2"
                RowEnd="4"
                ColStart="1"
                ColEnd="4">
                </IgbColumn>

            </IgbColumnLayout>

        </IgbGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var grid = this.grid;
        var companyInfo = this.companyInfo;
        var company = this.company;
        var country = this.country;
        var city = this.city;
        var address = this.address;
        var sales = this.sales;
        var lifetimeSales = this.lifetimeSales;
        var quarterly = this.quarterly;
        var yearly = this.yearly;
        var marketPotentialInfo = this.marketPotentialInfo;
        var marketPotential = this.marketPotential;
        var assets = this.assets;
        var assetsCash = this.assetsCash;
        var accountsReceivable = this.accountsReceivable;
        var assetsBooks = this.assetsBooks;

    }

    private IgbGrid grid;
    private IgbColumnLayout companyInfo;
    private IgbColumn company;
    private IgbColumn country;
    private IgbColumn city;
    private IgbColumn address;
    private IgbColumnLayout sales;
    private IgbColumn lifetimeSales;
    private IgbColumn quarterly;
    private IgbColumn yearly;
    private IgbColumnLayout marketPotentialInfo;
    private IgbColumn marketPotential;
    private IgbColumnLayout assets;
    private IgbColumn assetsCash;
    private IgbColumn accountsReceivable;
    private IgbColumn assetsBooks;

    private CompanyData _companyData = null;
    public CompanyData CompanyData
    {
        get
        {
            if (_companyData == null)
            {
                _companyData = new CompanyData();
            }
            return _companyData;
        }
    }

}razorコピー

igRegisterScript("WebGridMRLCustomNavigationEvent", (args) => {
    const target = args.detail.target;
    if (args.detail.event.key.toLowerCase() === 'enter') {
        args.detail.event.preventDefault();
        args.detail.cancel = true;
        const rowIndex = target.intRow.index === undefined ? target.index : target.intRow.index;
        this.grid.navigateTo(args.detail.event.shiftKey ? rowIndex - 1 : rowIndex + 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/
*/

#grid {
    --ig-size: var(--ig-size-medium);
}

cssコピー

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<IgbGrid class="grid"></IgbGrid>
razor

次に、そのクラスに関連する CSS プロパティを設定します。

.grid {
    --ig-grid-cell-active-border-color: #ffcd0f;
    --ig-grid-cell-selected-background: #6f6f6f;
    --ig-grid-row-hover-background: #fde069;
    --ig-grid-row-selected-background: #8d8d8d;
    --ig-grid-header-background: #494949;
    --ig-grid-header-text-color: #fff;
}
css

デモ

EXAMPLE

API リファレンス

• IgbGrid
• IgbColumnLayout
• IgbColumn

その他のリソース

• 仮想化とパフォーマンス
• ページング
• ソート
• 列のサイズ変更
• 選択

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)