高速 Blazor データ グリッド

Ignite UI for Blazor は、世界最速の仮想化された Blazor データ グリッドを含む、Blazor ネイティブのマテリアル ベースの UI コンポーネントの完全なライブラリを提供します。

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

無料で試してみる

Blazor Grid の例

この Blazor グリッドの例では、データの検索とフィルタリング、列のソート、サイズ変更、ピン固定と非表示、行の選択、Excel と csv へのエクスポート、水平および垂直スクロールなど、グリッドに組み込まれているさまざまな機能を利用してユーザーがデータ ビューをカスタマイズする方法を確認できます。Linear Progress Bar Indicator やスパークラインなどのコンポーネントを含むセル テンプレートの例を提供しました。その他の機能については、こちらをご覧ください。

EXAMPLE

MODULES

DATA

RAZOR

JS

CSS

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(IgbGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;
public class NwindDataItem
{
    public double ProductID { get; set; }
    public string ProductName { get; set; }
    public double SupplierID { get; set; }
    public double CategoryID { get; set; }
    public string QuantityPerUnit { get; set; }
    public double UnitPrice { get; set; }
    public double UnitsInStock { get; set; }
    public double UnitsOnOrder { get; set; }
    public double ReorderLevel { get; set; }
    public bool Discontinued { get; set; }
    public string OrderDate { get; set; }
    public double Rating { get; set; }
    public List<NwindDataItem_LocationsItem> Locations { get; set; }
}
public class NwindDataItem_LocationsItem
{
    public string Shop { get; set; }
    public string LastInventory { get; set; }
}

public class NwindData
    : List<NwindDataItem>
{
    public NwindData()
    {
        this.Add(new NwindDataItem()
        {
            ProductID = 1,
            ProductName = @"Chai",
            SupplierID = 1,
            CategoryID = 1,
            QuantityPerUnit = @"10 boxes x 20 bags",
            UnitPrice = 18,
            UnitsInStock = 39,
            UnitsOnOrder = 30,
            ReorderLevel = 10,
            Discontinued = false,
            OrderDate = @"2012-02-12",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Fun-Tasty Co.",
                    LastInventory = @"2018-06-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 2,
            ProductName = @"Chang",
            SupplierID = 1,
            CategoryID = 1,
            QuantityPerUnit = @"24 - 12 oz bottles",
            UnitPrice = 19,
            UnitsInStock = 17,
            UnitsOnOrder = 40,
            ReorderLevel = 25,
            Discontinued = true,
            OrderDate = @"2003-03-17",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 3,
            ProductName = @"Aniseed Syrup",
            SupplierID = 1,
            CategoryID = 2,
            QuantityPerUnit = @"12 - 550 ml bottles",
            UnitPrice = 10,
            UnitsInStock = 13,
            UnitsOnOrder = 70,
            ReorderLevel = 25,
            Discontinued = false,
            OrderDate = @"2006-03-17",
            Rating = 3,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Street Market",
                    LastInventory = @"2018-12-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"24/7 Market",
                    LastInventory = @"2018-11-11"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 4,
            ProductName = @"Chef Antons Cajun Seasoning",
            SupplierID = 2,
            CategoryID = 2,
            QuantityPerUnit = @"48 - 6 oz jars",
            UnitPrice = 22,
            UnitsInStock = 53,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2016-03-17",
            Rating = 3,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Fun-Tasty Co.",
                    LastInventory = @"2018-06-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Street Market",
                    LastInventory = @"2018-12-12"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 5,
            ProductName = @"Chef Antons Gumbo Mix",
            SupplierID = 2,
            CategoryID = 2,
            QuantityPerUnit = @"36 boxes",
            UnitPrice = 21.35,
            UnitsInStock = 0,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = true,
            OrderDate = @"2011-11-11",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 6,
            ProductName = @"Grandmas Boysenberry Spread",
            SupplierID = 3,
            CategoryID = 2,
            QuantityPerUnit = @"12 - 8 oz jars",
            UnitPrice = 25,
            UnitsInStock = 0,
            UnitsOnOrder = 30,
            ReorderLevel = 25,
            Discontinued = false,
            OrderDate = @"2017-12-17",
            Rating = 4,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 7,
            ProductName = @"Uncle Bobs Organic Dried Pears",
            SupplierID = 3,
            CategoryID = 7,
            QuantityPerUnit = @"12 - 1 lb pkgs.",
            UnitPrice = 30,
            UnitsInStock = 150,
            UnitsOnOrder = 30,
            ReorderLevel = 10,
            Discontinued = false,
            OrderDate = @"2016-07-17",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Fun-Tasty Co.",
                    LastInventory = @"2018-06-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Street Market",
                    LastInventory = @"2018-12-12"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 8,
            ProductName = @"Northwoods Cranberry Sauce",
            SupplierID = 3,
            CategoryID = 2,
            QuantityPerUnit = @"12 - 12 oz jars",
            UnitPrice = 40,
            UnitsInStock = 6,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2018-01-17",
            Rating = 4,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Fun-Tasty Co.",
                    LastInventory = @"2018-06-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 9,
            ProductName = @"Mishi Kobe Niku",
            SupplierID = 4,
            CategoryID = 6,
            QuantityPerUnit = @"18 - 500 g pkgs.",
            UnitPrice = 97,
            UnitsInStock = 29,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = true,
            OrderDate = @"2010-02-17",
            Rating = 4,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 10,
            ProductName = @"Ikura",
            SupplierID = 4,
            CategoryID = 8,
            QuantityPerUnit = @"12 - 200 ml jars",
            UnitPrice = 31,
            UnitsInStock = 31,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2008-05-17",
            Rating = 3,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Wall Market",
                    LastInventory = @"2018-12-06"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 11,
            ProductName = @"Queso Cabrales",
            SupplierID = 5,
            CategoryID = 4,
            QuantityPerUnit = @"1 kg pkg.",
            UnitPrice = 21,
            UnitsInStock = 22,
            UnitsOnOrder = 30,
            ReorderLevel = 30,
            Discontinued = false,
            OrderDate = @"2009-01-17",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Fun-Tasty Co.",
                    LastInventory = @"2018-06-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 12,
            ProductName = @"Queso Manchego La Pastora",
            SupplierID = 5,
            CategoryID = 4,
            QuantityPerUnit = @"10 - 500 g pkgs.",
            UnitPrice = 38,
            UnitsInStock = 86,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2015-11-17",
            Rating = 3,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 13,
            ProductName = @"Konbu",
            SupplierID = 6,
            CategoryID = 8,
            QuantityPerUnit = @"2 kg box",
            UnitPrice = 6,
            UnitsInStock = 24,
            UnitsOnOrder = 30,
            ReorderLevel = 5,
            Discontinued = false,
            OrderDate = @"2015-03-17",
            Rating = 2,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 14,
            ProductName = @"Tofu",
            SupplierID = 6,
            CategoryID = 7,
            QuantityPerUnit = @"40 - 100 g pkgs.",
            UnitPrice = 23.25,
            UnitsInStock = 35,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2017-06-17",
            Rating = 4,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Street Market",
                    LastInventory = @"2018-12-12"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 15,
            ProductName = @"Genen Shouyu",
            SupplierID = 6,
            CategoryID = 2,
            QuantityPerUnit = @"24 - 250 ml bottles",
            UnitPrice = 15.5,
            UnitsInStock = 39,
            UnitsOnOrder = 30,
            ReorderLevel = 5,
            Discontinued = false,
            OrderDate = @"2014-03-17",
            Rating = 4,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Local Market",
                    LastInventory = @"2018-07-03"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Wall Market",
                    LastInventory = @"2018-12-06"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 16,
            ProductName = @"Pavlova",
            SupplierID = 7,
            CategoryID = 3,
            QuantityPerUnit = @"32 - 500 g boxes",
            UnitPrice = 17.45,
            UnitsInStock = 29,
            UnitsOnOrder = 30,
            ReorderLevel = 10,
            Discontinued = false,
            OrderDate = @"2018-03-28",
            Rating = 2,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Street Market",
                    LastInventory = @"2018-12-12"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"24/7 Market",
                    LastInventory = @"2018-11-11"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 17,
            ProductName = @"Alice Mutton",
            SupplierID = 7,
            CategoryID = 6,
            QuantityPerUnit = @"20 - 1 kg tins",
            UnitPrice = 39,
            UnitsInStock = 0,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = true,
            OrderDate = @"2015-08-17",
            Rating = 2,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Farmer Market",
                    LastInventory = @"2018-04-04"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 18,
            ProductName = @"Carnarvon Tigers",
            SupplierID = 7,
            CategoryID = 8,
            QuantityPerUnit = @"16 kg pkg.",
            UnitPrice = 62.5,
            UnitsInStock = 42,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2005-09-27",
            Rating = 2,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"24/7 Market",
                    LastInventory = @"2018-11-11"
                },
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 19,
            ProductName = @"Teatime Chocolate Biscuits",
            SupplierID = 8,
            CategoryID = 3,
            QuantityPerUnit = @"",
            UnitPrice = 9.2,
            UnitsInStock = 25,
            UnitsOnOrder = 30,
            ReorderLevel = 5,
            Discontinued = false,
            OrderDate = @"2001-03-17",
            Rating = 2,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Local Market",
                    LastInventory = @"2018-07-03"
                }}

        });
        this.Add(new NwindDataItem()
        {
            ProductID = 20,
            ProductName = @"Sir Rodneys Marmalade",
            SupplierID = 8,
            CategoryID = 3,
            QuantityPerUnit = @"4 - 100 ml jars",
            UnitPrice = 4.5,
            UnitsInStock = 40,
            UnitsOnOrder = 30,
            ReorderLevel = 0,
            Discontinued = false,
            OrderDate = @"2005-03-17",
            Rating = 5,
            Locations = new List<NwindDataItem_LocationsItem>()
            {
                new NwindDataItem_LocationsItem()
                {
                    Shop = @"Super Market",
                    LastInventory = @"2018-09-09"
                }}

        });
    }
}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"
        Id="grid"
        Name="grid"
        @ref="grid"
        Data="NwindData"
        PrimaryKey="ProductID"
        AllowFiltering="true"
        FilterMode="FilterMode.ExcelStyleFilter">
            <IgbPaginator
            PerPage="10">
            </IgbPaginator>

            <IgbColumn
            Field="ProductName"
            Header="Product Name"
            DataType="GridColumnDataType.String"
            Sortable="true"
            HasSummary="true"
            Editable="true"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="UnitPrice"
            Header="Unit Price"
            DataType="GridColumnDataType.Number"
            Sortable="true"
            HasSummary="true"
            Editable="true"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="UnitsInStock"
            Header="Units in Stock"
            DataType="GridColumnDataType.Number"
            Sortable="true"
            HasSummary="true"
            Editable="true"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="OrderDate"
            Header="Order Date"
            DataType="GridColumnDataType.Date"
            Sortable="true"
            HasSummary="true"
            Editable="true"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Discontinued"
            Header="Discontinued"
            DataType="GridColumnDataType.Boolean"
            Sortable="true"
            HasSummary="true"
            Editable="true"
            BodyTemplateScript="WebGridBooleanCellTemplate"
            Name="column1"
            @ref="column1">
            </IgbColumn>

            <IgbColumn
            Field="ReorderLevel"
            Header="Reorder Level"
            DataType="GridColumnDataType.Number"
            Sortable="true"
            HasSummary="true"
            Editable="true"
            Filterable="true">
            </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 NwindData _nwindData = null;
    public NwindData NwindData
    {
        get
        {
            if (_nwindData == null)
            {
                _nwindData = new NwindData();
            }
            return _nwindData;
        }
    }

}razorコピー

