Blazor Tree Grid Clipboard Overview

이제 IgbTreeGrid에서 클립보드에 복사 작업을 사용할 수 있습니다. 이 기능은 현재 다중 셀 데이터 선택을 통해 Blazor IgbTreeGrid의 데이터를 복사하는 빠르고 쉽고 사용자 정의 가능한 방법을 제공합니다. 시스템 클립보드 동작은 사용자가 IgbTreeGrid에서 Excel이나 다른 외부 프로그램으로 데이터를 복사할 수 있는 기능을 제공합니다.

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

無料で試してみる

Blazor Tree Grid Clipboard Example

EXAMPLE

DATA

MODULES

RAZOR

JS

CSS

using System;
using System.Collections.Generic;
public class EmployeeBasicInfo
{
    public string Address { get; set; }
    public double Age { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Fax { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public double ParentID { get; set; }
    public string Phone { get; set; }
    public double PostalCode { get; set; }
    public string Title { get; set; }
    public string LastName { get; set; }
    public string FullAddress { get; set; }
}

public class EmployeeBasicData // EmployeesFlatDetails
    : List<EmployeeBasicInfo>
{
    public EmployeeBasicData()
    {
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"Obere Str. 57",
            Age = 55,
            City = @"Berlin",
            Country = @"Germany",
            Fax = @"030-0076545",
            HireDate = @"2008-03-20",
            ID = 1,
            Name = @"Johnathan Winchester",
            ParentID = -1,
            Phone = @"030-0074321",
            PostalCode = 12209,
            Title = @"Development Manager",
            LastName = @"Winchester",
            FullAddress = @"Obere Str. 57, Berlin, Germany"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"Avda. de la Constitución 2222",
            Age = 42,
            City = @"México D.F.",
            Country = @"Mexico",
            Fax = @"(51) 555-3745",
            HireDate = @"2014-01-22",
            ID = 4,
            Name = @"Ana Sanders",
            ParentID = -1,
            Phone = @"(5) 555-4729",
            PostalCode = 5021,
            Title = @"CEO",
            LastName = @"Sanders",
            FullAddress = @"Avda. de la Constitución 2222, México D.F., Mexico"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"Mataderos 2312",
            Age = 49,
            City = @"México D.F.",
            Country = @"Mexico",
            Fax = @"(5) 555-3995",
            HireDate = @"2014-01-22",
            ID = 18,
            Name = @"Victoria Lincoln",
            ParentID = -1,
            Phone = @"(5) 555-3932",
            PostalCode = 5023,
            Title = @"Accounting Manager",
            LastName = @"Lincoln",
            FullAddress = @"Mataderos 2312, México D.F., Mexico"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"120 Hanover Sq.",
            Age = 61,
            City = @"London",
            Country = @"UK",
            Fax = @"(171) 555-6750",
            HireDate = @"2010-01-01",
            ID = 10,
            Name = @"Yang Wang",
            ParentID = -1,
            Phone = @"(171) 555-7788",
            PostalCode = 39000,
            Title = @"Localization Manager",
            LastName = @"Wang",
            FullAddress = @"120 Hanover Sq., London, UK"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"Berguvsvägen 8",
            Age = 43,
            City = @"Luleå",
            Country = @"Sweden",
            Fax = @"0921-12 34 67",
            HireDate = @"2011-06-03",
            ID = 3,
            Name = @"Michael Burke",
            ParentID = 1,
            Phone = @"0921-12 34 65",
            PostalCode = 29000,
            Title = @"Senior Software Developer",
            LastName = @"Burke",
            FullAddress = @"Berguvsvägen 8, Luleå, Sweden"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"Forsterstr. 57",
            Age = 29,
            City = @"Mannheim",
            Country = @"Germany",
            Fax = @"0621-08924",
            HireDate = @"2009-06-19",
            ID = 2,
            Name = @"Thomas Anderson",
            ParentID = 1,
            Phone = @"0621-08460",
            PostalCode = 68306,
            Title = @"Senior Software Developer",
            LastName = @"Anderson",
            FullAddress = @"Forsterstr. 57, Mannheim, Germany"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"24, place Kléber",
            Age = 31,
            City = @"Strasbourg",
            Country = @"France",
            Fax = @"88.60.15.32",
            HireDate = @"2014-08-18",
            ID = 11,
            Name = @"Monica Reyes",
            ParentID = 1,
            Phone = @"88.60.15.31",
            PostalCode = 67000,
            Title = @"Software Development Team Lead",
            LastName = @"Reyes",
            FullAddress = @"24, place Kléber, Strasbourg, France"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"C/ Araquil, 67",
            Age = 35,
            City = @"Madrid",
            Country = @"Spain",
            Fax = @"(911) 555 91 99",
            HireDate = @"2015-09-17",
            ID = 6,
            Name = @"Roland Mendel",
            ParentID = 11,
            Phone = @"(91) 555 22 82",
            PostalCode = 28023,
            Title = @"Senior Software Developer",
            LastName = @"Mendel",
            FullAddress = @"C/ Araquil, 67, Madrid, Spain"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"12, rue des Bouchers",
            Age = 44,
            City = @"Marseille",
            Country = @"France",
            Fax = @"91.24.45.41",
            HireDate = @"2009-10-11",
            ID = 12,
            Name = @"Sven Cooper",
            ParentID = 11,
            Phone = @"91.24.45.40",
            PostalCode = 13008,
            Title = @"Senior Software Developer",
            LastName = @"Cooper",
            FullAddress = @"12, rue des Bouchers, Marseille, France"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"23 Tsawassen Blvd.",
            Age = 44,
            City = @"Tsawassen",
            Country = @"Canada",
            Fax = @"(604) 555-3745",
            HireDate = @"2014-04-04",
            ID = 14,
            Name = @"Laurence Johnson",
            ParentID = 4,
            Phone = @"(604) 555-4729",
            PostalCode = 19000,
            Title = @"Director",
            LastName = @"Johnson",
            FullAddress = @"23 Tsawassen Blvd., Tsawassen, Canada"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"Fauntleroy Circus",
            Age = 25,
            City = @"London",
            Country = @"UK",
            Fax = @"(125) 555-3798",
            HireDate = @"2017-11-9",
            ID = 5,
            Name = @"Elizabeth Richards",
            ParentID = 4,
            Phone = @"(171) 555-1212",
            PostalCode = 30000,
            Title = @"Vice President",
            LastName = @"Richards",
            FullAddress = @"Fauntleroy Circus, London, UK"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"Cerrito 333",
            Age = 39,
            City = @"Buenos Aires",
            Country = @"Argentina",
            Fax = @"(121) 135-4892",
            HireDate = @"2010-03-22",
            ID = 13,
            Name = @"Trevor Ashworth",
            ParentID = 5,
            Phone = @"(1) 135-5555",
            PostalCode = 1010,
            Title = @"Director",
            LastName = @"Ashworth",
            FullAddress = @"Cerrito 333, Buenos Aires, Argentina"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"Sierras de Granada 9993",
            Age = 44,
            City = @"México D.F.",
            Country = @"Mexico",
            Fax = @"(153) 555-7293",
            HireDate = @"2014-04-04",
            ID = 17,
            Name = @"Antonio Moreno",
            ParentID = 18,
            Phone = @"(5) 555-3392",
            PostalCode = 5022,
            Title = @"Senior Accountant",
            LastName = @"Moreno",
            FullAddress = @"Sierras de Granada 9993, México D.F., Mexico"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"Hauptstr. 29",
            Age = 50,
            City = @"Sao Paulo",
            Country = @"Brazil",
            Fax = @"(531) 555-6691",
            HireDate = @"2007-11-18",
            ID = 7,
            Name = @"Pedro Rodriguez",
            ParentID = 10,
            Phone = @"0452-076545",
            PostalCode = 3012,
            Title = @"Senior Localization Developer",
            LastName = @"Rodriguez",
            FullAddress = @"Hauptstr. 29, Sao Paulo, Brazil"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"Av. dos Lusíadas, 23",
            Age = 27,
            City = @"Bern",
            Country = @"Switzerland",
            Fax = @"(271) 335-357",
            HireDate = @"2016-02-19",
            ID = 8,
            Name = @"Casey Harper",
            ParentID = 10,
            Phone = @"(11) 555-7647",
            PostalCode = 40000,
            Title = @"Senior Localization",
            LastName = @"Harper",
            FullAddress = @"Av. dos Lusíadas, 23, Bern, Switzerland"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"Berkeley Gardens 12",
            Age = 25,
            City = @"London",
            Country = @"UK",
            Fax = @"(171) 555-9199",
            HireDate = @"2017-11-09",
            ID = 15,
            Name = @"Patricia Simpson",
            ParentID = 7,
            Phone = @"(171) 555-2282",
            PostalCode = 26000,
            Title = @"Localization Intern",
            LastName = @"Simpson",
            FullAddress = @"Berkeley Gardens 12, London, UK"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"Walserweg 21",
            Age = 39,
            City = @"Aachen",
            Country = @"Germany",
            Fax = @"0241-059428",
            HireDate = @"2010-03-22",
            ID = 9,
            Name = @"Francisco Chang",
            ParentID = 7,
            Phone = @"0241-039123",
            PostalCode = 52066,
            Title = @"Localization Intern",
            LastName = @"Chang",
            FullAddress = @"Walserweg 21, Aachen, Germany"
        });
        this.Add(new EmployeeBasicInfo()
        {
            Address = @"35 King George",
            Age = 25,
            City = @"London",
            Country = @"UK",
            Fax = @"(171) 555-3373",
            HireDate = @"2018-03-18",
            ID = 16,
            Name = @"Peter Lewis",
            ParentID = 7,
            Phone = @"(171) 555-0297",
            PostalCode = 48000,
            Title = @"Localization Intern",
            LastName = @"Lewis",
            FullAddress = @"35 King George, London, UK"
        });
    }
}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(IgbPropertyEditorPanelModule),
                typeof(IgbTreeGridModule),
                typeof(IgbSwitchModule),
                typeof(IgbButtonModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

@inject IJSRuntime JS

<div class="container vertical">
    <div class="options vertical">
    <div class="options horizontal" style="gap:50px;">
        <IgbInput onkeyup="inputChange()" id="input">
            <span slot="prefix">Change copy separator:</span>
            <span slot="helper-text">The default value is a single tabulation.</span>
        </IgbInput>
        <IgbSwitch Checked=true onclick="toggleClipboardOperations()" id="copyEnable">Grid copy behavior</IgbSwitch>
        <IgbSwitch Checked=true onclick="toggleHeaderCopy()" id="headerCopy">Copying of header labels</IgbSwitch>
        <IgbSwitch Checked=true  onclick="toggleFormatterCopy()" id="formatterCopy">Copying column formatters</IgbSwitch>
        <IgbButton Checked=true  onclick="clearSelection()" id="btn">Clear Selection</IgbButton>
    </div>
    </div>
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="treeGrid"
        @ref="treeGrid"
        Id="grid"
        Data="EmployeesData"
        PrimaryKey="ID"
        ForeignKey="ParentID"
        RenderedScript="WebTreeGridClipboardCustomOperationsRendered"
        ColumnInitScript="WebTreeGridClipboardCustomOperationsColumnInit">
            <IgbColumn
            Field="ID"
            DataType="GridColumnDataType.Number"
            Sortable="true">
            </IgbColumn>

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

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

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

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

            <IgbColumn
            Field="Address"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="City"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Country"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Fax"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="PostalCode"
            Header="Postal Code"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Phone"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    
    private IgbTreeGrid treeGrid;

    private EmployeeBasicData _EmployeesData = null;
    public EmployeeBasicData EmployeesData
    {
        get
        {
            if (_EmployeesData == null)
            {
                _EmployeesData = new EmployeeBasicData();
            }
            return _EmployeesData;
        }
    }

}razorコピー

