Blazor Tree Grid 行の編集

Blazor Tree Grid の Ignite UI for Blazor 行編集機能を使用すると、IgbTreeGrid 内でデータを直接編集できます。データを操作するこの便利な方法に加えて、完全な CRUD 操作のための強力な API があります。行をクリックして Enter キーを押すと、グリッド行の編集を実行できます。もう 1 つの簡単な方法は、変更する必要がある行をマウスでダブルクリックすることです。

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

無料で試してみる

Blazor Tree Grid 行編集の例

以下の手順では、IgbTreeGrid で行編集を有効にする方法を示します。セル値を変更してから同じ行の他のセルをクリックまたはナビゲーションした場合も [完了] ボタンを使用して確定するまで行値を更新しません。または [キャンセル] ボタンを使用して破棄します。

EXAMPLE

MODULES

DATA

RAZOR

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

using System;
using System.Collections.Generic;
public class EmployeesNestedTreeDataItem
{
    public double Age { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public string Phone { get; set; }
    public bool OnPTO { get; set; }
    public double ParentID { get; set; }
    public string Title { get; set; }
}

public class EmployeesNestedTreeData
    : List<EmployeesNestedTreeDataItem>
{
    public EmployeesNestedTreeData()
    {
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 55,
            HireDate = @"2008-03-20",
            ID = 1,
            Name = @"Johnathan Winchester",
            Phone = @"0251-031259",
            OnPTO = false,
            ParentID = -1,
            Title = @"Development Manager"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 42,
            HireDate = @"2014-01-22",
            ID = 4,
            Name = @"Ana Sanders",
            Phone = @"(21) 555-0091",
            OnPTO = true,
            ParentID = -1,
            Title = @"CEO"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 49,
            HireDate = @"2014-01-22",
            ID = 18,
            Name = @"Victoria Lincoln",
            Phone = @"(071) 23 67 22 20",
            OnPTO = true,
            ParentID = -1,
            Title = @"Accounting Manager"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 61,
            HireDate = @"2010-01-01",
            ID = 10,
            Name = @"Yang Wang",
            Phone = @"(21) 555-0091",
            OnPTO = false,
            ParentID = -1,
            Title = @"Localization Manager"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 43,
            HireDate = @"2011-06-03",
            ID = 3,
            Name = @"Michael Burke",
            Phone = @"0452-076545",
            OnPTO = true,
            ParentID = 1,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 29,
            HireDate = @"2009-06-19",
            ID = 2,
            Name = @"Thomas Anderson",
            Phone = @"(14) 555-8122",
            OnPTO = false,
            ParentID = 1,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 31,
            HireDate = @"2014-08-18",
            ID = 11,
            Name = @"Monica Reyes",
            Phone = @"7675-3425",
            OnPTO = false,
            ParentID = 1,
            Title = @"Software Development Team Lead"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 35,
            HireDate = @"2015-09-17",
            ID = 6,
            Name = @"Roland Mendel",
            Phone = @"(505) 555-5939",
            OnPTO = false,
            ParentID = 11,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 44,
            HireDate = @"2009-10-11",
            ID = 12,
            Name = @"Sven Cooper",
            Phone = @"0695-34 67 21",
            OnPTO = true,
            ParentID = 11,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 44,
            HireDate = @"2014-04-04",
            ID = 14,
            Name = @"Laurence Johnson",
            Phone = @"981-443655",
            OnPTO = false,
            ParentID = 4,
            Title = @"Director"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 25,
            HireDate = @"2017-11-09",
            ID = 5,
            Name = @"Elizabeth Richards",
            Phone = @"(2) 283-2951",
            OnPTO = true,
            ParentID = 4,
            Title = @"Vice President"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 39,
            HireDate = @"2010-03-22",
            ID = 13,
            Name = @"Trevor Ashworth",
            Phone = @"981-443655",
            OnPTO = true,
            ParentID = 5,
            Title = @"Director"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 44,
            HireDate = @"2014-04-04",
            ID = 17,
            Name = @"Antonio Moreno",
            Phone = @"(505) 555-5939",
            OnPTO = false,
            ParentID = 18,
            Title = @"Senior Accountant"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 50,
            HireDate = @"2007-11-18",
            ID = 7,
            Name = @"Pedro Rodriguez",
            Phone = @"035-640230",
            OnPTO = false,
            ParentID = 10,
            Title = @"Senior Localization Developer"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 27,
            HireDate = @"2016-02-19",
            ID = 8,
            Name = @"Casey Harper",
            Phone = @"0342-023176",
            OnPTO = true,
            ParentID = 10,
            Title = @"Senior Localization"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 25,
            HireDate = @"2017-11-09",
            ID = 15,
            Name = @"Patricia Simpson",
            Phone = @"069-0245984",
            OnPTO = false,
            ParentID = 7,
            Title = @"Localization Intern"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 39,
            HireDate = @"2010-03-22",
            ID = 9,
            Name = @"Francisco Chang",
            Phone = @"(91) 745 6200",
            OnPTO = false,
            ParentID = 7,
            Title = @"Localization Intern"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 25,
            HireDate = @"2018-03-18",
            ID = 16,
            Name = @"Peter Lewis",
            Phone = @"069-0245984",
            OnPTO = true,
            ParentID = 7,
            Title = @"Localization Intern"
        });
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        Data="EmployeesNestedTreeData"
        PrimaryKey="ID"
        ForeignKey="ParentID"
        Moving="true"
        RowEditable="true"
        RowSelection="GridSelectionMode.Multiple">
            <IgbColumn
            Field="Name"
            Header="Full Name"
            DataType="GridColumnDataType.String"
            Resizable="true"
            Sortable="true"
            Filterable="true"
            Editable="true">
            </IgbColumn>