igRegisterScript("WebGridBooleanCellTemplate", (ctx) => {
    var html = window.igTemplating.html;
    if (ctx.cell.value) {
        return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
    } else {
        return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
    }
}, 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コピー

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

Blazor Grid の概要

Blazor データ グリッドは、一連の行と列で表データを表示するために使用されるコンポーネントです。テーブルとも呼ばれるデータ グリッドは、Microsoft Excel などの一般的なソフトウェアでデスクトップの世界でよく知られています。グリッドはデスクトップ プラットフォームで長い間利用されてきますが、最近 Blazor UI などの Web ア プリ UI の一部になりました。最新のグリッドは複雑で、データ バインディング、編集、Excel のようなフィルタリング、カスタム ソート、グループ化、行の並べ替え、行と列の固定、行の集計、Excel、CSV、PDF 形式のエクスポートなど、さまざまな機能が含まれる場合があります。

Blazor Grid の利点

Blazor データ グリッドは、大量のデータをすばやく保存してソートする必要がある場合に重要です。これには、大量の高速データを頻繁に使用する金融や保険などの業界が含まれます。これらの企業の成功は、データ グリッドの機能とパフォーマンスに依存します。たとえば、在庫をマイクロ秒単位で決定する場合、データグ リッドが遅延時間やちらつきのない状態で実行する必要があります。

主要機能

Ignite UI for Blazor のデータ グリッドは、大量のリアルタイム データのみにとどまるものではありません。これは機能豊富な Blazor グリッドであり、ごくわずかなコードだけでは実現できない機能を提供します。

以下は、データ グリッドの主な機能のいくつかを示しています:

• 数百万のレコードをロードできる仮想化された行と列

• セルおよび行オプションを使用したインライン編集

• セルを使用したインライン編集

• Excel スタイル フィルタリングと Excel キーボード ナビゲーション機能

• インタラクティブな Outlook スタイルのようなグループ化

• グリッド セルまたは列のデータに基づいた列集計

• Excel へのエクスポート

• 行の高さとサイズ変更を調整するサイズ

データの仮想化とパフォーマンス

データ グリッドの列と行レベルの仮想化により、Blazor グリッド内の無制限の行と列をシームレスにスクロールします。ローカルまたはリモートのデータソースのサポートにより、データがどこにあっても最高のパフォーマンスを得ることができます。ユーザーは Excel のようなスクロールを体験し、エンタープライズ スピード (ラグ、画面のちらつき、視覚的な遅延) なしで、パフォーマンスを損なうことなく最高のユーザー エクスペリエンス (UX) を提供します。

---

すばやく簡単にカスタマイズ、構築および実装

Ignite UI Blazor データ グリッドは、データの無制限の行と列を処理できると同時に、カスタム テンプレートとリアルタイムのデータ更新へのアクセスを提供します。簡単なテーマ設定とブランディングのための直感的な API を備えており、最小限のコードでデータにすばやくバインドできます。

サンプルの表示

---

Blazor グリッドのページング、ソート、フィルタリング & 検索

ユーザーがデフォルトの[ページャー](grid/paging.md)を使用してデータ セットをナビゲートできるようにするか、独自のテンプレートを作成して独自のページング エクスペリエンスを提供します。単一列および複数列のソート、グリッド上の全文[検索](grid/search.md)、およびデータ型に基づく [Microsoft Excel スタイルのフィルタリング](grid/excel-style-filtering.md)を含むいくつかの[高度なフィルタリング] オプションを完全にサポートします。

インライン Blazor グリッド編集

列のデータ型に基づくデフォルトの[編集可能な列のセル テンプレート](grid/overview.md#セル編集テンプレート)を提供します。編集可能な列にカスタム テンプレートを定義し、セル値のコミットや変更の破棄でデフォルト動作をオーバーライドできます。

キーボード ナビゲーションと行/セルの選択

上、下、右、左、タブ、および Enter キーを使用して、Blazor データ グリッドで Excel のような[キーボード ナビゲーション](grid/keyboard-navigation.md)を有効にして、アクセシビリティ コンプライアンスを確保し、使いやすさを向上させます。マウスまたはキーボードを使用して Blazor グリッドで単一または複数の行選択を切り替えて完全な行を選択または選択解除するか、グリッド ツールバーの組み込みの [すべて選択] または [すべて選択解除] チェックボックスを使用して行選択を操作できます。この機能強化の詳細については、こちらをご覧ください。

Blazor グリッドのアクセシビリティと ARIA のサポート

Ignite UI for Blazor の各 Blazor コンポーネントは、最新のアクセシビリティ ガイドラインと仕様に従って実装されています。当社の Blazor コンポーネントは、OS またはブラウザーが提供するアクセシビリティ技術 (読み上げソフトウェア) を使用してテストされています。当社のチームは、ガイドラインが実装されていることを確認するだけでなく、視覚障害者に配信される実際のコンテンツが消費可能でユーザー フレンドリーであることを保証します。Ignite UI for Blazor データ グリッドは キーボード アクセシビリティ、ARIA、明瞭なカラー パレットを提供します。詳しくについては、こちらをご覧ください。

列のグループ化、ピン固定、集計

組み込みの列[集計](grid/summaries.md)またはカスタム集計テンプレートをサポートし、マウス操作、タッチ、または API を介して列またはグループ列をグループ化します。インタラクティブな[列のピン固定](grid/column-pinning.md)、移動、ドラッグ、ソート操作に列をインタラクティブに[非表示](grid/column-hiding.md)または[移動](grid/column-moving.md)できます。

複数列ヘッダー

[複数列ヘッダー](grid/multi-column-headers.md)を有効にし、共通ヘッダーで列をグループ化できます。各列グループは、その他のグループや列と組み合わせることができ、ピン固定、グループ内でインタラクティブに列移動、グループのソートや非表示など多数の機能が使用できます。

Blazor Grid の機能

• インライン編集

• 行と列のフィルタリング

• グリッドのソート

• 列のグループ化

• 列の集計

• ピン固定列

• 列の移動

• セルのコピーおよび貼り付け

• セルのスタイル設定

• リアルタイム/ライブ データのテーマ

• グリッド ページング

• 行選択

• セル選択

• グリッド レベルの検索

• 複数列ヘッダー

• 仮想化とパフォーマンス

• 列のサイズ変更

• 列の非表示

---

高速 Blazor Grid のダウンロード

ダウンロード
30 日間無償お試し版。クレジット カードは不要です。

---

Ignite UI for Blazor でサポートされているブラウザー

Blazor Data Grid は、すべての最新の Web ブラウザーでサポートされます。

• Chrome
• Edge / Edge Chromium
• Firefox
• Safari
• ポリフィルを使用した Internet Explorer 11

Ignite UI for Blazor サポート オプション

Infragistics の Blazor 製品の受賞歴のあるサポートにアクセスするための複数のオプションがあります。

• Blazor サポート ホーム ページをご覧ください。
• Blazor ドキュメントを読み、Blazor サンプルを試してください。
• 最新の情報は、Blazor ブログをご覧ください。
• サポート ケースの送信
• Blazor 参照アプリケーションを試してください。

Ignite UI for Blazor 試用ライセンスおよび商用

Ignite UI for Blazor は、サブスクリプション モデルで利用可能な商用ライセンス製品です。Ignite UI for Blazor 製品は、30 日間トライアル版を無料でお試しいただけます。試用期間が終了したら、弊社 Web サイトからライセンスを購入するか、お住まいの地域の営業担当者にお問い合わせください。

FAQ

Infragistics Ignite UI for Blazor Data Grid を選択する理由とはなんですか？

• 数百万のレコードをロードできる仮想化された行と列

• セル、行、および一括更新オプションを使用したインライン編集

• Excel スタイル フィルタリングと Excel キーボード ナビゲーション機能

• インタラクティブな Outlook スタイルのようなグループ化

• グリッド セルまたは列のデータに基づいた列集計

• Excel へのエクスポート

• 行の高さとサイズ変更を調整するサイズ

Infragistics Ignite UI for Blazor Data Grid の価格について教えてください。

Blazor コンポーネントは、Ignite UI バンドルの一部として含まれています。価格の詳細については、価格ページを参照してください。

複数のプラットフォームでアプリケーションを開発する場合、WPF や Windows Forms などのデスクトップ プラットフォーム、Blazor、Web コンポーネント、ASP.NET MVC、ASP.NET Core のすべての最新 Web ツールセットを含む完全なアプリ開発パッケージ Infragistics Ultimate を検討してください。

Infragistics Ignite UI for Blazor Data Grid コントロールを個別に購入できますか？

Blazor Data Grid を個別に購入することはできません。これは Ignite UI 製品バンドルの一部です。Ignite UI 製品バンドルは、Blazor、ASP.NET MVC、Web コンポーネント、ASP.NET Blazor などのすべての Web プラットフォームに対して、何百ものコントロール、コンポーネント、およびデータの視覚化を提供します。

Blazor と Infragistics Ignite UI for Blazor Data Grid コントロールのインストール方法を教えてください。

Blazor Data Grid の使用を開始するには、作業の開始ガイドの手順を実行してください。サンプル アプリケーションのライブラリも用意しています。サンプル ライブラリは、Blazor 開発のベスト プラクティス ガイドです。