Blazor Hierarchical Grid Editing

Blazor Hierarchical Grid의 Ignite UI for Blazor는 레코드 생성, 업데이트 및 삭제와 같은 데이터 조작 작업을 수행하는 간편한 방법을 제공합니다. IgbHierarchicalGrid는 이러한 작업이 수행되는 방식을 사용자 지정할 수 있는 강력한 공개 API를 제공합니다. 데이터 조작 단계는 다음과 같습니다.

셀 편집
행 편집
일괄 편집(출시 예정)

Setup

활성화 IgbHierarchicalGrid 해야 하는 편집 모드를 지정하려면 다음과 같은 부울 속성을 Editable RowEditable 노출합니다.

Editable 속성을 사용하면 다음 옵션을 지정할 수 있습니다.

false- 해당 열의 편집이 비활성화됩니다. 이것이 기본값입니다.
true- 해당 열에 대한 편집이 활성화됩니다.

열을 편집할 수 없는 경우에도 에서 노출하는 공개 API를 통해 해당 값을 수정할 수 있습니다 IgbHierarchicalGrid.

RowEditable 속성을 사용하면 다음 옵션을 지정할 수 있습니다.

false- 해당 그리드의 행 편집이 비활성화됩니다. 이것이 기본값입니다.
true- 해당 그리드의 행 편집이 활성화됩니다.

IgbHierarchicalGrid에서 property를 true Editable로 설정하고 RowEditable 속성이 어떤 열에 대해 명시적으로 정의되지 않은 경우 기본 키를 제외한 모든 열에 대해 편집이 활성화됩니다.

셀 및 일괄 편집- 이 시나리오에서는 각 셀의 모든 단일 수정 사항이 별도로 보존되며 실행 취소/다시 실행 작업이 셀 수준에서 가능합니다.
행 및 일괄 편집- 이 시나리오에서는 수정 사항이 행 수준에서 유지되므로 실행 취소/다시 실행 작업은 수정된 각 셀에 대해 작동하지 않고 각 행의 여러 셀에 대해 작동합니다.

Editing Templates

데이터 유형별 편집 템플릿을 사용하려면 열의 DataType 속성을 지정해야 합니다. 이제 각 유형의 기본 템플릿이 무엇인지 살펴보겠습니다.

string 데이터 유형의 경우 기본 템플릿은 IgbInput 사용합니다.
number 데이터 유형의 경우 기본 템플릿은 IgbInput type="number"를 사용하므로 숫자로 구문 분석할 수 없는 값으로 셀을 업데이트하려고 하면 변경 사항이 삭제되고 셀의 값은 0으로 설정합니다.
date 데이터 유형의 경우 기본 템플릿은 IgbDatePicker 사용합니다.
dateTime 데이터 유형의 경우 기본 템플릿은 DateTimeEditor 사용합니다. 이 편집기는 DateTime 개체의 입력 요소 부분에 대한 마스크 지침을 제공합니다.
time 데이터 유형의 경우 기본 템플릿은 TimePicker 사용합니다.
boolean 데이터 유형의 경우 기본 템플릿은 IgbCheckbox 사용합니다.
currency 데이터 유형의 경우 기본 템플릿은 애플리케이션 또는 그리드 로케일 설정을 기반으로 하는 접두사/접미사 구성과 함께 InputGroup 사용합니다.
percent 데이터 유형의 경우 기본 템플릿은 편집된 값의 미리 보기를 백분율로 표시하는 접미사 요소와 함께 InputGroup 사용합니다.

사용 가능한 모든 열 데이터 유형은 공식 열 유형 항목에서 찾을 수 있습니다.

Event Arguments and Sequence

그리드는 편집 경험을 더 효과적으로 제어할 수 있는 다양한 이벤트를 표시합니다. 이러한 이벤트는 행 편집 및 셀 편집 수명 주기 동안(편집 작업을 시작, 커밋 또는 취소할 때) 발생합니다.