            <IgbColumn
            Field="Age"
            DataType="GridColumnDataType.Number"
            Resizable="false"
            Sortable="false"
            Filterable="false"
            Editable="true">
            </IgbColumn>

            <IgbColumn
            Field="Title"
            DataType="GridColumnDataType.String"
            Resizable="true"
            Sortable="true"
            Filterable="true"
            Editable="true">
            </IgbColumn>

            <IgbColumn
            Field="HireDate"
            Header="Hire Date"
            DataType="GridColumnDataType.Date"
            Resizable="true"
            Sortable="true"
            Filterable="true"
            Editable="true">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

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

    }

    private IgbTreeGrid treeGrid;

    private EmployeesNestedTreeData _employeesNestedTreeData = null;
    public EmployeesNestedTreeData EmployeesNestedTreeData
    {
        get
        {
            if (_employeesNestedTreeData == null)
            {
                _employeesNestedTreeData = new EmployeesNestedTreeData();
            }
            return _employeesNestedTreeData;
        }
    }

}razorコピー

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

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

行が編集モードにある場合、他の行のセルをクリックすると [完了] ボタンが押されたように動作し、前の行の変更をすべての変更をサブミットします。新しくフォーカスされたセルが編集可能な場合、新しい行も編集モードになります。ただし、セルが編集可能でない場合は、前の行のみが編集モードを終了します。

行編集の使用

次に IgbTreeGrid をバインドしたデータソースで定義し、RowEditable を true に設定してバインドします。

 <IgbTreeGrid Width="100%" Height="100%" PrimaryKey="ID" AutoGenerate="false" Data="data" RowEditable="true">
        <IgbColumn Field="Name" Header="Name" DataType="GridColumnDataType.String"></IgbColumn>
        <IgbColumn Field="Age" Header="Age" DataType="GridColumnDataType.Number"></IgbColumn>
        <IgbColumn Field="Title" Header="Title" DataType="GridColumnDataType.String"></IgbColumn>
        <IgbColumn Field="HireDate" Header="Hire Date" DataType="GridColumnDataType.Date"></IgbColumn>
</IgbTreeGrid>
razor

プライマリキーは行編集操作で必須です。

個々の列の編集を有効にする必要はありません。IgbTreeGrid の RowEditable プロパティを使用すると、定義された Field プロパティを持つすべての行 (主行を除く) が編集可能になります。特定の列の編集を無効にしたい場合は、その列の Editable 入力を false に設定するだけです。

IgbTreeGrid は、行の状態が送信されるかキャンセルされるまで保留中のセルの変更を保持する内部プロバイダーである BaseTransactionService を利用します。

位置

• オーバーレイのデフォルトの位置は編集モードで行の下にあります。

• 行の下にスペースがない場合、オーバーレイが行の上に表示されます。

• 一番上または下に表示されると、オーバーレイは閉じられるまでスクロール時にこの位置を保持します。

動作

• 行が編集モードの場合、編集が継続します。同じ行のセルがクリックされたかどうか。

• [完了] ボタンをクリックすると行編集を完了し、変更をデータソースまたはトランザクションへサブミットします。更に行が編集モードを完了します。

• [キャンセル] ボタンがをクリックすると現在の行のすべての変更を元に戻し、行編集モードを終了します。

• 行が編集モードにある場合、他の行のセルをクリックすると現在の行編集を終了し、行の新規の変更をサブミット ([完了] ボタンをクリックした場合と同じ) します。フォーカスのある新しいセルが編集可能かどうか、新しい行が編集モードに入るかどうか、セルが編集できない場合は前の行のみ編集モードを終了します。

• 行が編集モードの時にグリッドがスクロールされると行が表示領域外になりますが、IgbTreeGrid は編集モードのままです。IgbTreeGrid をスクロールすると編集行は再度表示されますが編集行が編集モードのままになります。IgbTreeGrid 以外をクリックしたときにセルも編集モードに残ります。

