Blazor Tree Grid Row Adding

​IgbTreeGrid 인라인 행 추가를 통해 데이터 조작을 수행하는 편리한 방법과 Blazor CRUD 작업을 위한 강력한 API를 제공합니다. 그리드 템플릿에서 편집 작업이 활성화된 IgbActionStrip 구성 요소를 추가하고 행을 마우스오버하고 제공된 버튼을 사용하고 ALT + +를 눌러 행 추가 UI를 생성하거나 ALT + SHIFT + +를 눌러 선택한 행에 대한 자식을 추가하는 UI를 생성합니다.

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

無料で試してみる

Blazor Tree Grid Row Adding 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(IgbTreeGridModule),
                typeof(IgbActionStripModule)
            );
            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"
        ForeignKey="ParentID"
        RowEditable="true">
            <IgbActionStrip
            >
                <IgbGridEditingActions
                AddRow="true"
                AddChild="true">
                </IgbGridEditingActions>

            </IgbActionStrip>

            <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コピー

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.

Row Adding Usage

그런 다음 바인딩된 데이터 소스를 정의하고 RowEditable​ ​IgbActionStrip true로 설정하고 편집 작업이 활성화된 구성 요소를 정의합니다 IgbTreeGrid. 입력은 AddRow UI를 추가하는 행을 생성하는 버튼의 가시성을 제어합니다.

<IgbTreeGrid AutoGenerate="false" Id="treegrid" PrimaryKey="ID" ForeignKey="ParentID" RowEditable="true">
    <IgbColumn Field="Name" Header="Name" DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="Title" Header="Title" DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="HireDate" Header="Hire Date" DataType="GridColumnDataType.Date"></IgbColumn>
    <IgbColumn Field="OnPTO" Header="On PTO" DataType="GridColumnDataType.Boolean"></IgbColumn>

    <IgbActionStrip>
        <IgbGridEditingActions AddRow="true"></IgbGridEditingActions>
    </IgbActionStrip>
</IgbTreeGrid>
razor

참고: 행 추가 작업에는 기본 키 설정이 필수입니다.

참고: 기본 키를 제외한 모든 열은 기본적으로 UI를 추가하는 행에서 편집 가능합니다. 특정 열에 대한 편집을 비활성화하려면 Editable 열의 입력을 false로 설정해야 합니다.

참고: 행 추가 및 하위 추가 버튼의 가시성을 제어하는 입력은 IgbGridEditingActions 액션 스트립 컨텍스트(버튼이 표시되는 레코드를 미세 조정하는 유형 IgbRowType)를 사용할 수 있습니다.

내부 BaseTransactionService는 자동으로 제공됩니다 IgbTreeGrid. 행 상태가 제출되거나 취소될 때까지 보류 중인 셀 변경 내용을 보관합니다.

Start Row Adding Programmatically

IgbTreeGrid 두 개의 서로 다른 공용 메서드를 사용하여 행 추가 UI를 프로그래밍 방식으로 생성할 수 있습니다. 하나는 UI가 생성되어야 하는 행을 지정하기 위한 행 ID를 허용하고 다른 하나는 인덱스로 작동합니다. 이러한 메서드를 사용하여 현재 데이터 보기 내의 아무 곳에나 UI를 생성할 수 있습니다. 페이지를 변경하거나 예를 들어 필터링된 행을 지정하는 것은 지원되지 않습니다.

@code {
    await this.treeGrid.BeginAddRowByIdAsync('ALFKI', true);  // Spawns the add row UI to add a child for the row with PK 'ALFKI'
    await this.treeGrid.BeginAddRowByIdAsync(null, false);     // Spawns the add row UI as the first record
}
razor

이 메서드는 BeginAddRowByIndex 비슷하게 작동하지만 컨텍스트로 사용할 행은 index로 지정됩니다.

@code {
    await this.treeGrid.BeginAddRowByIndexAsync(10, true);   // Spawns the add row UI to add a child for the row at index 10
    await this.treeGrid.BeginAddRowByIndexAsync(0);    // Spawns the add row UI as the first record
}
razor

Positioning

• 행 추가 UI의 기본 위치는 최종 사용자가 행 추가 버튼을 클릭한 행 아래에 있습니다.