이벤트	설명	인수	취소 가능
`RowEditEnter`	만약에`RowEditing` 활성화되어 행이 편집 모드로 들어갈 때 실행됩니다.	`IgbGridEditEventArgs`	진실
`CellEditEnter`	셀이 편집 모드로 들어갈 때 발생합니다(이후`RowEditEnter`)	`IgbGridEditEventArgs`	진실
`CellEdit`	값이 변경되면 셀 값이 커밋되기 직전에 실행 됩니다(예:`Enter`)	`IgbGridEditEventArgs`	진실
`CellEditDone`	값이 변경되면 셀이 편집되고 셀 값이 커밋 된 후에 실행됩니다.	`IgbGridEditDoneEventArgs`	거짓
`CellEditExit`	셀이 편집 모드를 종료할 때 발생합니다.	`IgbGridEditDoneEventArgs`	거짓
`RowEdit`	만약에`RowEditing` 활성화되면 편집 모드의 값이 커밋되기 직전에 실행 됩니다(예:`Done` 행 편집 오버레이의 버튼)	`IgbGridEditEventArgs`	진실
`RowEditDone`	만약에`RowEditing` 활성화되면 행이 편집되고 새 행의 값이 커밋된 후에 실행 됩니다.	`IgbGridEditDoneEventArgs`	거짓
`RowEditExit`	만약에`RowEditing` 활성화되면 행이 편집 모드를 종료할 때 실행됩니다.	`IgbGridEditDoneEventArgs`	거짓

Event Cancelation

RowEditEnter- 둘 다 편집 모드로 들어가지 않습니다 Row Cell.
CellEditEnter- 셀 편집 입력을 방지합니다. RowEditable 활성화되면 행 편집이 트리거되지만 셀 편집은 금지된 상태로 유지됩니다.
CellEdit- 허용 Cell 및/또는 Row 편집, 완료 버튼 또는 Enter 키를 누르면 값 또는 행 트랜잭션이 커밋되지 않습니다. 셀 편집 및 행 편집은 취소 버튼을 클릭할 때까지 닫히지 않습니다.
RowEdit- 셀 커밋이 가능하지만 전체 행은 불가능합니다. 행은 편집 모드로 유지되며 행 트랜잭션은 열린 것으로 간주됩니다. 완료를 누르면 행이 커밋되거나 닫히지 않습니다. 취소 버튼은 변경 사항을 적용하지 않고 편집 프로세스와 트랜잭션을 닫습니다.

