Blazor Hierarchical Grid Column Hiding

La Ignite UI for Blazor tiene una interfaz de usuario para ocultar columnas incorporada, que se puede utilizar a través de la barra de herramientas de la cuadrícula jerárquica Blazor para cambiar el estado visible de las columnas. Los desarrolladores tienen la flexibilidad de definir la interfaz de usuario para ocultar columnas en cualquier lugar de la página según sea necesario. La función de ocultar columnas de la cuadrícula jerárquica Blazor es especialmente útil cuando se desea reducir el tamaño de la cuadrícula y eliminar la necesidad de pasar por campos redundantes con la tecla tabulador.

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

無料で試してみる

Blazor Hierarchical Grid Column Hiding Example

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        });
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbHierarchicalGrid
        AutoGenerate="false"
        Data="SingersData"
        PrimaryKey="ID"
        AllowFiltering="true"
        Name="hierarchicalGrid1"
        @ref="hierarchicalGrid1">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarHiding
                    Title="Column Hiding">
                    </IgbGridToolbarHiding>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

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

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

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

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

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

            <IgbRowIsland
            ChildDataKey="Albums"
            AutoGenerate="false">
                <IgbColumn
                Field="Album"
                Header="Album"
                DataType="GridColumnDataType.String"
                Sortable="true">
                </IgbColumn>

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

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

                <IgbColumn
                Field="USBillboard200"
                Header="US Billboard 200"
                DataType="GridColumnDataType.String"
                Sortable="true">
                </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コピー

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

Hierarchical Grid Setup

Comencemos por crear nuestro IgbHierarchicalGrid y vincularlo a nuestros datos. También habilitaremos tanto el filtrado como la clasificación de las columnas.

<IgbHierarchicalGrid AutoGenerate="false" Data="SingersData" PrimaryKey="ID" AllowFiltering="true" Name="hierarchicalGrid1" @ref="hierarchicalGrid1">
    <IgbColumn Field="Artist" Header="Artist" DataType="GridColumnDataType.String" Sortable="true"></IgbColumn>
    <IgbColumn Field="Photo" Header="Photo" DataType="GridColumnDataType.Image"></IgbColumn>
    <IgbColumn Field="Debut" Header="Debut" DataType="GridColumnDataType.Number" Hidden="true"></IgbColumn>
    <IgbColumn Field="GrammyNominations" Header="Grammy Nominations" DataType="GridColumnDataType.Number" Sortable="true" Hidden="true"></IgbColumn>
    <IgbColumn Field="GrammyAwards" Header="Grammy Awards" DataType="GridColumnDataType.Number" Sortable="true"></IgbColumn>
</IgbHierarchicalGrid>
razor

Toolbar's Column Hiding UI

La interfaz de usuario de ocultación de columnas incorporada se coloca dentro de una DropDown barra IgbHierarchicalGrid de herramientas. Podemos mostrar/ocultar la interfaz de usuario de ocultación de columnas utilizando este menú desplegable exacto.

Para este propósito, todo lo que tenemos que hacer es configurar tanto el como el IgbGridToolbarActions​ ​IgbGridToolbarHiding interior del IgbHierarchicalGrid. También agregaremos un título a nuestra barra de herramientas utilizando el y un estilo personalizado para el IgbGridToolbarTitle envoltorio de nuestra cuadrícula jerárquica.

<IgbHierarchicalGrid Data="SingersData">
    <IgbGridToolbar>
        <IgbGridToolbarActions>
            <IgbGridToolbarHiding>
            </IgbGridToolbarHiding>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbHierarchicalGrid>
razor

Esto IgbHierarchicalGrid nos proporciona algunas propiedades útiles cuando se trata de usar la interfaz de usuario de ocultación de columnas de la barra de herramientas.

Al usar la propiedad Title, estableceremos el título que se muestra dentro del botón desplegable en la barra de herramientas.

<IgbHierarchicalGrid Data=SingersData>
    <IgbGridToolbar>
        <IgbGridToolbarActions>
            <IgbGridToolbarHiding Title="Column Hiding"></IgbGridToolbarHiding>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbHierarchicalGrid>
razor

Puede ver el resultado del código anterior al comienzo de este artículo en la sección Ejemplo de ocultación de columnas Blazor.

Disable hiding of a column

Podemos evitar fácilmente que el usuario pueda ocultar columnas a través de la interfaz de usuario que oculta columnas simplemente configurando su propiedad DisableHiding en verdadero.

<IgbHierarchicalGrid>
    <IgbColumn Field="Artist" Sortable=true DisableHiding=true></IgbColumn>
    <IgbColumn Field="GrammyAwards" Sortable=true DisableHiding=true></IgbColumn>

    <IgbRowIsland>
        <IgbColumn Field="Album" Sortable=true DisableHiding=true></IgbColumn>
    </IgbRowIsland>
</IgbHierarchicalGrid>
razor

Styling

La cuadrícula se puede personalizar aún más configurando algunas de las variables CSS disponibles. Para lograrlo usaremos una clase que primero asignaremos al grid:

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

Luego configure las variables CSS relacionadas para los componentes relacionados. Aplicaremos los estilos también solo en igx-column-actions, por lo que el resto de la cuadrícula no se ve afectado:

