Blazor Hierarchical Grid Toolbar

Ignite UI for Blazor Blazor 계층적 그리드의 UI 작업을 위한 컨테이너입니다. Blazor 툴바는 Blazor 구성 요소, 즉 IgbHierarchicalGrid의 맨 위에 있으며 가로 크기와 일치합니다. 툴바 컨테이너는 사용자 지정 콘텐츠나 미리 정의된 UI 컨트롤 세트를 호스팅할 수 있습니다. Blazor 계층적 그리드의 기본 세트에는 다음이 포함됩니다.

• 열 숨기기
• 열 고정
• 엑셀 내보내기
• 고급 필터링

툴바와 미리 정의된 UI 구성 요소는 Blazor 이벤트를 지원하고 개발자에게 API를 제공합니다.

사전 정의된 Actions 및 Title UI 구성 요소는 IgbGridToolbar 내부에 추가되며 해당 그리드 기능과의 기본 상호 작용을 제공하는 도구 모음을 갖는 데 모두 필요합니다.

<IgbHierarchicalGrid>
    <IgbGridToolbar>
        <IgbGridToolbarTitle>Hierarchical Grid Toolbar</IgbGridToolbarTitle>
        <IgbGridToolbarActions>
            <IgbGridToolbarAdvancedFiltering></IgbGridToolbarAdvancedFiltering>
            <IgbGridToolbarHiding></IgbGridToolbarHiding>
            <IgbGridToolbarPinning></IgbGridToolbarPinning>
            <IgbGridToolbarExporter></IgbGridToolbarExporter>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbHierarchicalGrid>
razor

As seen in the code snippet above, the predefined Actions UI components are wrapped in the IgbGridToolbarActions container. This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar.

물론, 각 UI는 서로 독립적으로 추가될 수도 있고 전혀 추가되지 않을 수도 있습니다. 이렇게 하면 도구 모음 컨테이너가 비어 있게 렌더링됩니다.

<IgbHierarchicalGrid>
    <IgbGridToolbar>
    </IgbGridToolbar>
</IgbHierarchicalGrid>
razor

각 기본 UI 구성 요소를 포괄적으로 살펴보려면 아래 기능 섹션을 계속 읽어보세요.

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

無料で試してみる

특징

도구 모음은 그리드 전체에 영향을 미치는 논리/상호 작용을 분리하는 데 유용합니다.

위에 표시된 대로 그리드에서 데이터 제어, 열 숨기기, 열 고정, 고급 필터링 및 내보내기를 위한 기본 구성 요소를 제공하도록 구성할 수 있습니다.

이러한 기능은 Ignite UI for Blazor 카드 구성 요소와 비슷한 패턴을 따르면 서로 독립적으로 활성화할 수 있습니다.

아래에는 도구 모음의 주요 기능과 각 기능에 대한 예제 코드가 나열되어 있습니다.

Title

​IgbGridToolbarTitle을 사용하여 그리드의 도구 모음 제목을 설정합니다.

사용자는 간단한 텍스트부터 보다 복잡한 템플릿까지 무엇이든 제공할 수 있습니다.

<IgbGridToolbar>
    <IgbGridToolbarTitle>Grid toolbar title</IgbGridToolbarTitle>
</IgbGridToolbar>
razor

Actions

​IgbGridToolbarActions는 사용자가 상위 그리드와 관련하여 작업/상호 작용을 배치할 수 있는 곳입니다. 도구 모음의 제목 부분과 마찬가지로 사용자는 기본 도구 모음 상호 작용 구성 요소를 포함하여 해당 템플릿 부분 내에 무엇이든 제공할 수 있습니다.

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <!--...-->
    </IgbGridToolbarActions>
</IgbGridToolbar>
razor

열 고정

​IgbGridToolbarPinning 구성 요소는 그리드의 열 고정과 상호 작용하기 위한 기본 UI를 제공합니다.

구성 요소는 구성 요소 제목, 구성 요소 입력을 위한 자리 표시자 및 드롭다운 자체의 높이와 같은 UI 사용자 정의를 위한 여러 입력 속성뿐만 아니라 도구 모음이 포함된 상위 그리드를 사용하여 즉시 작동하도록 설정됩니다.

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarPinning Title="Grid pinned columns" Prompt="Filter column collection" ColumnListHeight="400px"></IgbGridToolbarPinning>
    </IgbGridToolbarActions>
</IgbGridToolbar>
razor

열 숨기기

​IgbGridToolbarHiding은 열 숨기기와 상호작용하기 위한 기본 UI를 제공합니다. 구성 요소 제목, 구성 요소 입력을 위한 자리 표시자, 드롭다운 자체의 높이 등 UI 사용자 지정을 위한 동일한 입력 속성을 노출합니다.

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarHiding Title="Grid column hiding" Prompt="Filter column collection" ColumnListHeight="400px"></IgbGridToolbarHiding>
    </IgbGridToolbarActions>
</IgbGridToolbar>
razor

고급 필터링

도구 모음 고급 필터링 구성 요소는 고급 필터링 기능을 위한 기본 UI를 제공합니다. 구성 요소는 버튼의 기본 텍스트를 변경하는 방법을 노출합니다.

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarAdvancedFiltering></IgbGridToolbarAdvancedFiltering>
    </IgbGridToolbarActions>
</IgbGridToolbar>
razor

Data Exporting

When exporting the IgbHierarchicalGrid or any of its child grids down the hierarchy, the exported data will be a flat collection of rows belonging to their respective grid (the child grids will not be included in the exported data).

나머지 도구 모음 작업과 마찬가지로 내보내기는 기본적으로 IgbGridToolbarExporter를 통해 제공됩니다.

도구 모음 내보내기 구성 요소는 UI와 내보내기 환경을 모두 사용자 지정하기 위한 여러 입력 속성을 노출합니다.

표시 텍스트 변경부터 드롭다운 옵션 활성화/비활성화, 생성된 파일 이름 사용자 정의까지 다양합니다. 자세한 내용은 ToolbarExporter에 대한 API 문서를 참조하세요.

다음은 Blazor 템플릿을 통해 사용자 정의할 수 있는 일부 옵션을 보여주는 스니펫입니다.

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarExporter ExportCSV="true" ExportExcel="true" Filename="exported_data"></IgbGridToolbarExporter>
    </IgbGridToolbarActions>
</IgbGridToolbar>
razor

내보낸 파일 이름을 변경하는 것 외에도 사용자는 ToolbarExporting 이벤트를 기다리고 이벤트 속성에서 옵션 항목을 사용자 정의하여 내보내기 옵션을 추가로 구성할 수 있습니다.

By default when exporting to CSV the exporter exports using a comma separator and uses a '.csv' extension for the output file. You can customize these exporting parameters by subscribing to events of the exporter or changing the values of the exporter options fields. You can also cancel the export process by setting the cancel field of the event args to true.

다음 코드 조각은 도구 모음 내보내기 이벤트를 구독하고 내보내기 옵션을 구성하는 방법을 보여줍니다.

<IgbHierarchicalGrid ToolbarExportingScript="ConfigureExport"></IgbHierarchicalGrid>

// In Javascript
igRegisterScript("ConfigureExport", (evt) => {
    const args = evt.detail;
    const options = args.options;
    options.fileName = `Report_${new Date().toDateString()}`;
    args.exporter.columnExporting.subscribe((columnArgs) => {
        columnArgs.cancel = columnArgs.header === 'Photo';
    });
}, 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(IgbHierarchicalGridModule),
                typeof(IgbGridToolbarModule)
            );
            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"
        ToolbarExportingScript="WebHierarchicalGridToolbarExporting"
        Name="hierarchicalGrid1"
        @ref="hierarchicalGrid1">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarExporter
                    >
                    </IgbGridToolbarExporter>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumn
            Field="Artist"
            Header="Artist"
            DataType="GridColumnDataType.String"
            Width="150px">
            </IgbColumn>

            <IgbColumn
            Field="Photo"
            Header="Photo"
            DataType="GridColumnDataType.Image">
            </IgbColumn>

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

            <IgbColumn
            Field="GrammyNominations"
            Header="Grammy Nominations"
            DataType="GridColumnDataType.String"
            Width="200px">
            </IgbColumn>

            <IgbColumn
            Field="GrammyAwards"
            Header="Grammy Awards"
            DataType="GridColumnDataType.String"
            Width="200px">
            </IgbColumn>

            <IgbRowIsland
            ChildDataKey="Albums"
            AutoGenerate="false">
                <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
                ChildDataKey="Songs"
                AutoGenerate="false">
                    <IgbColumn
                    Field="Number"
                    Header="No."
                    DataType="GridColumnDataType.String">
                    </IgbColumn>

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

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

                    <IgbColumn
                    Field="Genre"
                    Header="Genre"
                    DataType="GridColumnDataType.String">
                    </IgbColumn>

                </IgbRowIsland>

            </IgbRowIsland>

            <IgbRowIsland
            ChildDataKey="Tours"
            AutoGenerate="false">
                <IgbColumn
                Field="Tour"
                Header="Tour"
                DataType="GridColumnDataType.String">
                </IgbColumn>

                <IgbColumn
                Field="StartedOn"
                Header="Started on"
                DataType="GridColumnDataType.String">
                </IgbColumn>

                <IgbColumn
                Field="Location"
                Header="Location"
                DataType="GridColumnDataType.String">
                </IgbColumn>

                <IgbColumn
                Field="Headliner"
                Header="Headliner"
                DataType="GridColumnDataType.String">
                </IgbColumn>

            </IgbRowIsland>

        </IgbHierarchicalGrid>

    </div>