다음 샘플은 실제 편집 실행 순서를 보여줍니다.

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(IgbHierarchicalGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
public class SingersDataItem
{
    public double ID { get; set; }
    public string Artist { get; set; }
    public string Photo { get; set; }
    public double Debut { get; set; }
    public double GrammyNominations { get; set; }
    public double GrammyAwards { get; set; }
    public bool HasGrammyAward { get; set; }
    public List<SingersDataItem_ToursItem> Tours { get; set; }
    public List<SingersDataItem_AlbumsItem> Albums { get; set; }
}
public class SingersDataItem_ToursItem
{
    public string Tour { get; set; }
    public string StartedOn { get; set; }
    public string Location { get; set; }
    public string Headliner { get; set; }
    public string TouredBy { get; set; }
}
public class SingersDataItem_AlbumsItem
{
    public string Album { get; set; }
    public string LaunchDate { get; set; }
    public double BillboardReview { get; set; }
    public double USBillboard200 { get; set; }
    public string Artist { get; set; }
}

public class SingersData
    : List<SingersDataItem>
{
    public SingersData()
    {
        this.Add(new SingersDataItem()
        {
            ID = 0,
            Artist = @"Naomí Yepes",
            Photo = @"https://static.infragistics.com/xplatform/images/people/names/naomi.jpg",
            Debut = 2011,
            GrammyNominations = 6,
            GrammyAwards = 0,
            HasGrammyAward = false,
            Tours = new List<SingersDataItem_ToursItem>()
            {
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Faithful Tour",
                    StartedOn = @"Sep 12",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"City Jam Sessions",
                    StartedOn = @"Aug 13",
                    Location = @"North America",
                    Headliner = @"YES",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Christmas NYC 2013",
                    StartedOn = @"Dec 13",
                    Location = @"United States",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Christmas NYC 2014",
                    StartedOn = @"Dec 14",
                    Location = @"North America",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Watermelon Tour",
                    StartedOn = @"Feb 15",
                    Location = @"Worldwide",
                    Headliner = @"YES",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Christmas NYC 2016",
                    StartedOn = @"Dec 16",
                    Location = @"United States",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"The Dragon Tour",
                    StartedOn = @"Feb 17",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Organic Sessions",
                    StartedOn = @"Aug 18",
                    Location = @"United States, England",
                    Headliner = @"YES",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Hope World Tour",
                    StartedOn = @"Mar 19",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                }}
            ,
            Albums = new List<SingersDataItem_AlbumsItem>()
            {
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Initiation",
                    LaunchDate = @"September 3, 2013",
                    BillboardReview = 86,
                    USBillboard200 = 1,
                    Artist = @"Naomí Yepes"
                },
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Dream Driven",
                    LaunchDate = @"August 25, 2014",
                    BillboardReview = 81,
                    USBillboard200 = 1,
                    Artist = @"Naomí Yepes"
                },
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"The dragon journey",
                    LaunchDate = @"May 20, 2016",
                    BillboardReview = 60,
                    USBillboard200 = 2,
                    Artist = @"Naomí Yepes"
                },
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Organic me",
                    LaunchDate = @"August 17, 2018",
                    BillboardReview = 82,
                    USBillboard200 = 1,
                    Artist = @"Naomí Yepes"
                },
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Curiosity",
                    LaunchDate = @"December 7, 2019",
                    BillboardReview = 75,
                    USBillboard200 = 12,
                    Artist = @"Naomí Yepes"
                }}

        });
        this.Add(new SingersDataItem()
        {
            ID = 1,
            Artist = @"Babila Ebwélé",
            Photo = @"https://static.infragistics.com/xplatform/images/people/names/babila.jpg",
            Debut = 2009,
            GrammyNominations = 0,
            GrammyAwards = 11,
            HasGrammyAward = true,
            Tours = new List<SingersDataItem_ToursItem>()
            {
                new SingersDataItem_ToursItem()
                {
                    Tour = @"The last straw",
                    StartedOn = @"May 09",
                    Location = @"Europe, Asia",
                    Headliner = @"NO",
                    TouredBy = @"Babila Ebwélé"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"No foundations",
                    StartedOn = @"Jun 04",
                    Location = @"United States, Europe",
                    Headliner = @"YES",
                    TouredBy = @"Babila Ebwélé"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Crazy eyes",
                    StartedOn = @"Jun 08",
                    Location = @"North America",
                    Headliner = @"NO",
                    TouredBy = @"Babila Ebwélé"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Zero gravity",
                    StartedOn = @"Apr 19",
                    Location = @"United States",
                    Headliner = @"NO",
                    TouredBy = @"Babila Ebwélé"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Battle with myself",
                    StartedOn = @"Mar 08",
                    Location = @"North America",
                    Headliner = @"YES",
                    TouredBy = @"Babila Ebwélé"
                }}
            ,
            Albums = new List<SingersDataItem_AlbumsItem>()
            {
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Pushing up daisies",
                    LaunchDate = @"May 31, 2000",
                    BillboardReview = 86,
                    USBillboard200 = 42,
                    Artist = @"Babila Ebwélé"
                },
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Death's dead",
                    LaunchDate = @"June 8, 2016",
                    BillboardReview = 85,
                    USBillboard200 = 95,
                    Artist = @"Babila Ebwélé"
                }}

        });
        this.Add(new SingersDataItem()
        {
            ID = 2,
            Artist = @"Ahmad Nazeri",
            Photo = @"https://static.infragistics.com/xplatform/images/people/names/ahmad.jpg",
            Debut = 2004,
            GrammyNominations = 3,
            GrammyAwards = 1,
            HasGrammyAward = true,
            Tours = new List<SingersDataItem_ToursItem>()
            {
            }
            ,
            Albums = new List<SingersDataItem_AlbumsItem>()
            {
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Emergency",
                    LaunchDate = @"March 6, 2004",
                    BillboardReview = 98,
                    USBillboard200 = 69,
                    Artist = @"Ahmad Nazeri"
                },
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Bursting bubbles",
                    LaunchDate = @"April 17, 2006",
                    BillboardReview = 69,
                    USBillboard200 = 39,
                    Artist = @"Ahmad Nazeri"
                }}

        });
        this.Add(new SingersDataItem()
        {
            ID = 3,
            Artist = @"Kimmy McIlmorie",
            Photo = @"https://static.infragistics.com/xplatform/images/people/names/kimmy.jpg",
            Debut = 2007,
            GrammyNominations = 21,
            GrammyAwards = 3,
            HasGrammyAward = true,
            Tours = new List<SingersDataItem_ToursItem>()
            {
            }
            ,
            Albums = new List<SingersDataItem_AlbumsItem>()
            {
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Here we go again",
                    LaunchDate = @"November 18, 2017",
                    BillboardReview = 68,
                    USBillboard200 = 1,
                    Artist = @"Kimmy McIlmorie"
                }}

        });
        this.Add(new SingersDataItem()
        {
            ID = 4,
            Artist = @"Mar Rueda",
            Photo = @"https://static.infragistics.com/xplatform/images/people/names/mar.jpg",
            Debut = 1996,
            GrammyNominations = 14,
            GrammyAwards = 2,
            HasGrammyAward = true,
            Tours = new List<SingersDataItem_ToursItem>()
            {
            }
            ,
            Albums = new List<SingersDataItem_AlbumsItem>()
            {
            }

        });
        this.Add(new SingersDataItem()
        {
            ID = 5,
            Artist = @"Izabella Tabakova",
            Photo = @"https://static.infragistics.com/xplatform/images/people/names/izabella.jpg",
            Debut = 2017,
            GrammyNominations = 7,
            GrammyAwards = 11,
            HasGrammyAward = true,
            Tours = new List<SingersDataItem_ToursItem>()
            {
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Final breath",
                    StartedOn = @"Jun 13",
                    Location = @"Europe",
                    Headliner = @"YES",
                    TouredBy = @"Izabella Tabakova"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Once bitten",
                    StartedOn = @"Dec 18",
                    Location = @"Australia, United States",
                    Headliner = @"NO",
                    TouredBy = @"Izabella Tabakova"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Code word",
                    StartedOn = @"Sep 19",
                    Location = @"United States, Europe",
                    Headliner = @"NO",
                    TouredBy = @"Izabella Tabakova"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Final draft",
                    StartedOn = @"Sep 17",
                    Location = @"United States, Europe",
                    Headliner = @"YES",
                    TouredBy = @"Izabella Tabakova"
                }}
            ,
            Albums = new List<SingersDataItem_AlbumsItem>()
            {
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Once bitten",
                    LaunchDate = @"July 16, 2007",
                    BillboardReview = 79,
                    USBillboard200 = 53,
                    Artist = @"Izabella Tabakova"
                },
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Your graciousness",
                    LaunchDate = @"November 17, 2004",
                    BillboardReview = 69,
                    USBillboard200 = 30,
                    Artist = @"Izabella Tabakova"
                },
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Dark matters",
                    LaunchDate = @"November 3, 2002",
                    BillboardReview = 79,
                    USBillboard200 = 85,
                    Artist = @"Izabella Tabakova"
                }}

        });
        this.Add(new SingersDataItem()
        {
            ID = 6,
            Artist = @"Nguyễn Diệp Chi",
            Photo = @"https://static.infragistics.com/xplatform/images/people/names/nguyen.jpg",
            Debut = 1992,
            GrammyNominations = 4,
            GrammyAwards = 2,
            HasGrammyAward = true,
            Tours = new List<SingersDataItem_ToursItem>()
            {
            }
            ,
            Albums = new List<SingersDataItem_AlbumsItem>()
            {
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Library of liberty",
                    LaunchDate = @"December 22, 2003",
                    BillboardReview = 93,
                    USBillboard200 = 5,
                    Artist = @"Nguyễn Diệp Chi"
                }}

        });
        this.Add(new SingersDataItem()
        {
            ID = 7,
            Artist = @"Eva Lee",
            Photo = @"https://static.infragistics.com/xplatform/images/people/names/eva.jpg",
            Debut = 2008,
            GrammyNominations = 2,
            GrammyAwards = 0,
            HasGrammyAward = false,
            Tours = new List<SingersDataItem_ToursItem>()
            {
            }
            ,
            Albums = new List<SingersDataItem_AlbumsItem>()
            {
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Just a tease",
                    LaunchDate = @"May 3, 2001",
                    BillboardReview = 91,
                    USBillboard200 = 29,
                    Artist = @"Eva Lee"
                }}

        });
        this.Add(new SingersDataItem()
        {
            ID = 8,
            Artist = @"Siri Jakobsson",
            Photo = @"https://static.infragistics.com/xplatform/images/people/names/siri.jpg",
            Debut = 1990,
            GrammyNominations = 2,
            GrammyAwards = 8,
            HasGrammyAward = true,
            Tours = new List<SingersDataItem_ToursItem>()
            {
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Basket case",
                    StartedOn = @"Jan 07",
                    Location = @"Europe, Asia",
                    Headliner = @"NO",
                    TouredBy = @"Siri Jakobsson"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"The bigger fish",
                    StartedOn = @"Dec 07",
                    Location = @"United States, Europe",
                    Headliner = @"YES",
                    TouredBy = @"Siri Jakobsson"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Missed the boat",
                    StartedOn = @"Jun 09",
                    Location = @"Europe, Asia",
                    Headliner = @"NO",
                    TouredBy = @"Siri Jakobsson"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Equivalent exchange",
                    StartedOn = @"Feb 06",
                    Location = @"United States, Europe",
                    Headliner = @"YES",
                    TouredBy = @"Siri Jakobsson"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Damage control",
                    StartedOn = @"Oct 11",
                    Location = @"Australia, United States",
                    Headliner = @"NO",
                    TouredBy = @"Siri Jakobsson"
                }}
            ,
            Albums = new List<SingersDataItem_AlbumsItem>()
            {
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Under the bus",
                    LaunchDate = @"May 14, 2000",
                    BillboardReview = 67,
                    USBillboard200 = 67,
                    Artist = @"Siri Jakobsson"
                }}

        });
        this.Add(new SingersDataItem()
        {
            ID = 9,
            Artist = @"Pablo Cambeiro",
            Photo = @"https://static.infragistics.com/xplatform/images/people/names/pablo.jpg",
            Debut = 2011,
            GrammyNominations = 5,
            GrammyAwards = 0,
            HasGrammyAward = false,
            Tours = new List<SingersDataItem_ToursItem>()
            {
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Beads",
                    StartedOn = @"May 11",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Concept art",
                    StartedOn = @"Dec 18",
                    Location = @"United States",
                    Headliner = @"YES",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Glass shoe",
                    StartedOn = @"Jan 20",
                    Location = @"Worldwide",
                    Headliner = @"YES",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Pushing buttons",
                    StartedOn = @"Feb 15",
                    Location = @"Europe, Asia",
                    Headliner = @"NO",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Dark matters",
                    StartedOn = @"Jan 04",
                    Location = @"Australia, United States",
                    Headliner = @"YES",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Greener grass",
                    StartedOn = @"Sep 09",
                    Location = @"United States, Europe",
                    Headliner = @"NO",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Apparatus",
                    StartedOn = @"Nov 16",
                    Location = @"Europe",
                    Headliner = @"NO",
                    TouredBy = @"Pablo Cambeiro"
                }}
            ,
            Albums = new List<SingersDataItem_AlbumsItem>()
            {
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Fluke",
                    LaunchDate = @"August 4, 2017",
                    BillboardReview = 93,
                    USBillboard200 = 98,
                    Artist = @"Pablo Cambeiro"
                },
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Crowd control",
                    LaunchDate = @"August 26, 2003",
                    BillboardReview = 68,
                    USBillboard200 = 84,
                    Artist = @"Pablo Cambeiro"
                }}

        });
        this.Add(new SingersDataItem()
        {
            ID = 10,
            Artist = @"Athar Malakooti",
            Photo = @"https://static.infragistics.com/xplatform/images/people/names/athar.jpg",
            Debut = 2017,
            GrammyNominations = 0,
            GrammyAwards = 0,
            HasGrammyAward = false,
            Tours = new List<SingersDataItem_ToursItem>()
            {
            }
            ,
            Albums = new List<SingersDataItem_AlbumsItem>()
            {
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Pushing up daisies",
                    LaunchDate = @"February 24, 2016",
                    BillboardReview = 74,
                    USBillboard200 = 77,
                    Artist = @"Athar Malakooti"
                }}

        });
        this.Add(new SingersDataItem()
        {
            ID = 11,
            Artist = @"Marti Valencia",
            Photo = @"https://static.infragistics.com/xplatform/images/people/names/marti.jpg",
            Debut = 2004,
            GrammyNominations = 1,
            GrammyAwards = 1,
            HasGrammyAward = true,
            Tours = new List<SingersDataItem_ToursItem>()
            {
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Cat eat cat world",
                    StartedOn = @"Sep 00",
                    Location = @"Worldwide",
                    Headliner = @"YES",
                    TouredBy = @"Marti Valencia"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Final straw",
                    StartedOn = @"Sep 06",
                    Location = @"United States, Europe",
                    Headliner = @"NO",
                    TouredBy = @"Marti Valencia"
                }}
            ,
            Albums = new List<SingersDataItem_AlbumsItem>()
            {
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Nemesis",
                    LaunchDate = @"June 30, 2004",
                    BillboardReview = 94,
                    USBillboard200 = 9,
                    Artist = @"Marti Valencia"
                },
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"First chance",
                    LaunchDate = @"January 7, 2019",
                    BillboardReview = 96,
                    USBillboard200 = 19,
                    Artist = @"Marti Valencia"
                },
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"God's advocate",
                    LaunchDate = @"April 29, 2007",
                    BillboardReview = 66,
                    USBillboard200 = 37,
                    Artist = @"Marti Valencia"
                }}

        });
        this.Add(new SingersDataItem()
        {
            ID = 12,
            Artist = @"Alicia Stanger",
            Photo = @"https://static.infragistics.com/xplatform/images/people/names/alicia.jpg",
            Debut = 2010,
            GrammyNominations = 1,
            GrammyAwards = 0,
            HasGrammyAward = false,
            Tours = new List<SingersDataItem_ToursItem>()
            {
            }
            ,
            Albums = new List<SingersDataItem_AlbumsItem>()
            {
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Forever alone",
                    LaunchDate = @"November 3, 2005",
                    BillboardReview = 82,
                    USBillboard200 = 7,
                    Artist = @"Alicia Stanger"
                }}

        });
        this.Add(new SingersDataItem()
        {
            ID = 13,
            Artist = @"Peter Taylor",
            Photo = @"https://static.infragistics.com/xplatform/images/people/names/peter.jpg",
            Debut = 2005,
            GrammyNominations = 0,
            GrammyAwards = 2,
            HasGrammyAward = true,
            Tours = new List<SingersDataItem_ToursItem>()
            {
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Love",
                    StartedOn = @"Jun 04",
                    Location = @"Europe, Asia",
                    Headliner = @"YES",
                    TouredBy = @"Peter Taylor"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Fault of treasures",
                    StartedOn = @"Oct 13",
                    Location = @"North America",
                    Headliner = @"NO",
                    TouredBy = @"Peter Taylor"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"For eternity",
                    StartedOn = @"Mar 05",
                    Location = @"United States",
                    Headliner = @"YES",
                    TouredBy = @"Peter Taylor"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Time flies",
                    StartedOn = @"Jun 03",
                    Location = @"North America",
                    Headliner = @"NO",
                    TouredBy = @"Peter Taylor"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Highest difficulty",
                    StartedOn = @"Nov 01",
                    Location = @"Worldwide",
                    Headliner = @"YES",
                    TouredBy = @"Peter Taylor"
                },
                new SingersDataItem_ToursItem()
                {
                    Tour = @"Sleeping dogs",
                    StartedOn = @"May 04",
                    Location = @"United States, Europe",
                    Headliner = @"NO",
                    TouredBy = @"Peter Taylor"
                }}
            ,
            Albums = new List<SingersDataItem_AlbumsItem>()
            {
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Decisions decisions",
                    LaunchDate = @"April 10, 2008",
                    BillboardReview = 85,
                    USBillboard200 = 35,
                    Artist = @"Peter Taylor"
                },
                new SingersDataItem_AlbumsItem()
                {
                    Album = @"Climate changed",
                    LaunchDate = @"June 20, 2015",
                    BillboardReview = 66,
                    USBillboard200 = 89,
                    Artist = @"Peter Taylor"
                }}

        });
    }
}cs


