Blazor Tree Grid Cell Editing

Blazor Tree Grid의 Ignite UI for Blazor Blazor Tree Grid 구성 요소 내의 개별 셀의 내용에 대한 뛰어난 데이터 조작 기능을 제공하며 React CRUD 작업을 위한 강력한 API와 함께 제공됩니다. 스프레드시트, 데이터 테이블 및 데이터 그리드와 같은 앱에서 기본적인 기능으로, 사용자가 특정 셀 내에서 데이터를 추가, 편집 또는 업데이트할 수 있습니다. 기본적으로 Ignite UI for Blazor의 Grid는 셀 편집에 사용됩니다. 그리고 기본 셀 편집 템플릿으로 인해 Top of Form의 열 데이터 유형에 따라 다른 편집기가 있습니다.

또한 데이터 업데이트 작업에 대한 사용자 정의 템플릿을 정의하고 변경 사항 커밋 및 삭제에 대한 기본 동작을 재정의할 수 있습니다.

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

無料で試してみる

Blazor Tree Grid Cell Editing and Edit Templates Example

EXAMPLE

DATA

MODULES

RAZOR

CSS

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 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(IgbPaginatorModule),
                typeof(IgbTreeGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}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"
        AllowFiltering="true"
        ForeignKey="ParentID">
            <IgbPaginator
            PerPage="10">
            </IgbPaginator>

            <IgbColumn
            Field="Name"
            DataType="GridColumnDataType.String"
            Editable="true"
            HasSummary="true">
            </IgbColumn>

            <IgbColumn
            Field="Title"
            DataType="GridColumnDataType.String"
            Editable="true"
            HasSummary="true">
            </IgbColumn>

            <IgbColumn
            Field="Age"
            DataType="GridColumnDataType.Number"
            Editable="true"
            HasSummary="true">
            </IgbColumn>

            <IgbColumn
            Field="HireDate"
            DataType="GridColumnDataType.Date"
            Editable="true"
            HasSummary="true">
            </IgbColumn>

            <IgbColumn
            Field="OnPTO"
            DataType="GridColumnDataType.Boolean"
            Editable="true"
            HasSummary="true"
            Width="130px">
            </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コピー

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

셀 편집

Editing through UI

다음 방법 중 하나로 편집 가능한 셀에 초점이 맞춰지면 특정 셀에 대한 편집 모드로 들어갈 수 있습니다.

• 두 번 클릭하면;
• 한 번 클릭 시 - 이전에 선택한 셀이 편집 모드이고 현재 선택한 셀이 편집 가능한 경우에만 한 번 클릭하면 편집 모드로 들어갑니다. 이전에 선택한 셀이 편집 모드가 아닌 경우 한 번 클릭하면 편집 모드로 들어가지 않고 셀이 선택됩니다.
• 키를 누르면 Enter;
• 키를 누르면 F2;

다음 방법 중 하나로 변경 사항을 커밋하지 않고 편집 모드를 종료할 수 있습니다.

• 키를 누를 때 Escape;
• ​정렬, 필터링, 검색 및 숨기기 작업을 수행할 때

다음 방법 중 하나로 편집 모드를 종료하고 변경 사항을 커밋 할 수 있습니다.

• 키를 누르면 Enter;
• 키를 누르면 F2;
• 키를 누를 때 Tab;
• 다른 셀을 한 번 클릭하면 -IgbTreeGrid에서 다른 셀을 클릭하면 변경 사항이 제출됩니다.
• 페이징, 크기 조정, 고정 또는 이동과 같은 작업을 수행하면 편집 모드가 종료되고 변경 사항이 제출됩니다.

The cell remains in edit mode when you scroll vertically or horizontally or click outside the IgbTreeGrid. This is valid for both cell editing and row editing.

Editing through API

​IgbTreeGrid API를 통해 셀 값을 수정할 수도 있지만 기본 키가 정의된 경우에만 가능합니다.

@code {
    this.treeGrid.UpdateCell(newValue, rowID, 'ReorderLevel');
}
razor

셀을 업데이트하는 또 다른 방법은 다음과 같은 방법을 사용하는 Update 것입니다. Cell​