</div>

@code {
    

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

    }

    private IgbHierarchicalGrid hierarchicalGrid1;

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

}razorコピー

igRegisterScript("WebHierarchicalGridToolbarExporting", (evt) => {
    const args = evt.detail;
    const options = args.options;
    options.fileName = `Report_${new Date().toDateString()}`;
    args.exporter.columnExporting.subscribe((columnArgs) => {
        columnArgs.cancel = columnArgs.header === 'Photo';
    });
}, 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.

Exporting Indicator

기본 도구 모음 내보내기 구성 요소를 사용하는 경우 내보내기 작업이 발생할 때마다 작업이 진행되는 동안 도구 모음에 진행률 표시기가 표시됩니다.

또한 사용자는 도구 모음 ShowProgress 속성을 설정하고 장기 실행 작업에 사용하거나 그리드에서 발생하는 작업을 나타내는 또 다른 방법으로 사용할 수 있습니다.

아래 샘플에는 진행률 표시줄을 볼 수 있도록 데이터 내보내기에 필요한 시간을 늘리기 위해 상당한 양의 데이터가 사용됩니다. 또한 그리드에서 장기 실행 작업을 시뮬레이션하는 또 다른 버튼이 있습니다.

EXAMPLE

MODULES

DATA

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbHierarchicalGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;

public class SingersNestedItem
{
    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<SingersNestedItem_TourInfo> Tours { get; set; }
    public List<SingersNestedItem_AlbumInfo> Albums { get; set; }
}

public class SingersNestedItem_TourInfo
{
    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 SingersNestedItem_AlbumInfo
{
    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 List<SingersNestedItem_SongInfo> Songs { get; set; }
}

public class SingersNestedItem_SongInfo
{
    public double Number { get; set; }
    public string Title { get; set; }
    public string Released { get; set; }
    public string Genre { get; set; }
    public string Album { get; set; }
}

public class SingersNestedData : List<SingersNestedItem>
{
    public SingersNestedData()
    {
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Faithful Tour",
                    StartedOn = @"Sep 12",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"City Jam Sessions",
                    StartedOn = @"Aug 13",
                    Location = @"North America",
                    Headliner = @"YES",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Christmas NYC 2013",
                    StartedOn = @"Dec 13",
                    Location = @"United States",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Christmas NYC 2014",
                    StartedOn = @"Dec 14",
                    Location = @"North America",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Watermelon Tour",
                    StartedOn = @"Feb 15",
                    Location = @"Worldwide",
                    Headliner = @"YES",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Christmas NYC 2016",
                    StartedOn = @"Dec 16",
                    Location = @"United States",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"The Dragon Tour",
                    StartedOn = @"Feb 17",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Organic Sessions",
                    StartedOn = @"Aug 18",
                    Location = @"United States, England",
                    Headliner = @"YES",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Hope World Tour",
                    StartedOn = @"Mar 19",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                }}
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Initiation",
                    LaunchDate = @"September 3, 2013",
                    BillboardReview = 86,
                    USBillboard200 = 1,
                    Artist = @"Naomí Yepes",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Dream Driven",
                    LaunchDate = @"August 25, 2014",
                    BillboardReview = 81,
                    USBillboard200 = 1,
                    Artist = @"Naomí Yepes",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"Intro",
                            Released = @"29 Apr 2021",
                            Genre = @"*",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Ferocious",
                            Released = @"28 Apr 2014",
                            Genre = @"Dance-pop R&B",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"Going crazy",
                            Released = @"10 Feb 2015",
                            Genre = @"Dance-pop EDM",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"Future past",
                            Released = @"14 Jul 2021",
                            Genre = @"*",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"Roaming like them",
                            Released = @"2 Jul 2014",
                            Genre = @"Electro house Electropop",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"Last Wishes",
                            Released = @"12 Aug 2014",
                            Genre = @"R&B",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"Stay where you are",
                            Released = @"14 Aug 1998",
                            Genre = @"*",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"Imaginarium",
                            Released = @"15 Sep 2013",
                            Genre = @"*",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"Tell me",
                            Released = @"30 Sep 2014",
                            Genre = @"Synth-pop R&B",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 10,
                            Title = @"Shredded into pieces",
                            Released = @"2 Sep 2011",
                            Genre = @"*",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 11,
                            Title = @"Capture this moment",
                            Released = @"5 Jan 2011",
                            Genre = @"*",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 12,
                            Title = @"Dream Driven",
                            Released = @"12 Dec 1999",
                            Genre = @"*",
                            Album = @"Dream Driven"
                        }}

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"The dragon journey",
                    LaunchDate = @"May 20, 2016",
                    BillboardReview = 60,
                    USBillboard200 = 2,
                    Artist = @"Naomí Yepes",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Organic me",
                    LaunchDate = @"August 17, 2018",
                    BillboardReview = 82,
                    USBillboard200 = 1,
                    Artist = @"Naomí Yepes",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"I Love",
                            Released = @"11 May 2019",
                            Genre = @"Crunk reggaeton",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Early Morning Compass",
                            Released = @"15 Jan 2020",
                            Genre = @"mystical parody-bap ",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"Key Fields Forever",
                            Released = @"2 Jan 2020",
                            Genre = @"Dance-pop EDM",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"Stand by Your Goblins",
                            Released = @"20 Nov 2019",
                            Genre = @"*",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"Mad to Walk",
                            Released = @"12 May 2019",
                            Genre = @"Electro house Electropop",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"Alice's Waiting",
                            Released = @"28 Jan 2020",
                            Genre = @"R&B",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"We Shall Kiss",
                            Released = @"30 Oct 2019",
                            Genre = @"*",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"Behind Single Ants",
                            Released = @"2 Oct 2019",
                            Genre = @"*",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"Soap Autopsy",
                            Released = @"8 Aug 2019",
                            Genre = @"Synth-pop R&B",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 10,
                            Title = @"Have You Met Rich?",
                            Released = @"1 Jul 2019",
                            Genre = @"ethno-tunes",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 11,
                            Title = @"Livin' on a Banana",
                            Released = @"22 Nov 2019",
                            Genre = @"Crunk reggaeton",
                            Album = @"Organic me"
                        }}

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Curiosity",
                    LaunchDate = @"December 7, 2019",
                    BillboardReview = 75,
                    USBillboard200 = 12,
                    Artist = @"Naomí Yepes",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
                new SingersNestedItem_TourInfo
                {
                    Tour = @"The last straw",
                    StartedOn = @"May 09",
                    Location = @"Europe, Asia",
                    Headliner = @"NO",
                    TouredBy = @"Babila Ebwélé"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"No foundations",
                    StartedOn = @"Jun 04",
                    Location = @"United States, Europe",
                    Headliner = @"YES",
                    TouredBy = @"Babila Ebwélé"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Crazy eyes",
                    StartedOn = @"Jun 08",
                    Location = @"North America",
                    Headliner = @"NO",
                    TouredBy = @"Babila Ebwélé"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Zero gravity",
                    StartedOn = @"Apr 19",
                    Location = @"United States",
                    Headliner = @"NO",
                    TouredBy = @"Babila Ebwélé"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Battle with myself",
                    StartedOn = @"Mar 08",
                    Location = @"North America",
                    Headliner = @"YES",
                    TouredBy = @"Babila Ebwélé"
                }}
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Pushing up daisies",
                    LaunchDate = @"May 31, 2000",
                    BillboardReview = 86,
                    USBillboard200 = 42,
                    Artist = @"Babila Ebwélé",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"Wood Shavings Forever",
                            Released = @"9 Jun 2019",
                            Genre = @"*",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Early Morning Drive",
                            Released = @"20 May 2019",
                            Genre = @"*",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"Don't Natter",
                            Released = @"10 Jun 2019",
                            Genre = @"adult calypso-industrial",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"Stairway to Balloons",
                            Released = @"18 Jun 2019",
                            Genre = @"calypso and mariachi",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"The Number of your Apple",
                            Released = @"29 Oct 2019",
                            Genre = @"*",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"Your Delightful Heart",
                            Released = @"24 Feb 2019",
                            Genre = @"*",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"Nice Weather For Balloons",
                            Released = @"1 Aug 2019",
                            Genre = @"rap-hop",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"The Girl From Cornwall",
                            Released = @"4 May 2019",
                            Genre = @"enigmatic rock-and-roll",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"Here Without Jack",
                            Released = @"24 Oct 2019",
                            Genre = @"*",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 10,
                            Title = @"Born Rancid",
                            Released = @"19 Mar 2019",
                            Genre = @"*",
                            Album = @"Pushing up daisies"
                        }}

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Death's dead",
                    LaunchDate = @"June 8, 2016",
                    BillboardReview = 85,
                    USBillboard200 = 95,
                    Artist = @"Babila Ebwélé",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"Men Sound Better With You",
                            Released = @"20 Oct 2019",
                            Genre = @"rap-hop",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Ghost in My Rod",
                            Released = @"5 Oct 2019",
                            Genre = @"enigmatic rock-and-roll",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"Bed of Men",
                            Released = @"14 Nov 2019",
                            Genre = @"whimsical comedy-grass ",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"Don't Push",
                            Released = @"2 Jan 2020",
                            Genre = @"unblack electronic-trip-hop",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"Nice Weather For Men",
                            Released = @"18 Dec 2019",
                            Genre = @"*",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"Rancid Rhapsody",
                            Released = @"10 Mar 2019",
                            Genre = @"*",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"Push, Push, Push!",
                            Released = @"21 Feb 2019",
                            Genre = @"*",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"My Name is Sarah",
                            Released = @"15 Nov 2019",
                            Genre = @"*",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"The Girl From My Hotel",
                            Released = @"6 Nov 2019",
                            Genre = @"*",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 10,
                            Title = @"Free Box",
                            Released = @"18 Apr 2019",
                            Genre = @"splitter-funk",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 11,
                            Title = @"Hotel Cardiff",
                            Released = @"30 Dec 2019",
                            Genre = @"guilty pleasure ebm",
                            Album = @"Death's dead"
                        }}

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
            }
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Emergency",
                    LaunchDate = @"March 6, 2004",
                    BillboardReview = 98,
                    USBillboard200 = 69,
                    Artist = @"Ahmad Nazeri",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Bursting bubbles",
                    LaunchDate = @"April 17, 2006",
                    BillboardReview = 69,
                    USBillboard200 = 39,
                    Artist = @"Ahmad Nazeri",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
            }
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Here we go again",
                    LaunchDate = @"November 18, 2017",
                    BillboardReview = 68,
                    USBillboard200 = 1,
                    Artist = @"Kimmy McIlmorie",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
            }
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
            }

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Final breath",
                    StartedOn = @"Jun 13",
                    Location = @"Europe",
                    Headliner = @"YES",
                    TouredBy = @"Izabella Tabakova"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Once bitten",
                    StartedOn = @"Dec 18",
                    Location = @"Australia, United States",
                    Headliner = @"NO",
                    TouredBy = @"Izabella Tabakova"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Code word",
                    StartedOn = @"Sep 19",
                    Location = @"United States, Europe",
                    Headliner = @"NO",
                    TouredBy = @"Izabella Tabakova"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Final draft",
                    StartedOn = @"Sep 17",
                    Location = @"United States, Europe",
                    Headliner = @"YES",
                    TouredBy = @"Izabella Tabakova"
                }}
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Once bitten",
                    LaunchDate = @"July 16, 2007",
                    BillboardReview = 79,
                    USBillboard200 = 53,
                    Artist = @"Izabella Tabakova",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"Whole Lotta Super Cats",
                            Released = @"21 May 2019",
                            Genre = @"*",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Enter Becky",
                            Released = @"16 Jan 2020",
                            Genre = @"*",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"Your Cheatin' Flamingo",
                            Released = @"14 Jan 2020",
                            Genre = @"*",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"Mad to Kiss",
                            Released = @"6 Nov 2019",
                            Genre = @"Synth-pop R&B",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"Hotel Prague",
                            Released = @"20 Oct 2019",
                            Genre = @"ethno-tunes",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"Jail on My Mind",
                            Released = @"31 May 2019",
                            Genre = @"Crunk reggaeton",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"Amazing Blues",
                            Released = @"29 May 2019",
                            Genre = @"mystical parody-bap ",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"Goody Two Iron Filings",
                            Released = @"4 Jul 2019",
                            Genre = @"Electro house Electropop",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"I Love in Your Arms",
                            Released = @"7 Jun 2019",
                            Genre = @"R&B",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 10,
                            Title = @"Truly Madly Amazing",
                            Released = @"12 Sep 2019",
                            Genre = @"ethno-tunes",
                            Album = @"Once bitten"
                        }}

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Your graciousness",
                    LaunchDate = @"November 17, 2004",
                    BillboardReview = 69,
                    USBillboard200 = 30,
                    Artist = @"Izabella Tabakova",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"We Shall Tickle",
                            Released = @"31 Aug 2019",
                            Genre = @"old emo-garage ",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Snail Boogie",
                            Released = @"14 Jun 2019",
                            Genre = @"*",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"Amazing Liz",
                            Released = @"15 Oct 2019",
                            Genre = @"*",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"When Sexy Aardvarks Cry",
                            Released = @"1 Oct 2019",
                            Genre = @"whimsical comedy-grass ",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"Stand By Dave",
                            Released = @"18 Aug 2019",
                            Genre = @"unblack electronic-trip-hop",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"The Golf Course is Your Land",
                            Released = @"2 Apr 2019",
                            Genre = @"*",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"Where Have All the Men Gone?",
                            Released = @"29 Apr 2019",
                            Genre = @"*",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"Rhythm of the Leg",
                            Released = @"5 Aug 2019",
                            Genre = @"ethno-tunes",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"Baby, I Need Your Hats",
                            Released = @"5 Dec 2019",
                            Genre = @"neuro-tunes",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 10,
                            Title = @"Stand by Your Cat",
                            Released = @"25 Jul 2019",
                            Genre = @"*",
                            Album = @"Your graciousness"
                        }}

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Dark matters",
                    LaunchDate = @"November 3, 2002",
                    BillboardReview = 79,
                    USBillboard200 = 85,
                    Artist = @"Izabella Tabakova",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
            }
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Library of liberty",
                    LaunchDate = @"December 22, 2003",
                    BillboardReview = 93,
                    USBillboard200 = 5,
                    Artist = @"Nguyễn Diệp Chi",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
            }
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Just a tease",
                    LaunchDate = @"May 3, 2001",
                    BillboardReview = 91,
                    USBillboard200 = 29,
                    Artist = @"Eva Lee",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Basket case",
                    StartedOn = @"Jan 07",
                    Location = @"Europe, Asia",
                    Headliner = @"NO",
                    TouredBy = @"Siri Jakobsson"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"The bigger fish",
                    StartedOn = @"Dec 07",
                    Location = @"United States, Europe",
                    Headliner = @"YES",
                    TouredBy = @"Siri Jakobsson"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Missed the boat",
                    StartedOn = @"Jun 09",
                    Location = @"Europe, Asia",
                    Headliner = @"NO",
                    TouredBy = @"Siri Jakobsson"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Equivalent exchange",
                    StartedOn = @"Feb 06",
                    Location = @"United States, Europe",
                    Headliner = @"YES",
                    TouredBy = @"Siri Jakobsson"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Damage control",
                    StartedOn = @"Oct 11",
                    Location = @"Australia, United States",
                    Headliner = @"NO",
                    TouredBy = @"Siri Jakobsson"
                }}
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Under the bus",
                    LaunchDate = @"May 14, 2000",
                    BillboardReview = 67,
                    USBillboard200 = 67,
                    Artist = @"Siri Jakobsson",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"Jack Broke My Heart At Tesco's",
                            Released = @"19 Jan 2020",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Cat Deep, Hats High",
                            Released = @"5 Dec 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"In Snail We Trust",
                            Released = @"31 May 2019",
                            Genre = @"hardcore opera",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"Liz's Waiting",
                            Released = @"22 Jul 2019",
                            Genre = @"emotional C-jam ",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"Lifeless Blues",
                            Released = @"14 Jun 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"I Spin",
                            Released = @"26 Mar 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"Ring of Rock",
                            Released = @"12 Dec 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"Livin' on a Rock",
                            Released = @"17 Apr 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"Your Lifeless Heart",
                            Released = @"15 Sep 2019",
                            Genre = @"adult calypso-industrial",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 10,
                            Title = @"The High Street on My Mind",
                            Released = @"11 Nov 2019",
                            Genre = @"calypso and mariachi",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 11,
                            Title = @"Behind Ugly Curtains",
                            Released = @"8 May 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 12,
                            Title = @"Where Have All the Curtains Gone?",
                            Released = @"28 Jun 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 13,
                            Title = @"Ghost in My Apple",
                            Released = @"14 Dec 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 14,
                            Title = @"I Chatter",
                            Released = @"30 Nov 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        }}

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Beads",
                    StartedOn = @"May 11",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Concept art",
                    StartedOn = @"Dec 18",
                    Location = @"United States",
                    Headliner = @"YES",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Glass shoe",
                    StartedOn = @"Jan 20",
                    Location = @"Worldwide",
                    Headliner = @"YES",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Pushing buttons",
                    StartedOn = @"Feb 15",
                    Location = @"Europe, Asia",
                    Headliner = @"NO",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Dark matters",
                    StartedOn = @"Jan 04",
                    Location = @"Australia, United States",
                    Headliner = @"YES",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Greener grass",
                    StartedOn = @"Sep 09",
                    Location = @"United States, Europe",
                    Headliner = @"NO",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Apparatus",
                    StartedOn = @"Nov 16",
                    Location = @"Europe",
                    Headliner = @"NO",
                    TouredBy = @"Pablo Cambeiro"
                }}
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Fluke",
                    LaunchDate = @"August 4, 2017",
                    BillboardReview = 93,
                    USBillboard200 = 98,
                    Artist = @"Pablo Cambeiro",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Crowd control",
                    LaunchDate = @"August 26, 2003",
                    BillboardReview = 68,
                    USBillboard200 = 84,
                    Artist = @"Pablo Cambeiro",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"My Bed on My Mind",
                            Released = @"25 Mar 2019",
                            Genre = @"ethno-tunes",
                            Album = @"Crowd control"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Bright Blues",
                            Released = @"28 Sep 2019",
                            Genre = @"neuro-tunes",
                            Album = @"Crowd control"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"Sail, Sail, Sail!",
                            Released = @"5 Mar 2019",
                            Genre = @"*",
                            Album = @"Crowd control"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"Hotel My Bed",
                            Released = @"22 Mar 2019",
                            Genre = @"*",
                            Album = @"Crowd control"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"Gonna Make You Mash",
                            Released = @"18 May 2019",
                            Genre = @"*",
                            Album = @"Crowd control"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"Straight Outta America",
                            Released = @"16 Jan 2020",
                            Genre = @"hardcore opera",
                            Album = @"Crowd control"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"I Drive",
                            Released = @"23 Feb 2019",
                            Genre = @"emotional C-jam ",
                            Album = @"Crowd control"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"Like a Teddy",
                            Released = @"31 Aug 2019",
                            Genre = @"*",
                            Album = @"Crowd control"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"Teddy Boogie",
                            Released = @"30 Nov 2019",
                            Genre = @"*",
                            Album = @"Crowd control"
                        }}

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
            }
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Pushing up daisies",
                    LaunchDate = @"February 24, 2016",
                    BillboardReview = 74,
                    USBillboard200 = 77,
                    Artist = @"Athar Malakooti",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Cat eat cat world",
                    StartedOn = @"Sep 00",
                    Location = @"Worldwide",
                    Headliner = @"YES",
                    TouredBy = @"Marti Valencia"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Final straw",
                    StartedOn = @"Sep 06",
                    Location = @"United States, Europe",
                    Headliner = @"NO",
                    TouredBy = @"Marti Valencia"
                }}
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Nemesis",
                    LaunchDate = @"June 30, 2004",
                    BillboardReview = 94,
                    USBillboard200 = 9,
                    Artist = @"Marti Valencia",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"First chance",
                    LaunchDate = @"January 7, 2019",
                    BillboardReview = 96,
                    USBillboard200 = 19,
                    Artist = @"Marti Valencia",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"My Name is Jason",
                            Released = @"12 Jul 2019",
                            Genre = @"*",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Amazing Andy",
                            Released = @"5 Mar 2019",
                            Genre = @"*",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"The Number of your Knight",
                            Released = @"4 Dec 2019",
                            Genre = @"*",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"I Sail",
                            Released = @"3 Mar 2019",
                            Genre = @"*",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"Goody Two Hands",
                            Released = @"11 Oct 2019",
                            Genre = @"Electro house Electropop",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"Careful With That Knife",
                            Released = @"18 Dec 2019",
                            Genre = @"R&B",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"Four Single Ants",
                            Released = @"18 Jan 2020",
                            Genre = @"*",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"Kiss Forever",
                            Released = @"10 Aug 2019",
                            Genre = @"*",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"Rich's Waiting",
                            Released = @"15 Mar 2019",
                            Genre = @"Synth-pop R&B",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 10,
                            Title = @"Japan is Your Land",
                            Released = @"7 Mar 2019",
                            Genre = @"ethno-tunes",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 11,
                            Title = @"Pencils in My Banana",
                            Released = @"21 Jun 2019",
                            Genre = @"Crunk reggaeton",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 12,
                            Title = @"I Sail in Your Arms",
                            Released = @"30 Apr 2019",
                            Genre = @"Synth-pop R&B",
                            Album = @"First chance"
                        }}

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"God's advocate",
                    LaunchDate = @"April 29, 2007",
                    BillboardReview = 66,
                    USBillboard200 = 37,
                    Artist = @"Marti Valencia",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
            }
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Forever alone",
                    LaunchDate = @"November 3, 2005",
                    BillboardReview = 82,
                    USBillboard200 = 7,
                    Artist = @"Alicia Stanger",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Love",
                    StartedOn = @"Jun 04",
                    Location = @"Europe, Asia",
                    Headliner = @"YES",
                    TouredBy = @"Peter Taylor"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Fault of treasures",
                    StartedOn = @"Oct 13",
                    Location = @"North America",
                    Headliner = @"NO",
                    TouredBy = @"Peter Taylor"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"For eternity",
                    StartedOn = @"Mar 05",
                    Location = @"United States",
                    Headliner = @"YES",
                    TouredBy = @"Peter Taylor"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Time flies",
                    StartedOn = @"Jun 03",
                    Location = @"North America",
                    Headliner = @"NO",
                    TouredBy = @"Peter Taylor"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Highest difficulty",
                    StartedOn = @"Nov 01",
                    Location = @"Worldwide",
                    Headliner = @"YES",
                    TouredBy = @"Peter Taylor"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Sleeping dogs",
                    StartedOn = @"May 04",
                    Location = @"United States, Europe",
                    Headliner = @"NO",
                    TouredBy = @"Peter Taylor"
                }}
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Decisions decisions",
                    LaunchDate = @"April 10, 2008",
                    BillboardReview = 85,
                    USBillboard200 = 35,
                    Artist = @"Peter Taylor",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Climate changed",
                    LaunchDate = @"June 20, 2015",
                    BillboardReview = 66,
                    USBillboard200 = 89,
                    Artist = @"Peter Taylor",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbHierarchicalGrid
            AutoGenerate="false"
            Data="SingersNestedData"
            PrimaryKey="ID"
            Name="hierarchicalGrid1"
            @ref="hierarchicalGrid1"
        >
            <IgbGridToolbar @ref="toolbar">
                <IgbGridToolbarTitle>
                    <span>Singers</span>
                </IgbGridToolbarTitle>
                <IgbButton @onclick="ShowProgress">
                  Simulate long running operation
                </IgbButton>
                <IgbGridToolbarActions>
                  <IgbGridToolbarExporter></IgbGridToolbarExporter>
                </IgbGridToolbarActions>
            </IgbGridToolbar>
            <IgbColumn
                Field="Artist"
                Header="Artist"
                DataType="GridColumnDataType.String"
                Width="150px"
            ></IgbColumn>
            <IgbColumn
                Field="Photo"
                Header="Photo"
                DataType="GridColumnDataType.Image"
            ></IgbColumn>
            <IgbColumn
                Field="Debut"
                Header="Debut"
                DataType="GridColumnDataType.Number"
            ></IgbColumn>
            <IgbColumn
                Field="GrammyNominations"
                Header="Grammy Nominations"
                DataType="GridColumnDataType.String"
                Width="200px"
            ></IgbColumn>
            <IgbColumn
                Field="GrammyAwards"
                Header="Grammy Awards"
                DataType="GridColumnDataType.String"
                Width="200px"
            ></IgbColumn>
            <IgbRowIsland ChildDataKey="Albums" AutoGenerate="false">
                <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 ChildDataKey="Songs" AutoGenerate="false">
                    <IgbColumn
                        Field="Number"
                        Header="No."
                        DataType="GridColumnDataType.String"
                    ></IgbColumn>
                    <IgbColumn
                        Field="Title"
                        Header="Title"
                        DataType="GridColumnDataType.String"
                    ></IgbColumn>
                    <IgbColumn
                        Field="Released"
                        Header="Released"
                        DataType="GridColumnDataType.Date"
                    ></IgbColumn>
                    <IgbColumn
                        Field="Genre"
                        Header="Genre"
                        DataType="GridColumnDataType.String"
                    ></IgbColumn>
                </IgbRowIsland>
            </IgbRowIsland>
            <IgbRowIsland ChildDataKey="Tours" AutoGenerate="false">
                <IgbColumn
                    Field="Tour"
                    Header="Tour"
                    DataType="GridColumnDataType.String"
                ></IgbColumn>
                <IgbColumn
                    Field="StartedOn"
                    Header="Started on"
                    DataType="GridColumnDataType.String"
                ></IgbColumn>
                <IgbColumn
                    Field="Location"
                    Header="Location"
                    DataType="GridColumnDataType.String"
                ></IgbColumn>
                <IgbColumn
                    Field="Headliner"
                    Header="Headliner"
                    DataType="GridColumnDataType.String"
                ></IgbColumn>
            </IgbRowIsland>
        </IgbHierarchicalGrid>

    </div>