@using IgniteUI.Blazor.Controls

@inject IJSRuntime JS

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbHierarchicalGrid
        AutoGenerate="false"
        Data="SingersData"
        PrimaryKey="ID"
        Id="hierarchicalGrid"
        Name="hierarchicalGrid"
        @ref="hierarchicalGrid"
        RowEditable="true"
        RenderedScript="WebHierarchicalGridRendered"
        RowEditEnterScript="WebHierarchicalGridRowEditEnter"
        RowEditScript="WebHierarchicalGridRowEdit"
        RowEditDoneScript="WebHierarchicalGridRowEditDone"
        RowEditExitScript="WebHierarchicalGridRowEditExit"
        CellEditEnterScript="WebHierarchicalGridCellEditEnter"
        CellEditScript="WebHierarchicalGridCellEdit"
        CellEditExitScript="WebHierarchicalGridCellEditExit">
            <IgbColumn
            Field="Artist"
            Header="Artist"
            DataType="GridColumnDataType.String">
            </IgbColumn>

            <IgbColumn
            Field="HasGrammyAward"
            Header="Has Grammy Award"
            DataType="GridColumnDataType.Boolean">
            </IgbColumn>

            <IgbColumn
            Field="Debut"
            Header="Debut"
            DataType="GridColumnDataType.Number">
            </IgbColumn>

            <IgbColumn
            Field="GrammyNominations"
            Header="Grammy Nominations"
            DataType="GridColumnDataType.Number">
            </IgbColumn>

            <IgbColumn
            Field="GrammyAwards"
            Header="Grammy Awards"
            DataType="GridColumnDataType.Number">
            </IgbColumn>

            <IgbRowIsland
            ChildDataKey="Albums"
            AutoGenerate="false"
            Name="rowIsland"
            @ref="rowIsland"
            PrimaryKey="Album"
            RowEditable="true"
            RowEditEnterScript="WebRowIslandGridRowEditEnter"
            RowEditScript="WebRowIslandGridRowEdit"
            RowEditDoneScript="WebRowIslandGridRowEditDone"
            RowEditExitScript="WebRowIslandGridRowEditExit"
            CellEditEnterScript="WebRowIslandGridCellEditEnter"
            CellEditScript="WebRowIslandGridCellEdit"
            CellEditExitScript="WebRowIslandGridCellEditExit">
                <IgbColumn
                Field="Album"
                Header="Album"
                DataType="GridColumnDataType.String">
                </IgbColumn>

                <IgbColumn
                Field="LaunchDate"
                Header="Launch Date"
                DataType="GridColumnDataType.Date">
                </IgbColumn>

                <IgbColumn
                Field="BillboardReview"
                Header="Billboard Review"
                DataType="GridColumnDataType.String">
                </IgbColumn>

                <IgbColumn
                Field="USBillboard200"
                Header="US Billboard 200"
                DataType="GridColumnDataType.String">
                </IgbColumn>

            </IgbRowIsland>

        </IgbHierarchicalGrid>

    </div>
