Descripción general del cambio de tamaño de columnas de la cuadrícula jerárquica Blazor
La función de cambio de tamaño de columnas Ignite UI for Blazor en Blazor Hierarchical Grid permite a los usuarios ajustar fácilmente el ancho de las columnas de IgbHierarchicalGrid
. De forma predeterminada, verán un indicador de cambio de tamaño temporal mientras la operación de cambio de tamaño con arrastrar esté en vigencia. Hay varias opciones de cambio de tamaño disponibles: cambio de tamaño de columnas en píxeles/porcentajes, restricción del cambio de tamaño de columnas, cambio de tamaño de columnas automático al hacer doble clic y cambio de tamaño de columnas automático al inicializar.
Ejemplo de cambio de tamaño de columna de cuadrícula jerárquica Blazor
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();
}
}
}
csusing 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"
Name="hierarchicalGrid1"
@ref="hierarchicalGrid1">
<IgbColumn
Field="Artist"
Header="Artist"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Photo"
Header="Photo"
DataType="GridColumnDataType.Image"
MinWidth="115px"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Debut"
Header="Debut"
DataType="GridColumnDataType.Number"
MinWidth="88px"
MaxWidth="230px"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="GrammyNominations"
Header="Grammy Nominations"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="GrammyAwards"
Header="Grammy Awards"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbRowIsland
ChildDataKey="Albums"
AutoGenerate="false">
<IgbColumn
Field="Album"
Header="Album"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="LaunchDate"
Header="Launch Date"
DataType="GridColumnDataType.Date"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="BillboardReview"
Header="Billboard Review"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="USBillboard200"
Header="US Billboard 200"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbRowIsland
ChildDataKey="Songs"
AutoGenerate="false">
<IgbColumn
Field="Number"
Header="No."
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Title"
Header="Title"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Released"
Header="Released"
DataType="GridColumnDataType.Date"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Genre"
Header="Genre"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
</IgbRowIsland>
</IgbRowIsland>
<IgbRowIsland
ChildDataKey="Tours"
AutoGenerate="false">
<IgbColumn
Field="Tour"
Header="Tour"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="StartedOn"
Header="Started on"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Location"
Header="Location"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Headliner"
Header="Headliner"
DataType="GridColumnDataType.String"
Resizable="true">
</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
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
El cambio de tamaño de columna también está habilitado por nivel de columna, lo IgbHierarchicalGrid
que significa que puede tener una combinación de columnas redimensionables y no redimensionables. Esto se hace a través de la Resizable
entrada de la IgbColumn
.
<IgbColumn Field="Artist" Resizable=true></IgbColumn>
razor
Puede suscribirse al ColumnResized
evento de la IgbHierarchicalGrid
para implementar alguna lógica personalizada cuando se cambia el tamaño de una columna. Tanto los anchos de columna anteriores como los nuevos, así como el IgbColumn
objeto, se exponen a través de los argumentos del evento.
<IgbHierarchicalGrid Data=data AutoGenerate=false ColumnResized="onResize">
<IgbColumn Field="Artist" Resizable=true></IgbColumn>
</IgbHierarchicalGrid>
@code {
private void onResize(IgbColumnResizeEventArgs args)
{
IgbColumnType col = args.Detail.Column;
string pWidth = args.Detail.PrevWidth;
string nWidth = args.Detail.NewWidth;
}
}
razor
Cambiar el tamaño de las columnas en píxeles/porcentajes
Dependiendo del escenario del usuario, el ancho de la columna se puede definir en píxeles, porcentajes o una combinación de ambos. Todos estos escenarios son compatibles con la función de cambio de tamaño de columna. De forma predeterminada, si una columna no tiene el ancho establecido, se ajusta al espacio disponible con el ancho establecido en píxeles.
Esto significa que es posible la siguiente configuración:
<IgbHierarchicalGrid Data=data ColumnResized="onResize" AutoGenerate=false Height="600px" Width="100%">
<IgbColumn Field="Artist" Resizable=true Width="10%"></IgbColumn>
<IgbColumn Field="GrammyNominations" Resizable=true Width="100px"></IgbColumn>
<IgbColumn Field="GrammyAwards" Resizable=true></IgbColumn>
</IgbHierarchicalGrid>
razor
Hay una ligera diferencia en la forma en que funciona el cambio de tamaño para las columnas configuradas en píxeles y porcentajes.
Píxeles
Cambiar el tamaño de las columnas con ancho en píxeles funciona sumando o restando directamente la cantidad horizontal del movimiento del mouse del tamaño de la columna.
Porcentajes
Al cambiar el tamaño de las columnas con ancho en porcentajes, la cantidad horizontal del movimiento del mouse en píxeles se traduce aproximadamente a su porcentaje relativo al ancho de la cuadrícula. Las columnas siguen respondiendo y cualquier cambio de tamaño futuro de la cuadrícula también se reflejará en las columnas.
Restringir el cambio de tamaño de la columna
También puede configurar los anchos de columna mínimos y máximos permitidos. Esto se hace a través de las entradas MinWidth
y MaxWidth
de IgbColumn
. En este caso, la operación de arrastre del indicador de cambio de tamaño está restringida para notificar al usuario que no se puede cambiar el tamaño de la columna fuera de los límites definidos por MinWidth
y MaxWidth
.
<IgbColumn Field="Artist" Resizable=true Width="100px" MinWidth="60px" MaxWidth="230px"></IgbColumn>
razor
Se permite mezclar los tipos de valores de ancho de columna mínimo y máximo (píxeles o porcentajes). Si los valores establecidos para mínimo y máximo se establecen en porcentajes, el tamaño de columna respectivo se limitará a esos tamaños exactos similares a los píxeles.
Esto significa que son posibles las siguientes configuraciones:
<IgbColumn Field="Artist" Resizable=true Width="100px" MinWidth="60px" MaxWidth="230px"></IgbColumn>
razor
o
<IgbColumn Field="Artist" Resizable=true Width="100px" MinWidth="60px" MaxWidth="15%"></IgbColumn>
razor
Tamaño automático de columnas al hacer doble clic
Se puede cambiar el tamaño de cada columna automáticamente haciendo doble clic en el lado derecho del encabezado; la columna se ajustará al valor de celda más largo actualmente visible, incluido el encabezado mismo. Este comportamiento está habilitado de forma predeterminada, no se necesita configuración adicional. Sin embargo, la columna no tendrá un tamaño automático en caso de que MaxWidth
esté configurado en esa columna y el nuevo ancho exceda ese valor de MaxWidth
. En este caso, el tamaño de la columna se ajustará al valor MaxWidth
preestablecido.
También puede ajustar automáticamente el tamaño de una columna de forma dinámica utilizando el método Autosize
expuesto en IgbColumn
.
@code {
private IgbHierarchicalGrid gridRef;
private void AutosizeColumn()
{
IgbColumn column = gridRef.Columns.Where((col) => { return col.Field == "Artist"; }).FirstOrDefault();
column.Autosize(false);
}
}
razor
Tamaño automático de columnas en la inicialización
Cada columna se puede configurar para que tenga un tamaño automático en la inicialización configurando Width
en 'auto':
<IgbColumn Width="auto"></IgbColumn>
razor
Cuando la columna se inicializa por primera vez en la vista, resuelve su ancho al tamaño de la celda o encabezado visible más largo. Tenga en cuenta que las celdas que están fuera de las filas visibles no se incluyen.
Este enfoque optimiza más el rendimiento que la inicialización de publicaciones con tamaño automático y se recomienda especialmente en los casos en los que necesita ajustar el tamaño automáticamente de una gran cantidad de columnas.
Estilo
Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar el color del controlador de cambio de tamaño, primero debe establecer una clase para la cuadrícula:
<IgbHierarchicalGrid class="grid"></IgbHierarchicalGrid>
razor
Luego establezca la propiedad CSS relacionada para esa clase:
.grid {
--ig-grid-resize-line-color: #f35b04;
}
css
Manifestación
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();
}
}
}
csusing 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-resize-line-color: #f35b04;
}
</style>
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbHierarchicalGrid
AutoGenerate="false"
Name="grid"
@ref="grid"
Id="grid"
Data="SingersData"
PrimaryKey="ID">
<IgbColumn
Field="Artist"
Header="Artist"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Photo"
Header="Photo"
DataType="GridColumnDataType.Image"
MinWidth="115px"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Debut"
Header="Debut"
DataType="GridColumnDataType.Number"
MinWidth="88px"
MaxWidth="230px"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="GrammyNominations"
Header="Grammy Nominations"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="GrammyAwards"
Header="Grammy Awards"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbRowIsland
ChildDataKey="Albums"
AutoGenerate="false">
<IgbColumn
Field="Album"
Header="Album"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="LaunchDate"
Header="Launch Date"
DataType="GridColumnDataType.Date"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="BillboardReview"
Header="Billboard Review"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="USBillboard200"
Header="US Billboard 200"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbRowIsland
ChildDataKey="Songs"
AutoGenerate="false">
<IgbColumn
Field="Number"
Header="No."
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Title"
Header="Title"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Released"
Header="Released"
DataType="GridColumnDataType.Date"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Genre"
Header="Genre"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
</IgbRowIsland>
</IgbRowIsland>
<IgbRowIsland
ChildDataKey="Tours"
AutoGenerate="false">
<IgbColumn
Field="Tour"
Header="Tour"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="StartedOn"
Header="Started on"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Location"
Header="Location"
DataType="GridColumnDataType.String"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Headliner"
Header="Headliner"
DataType="GridColumnDataType.String"
Resizable="true">
</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-resize-line-color: #f35b04;
}
css
Referencias de API
Recursos adicionales
- Virtualización y rendimiento
- Paginación
- Filtración
- Clasificación
- resúmenes
- Columna en movimiento
- Fijación de columnas
- Selección
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.