</div>

@code {
    

    private IgbHierarchicalGrid hierarchicalGrid1;
    private IgbGridToolbar toolbar;

    protected override void OnAfterRender(bool firstRender)
    {
        var hierarchicalGrid1 = this.hierarchicalGrid1;
    }

    private async void ShowProgress()
    {
        this.toolbar.ShowProgress = true;

        await Task.Delay(5000);

        this.toolbar.ShowProgress = false;
    }

    private SingersNestedData _singersNestedData = null;
    public SingersNestedData SingersNestedData
    {
        get
        {
            if (_singersNestedData == null)
            {
                _singersNestedData = new SingersNestedData();
            }
            return _singersNestedData;
        }
    }

}razorコピー

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

Custom Content

도구 모음 구성 요소의 작업 부분이 특정 사용 사례에 충분하지 않은 경우 도구 모음 자체에는 사용자가 추가 UI를 제공할 수 있는 일반 콘텐츠 프로젝션이 있습니다. 사용자가 API 호출 또는 바인딩을 위해 해당 그리드 인스턴스가 필요한 경우 템플릿 참조 변수를 만들 수 있습니다.

다음은 샘플 스니펫입니다.

<IgbHierarchicalGrid>
    <IgbGridToolbar>
        <IgbGridToolbarTitle>title</IgbGridToolbarTitle>
        @*
            Everything between the toolbar tags except the default toolbar components
            will be projected as custom content.
        *@
        <IgbGridToolbarActions>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbHierarchicalGrid>