</div>

@code {
    

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

    }

    private IgbHierarchicalGrid hierarchicalGrid;
    private IgbRowIsland rowIsland;

    private SingersData _singersData = null;
    public SingersData SingersData
    {
        get
        {
            if (_singersData == null)
            {
                _singersData = new SingersData();
            }
            return _singersData;
        }
    }

}razor



igRegisterScript("WebHierarchicalGridRendered", (event) => {
        const hierarchicalGrid = document.getElementById("hierarchicalGrid");
        hierarchicalGrid.parentElement.style.display = "flex";
        const container = document.createElement("div");
        container.id = "container";
        container.style.height = "80vh";
        container.style.width = "100%";
        container.style.overflow = "auto";
        hierarchicalGrid.parentElement.appendChild(container);
        const title = document.createElement("span");
        title.textContent = "Events execution sequence:";
        container.appendChild(title);
}, false);

igRegisterScript("WebHierarchicalGridRowEditEnter", (event) => {
    const container = document.getElementById("container");
    const message = document.createElement("p");
    message.textContent = `Hierarchical Grid => 'rowEditEnter' with 'RowID':` + event.detail.rowID;
    container.appendChild(message);
}, false);

igRegisterScript("WebHierarchicalGridRowEdit", (event) => {
    const container = document.getElementById("container");
    const message = document.createElement("p");
    message.textContent = `Hierarchical Grid => 'rowEdit'`;
    container.appendChild(message);
}, false);