• ソート、フィルタリング、検索、および非表示操作を実行すると、現在の行のすべての変更が元に戻され、行の編集モードを終了します。

• ページング、サイズ変更、ピン固定、移動操作を実行すると、編集モードを終了して最新の値を送信します。

• 編集した各セルは行編集が終了するまで変更スタイルを取得します。IgbTreeGrid がトランザクションで提供されない場合の動作です。トランザクションが有効な場合、すべての変更がコミットされるまでセル編集スタイルが適用されます。

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

• Enter と F2 で行編集モードに入ります

• Esc で行編集モードを終了し、行の編集モード時に変更されたいずれのセルの変更もサブミットしません

• Tab - 行の編集可能なセルから次のセルへフォーカスを移動、右端の編集可能なセルから [キャンセル] と [完了] ボタンへ移動します。[完了] ボタンからのナビゲーションは現在の編集行内で編集可能なセルへ移動します。

機能の統合

• すべてのデータ変更操作は行変更操作を終了し、現在の行の変更をサブミットします。ソート、グループの変更、フィルタリング条件、ページングなどが含まれます。

• 行編集が終了した後に集計が更新されます。同様にソートやフィルタリングなどの他の機能が有効になります。

行編集オーバーレイのカスタマイズ

テキストのカスタマイズ

テンプレート化を使用した行編集オーバーレイのテキストのカスタマイズが可能です。

RowChangesCount プロパティが公開されて変更されたセルのカウントを保持します。