@code {
    private UpdateCell() {
        IgbCell cell = this.treeGrid.GetCellByColumn(rowIndex, "Age");
        cell.Update(9999);
    }
}
razor

Cell Editing Templates

​일반 편집 항목에서 기본 셀 편집 템플릿에 대해 자세히 알아보고 확인할 수 있습니다.

셀에 적용될 사용자 정의 템플릿을 제공하려는 경우 해당 템플릿을 셀 자체나 헤더에 전달할 수 있습니다. 먼저 평소와 같이 열을 만듭니다.

<IgbColumn
    Field="Category"
    DataType="GridColumnDataType.String"
    InlineEditorTemplateScript="WebGridCellEditCellTemplate"
    Editable="true"
    Name="column1"
    @ref="column1">
</IgbColumn>
razor

템플릿을 전달합니다.

*** In JavaScript ***

igRegisterScript("WebGridCellEditCellTemplate", (ctx) => {
    let cellValues = [];
    let uniqueValues = [];
    for(const i of ctx.cell.grid.data){
        const field = ctx.cell.column.field;
        if(uniqueValues.indexOf(i[field]) === -1 )
        {
            cellValues.push(html`<igc-select-item value=${i[field]}>${(i[field])}</igc-select-item>`);
            uniqueValues.push(i[field]);
        }
    }
    return html`<div>
    <igc-select position-strategy="fixed" @igcChange=${ e => ctx.cell.editValue = e.detail.value}>
          ${cellValues}
    </igc-select>
</div>`;
}, false);
razor

추가 참조를 위해 위의 작업 샘플을 여기에서 찾을 수 있습니다.

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

using System;
using System.Collections.Generic;
public class RoleplayTreeGridDataItem
{
    public double ID { get; set; }
    public double ParentID { get; set; }
    public string Name { get; set; }
    public string Age { get; set; }
    public string Alignment { get; set; }
    public string Race { get; set; }
    public string Class { get; set; }
}