igRegisterScript("WebHierarchicalGridRowEditDone", (event) => {
    const container = document.getElementById("container");
    const message = document.createElement("p");
    message.textContent = `Hierarchical Grid => 'rowEditDone'`;
    container.appendChild(message);
}, false);

igRegisterScript("WebHierarchicalGridRowEditExit", (event) => {
    const container = document.getElementById("container");
    const message = document.createElement("p");
    message.textContent = `Hierarchical Grid => 'rowEditExit'  << End of cycle >>`;
    container.appendChild(message);
}, false);

igRegisterScript("WebHierarchicalGridCellEditEnter", (event) => {
    const container = document.getElementById("container");
    const message = document.createElement("p");
    message.textContent = `Hierarchical Grid => 'cellEditEnter' with 'value':` + event.detail.oldValue, event.detail.cancel;
    container.appendChild(message);
}, false);

igRegisterScript("WebHierarchicalGridCellEdit", (event) => {
    const container = document.getElementById("container");
    const message = document.createElement("p");
    message.textContent = `Hierarchical Grid => 'cellEdit' with 'newValue':` + event.detail.newValue, event.detail.cancel;
    container.appendChild(message);
}, false);

igRegisterScript("WebHierarchicalGridCellEditExit", (event) => {
    const container = document.getElementById("container");
    const message = document.createElement("p");
    message.textContent = `Hierarchical Grid => 'cellEditExit'`;
    container.appendChild(message);
}, false);