igRegisterScript("RowEditTextTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<div>
   Changes: ${ctx.implicit}
</div>`;
}, false);
razor

ボタンのカスタマイズ

テンプレート化を使用した行編集オーバーレイのボタンのカスタマイズも可能です。

 igRegisterScript("RowEditActionsTemplate", (ctx) => {
    var html = window.igTemplating.html;
    window.endRowEdit = ctx.implicit;
    return html`<div>
  	<button @click="(event) => endRowEdit(false, event)">Cancel</button>
	<button @click="(event) => endRowEdit(true, event)">Apply</button>
</div>`;
}, false);
razor

スタイル設定

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

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

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

.grid {
    --ig-banner-banner-background: #e3e3e3;
    --ig-banner-banner-message-color: #423589;
}
css

デモ

EXAMPLE

MODULES

DATA

RAZOR

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

using System;
using System.Collections.Generic;
public class EmployeesNestedTreeDataItem
{
    public double Age { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public string Phone { get; set; }
    public bool OnPTO { get; set; }
    public double ParentID { get; set; }
    public string Title { get; set; }
}

public class EmployeesNestedTreeData
    : List<EmployeesNestedTreeDataItem>
{
    public EmployeesNestedTreeData()
    {
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 55,
            HireDate = @"2008-03-20",
            ID = 1,
            Name = @"Johnathan Winchester",
            Phone = @"0251-031259",
            OnPTO = false,
            ParentID = -1,
            Title = @"Development Manager"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 42,
            HireDate = @"2014-01-22",
            ID = 4,
            Name = @"Ana Sanders",
            Phone = @"(21) 555-0091",
            OnPTO = true,
            ParentID = -1,
            Title = @"CEO"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 49,
            HireDate = @"2014-01-22",
            ID = 18,
            Name = @"Victoria Lincoln",
            Phone = @"(071) 23 67 22 20",
            OnPTO = true,
            ParentID = -1,
            Title = @"Accounting Manager"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 61,
            HireDate = @"2010-01-01",
            ID = 10,
            Name = @"Yang Wang",
            Phone = @"(21) 555-0091",
            OnPTO = false,
            ParentID = -1,
            Title = @"Localization Manager"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 43,
            HireDate = @"2011-06-03",
            ID = 3,
            Name = @"Michael Burke",
            Phone = @"0452-076545",
            OnPTO = true,
            ParentID = 1,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 29,
            HireDate = @"2009-06-19",
            ID = 2,
            Name = @"Thomas Anderson",
            Phone = @"(14) 555-8122",
            OnPTO = false,
            ParentID = 1,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 31,
            HireDate = @"2014-08-18",
            ID = 11,
            Name = @"Monica Reyes",
            Phone = @"7675-3425",
            OnPTO = false,
            ParentID = 1,
            Title = @"Software Development Team Lead"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 35,
            HireDate = @"2015-09-17",
            ID = 6,
            Name = @"Roland Mendel",
            Phone = @"(505) 555-5939",
            OnPTO = false,
            ParentID = 11,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 44,
            HireDate = @"2009-10-11",
            ID = 12,
            Name = @"Sven Cooper",
            Phone = @"0695-34 67 21",
            OnPTO = true,
            ParentID = 11,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 44,
            HireDate = @"2014-04-04",
            ID = 14,
            Name = @"Laurence Johnson",
            Phone = @"981-443655",
            OnPTO = false,
            ParentID = 4,
            Title = @"Director"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 25,
            HireDate = @"2017-11-09",
            ID = 5,
            Name = @"Elizabeth Richards",
            Phone = @"(2) 283-2951",
            OnPTO = true,
            ParentID = 4,
            Title = @"Vice President"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 39,
            HireDate = @"2010-03-22",
            ID = 13,
            Name = @"Trevor Ashworth",
            Phone = @"981-443655",
            OnPTO = true,
            ParentID = 5,
            Title = @"Director"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 44,
            HireDate = @"2014-04-04",
            ID = 17,
            Name = @"Antonio Moreno",
            Phone = @"(505) 555-5939",
            OnPTO = false,
            ParentID = 18,
            Title = @"Senior Accountant"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 50,
            HireDate = @"2007-11-18",
            ID = 7,
            Name = @"Pedro Rodriguez",
            Phone = @"035-640230",
            OnPTO = false,
            ParentID = 10,
            Title = @"Senior Localization Developer"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 27,
            HireDate = @"2016-02-19",
            ID = 8,
            Name = @"Casey Harper",
            Phone = @"0342-023176",
            OnPTO = true,
            ParentID = 10,
            Title = @"Senior Localization"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 25,
            HireDate = @"2017-11-09",
            ID = 15,
            Name = @"Patricia Simpson",
            Phone = @"069-0245984",
            OnPTO = false,
            ParentID = 7,
            Title = @"Localization Intern"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 39,
            HireDate = @"2010-03-22",
            ID = 9,
            Name = @"Francisco Chang",
            Phone = @"(91) 745 6200",
            OnPTO = false,
            ParentID = 7,
            Title = @"Localization Intern"
        });
        this.Add(new EmployeesNestedTreeDataItem()
        {
            Age = 25,
            HireDate = @"2018-03-18",
            ID = 16,
            Name = @"Peter Lewis",
            Phone = @"069-0245984",
            OnPTO = true,
            ParentID = 7,
            Title = @"Localization Intern"
        });
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/

#grid {
    --ig-banner-banner-background: #292826;
    --ig-banner-banner-message-color: #ffcd0f;
    --ig-button-foreground: #ffcd0f;
    --ig-button-hover-foreground: white;
    --ig-button-font-weight: 600;
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="grid"
        @ref="grid"
        Id="grid"
        Data="EmployeesNestedTreeData"
        PrimaryKey="ID"
        ForeignKey="ParentID"
        Moving="true"
        RowEditable="true"
        RowSelection="GridSelectionMode.Multiple">
            <IgbColumn
            Field="Name"
            Header="Full Name"
            DataType="GridColumnDataType.String"
            Resizable="true"
            Sortable="true"
            Filterable="true"
            Editable="true">
            </IgbColumn>

            <IgbColumn
            Field="Age"
            DataType="GridColumnDataType.Number"
            Resizable="false"
            Sortable="false"
            Filterable="false"
            Editable="true">
            </IgbColumn>

            <IgbColumn
            Field="Title"
            DataType="GridColumnDataType.String"
            Resizable="true"
            Sortable="true"
            Filterable="true"
            Editable="true">
            </IgbColumn>

            <IgbColumn
            Field="HireDate"
            Header="Hire Date"
            DataType="GridColumnDataType.Date"
            Resizable="true"
            Sortable="true"
            Filterable="true"
            Editable="true">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

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

    }

    private IgbTreeGrid grid;

    private EmployeesNestedTreeData _employeesNestedTreeData = null;
    public EmployeesNestedTreeData EmployeesNestedTreeData
    {
        get
        {
            if (_employeesNestedTreeData == null)
            {
                _employeesNestedTreeData = new EmployeesNestedTreeData();
            }
            return _employeesNestedTreeData;
        }
    }

}razorコピー

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

#grid {
    --ig-banner-banner-background: #292826;
    --ig-banner-banner-message-color: #ffcd0f;
    --ig-button-foreground: #ffcd0f;
    --ig-button-hover-foreground: white;
    --ig-button-font-weight: 600;
}

cssコピー

既知の問題と制限

• グリッドに PrimaryKey が設定されておらず、リモート データ シナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモート サーバーへのリクエストがトリガーされる場合）、データ要求が完了すると、行は次の状態を失います:

• 行の選択
• 行の展開/縮小
• 行の編集
• 行のピン固定

API リファレンス

• RowEditable
• RowEditEnter
• RowEdit
• RowEditDone
• EndEdit
• Field
• Editable
• PrimaryKey
• IgbTreeGrid

その他のリソース

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

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