razor

다음 샘플은 열 헤더를 클릭하여 정렬 설정을 지우기 위해 도구 모음에 추가 버튼을 추가하는 방법을 보여줍니다.

EXAMPLE

MODULES

DATA

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbHierarchicalGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;

public class SingersNestedItem
{
    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<SingersNestedItem_TourInfo> Tours { get; set; }
    public List<SingersNestedItem_AlbumInfo> Albums { get; set; }
}

public class SingersNestedItem_TourInfo
{
    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 SingersNestedItem_AlbumInfo
{
    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 List<SingersNestedItem_SongInfo> Songs { get; set; }
}

public class SingersNestedItem_SongInfo
{
    public double Number { get; set; }
    public string Title { get; set; }
    public string Released { get; set; }
    public string Genre { get; set; }
    public string Album { get; set; }
}

public class SingersNestedData : List<SingersNestedItem>
{
    public SingersNestedData()
    {
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Faithful Tour",
                    StartedOn = @"Sep 12",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"City Jam Sessions",
                    StartedOn = @"Aug 13",
                    Location = @"North America",
                    Headliner = @"YES",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Christmas NYC 2013",
                    StartedOn = @"Dec 13",
                    Location = @"United States",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Christmas NYC 2014",
                    StartedOn = @"Dec 14",
                    Location = @"North America",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Watermelon Tour",
                    StartedOn = @"Feb 15",
                    Location = @"Worldwide",
                    Headliner = @"YES",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Christmas NYC 2016",
                    StartedOn = @"Dec 16",
                    Location = @"United States",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"The Dragon Tour",
                    StartedOn = @"Feb 17",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Organic Sessions",
                    StartedOn = @"Aug 18",
                    Location = @"United States, England",
                    Headliner = @"YES",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Hope World Tour",
                    StartedOn = @"Mar 19",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                }}
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Initiation",
                    LaunchDate = @"September 3, 2013",
                    BillboardReview = 86,
                    USBillboard200 = 1,
                    Artist = @"Naomí Yepes",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Dream Driven",
                    LaunchDate = @"August 25, 2014",
                    BillboardReview = 81,
                    USBillboard200 = 1,
                    Artist = @"Naomí Yepes",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"Intro",
                            Released = @"29 Apr 2021",
                            Genre = @"*",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Ferocious",
                            Released = @"28 Apr 2014",
                            Genre = @"Dance-pop R&B",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"Going crazy",
                            Released = @"10 Feb 2015",
                            Genre = @"Dance-pop EDM",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"Future past",
                            Released = @"14 Jul 2021",
                            Genre = @"*",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"Roaming like them",
                            Released = @"2 Jul 2014",
                            Genre = @"Electro house Electropop",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"Last Wishes",
                            Released = @"12 Aug 2014",
                            Genre = @"R&B",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"Stay where you are",
                            Released = @"14 Aug 1998",
                            Genre = @"*",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"Imaginarium",
                            Released = @"15 Sep 2013",
                            Genre = @"*",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"Tell me",
                            Released = @"30 Sep 2014",
                            Genre = @"Synth-pop R&B",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 10,
                            Title = @"Shredded into pieces",
                            Released = @"2 Sep 2011",
                            Genre = @"*",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 11,
                            Title = @"Capture this moment",
                            Released = @"5 Jan 2011",
                            Genre = @"*",
                            Album = @"Dream Driven"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 12,
                            Title = @"Dream Driven",
                            Released = @"12 Dec 1999",
                            Genre = @"*",
                            Album = @"Dream Driven"
                        }}

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"The dragon journey",
                    LaunchDate = @"May 20, 2016",
                    BillboardReview = 60,
                    USBillboard200 = 2,
                    Artist = @"Naomí Yepes",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Organic me",
                    LaunchDate = @"August 17, 2018",
                    BillboardReview = 82,
                    USBillboard200 = 1,
                    Artist = @"Naomí Yepes",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"I Love",
                            Released = @"11 May 2019",
                            Genre = @"Crunk reggaeton",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Early Morning Compass",
                            Released = @"15 Jan 2020",
                            Genre = @"mystical parody-bap ",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"Key Fields Forever",
                            Released = @"2 Jan 2020",
                            Genre = @"Dance-pop EDM",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"Stand by Your Goblins",
                            Released = @"20 Nov 2019",
                            Genre = @"*",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"Mad to Walk",
                            Released = @"12 May 2019",
                            Genre = @"Electro house Electropop",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"Alice's Waiting",
                            Released = @"28 Jan 2020",
                            Genre = @"R&B",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"We Shall Kiss",
                            Released = @"30 Oct 2019",
                            Genre = @"*",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"Behind Single Ants",
                            Released = @"2 Oct 2019",
                            Genre = @"*",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"Soap Autopsy",
                            Released = @"8 Aug 2019",
                            Genre = @"Synth-pop R&B",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 10,
                            Title = @"Have You Met Rich?",
                            Released = @"1 Jul 2019",
                            Genre = @"ethno-tunes",
                            Album = @"Organic me"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 11,
                            Title = @"Livin' on a Banana",
                            Released = @"22 Nov 2019",
                            Genre = @"Crunk reggaeton",
                            Album = @"Organic me"
                        }}

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Curiosity",
                    LaunchDate = @"December 7, 2019",
                    BillboardReview = 75,
                    USBillboard200 = 12,
                    Artist = @"Naomí Yepes",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
                new SingersNestedItem_TourInfo
                {
                    Tour = @"The last straw",
                    StartedOn = @"May 09",
                    Location = @"Europe, Asia",
                    Headliner = @"NO",
                    TouredBy = @"Babila Ebwélé"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"No foundations",
                    StartedOn = @"Jun 04",
                    Location = @"United States, Europe",
                    Headliner = @"YES",
                    TouredBy = @"Babila Ebwélé"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Crazy eyes",
                    StartedOn = @"Jun 08",
                    Location = @"North America",
                    Headliner = @"NO",
                    TouredBy = @"Babila Ebwélé"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Zero gravity",
                    StartedOn = @"Apr 19",
                    Location = @"United States",
                    Headliner = @"NO",
                    TouredBy = @"Babila Ebwélé"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Battle with myself",
                    StartedOn = @"Mar 08",
                    Location = @"North America",
                    Headliner = @"YES",
                    TouredBy = @"Babila Ebwélé"
                }}
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Pushing up daisies",
                    LaunchDate = @"May 31, 2000",
                    BillboardReview = 86,
                    USBillboard200 = 42,
                    Artist = @"Babila Ebwélé",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"Wood Shavings Forever",
                            Released = @"9 Jun 2019",
                            Genre = @"*",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Early Morning Drive",
                            Released = @"20 May 2019",
                            Genre = @"*",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"Don't Natter",
                            Released = @"10 Jun 2019",
                            Genre = @"adult calypso-industrial",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"Stairway to Balloons",
                            Released = @"18 Jun 2019",
                            Genre = @"calypso and mariachi",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"The Number of your Apple",
                            Released = @"29 Oct 2019",
                            Genre = @"*",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"Your Delightful Heart",
                            Released = @"24 Feb 2019",
                            Genre = @"*",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"Nice Weather For Balloons",
                            Released = @"1 Aug 2019",
                            Genre = @"rap-hop",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"The Girl From Cornwall",
                            Released = @"4 May 2019",
                            Genre = @"enigmatic rock-and-roll",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"Here Without Jack",
                            Released = @"24 Oct 2019",
                            Genre = @"*",
                            Album = @"Pushing up daisies"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 10,
                            Title = @"Born Rancid",
                            Released = @"19 Mar 2019",
                            Genre = @"*",
                            Album = @"Pushing up daisies"
                        }}

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Death's dead",
                    LaunchDate = @"June 8, 2016",
                    BillboardReview = 85,
                    USBillboard200 = 95,
                    Artist = @"Babila Ebwélé",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"Men Sound Better With You",
                            Released = @"20 Oct 2019",
                            Genre = @"rap-hop",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Ghost in My Rod",
                            Released = @"5 Oct 2019",
                            Genre = @"enigmatic rock-and-roll",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"Bed of Men",
                            Released = @"14 Nov 2019",
                            Genre = @"whimsical comedy-grass ",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"Don't Push",
                            Released = @"2 Jan 2020",
                            Genre = @"unblack electronic-trip-hop",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"Nice Weather For Men",
                            Released = @"18 Dec 2019",
                            Genre = @"*",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"Rancid Rhapsody",
                            Released = @"10 Mar 2019",
                            Genre = @"*",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"Push, Push, Push!",
                            Released = @"21 Feb 2019",
                            Genre = @"*",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"My Name is Sarah",
                            Released = @"15 Nov 2019",
                            Genre = @"*",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"The Girl From My Hotel",
                            Released = @"6 Nov 2019",
                            Genre = @"*",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 10,
                            Title = @"Free Box",
                            Released = @"18 Apr 2019",
                            Genre = @"splitter-funk",
                            Album = @"Death's dead"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 11,
                            Title = @"Hotel Cardiff",
                            Released = @"30 Dec 2019",
                            Genre = @"guilty pleasure ebm",
                            Album = @"Death's dead"
                        }}

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
            }
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Emergency",
                    LaunchDate = @"March 6, 2004",
                    BillboardReview = 98,
                    USBillboard200 = 69,
                    Artist = @"Ahmad Nazeri",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Bursting bubbles",
                    LaunchDate = @"April 17, 2006",
                    BillboardReview = 69,
                    USBillboard200 = 39,
                    Artist = @"Ahmad Nazeri",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
            }
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Here we go again",
                    LaunchDate = @"November 18, 2017",
                    BillboardReview = 68,
                    USBillboard200 = 1,
                    Artist = @"Kimmy McIlmorie",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
            }
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
            }

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Final breath",
                    StartedOn = @"Jun 13",
                    Location = @"Europe",
                    Headliner = @"YES",
                    TouredBy = @"Izabella Tabakova"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Once bitten",
                    StartedOn = @"Dec 18",
                    Location = @"Australia, United States",
                    Headliner = @"NO",
                    TouredBy = @"Izabella Tabakova"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Code word",
                    StartedOn = @"Sep 19",
                    Location = @"United States, Europe",
                    Headliner = @"NO",
                    TouredBy = @"Izabella Tabakova"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Final draft",
                    StartedOn = @"Sep 17",
                    Location = @"United States, Europe",
                    Headliner = @"YES",
                    TouredBy = @"Izabella Tabakova"
                }}
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Once bitten",
                    LaunchDate = @"July 16, 2007",
                    BillboardReview = 79,
                    USBillboard200 = 53,
                    Artist = @"Izabella Tabakova",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"Whole Lotta Super Cats",
                            Released = @"21 May 2019",
                            Genre = @"*",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Enter Becky",
                            Released = @"16 Jan 2020",
                            Genre = @"*",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"Your Cheatin' Flamingo",
                            Released = @"14 Jan 2020",
                            Genre = @"*",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"Mad to Kiss",
                            Released = @"6 Nov 2019",
                            Genre = @"Synth-pop R&B",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"Hotel Prague",
                            Released = @"20 Oct 2019",
                            Genre = @"ethno-tunes",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"Jail on My Mind",
                            Released = @"31 May 2019",
                            Genre = @"Crunk reggaeton",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"Amazing Blues",
                            Released = @"29 May 2019",
                            Genre = @"mystical parody-bap ",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"Goody Two Iron Filings",
                            Released = @"4 Jul 2019",
                            Genre = @"Electro house Electropop",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"I Love in Your Arms",
                            Released = @"7 Jun 2019",
                            Genre = @"R&B",
                            Album = @"Once bitten"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 10,
                            Title = @"Truly Madly Amazing",
                            Released = @"12 Sep 2019",
                            Genre = @"ethno-tunes",
                            Album = @"Once bitten"
                        }}

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Your graciousness",
                    LaunchDate = @"November 17, 2004",
                    BillboardReview = 69,
                    USBillboard200 = 30,
                    Artist = @"Izabella Tabakova",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"We Shall Tickle",
                            Released = @"31 Aug 2019",
                            Genre = @"old emo-garage ",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Snail Boogie",
                            Released = @"14 Jun 2019",
                            Genre = @"*",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"Amazing Liz",
                            Released = @"15 Oct 2019",
                            Genre = @"*",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"When Sexy Aardvarks Cry",
                            Released = @"1 Oct 2019",
                            Genre = @"whimsical comedy-grass ",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"Stand By Dave",
                            Released = @"18 Aug 2019",
                            Genre = @"unblack electronic-trip-hop",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"The Golf Course is Your Land",
                            Released = @"2 Apr 2019",
                            Genre = @"*",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"Where Have All the Men Gone?",
                            Released = @"29 Apr 2019",
                            Genre = @"*",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"Rhythm of the Leg",
                            Released = @"5 Aug 2019",
                            Genre = @"ethno-tunes",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"Baby, I Need Your Hats",
                            Released = @"5 Dec 2019",
                            Genre = @"neuro-tunes",
                            Album = @"Your graciousness"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 10,
                            Title = @"Stand by Your Cat",
                            Released = @"25 Jul 2019",
                            Genre = @"*",
                            Album = @"Your graciousness"
                        }}

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Dark matters",
                    LaunchDate = @"November 3, 2002",
                    BillboardReview = 79,
                    USBillboard200 = 85,
                    Artist = @"Izabella Tabakova",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
            }
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Library of liberty",
                    LaunchDate = @"December 22, 2003",
                    BillboardReview = 93,
                    USBillboard200 = 5,
                    Artist = @"Nguyễn Diệp Chi",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
            }
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Just a tease",
                    LaunchDate = @"May 3, 2001",
                    BillboardReview = 91,
                    USBillboard200 = 29,
                    Artist = @"Eva Lee",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Basket case",
                    StartedOn = @"Jan 07",
                    Location = @"Europe, Asia",
                    Headliner = @"NO",
                    TouredBy = @"Siri Jakobsson"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"The bigger fish",
                    StartedOn = @"Dec 07",
                    Location = @"United States, Europe",
                    Headliner = @"YES",
                    TouredBy = @"Siri Jakobsson"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Missed the boat",
                    StartedOn = @"Jun 09",
                    Location = @"Europe, Asia",
                    Headliner = @"NO",
                    TouredBy = @"Siri Jakobsson"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Equivalent exchange",
                    StartedOn = @"Feb 06",
                    Location = @"United States, Europe",
                    Headliner = @"YES",
                    TouredBy = @"Siri Jakobsson"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Damage control",
                    StartedOn = @"Oct 11",
                    Location = @"Australia, United States",
                    Headliner = @"NO",
                    TouredBy = @"Siri Jakobsson"
                }}
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Under the bus",
                    LaunchDate = @"May 14, 2000",
                    BillboardReview = 67,
                    USBillboard200 = 67,
                    Artist = @"Siri Jakobsson",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"Jack Broke My Heart At Tesco's",
                            Released = @"19 Jan 2020",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Cat Deep, Hats High",
                            Released = @"5 Dec 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"In Snail We Trust",
                            Released = @"31 May 2019",
                            Genre = @"hardcore opera",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"Liz's Waiting",
                            Released = @"22 Jul 2019",
                            Genre = @"emotional C-jam ",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"Lifeless Blues",
                            Released = @"14 Jun 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"I Spin",
                            Released = @"26 Mar 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"Ring of Rock",
                            Released = @"12 Dec 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"Livin' on a Rock",
                            Released = @"17 Apr 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"Your Lifeless Heart",
                            Released = @"15 Sep 2019",
                            Genre = @"adult calypso-industrial",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 10,
                            Title = @"The High Street on My Mind",
                            Released = @"11 Nov 2019",
                            Genre = @"calypso and mariachi",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 11,
                            Title = @"Behind Ugly Curtains",
                            Released = @"8 May 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 12,
                            Title = @"Where Have All the Curtains Gone?",
                            Released = @"28 Jun 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 13,
                            Title = @"Ghost in My Apple",
                            Released = @"14 Dec 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 14,
                            Title = @"I Chatter",
                            Released = @"30 Nov 2019",
                            Genre = @"*",
                            Album = @"Under the bus"
                        }}

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Beads",
                    StartedOn = @"May 11",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Concept art",
                    StartedOn = @"Dec 18",
                    Location = @"United States",
                    Headliner = @"YES",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Glass shoe",
                    StartedOn = @"Jan 20",
                    Location = @"Worldwide",
                    Headliner = @"YES",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Pushing buttons",
                    StartedOn = @"Feb 15",
                    Location = @"Europe, Asia",
                    Headliner = @"NO",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Dark matters",
                    StartedOn = @"Jan 04",
                    Location = @"Australia, United States",
                    Headliner = @"YES",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Greener grass",
                    StartedOn = @"Sep 09",
                    Location = @"United States, Europe",
                    Headliner = @"NO",
                    TouredBy = @"Pablo Cambeiro"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Apparatus",
                    StartedOn = @"Nov 16",
                    Location = @"Europe",
                    Headliner = @"NO",
                    TouredBy = @"Pablo Cambeiro"
                }}
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Fluke",
                    LaunchDate = @"August 4, 2017",
                    BillboardReview = 93,
                    USBillboard200 = 98,
                    Artist = @"Pablo Cambeiro",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Crowd control",
                    LaunchDate = @"August 26, 2003",
                    BillboardReview = 68,
                    USBillboard200 = 84,
                    Artist = @"Pablo Cambeiro",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"My Bed on My Mind",
                            Released = @"25 Mar 2019",
                            Genre = @"ethno-tunes",
                            Album = @"Crowd control"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Bright Blues",
                            Released = @"28 Sep 2019",
                            Genre = @"neuro-tunes",
                            Album = @"Crowd control"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"Sail, Sail, Sail!",
                            Released = @"5 Mar 2019",
                            Genre = @"*",
                            Album = @"Crowd control"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"Hotel My Bed",
                            Released = @"22 Mar 2019",
                            Genre = @"*",
                            Album = @"Crowd control"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"Gonna Make You Mash",
                            Released = @"18 May 2019",
                            Genre = @"*",
                            Album = @"Crowd control"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"Straight Outta America",
                            Released = @"16 Jan 2020",
                            Genre = @"hardcore opera",
                            Album = @"Crowd control"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"I Drive",
                            Released = @"23 Feb 2019",
                            Genre = @"emotional C-jam ",
                            Album = @"Crowd control"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"Like a Teddy",
                            Released = @"31 Aug 2019",
                            Genre = @"*",
                            Album = @"Crowd control"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"Teddy Boogie",
                            Released = @"30 Nov 2019",
                            Genre = @"*",
                            Album = @"Crowd control"
                        }}

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
            }
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Pushing up daisies",
                    LaunchDate = @"February 24, 2016",
                    BillboardReview = 74,
                    USBillboard200 = 77,
                    Artist = @"Athar Malakooti",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Cat eat cat world",
                    StartedOn = @"Sep 00",
                    Location = @"Worldwide",
                    Headliner = @"YES",
                    TouredBy = @"Marti Valencia"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Final straw",
                    StartedOn = @"Sep 06",
                    Location = @"United States, Europe",
                    Headliner = @"NO",
                    TouredBy = @"Marti Valencia"
                }}
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Nemesis",
                    LaunchDate = @"June 30, 2004",
                    BillboardReview = 94,
                    USBillboard200 = 9,
                    Artist = @"Marti Valencia",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"First chance",
                    LaunchDate = @"January 7, 2019",
                    BillboardReview = 96,
                    USBillboard200 = 19,
                    Artist = @"Marti Valencia",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                        new SingersNestedItem_SongInfo
                        {
                            Number = 1,
                            Title = @"My Name is Jason",
                            Released = @"12 Jul 2019",
                            Genre = @"*",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 2,
                            Title = @"Amazing Andy",
                            Released = @"5 Mar 2019",
                            Genre = @"*",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 3,
                            Title = @"The Number of your Knight",
                            Released = @"4 Dec 2019",
                            Genre = @"*",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 4,
                            Title = @"I Sail",
                            Released = @"3 Mar 2019",
                            Genre = @"*",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 5,
                            Title = @"Goody Two Hands",
                            Released = @"11 Oct 2019",
                            Genre = @"Electro house Electropop",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 6,
                            Title = @"Careful With That Knife",
                            Released = @"18 Dec 2019",
                            Genre = @"R&B",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 7,
                            Title = @"Four Single Ants",
                            Released = @"18 Jan 2020",
                            Genre = @"*",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 8,
                            Title = @"Kiss Forever",
                            Released = @"10 Aug 2019",
                            Genre = @"*",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 9,
                            Title = @"Rich's Waiting",
                            Released = @"15 Mar 2019",
                            Genre = @"Synth-pop R&B",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 10,
                            Title = @"Japan is Your Land",
                            Released = @"7 Mar 2019",
                            Genre = @"ethno-tunes",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 11,
                            Title = @"Pencils in My Banana",
                            Released = @"21 Jun 2019",
                            Genre = @"Crunk reggaeton",
                            Album = @"First chance"
                        },
                        new SingersNestedItem_SongInfo
                        {
                            Number = 12,
                            Title = @"I Sail in Your Arms",
                            Released = @"30 Apr 2019",
                            Genre = @"Synth-pop R&B",
                            Album = @"First chance"
                        }}

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"God's advocate",
                    LaunchDate = @"April 29, 2007",
                    BillboardReview = 66,
                    USBillboard200 = 37,
                    Artist = @"Marti Valencia",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
            }
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Forever alone",
                    LaunchDate = @"November 3, 2005",
                    BillboardReview = 82,
                    USBillboard200 = 7,
                    Artist = @"Alicia Stanger",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
        this.Add(new SingersNestedItem
        {
            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<SingersNestedItem_TourInfo>()
            {
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Love",
                    StartedOn = @"Jun 04",
                    Location = @"Europe, Asia",
                    Headliner = @"YES",
                    TouredBy = @"Peter Taylor"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Fault of treasures",
                    StartedOn = @"Oct 13",
                    Location = @"North America",
                    Headliner = @"NO",
                    TouredBy = @"Peter Taylor"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"For eternity",
                    StartedOn = @"Mar 05",
                    Location = @"United States",
                    Headliner = @"YES",
                    TouredBy = @"Peter Taylor"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Time flies",
                    StartedOn = @"Jun 03",
                    Location = @"North America",
                    Headliner = @"NO",
                    TouredBy = @"Peter Taylor"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Highest difficulty",
                    StartedOn = @"Nov 01",
                    Location = @"Worldwide",
                    Headliner = @"YES",
                    TouredBy = @"Peter Taylor"
                },
                new SingersNestedItem_TourInfo
                {
                    Tour = @"Sleeping dogs",
                    StartedOn = @"May 04",
                    Location = @"United States, Europe",
                    Headliner = @"NO",
                    TouredBy = @"Peter Taylor"
                }}
            ,
            Albums = new List<SingersNestedItem_AlbumInfo>()
            {
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Decisions decisions",
                    LaunchDate = @"April 10, 2008",
                    BillboardReview = 85,
                    USBillboard200 = 35,
                    Artist = @"Peter Taylor",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                },
                new SingersNestedItem_AlbumInfo()
                {
                    Album = @"Climate changed",
                    LaunchDate = @"June 20, 2015",
                    BillboardReview = 66,
                    USBillboard200 = 89,
                    Artist = @"Peter Taylor",
                    Songs = new List<SingersNestedItem_SongInfo>()
                    {
                    }

                }}

        });
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbHierarchicalGrid
            AutoGenerate="false"
            Data="SingersNestedData"
            PrimaryKey="ID"
            Name="hierarchicalGrid1"
            @ref="hierarchicalGrid1"
        >
            <IgbGridToolbar>
                <IgbGridToolbarTitle>
                    <span>Singers</span>
                </IgbGridToolbarTitle>
                <IgbButton @onclick="ClearSort">
                  <span slot="prefix">
                    <IgbIcon @ref="iconRef" IconName="clear" Collection="material"></IgbIcon>
                  </span>
                  Clear Sort
                </IgbButton>
                <IgbGridToolbarActions>
                  <IgbGridToolbarHiding></IgbGridToolbarHiding>
                </IgbGridToolbarActions>
            </IgbGridToolbar>
            <IgbColumn
                Field="Artist"
                Header="Artist"
                DataType="GridColumnDataType.String"
                Width="150px"
                Sortable="true"
            ></IgbColumn>
            <IgbColumn
                Field="Photo"
                Header="Photo"
                DataType="GridColumnDataType.Image"
            ></IgbColumn>
            <IgbColumn
                Field="Debut"
                Header="Debut"
                DataType="GridColumnDataType.Number"
                Sortable="true"
            ></IgbColumn>
            <IgbColumn
                Field="GrammyNominations"
                Header="Grammy Nominations"
                DataType="GridColumnDataType.String"
                Width="200px"
                Sortable="true"
            ></IgbColumn>
            <IgbColumn
                Field="GrammyAwards"
                Header="Grammy Awards"
                DataType="GridColumnDataType.String"
                Width="200px"
                Sortable="true"
            ></IgbColumn>
            <IgbRowIsland ChildDataKey="Albums" AutoGenerate="false">
                <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 ChildDataKey="Songs" AutoGenerate="false">
                    <IgbColumn
                        Field="Number"
                        Header="No."
                        DataType="GridColumnDataType.String"
                    ></IgbColumn>
                    <IgbColumn
                        Field="Title"
                        Header="Title"
                        DataType="GridColumnDataType.String"
                    ></IgbColumn>
                    <IgbColumn
                        Field="Released"
                        Header="Released"
                        DataType="GridColumnDataType.Date"
                    ></IgbColumn>
                    <IgbColumn
                        Field="Genre"
                        Header="Genre"
                        DataType="GridColumnDataType.String"
                    ></IgbColumn>
                </IgbRowIsland>
            </IgbRowIsland>
            <IgbRowIsland ChildDataKey="Tours" AutoGenerate="false">
                <IgbColumn
                    Field="Tour"
                    Header="Tour"
                    DataType="GridColumnDataType.String"
                ></IgbColumn>
                <IgbColumn
                    Field="StartedOn"
                    Header="Started on"
                    DataType="GridColumnDataType.String"
                ></IgbColumn>
                <IgbColumn
                    Field="Location"
                    Header="Location"
                    DataType="GridColumnDataType.String"
                ></IgbColumn>
                <IgbColumn
                    Field="Headliner"
                    Header="Headliner"
                    DataType="GridColumnDataType.String"
                ></IgbColumn>
            </IgbRowIsland>
        </IgbHierarchicalGrid>

    </div>