• The IgbTreeGrid scrolls to fully display the add row UI automatically.

• 행 추가 UI의 오버레이는 스크롤 중에 위치를 유지합니다.

Behavior

행 추가 UI는 최종 사용자에게 일관된 편집 환경을 제공하도록 설계되었으므로 행 편집 UI와 동작이 동일합니다. 자세한 내용은 트리 그리드 행 편집 항목을 참조하세요.

행 추가 UI를 통해 새 행이 추가되면 해당 위치 및/또는 표시 여부는 의 정렬, 필터링 및 그룹화 상태에 IgbTreeGrid 따라 결정됩니다. 이러한 상태가 적용되지 않은 경우 IgbTreeGrid 마지막 레코드로 표시됩니다. 스낵바가 보이지 않는 경우 최종 사용자가 해당 위치로 스크롤 IgbTreeGrid 하는 데 사용할 수 있는 단추가 포함된 스낵바가 간략하게 표시됩니다.

Keyboard Navigation

• ALT + +- 행 추가를 위한 편집 모드로 들어갑니다.

• ALT + SHIFT + + - Enters edit mode for adding a child

• ESC는 변경 사항을 제출하지 않고 행 추가 모드를 종료합니다.

• Tab 키를 누르면 행의 편집 가능한 한 셀에서 다음 셀로, 가장 오른쪽의 편집 가능한 셀에서 CANCEL 및 DONE 버튼으로 초점을 이동합니다. 완료 버튼을 통한 탐색은 현재 편집된 행 내에서 편집 가능한 가장 왼쪽 셀로 이동합니다.

Feature Integration

• 의 데이터 보기 IgbTreeGrid가 수정되면 행 추가 작업이 중지됩니다. 최종 사용자가 변경한 내용이 모두 제출됩니다. 데이터 보기를 변경하는 작업에는 정렬, 그룹화, 필터링, 페이징 등이 포함되지만 이에 국한되지는 않습니다.

• 행 추가 작업이 완료된 후 요약이 업데이트됩니다. 정렬, 필터링 등과 같은 다른 데이터 보기 종속 기능에도 동일하게 적용됩니다.

Customizing Row Adding Overlay

Customizing Text

​RowAddTextDirective를 사용하여 오버레이를 추가하는 행의 텍스트를 사용자 정의할 수 있습니다.

<IgbTreeGrid Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowAddTextTemplate="addTextTemplate">
</IgbTreeGrid>

@code {
    private RenderFragment<IgbGridEmptyTemplateContext> addTextTemplate = (context) =>
    {
        return @<span>Adding Row</span>;
    };
}
razor

Customizing Buttons

​RowEditActions 템플릿을 사용하면 행 편집 오버레이의 버튼을 사용자 정의할 수 있습니다.

<IgbTreeGrid Data="data" PrimaryKey="ProductID" AutoGenerate="false" RowEditable="true" RowEditActionsTemplateScript="rowEditActionsTemplate">
</IgbTreeGrid>

//In JavaScript:
igRegisterScript("rowEditActionsTemplate", (endRowEdit) => {
    var html = window.igTemplating.html;
    return html`<div class="row-actions">
        <button @click="${evt => endRowEdit.implicit(false, evt)}">Cancel</button>
        <button @click="${evt => endRowEdit.implicit(true, evt)}">Apply</button>
    </div>`
}, false);
razor

참고: RowEditActions 템플릿을 사용하면 오버레이 버튼 편집 및 추가에 대한 편집 작업이 변경됩니다.

Styling

행 추가 UI는 IgbActionStrip 편집 작업의 버튼, 편집 편집기 및 오버레이, 최종 사용자가 새로 추가된 행으로 스크롤할 수 있는 스낵바로 구성됩니다. 이러한 구성 요소의 스타일을 지정하려면 해당 항목의 포괄적인 가이드를 참조할 수 있습니다.

• 트리 그리드 행 편집
• 스낵바

API References

• RowEditable
• RowEditEnter
• RowEdit
• RowEditDone
• RowEditCancel
• EndEdit
• PrimaryKey
• IgbTreeGrid

Additional Resources

• 트리 그리드 편집

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브