igRegisterScript("WebRowIslandGridRowEditEnter", (event) => {
    const container = document.getElementById("container");
    const message = document.createElement("p");
    message.textContent = `Row Island => 'rowEditEnter' with 'RowID':` + event.detail.rowID;
    container.appendChild(message);
}, false);

igRegisterScript("WebRowIslandGridRowEdit", (event) => {
    const container = document.getElementById("container");
    const message = document.createElement("p");
    message.textContent = `Row Island => 'rowEdit'`;
    container.appendChild(message);
}, false);

igRegisterScript("WebRowIslandGridRowEditDone", (event) => {
    const container = document.getElementById("container");
    const message = document.createElement("p");
    message.textContent = `Row Island => 'rowEditDone'`;
    container.appendChild(message);
}, false);

igRegisterScript("WebRowIslandGridRowEditExit", (event) => {
    const container = document.getElementById("container");
    const message = document.createElement("p");
    message.textContent = `Row Island => 'rowEditExit'  << End of cycle >>`;
    container.appendChild(message);
}, false);

igRegisterScript("WebRowIslandGridCellEditEnter", (event) => {
    const container = document.getElementById("container");
    const message = document.createElement("p");
    message.textContent = `Row Island => 'cellEditEnter' with 'value':` + event.detail.oldValue, event.detail.cancel;
    container.appendChild(message);
}, false);