public class RoleplayTreeGridData
    : List<RoleplayTreeGridDataItem>
{
    public RoleplayTreeGridData()
    {
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 1,
            ParentID = 8,
            Name = @"Stredo",
            Age = @"244",
            Alignment = @"💜 Lawful evil",
            Race = @"👩 Human",
            Class = @"🎻 Bard"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 2,
            ParentID = 7,
            Name = @"Haluun",
            Age = @"40",
            Alignment = @"🤍 Unaligned",
            Race = @"🧒🏻 Hafling",
            Class = @"🙏🏻 Monk"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 3,
            ParentID = 9,
            Name = @"Ivellios",
            Age = @"244",
            Alignment = @"🧡 Chaotic good",
            Race = @"👩 Human",
            Class = @"⚔️ Paladin"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 4,
            ParentID = -1,
            Name = @"Tes",
            Age = @"35",
            Alignment = @"💜 Lawful evil",
            Race = @"🎭 Changeling",
            Class = @"🧙‍♂️ Wizard"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 5,
            ParentID = 3,
            Name = @"Kalla",
            Age = @"47",
            Alignment = @"🤎 Neutral evil",
            Race = @"🤖 Warforged",
            Class = @"🦹‍♂️ Sorcerer"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 6,
            ParentID = 2,
            Name = @"Halimath Dundragon",
            Age = @"149",
            Alignment = @"🤍 Unaligned",
            Race = @"🐲 Dragonborn",
            Class = @"⚔️ Paladin"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 7,
            ParentID = 5,
            Name = @"Iriphawa",
            Age = @"39",
            Alignment = @"💛 Lawful neutral",
            Race = @"🧝🏻‍♂️ Half-Elf",
            Class = @"🏹 Ranger"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 8,
            ParentID = 6,
            Name = @"Quaf",
            Age = @"25",
            Alignment = @"💚 Neutral",
            Race = @"👩 Human",
            Class = @"🥊 Fighter"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 9,
            ParentID = 10,
            Name = @"Rat Scratch",
            Age = @"15",
            Alignment = @"🤎 Neutral evil",
            Race = @"🐡 Locathah",
            Class = @"🍁 Druid"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 10,
            ParentID = 4,
            Name = @"Slicer",
            Age = @"57",
            Alignment = @"💜 Lawful evil",
            Race = @"🐡 Locathah",
            Class = @"💪 Barbarian"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 11,
            ParentID = 7,
            Name = @"Nereones Ahlorsath",
            Age = @"95",
            Alignment = @"💛 Lawful neutral",
            Race = @"👩 Human",
            Class = @"🥊 Fighter"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 12,
            ParentID = 9,
            Name = @"Nalvarti Stonecutter",
            Age = @"118",
            Alignment = @"❤️ Neutral good",
            Race = @"🧝‍♀️ Elf",
            Class = @"❤️‍ Cleric"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 13,
            ParentID = 1,
            Name = @"Errk",
            Age = @"22",
            Alignment = @"🤎 Neutral evil",
            Race = @"🧝🏻‍♂️ Half-Elf",
            Class = @"🎻 Bard"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 14,
            ParentID = 5,
            Name = @"Seven Thundercloud",
            Age = @"43",
            Alignment = @"💖 Lawful good",
            Race = @"🐡 Locathah",
            Class = @"⚔️ Paladin"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 15,
            ParentID = 10,
            Name = @"Navarra Chergoba",
            Age = @"16",
            Alignment = @"💜 Lawful evil",
            Race = @"🐯 Tabaxi",
            Class = @"❤️‍ Cleric"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 16,
            ParentID = 4,
            Name = @"Sail Snap",
            Age = @"56",
            Alignment = @"💖 Lawful good",
            Race = @"🌳 Arboren",
            Class = @"💪 Barbarian"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 17,
            ParentID = 8,
            Name = @"Urreek",
            Age = @"17",
            Alignment = @"💜 Lawful evil",
            Race = @"🧝🏻‍♂️ Half-Elf",
            Class = @"🐉 Warlock"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 18,
            ParentID = 6,
            Name = @"Morkral Firetamer",
            Age = @"24",
            Alignment = @"🤎 Neutral evil",
            Race = @"🐲 Dragonborn",
            Class = @"🙏🏻 Monk"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 19,
            ParentID = 2,
            Name = @"Vithka",
            Age = @"53",
            Alignment = @"💜 Lawful evil",
            Race = @"🐡 Locathah",
            Class = @"⚔️ Paladin"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 20,
            ParentID = 7,
            Name = @"Sandrue Avhoste",
            Age = @"19",
            Alignment = @"💙 Chaotic Neutral",
            Race = @"🐲 Dragonborn",
            Class = @"🗡️ Rogue"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 21,
            ParentID = 8,
            Name = @"Hapah Moq",
            Age = @"34",
            Alignment = @"💜 Lawful evil",
            Race = @"🎅🏽 Dwarf",
            Class = @"🎻 Bard"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 22,
            ParentID = 5,
            Name = @"Kothar",
            Age = @"55",
            Alignment = @"🤍 Unaligned",
            Race = @"🧝🏻‍♂️ Half-Elf",
            Class = @"🐉 Warlock"
        });
        this.Add(new RoleplayTreeGridDataItem()
        {
            ID = 23,
            ParentID = 1,
            Name = @"Senen",
            Age = @"40",
            Alignment = @"💜 Lawful evil",
            Race = @"🧒🏻 Hafling",
            Class = @"🥊 Fighter"
        });
    }
}csコピー

@using IgniteUI.Blazor.Controls