</div>

@code {
    

    private string clearIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z'/></svg>";

    private IgbHierarchicalGrid hierarchicalGrid1;
    private IgbIcon iconRef;

    protected override void OnAfterRender(bool firstRender)
    {
        var hierarchicalGrid1 = this.hierarchicalGrid1;

        if (this.iconRef != null && firstRender)
        {
            this.iconRef.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                this.iconRef.RegisterIconFromText("clear", clearIcon, "material");
            }));
        }
    }

    private void ClearSort()
    {
        this.hierarchicalGrid1.ClearSort("");
    }

    private SingersNestedData _singersNestedData = null;
    public SingersNestedData SingersNestedData
    {
        get
        {
            if (_singersNestedData == null)
            {
                _singersNestedData = new SingersNestedData();
            }
            return _singersNestedData;
        }
    }

}razorコピー

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

Styling

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

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

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

.grid {
    --ig-grid-toolbar-background-color: #2a2b2f;
    --ig-grid-toolbar-title-text-color: #ffcd0f;
    --ig-grid-toolbar-dropdown-background: #2a2b2f;
}
css

Demo

EXAMPLE

MODULES

DATA

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbHierarchicalGridModule),
                typeof(IgbGridToolbarModule)
            );
            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

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

#grid {
    --ig-grid-toolbar-background-color: #2a2b2f;
    --ig-grid-toolbar-title-text-color: #ffcd0f;
    --ig-grid-toolbar-dropdown-background: #2a2b2f;
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbHierarchicalGrid
        AutoGenerate="false"
        Data="SingersData"
        PrimaryKey="ID"
        Name="grid"
        @ref="grid"
        Id="grid">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarAdvancedFiltering
                    >
                    </IgbGridToolbarAdvancedFiltering>

                    <IgbGridToolbarHiding
                    >
                    </IgbGridToolbarHiding>

                    <IgbGridToolbarPinning
                    >
                    </IgbGridToolbarPinning>

                    <IgbGridToolbarExporter
                    >
                    </IgbGridToolbarExporter>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumn
            Field="Artist"
            Header="Artist"
            DataType="GridColumnDataType.String"
            Width="150px">
            </IgbColumn>

            <IgbColumn
            Field="Photo"
            Header="Photo"
            DataType="GridColumnDataType.Image">
            </IgbColumn>

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

            <IgbColumn
            Field="GrammyNominations"
            Header="Grammy Nominations"
            DataType="GridColumnDataType.String"
            Width="200px">
            </IgbColumn>

            <IgbColumn
            Field="GrammyAwards"
            Header="Grammy Awards"
            DataType="GridColumnDataType.String"
            Width="200px">
            </IgbColumn>

            <IgbRowIsland
            ChildDataKey="Albums"
            AutoGenerate="false">
                <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
                ChildDataKey="Songs"
                AutoGenerate="false">
                    <IgbColumn
                    Field="Number"
                    Header="No."
                    DataType="GridColumnDataType.String">
                    </IgbColumn>

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

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

                    <IgbColumn
                    Field="Genre"
                    Header="Genre"
                    DataType="GridColumnDataType.String">
                    </IgbColumn>

                </IgbRowIsland>

            </IgbRowIsland>

            <IgbRowIsland
            ChildDataKey="Tours"
            AutoGenerate="false">
                <IgbColumn
                Field="Tour"
                Header="Tour"
                DataType="GridColumnDataType.String">
                </IgbColumn>

                <IgbColumn
                Field="StartedOn"
                Header="Started on"
                DataType="GridColumnDataType.String">
                </IgbColumn>

                <IgbColumn
                Field="Location"
                Header="Location"
                DataType="GridColumnDataType.String">
                </IgbColumn>

                <IgbColumn
                Field="Headliner"
                Header="Headliner"
                DataType="GridColumnDataType.String">
                </IgbColumn>

            </IgbRowIsland>

        </IgbHierarchicalGrid>

    </div>
</div>

@code {
    

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

    }

    private IgbHierarchicalGrid grid;

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

}razorコピー

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

#grid {
    --ig-grid-toolbar-background-color: #2a2b2f;
    --ig-grid-toolbar-title-text-color: #ffcd0f;
    --ig-grid-toolbar-dropdown-background: #2a2b2f;
}

cssコピー

Known Limitations

Currently, defining a toolbar component directly inside the IgbRowIsland is not supported. Use the ToolbarTemplate property instead.

API References

Grid Toolbar 서비스에는 아래에 나열된 몇 가지 API가 더 있습니다.

• IgbGridToolbarAdvancedFiltering

• IgbGridToolbar

• IgbGridToolbarExporter

• IgbGridToolbarHiding

• IgbGridToolbarPinning

• IgbGridToolbarTitle

• IgbHierarchicalGrid Events:

• ToolbarExporting

Additional Resources

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

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