igRegisterScript("WebRowIslandGridCellEdit", (event) => {
    const container = document.getElementById("container");
    const message = document.createElement("p");
    message.textContent = `Row Island => 'cellEdit' with 'newValue':` + event.detail.newValue, event.detail.cancel;
    container.appendChild(message);
}, false);

igRegisterScript("WebRowIslandGridCellEditExit", (event) => {
    const container = document.getElementById("container");
    const message = document.createElement("p");
    message.textContent = `Row Island => 'cellEditExit'`;
    container.appendChild(message);
}, false);

js

/*
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.

Features integration

셀/행이 편집 모드에 있는 동안 사용자는 다양한 방법으로 그리드와 상호 작용할 수 있습니다. 다음 표에서는 특정 상호 작용이 현재 편집에 어떤 영향을 미치는지 지정합니다.

계층 그리드	필터링	정렬	페이징	움직이는	고정	숨김	그룹화 기준	크기 조정	탈출하다	입력하다	F2	탭	셀 클릭	새 행 추가/삭제/수정
편집 모드 유지								✔
편집 모드 종료	✔	✔	✔	✔	✔	✔	✔		✔	✔	✔	✔	✔	✔
저지르다										✔	✔	✔	✔	✔
버리다	✔	✔	✔	✔	✔	✔	✔		✔

표에서 볼 수 있듯이 열 크기 조정을 제외한 모든 상호 작용은 편집을 종료하고 새 값을 삭제합니다. 새 값이 커밋되어야 하는 경우 개발자는 해당 기능 "-ing" 이벤트에서 이를 수행할 수 있습니다.

셀/행이 편집 모드에 있는 동안 사용자가 열을 정렬하려고 시도하는 경우 새 값을 커밋하는 방법의 예:

<IgbHierarchicalGrid
    Id="grid"
    SortingScript="SortingHandler"
    RowEditable="true">
</IgbHierarchicalGrid>

//In JavaScript
function SortingHandler() {
    grid.endEdit(true);
}
igRegisterScript("SortingHandler", SortingHandler, false);
razor

API References

IgbHierarchicalGrid