@inject IJSRuntime JS

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="treeGrid1"
        @ref="treeGrid1"
        Id="treeGrid1"
        Data="RoleplayTreeGridData"
        PrimaryKey="ID"
        ForeignKey="ParentID">
            <IgbColumn
            Field="Name"
            Header="Character Name"
            DataType="GridColumnDataType.String">
            </IgbColumn>

            <IgbColumn
            Field="Race"
            Header="Race"
            DataType="GridColumnDataType.String"
            Editable="true"
            InlineEditorTemplateScript="WebTreeGridCellEditCellTemplate"
            Name="column1"
            @ref="column1">
            </IgbColumn>

            <IgbColumn
            Field="Class"
            Header="Class"
            InlineEditorTemplateScript="WebTreeGridCellEditCellTemplate"
            DataType="GridColumnDataType.String"
            Editable="true"
            Name="column2"
            @ref="column2">
            </IgbColumn>

            <IgbColumn
            Field="Age"
            Header="Age"
            DataType="GridColumnDataType.String"
            Editable="true">
            </IgbColumn>

            <IgbColumn
            Field="Alignment"
            Header="Alignment"
            InlineEditorTemplateScript="WebTreeGridCellEditCellTemplate"
            DataType="GridColumnDataType.String"
            Editable="true"
            Name="column3"
            @ref="column3">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var treeGrid1 = this.treeGrid1;
        var column1 = this.column1;
        var column2 = this.column2;
        var column3 = this.column3;

    }

    private IgbTreeGrid treeGrid1;
    private IgbColumn column1;
    private IgbColumn column2;
    private IgbColumn column3;

    private RoleplayTreeGridData _roleplayTreeGridData = null;
    public RoleplayTreeGridData RoleplayTreeGridData
    {
        get
        {
            if (_roleplayTreeGridData == null)
            {
                _roleplayTreeGridData = new RoleplayTreeGridData();
            }
            return _roleplayTreeGridData;
        }
    }

}razorコピー

igRegisterScript("WebTreeGridCellEditCellTemplate", (ctx) => {
    var html = window.igTemplating.html;
    let cellValues = [];
    let uniqueValues = [];
    for (const i of ctx.cell.grid.data) {
        const field = ctx.cell.column.field;
        if (uniqueValues.indexOf(i[field]) === -1) {
            if (ctx.cell.value == i[field]) {
                cellValues.push(html`<igc-select-item selected value=${i[field]}>${(i[field])}</igc-select-item>`);
            } else cellValues.push(html`<igc-select-item value=${i[field]}>${(i[field])}</igc-select-item>`);
            uniqueValues.push(i[field]);
        }
    }
    return html`
    <igc-select style="width:100%; height:100%; --ig-size: var(--ig-size-large);" @igcChange=${e => ctx.cell.editValue = e.detail.value}>
          ${cellValues}
    </igc-select>
`
}, false);

jsコピー

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

CRUD operations

Please keep in mind that when you perform some CRUD operation all of the applied pipes like filtering, sorting and grouping will be re-applied and your view will be automatically updated.

The IgbTreeGrid provides a straightforward API for basic CRUD operations.

Adding a new record

​IgbTreeGrid 구성 요소는 제공된 데이터를 데이터 소스 자체에 추가하는 AddRow 메서드를 노출합니다.

//Assuming we have a `GetNewRecord` method returning the new row data.
const record = this.GetNewRecord();
this.TreeGridRef.AddRow(record);
razor

Updating data in the Tree Grid

트리 그리드의 데이터 업데이트는 UpdateRow 및 UpdateCell 메서드를 통해 이루어지지만 그리드의 PrimaryKey가 정의된 경우에만 가능합니다. 또한 해당 업데이트 방법을 통해 셀 및/또는 행 값을 직접 업데이트할 수도 있습니다.

@code {
    // Updating the whole row
    this.treeGrid.UpdateRow(newData, this.selectedCell.cellID.rowID);

    // Just a particular cell through the Tree Grid API
    this.treeGrid.UpdateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field);

    // Directly using the cell `update` method
    this.selectedCell.Update(newData);

    // Directly using the row `update` method
    IgbRowType row = this.treeGrid.GetRowByKey(rowID);
    row.Update(newData);
}
razor

Deleting data from the Tree Grid

​DeleteRow 메서드는 PrimaryKey가 정의된 경우에만 지정된 행을 제거한다는 점을 기억하세요.

@code {
    // Delete row through Tree Grid API
    this.treeGrid.DeleteRow(this.selectedCell.cellID.rowID);
    // Delete row through row object
    IgbRowType row = this.treeGrid.GetRowByIndex(rowIndex);
    row.Del();
}
razor

Cell Validation on Edit Event

​IgbTreeGrid의 편집 이벤트를 사용하면 사용자가 IgbTreeGrid와 상호 작용하는 방식을 변경할 수 있습니다.

이 예에서는 CellEdit 이벤트에 바인딩하여 입력된 데이터를 기반으로 셀의 유효성을 검사합니다. 셀의 새 값이 사전 정의된 기준을 충족하지 않는 경우 이벤트를 취소하여 데이터 소스에 도달하지 못하게 합니다.