#hierarchicalGrid {
    /* Main Column Actions styles */
    --ig-column-actions-background-color: #292826;
    --ig-column-actions-title-color: #ffcd0f;

    /* Checkbox styles */
    --ig-checkbox-tick-color: #292826;
    --ig-checkbox-label-color: #ffcd0f;
    --ig-checkbox-empty-color: #ffcd0f;
    --ig-checkbox-fill-color: #ffcd0f;

    /* Input styles */
    --ig-input-group-idle-text-color: white;
    --ig-input-group-filled-text-color: #ffcd0f;
    --ig-input-group-focused-text-color: #ffcd0f;
    --ig-input-group-focused-border-color: #ffcd0f;
    --ig-input-group-focused-secondary-color: #ffcd0f;

    /* Buttons styles */
    --ig-button-foreground: #292826;
    --ig-button-background: #ffcd0f;
    --ig-button-hover-background: #404040;
    --ig-button-hover-foreground: #ffcd0f;
    --ig-button-focus-background: #ffcd0f;
    --ig-button-focus-foreground: black;
    --ig-button-focus-visible-background: #ffcd0f;
    --ig-button-focus-visible-foreground: black;
    --ig-button-disabled-foreground: #ffcd0f;
}
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(IgbGridToolbarModule),
                typeof(IgbHierarchicalGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        });
    }
}csコピー

@using IgniteUI.Blazor.Controls

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

#hierarchicalGrid {
    --ig-column-actions-background-color: #292826;
    --ig-column-actions-title-color: #ffcd0f;
    --ig-checkbox-tick-color: #292826;
    --ig-checkbox-label-color: #ffcd0f;
    --ig-checkbox-empty-color: #ffcd0f;
    --ig-checkbox-fill-color: #ffcd0f;
    --ig-input-group-idle-text-color: white;
    --ig-input-group-filled-text-color: #ffcd0f;
    --ig-input-group-focused-text-color: #ffcd0f;
    --ig-input-group-focused-border-color: #ffcd0f;
    --ig-input-group-focused-secondary-color: #ffcd0f;
    --ig-button-foreground: #292826;
    --ig-button-background: #ffcd0f;
    --ig-button-hover-background: #404040;
    --ig-button-hover-foreground: #ffcd0f;
    --ig-button-focus-background: #ffcd0f;
    --ig-button-focus-foreground: black;
    --ig-button-focus-visible-background: #ffcd0f;
    --ig-button-focus-visible-foreground: black;
    --ig-button-disabled-foreground: #ffcd0f;
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbHierarchicalGrid
        AutoGenerate="false"
        Data="SingersData"
        Id="hierarchicalGrid"
        Name="hierarchicalGrid"
        @ref="hierarchicalGrid"
        PrimaryKey="ID"
        AllowFiltering="true">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarHiding
                    Title="Column Hiding">
                    </IgbGridToolbarHiding>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumn
            Field="Artist"
            Header="Artist"
            DataType="GridColumnDataType.String"
            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.Number"
            Sortable="true">
            </IgbColumn>

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

            <IgbRowIsland
            ChildDataKey="Albums"
            AutoGenerate="false">
                <IgbColumn
                Field="Album"
                Header="Album"
                DataType="GridColumnDataType.String"
                Sortable="true">
                </IgbColumn>

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

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

                <IgbColumn
                Field="USBillboard200"
                Header="US Billboard 200"
                DataType="GridColumnDataType.String"
                Sortable="true">
                </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 hierarchicalGrid = this.hierarchicalGrid;

    }

    private IgbHierarchicalGrid hierarchicalGrid;

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

#hierarchicalGrid {
    --ig-column-actions-background-color: #292826;
    --ig-column-actions-title-color: #ffcd0f;
    --ig-checkbox-tick-color: #292826;
    --ig-checkbox-label-color: #ffcd0f;
    --ig-checkbox-empty-color: #ffcd0f;
    --ig-checkbox-fill-color: #ffcd0f;
    --ig-input-group-idle-text-color: white;
    --ig-input-group-filled-text-color: #ffcd0f;
    --ig-input-group-focused-text-color: #ffcd0f;
    --ig-input-group-focused-border-color: #ffcd0f;
    --ig-input-group-focused-secondary-color: #ffcd0f;
    --ig-button-foreground: #292826;
    --ig-button-background: #ffcd0f;
    --ig-button-hover-background: #404040;
    --ig-button-hover-foreground: #ffcd0f;
    --ig-button-focus-background: #ffcd0f;
    --ig-button-focus-foreground: black;
    --ig-button-focus-visible-background: #ffcd0f;
    --ig-button-focus-visible-foreground: black;
    --ig-button-disabled-foreground: #ffcd0f;
}

cssコピー

API References

En este artículo, aprendimos a usar la interfaz de usuario de ocultación de columnas incorporada en la barra de herramientas de la IgbHierarchicalGrid empresa. La columna que oculta la interfaz de usuario tiene algunas API más para explorar, que se enumeran a continuación.

• ColumnActionsComponent

Componentes adicionales con API relativas que se utilizaron:

IgbColumn properties:

• DisableHiding

IgbGridToolbar properties:

• showProgress

IgbGridToolbar methods:

• IgbGridToolbarHiding
• IgbGridToolbarActions
• IgbGridToolbarTitle

IgbHierarchicalGrid events:

• ColumnVisibilityChanged

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Blazor Foros
• Ignite UI for Blazor GitHub