var defaultSeparator;

function toggleClipboardOperations() {
    grid.clipboardOptions.enabled = copyEnable.checked;
}

function toggleHeaderCopy() {
    grid.clipboardOptions.copyHeaders = headerCopy.checked;
}

function toggleFormatterCopy() {
    grid.clipboardOptions.copyFormatters = formatterCopy.checked;
}

function clearSelection() {
    grid.cellSelection = 'none';
    grid.cellSelection = 'multiple';
}

function inputChange() {
    grid.clipboardOptions.separator = input.value || grid.clipboardOptions.separator;
}

igRegisterScript("WebTreeGridClipboardCustomOperationsRendered", (e) => {
    defaultSeparator = grid.clipboardOptions.separator;
}, false);

igRegisterScript("WebTreeGridClipboardCustomOperationsColumnInit", (e) => {
    var column = e.detail;
    column.formatter = (e) => { return "** " + e + " **" };
    column.header = "🎉" + column.field;
}, 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.

Functionality

복사 동작은 브라우저 및 운영 체제에서 정의한 기본 상호 작용으로 작동합니다. 따라서 복사 및 붙여넣기 동작의 경우 다음과 같습니다.

• Windows/Unix 기반
  • Ctrl + C / Ctrl + Ins를 키보드 단축키로 사용
  • 키보드 단축키로 Ctrl + V / Shift + Ins​
  • 브라우저 메뉴를 통해 작업 복사
• 맥 OS
  • ⌘ 키보드 단축키로 Cmd + C​
  • ⌘ 키보드 단축키로 Cmd + V​
  • 브라우저 메뉴를 통해 작업 복사

Limitations

• 둘 다 자르다 그리고 복사 이벤트는 Internet Explorer에서 기본적으로 지원되지 않습니다. 예외는 반죽 발생하지만 노출하지 않는 이벤트(IE 11) ClipboardData 이벤트의 재산.

In order to copy cells in IE 11, you can use the keyboard selection. Hold the shift key in order to make a multi-cell selection, press Ctrl + C in order to copy.

• 그리드가 편집 모드에 있는 동안에는 복사 동작이 비활성화됩니다.
• 이 기능의 현재 버전은 그리드 동작에서 복사만 다룹니다. 나중에 우리는 그리드 동작 내에서 paste 노출할 계획입니다.

API Usage

다음 옵션을 처리하는 ClipboardOptions 속성을 노출합니다.

• Enabled 선택한 셀의 복사를 활성화/비활성화합니다.
• CopyHeaders 복사할 때 연관된 헤더를 포함합니다.
• CopyFormatters 복사된 데이터에 기존 열 포맷터를 적용합니다.
• Separator 클립보드의 데이터 형식을 지정하는 데 사용할 문자열 구분 기호입니다. 기본값은 /t 입니다.

Excel can automatically detect text that is separated by tabs (tab-delimited /t) and properly paste the data into separate columns. When the paste format doesn't work, and everything you paste appears in a single column, then Excel's delimiter is set to another character, or your text is using spaces instead of tabs.

• GridCopy 복사 작업이 실행될 때 발생합니다. ClipboardOptions 통해 복사 동작이 활성화된 경우에만 실행됩니다.

Additional Resources

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

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