가장 먼저 해야 할 일은 그리드의 이벤트에 바인딩하는 것입니다.

<IgbTreeGrid CellEditScript="HandleCellEdit" />
razor

​CellEdit​ ​셀의 값이 커밋되려고 할 때마다 내보냅니다. CellEdit 정의에서 조치를 취하기 전에 특정 열을 확인해야 합니다.

*** In JavaScript ***
igRegisterScript("HandleCellEdit", (ev) => {
    const column = event.detail.column;

	if (column.field === 'Age') {
		if (event.detail.newValue < 18) {
			event.detail.cancel = true;
			alert('Employees must be at least 18 years old!');
		}
	} else if (column.field === 'HireDate') {
		if (event.detail.newValue > new Date().getTime()) {
			event.detail.cancel = true;
			alert('The employee hire date must be in the past!');
		}
	}
}, false);
razor

​Age 열 아래의 셀에 입력된 값이 18 미만이거나 HireDate 열의 값이 미래인 경우 편집이 취소되고 사용자에게 취소에 대한 경고가 표시됩니다.

​IgbTreeGrid에 적용된 위의 검증 결과는 아래 데모에서 볼 수 있습니다.

EXAMPLE

DATA

MODULES

RAZOR

JS

CSS

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 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 IgniteUI.Blazor.Controls

@inject IJSRuntime JS

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        Data="EmployeesNestedTreeData"
        PrimaryKey="ID"
        CellEditScript="WebTreeGridCellEdit"
        ForeignKey="ParentID">
            <IgbColumn
            Field="Name"
            DataType="GridColumnDataType.String">
            </IgbColumn>

            <IgbColumn
            Field="Title"
            DataType="GridColumnDataType.String">
            </IgbColumn>

            <IgbColumn
            Field="Age"
            DataType="GridColumnDataType.Number"
            Editable="true">
            </IgbColumn>

            <IgbColumn
            Field="HireDate"
            DataType="GridColumnDataType.Date"
            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コピー

igRegisterScript("WebTreeGridCellEdit", (event) => {
	const column = event.detail.column;
	if (column.field === 'Age') {
		if (event.detail.newValue < 18) {
			event.detail.cancel = true;
			alert('Employees must be at least 18 years old!');
		}
	} else if (column.field === 'HireDate') {
		if (event.detail.newValue > new Date().getTime()) {
			event.detail.cancel = true;
			alert('The employee hire date must be in the past!');
		}
	}
}, false);

jsコピー

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

Styling

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

<IgbTreeGrid Class="treeGrid"></IgbTreeGrid>
razor

그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

.treeGrid {
    --ig-grid-edit-mode-color: orange;
    --ig-grid-cell-editing-background: lightblue;
}
css

Styling Example

EXAMPLE

DATA

MODULES

RAZOR

CSS

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

@using IgniteUI.Blazor.Controls

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

#treeGrid {
    --cell-editing-background: #4567bb;
    --cell-active-border-color: #4567bb;
    --cell-edited-value-color: #fff;
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        Data="EmployeesNestedTreeData"
        PrimaryKey="ID"
        AllowFiltering="true"
        ForeignKey="ParentID">
            <IgbPaginator
            PerPage="10">
            </IgbPaginator>

            <IgbColumn
            Field="Name"
            DataType="GridColumnDataType.String"
            Editable="true">
            </IgbColumn>

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

            <IgbColumn
            Field="Age"
            DataType="GridColumnDataType.Number"
            Editable="true">
            </IgbColumn>

            <IgbColumn
            Field="HireDate"
            DataType="GridColumnDataType.Date"
            Editable="true">
            </IgbColumn>

            <IgbColumn
            Field="OnPTO"
            DataType="GridColumnDataType.Boolean"
            Editable="true"
            Width="130px">
            </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/
*/

#treeGrid {
    --cell-editing-background: #4567bb;
    --cell-active-border-color: #4567bb;
    --cell-edited-value-color: #fff;
}

cssコピー

API References

• IgbTreeGrid

• IgbDatePicker

Additional Resources