Blazor Grid Multi-row Layout
El diseño de varias filas en la Ignite UI for Blazor amplía las capacidades de representación de la cuadrícula Blazor. La función permite dividir un único registro de datos en varias filas visibles.
Blazor Multi-row Layout Example
using System;
using System.Collections.Generic;
public class CustomersDataItem
{
public string ID { get; set; }
public string Company { get; set; }
public string ContactName { get; set; }
public string ContactTitle { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string Region { get; set; }
public double PostalCode { get; set; }
public string Country { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
}
public class CustomersData
: List<CustomersDataItem>
{
public CustomersData()
{
this.Add(new CustomersDataItem()
{
ID = @"ALFKI",
Company = @"Alfreds Futterkiste",
ContactName = @"Maria Anders",
ContactTitle = @"Sales Representative",
Address = @"Obere Str. 57",
City = @"Berlin",
Region = @"East",
PostalCode = 12209,
Country = @"Germany",
Phone = @"030-0074321",
Fax = @"030-0076545"
});
this.Add(new CustomersDataItem()
{
ID = @"ANATR",
Company = @"Ana Trujillo Emparedados y helados",
ContactName = @"Ana Trujillo",
ContactTitle = @"Owner",
Address = @"Avda. de la Constitución 2222",
City = @"México D.F.",
Region = @"South",
PostalCode = 5021,
Country = @"Mexico",
Phone = @"(5) 555-4729",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"ANTON",
Company = @"Antonio Moreno Taquería",
ContactName = @"Antonio Moreno",
ContactTitle = @"Owner",
Address = @"Mataderos 2312",
City = @"México D.F.",
Region = @"South",
PostalCode = 5023,
Country = @"Mexico",
Phone = @"(5) 555-3932",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"AROUT",
Company = @"Around the Horn",
ContactName = @"Thomas Hardy",
ContactTitle = @"Sales Representative",
Address = @"120 Hanover Sq.",
City = @"London",
Region = @"East",
PostalCode = 22000,
Country = @"UK",
Phone = @"(171) 555-7788",
Fax = @"(171) 555-6750"
});
this.Add(new CustomersDataItem()
{
ID = @"BERGS",
Company = @"Berglunds snabbköp",
ContactName = @"Christina Berglund",
ContactTitle = @"Order Administrator",
Address = @"Berguvsvägen 8",
City = @"Luleå",
Region = @"South",
PostalCode = 17000,
Country = @"Sweden",
Phone = @"0921-12 34 65",
Fax = @"0921-12 34 67"
});
this.Add(new CustomersDataItem()
{
ID = @"BLAUS",
Company = @"Blauer See Delikatessen",
ContactName = @"Hanna Moos",
ContactTitle = @"Sales Representative",
Address = @"Forsterstr. 57",
City = @"Mannheim",
Region = @"East",
PostalCode = 68306,
Country = @"Germany",
Phone = @"0621-08460",
Fax = @"0621-08924"
});
this.Add(new CustomersDataItem()
{
ID = @"BLONP",
Company = @"Blondesddsl père et fils",
ContactName = @"Frédérique Citeaux",
ContactTitle = @"Marketing Manager",
Address = @"24, place Kléber",
City = @"Strasbourg",
Region = @"East",
PostalCode = 67000,
Country = @"France",
Phone = @"88.60.15.31",
Fax = @"88.60.15.32"
});
this.Add(new CustomersDataItem()
{
ID = @"BOLID",
Company = @"Bólido Comidas preparadas",
ContactName = @"Martín Sommer",
ContactTitle = @"Owner",
Address = @"C/ Araquil, 67",
City = @"Madrid",
Region = @"East",
PostalCode = 28023,
Country = @"Spain",
Phone = @"(91) 555 22 82",
Fax = @"(91) 555 91 99"
});
this.Add(new CustomersDataItem()
{
ID = @"BONAP",
Company = @"Bon app'",
ContactName = @"Laurence Lebihan",
ContactTitle = @"Owner",
Address = @"12, rue des Bouchers",
City = @"Marseille",
Region = @"West",
PostalCode = 13008,
Country = @"France",
Phone = @"91.24.45.40",
Fax = @"91.24.45.41"
});
this.Add(new CustomersDataItem()
{
ID = @"BOTTM",
Company = @"Bottom-Dollar Markets",
ContactName = @"Elizabeth Lincoln",
ContactTitle = @"Accounting Manager",
Address = @"23 Tsawassen Blvd.",
City = @"Tsawassen",
Region = @"BC",
PostalCode = 28000,
Country = @"Canada",
Phone = @"(604) 555-4729",
Fax = @"(604) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"BSBEV",
Company = @"B's Beverages",
ContactName = @"Victoria Ashworth",
ContactTitle = @"Sales Representative",
Address = @"Fauntleroy Circus",
City = @"London",
Region = @"South",
PostalCode = 10000,
Country = @"UK",
Phone = @"(171) 555-1212",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"CACTU",
Company = @"Cactus Comidas para llevar",
ContactName = @"Patricio Simpson",
ContactTitle = @"Sales Agent",
Address = @"Cerrito 333",
City = @"Buenos Aires",
Region = @"East",
PostalCode = 1010,
Country = @"Argentina",
Phone = @"(1) 135-5555",
Fax = @"(1) 135-4892"
});
this.Add(new CustomersDataItem()
{
ID = @"CENTC",
Company = @"Centro comercial Moctezuma",
ContactName = @"Francisco Chang",
ContactTitle = @"Marketing Manager",
Address = @"Sierras de Granada 9993",
City = @"México D.F.",
Region = @"South",
PostalCode = 5022,
Country = @"Mexico",
Phone = @"(5) 555-3392",
Fax = @"(5) 555-7293"
});
this.Add(new CustomersDataItem()
{
ID = @"CHOPS",
Company = @"Chop-suey Chinese",
ContactName = @"Yang Wang",
ContactTitle = @"Owner",
Address = @"Hauptstr. 29",
City = @"Bern",
Region = @"East",
PostalCode = 3012,
Country = @"Switzerland",
Phone = @"0452-076545",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"COMMI",
Company = @"Comércio Mineiro",
ContactName = @"Pedro Afonso",
ContactTitle = @"Sales Associate",
Address = @"Av. dos Lusíadas, 23",
City = @"Sao Paulo",
Region = @"SP",
PostalCode = 34000,
Country = @"Brazil",
Phone = @"(11) 555-7647",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"CONSH",
Company = @"Consolidated Holdings",
ContactName = @"Elizabeth Brown",
ContactTitle = @"Sales Representative",
Address = @"Berkeley Gardens 12 Brewery",
City = @"London",
Region = @"South",
PostalCode = 27000,
Country = @"UK",
Phone = @"(171) 555-2282",
Fax = @"(171) 555-9199"
});
this.Add(new CustomersDataItem()
{
ID = @"DRACD",
Company = @"Drachenblut Delikatessen",
ContactName = @"Sven Ottlieb",
ContactTitle = @"Order Administrator",
Address = @"Walserweg 21",
City = @"Aachen",
Region = @"South",
PostalCode = 52066,
Country = @"Germany",
Phone = @"0241-039123",
Fax = @"0241-059428"
});
this.Add(new CustomersDataItem()
{
ID = @"DUMON",
Company = @"Du monde entier",
ContactName = @"Janine Labrune",
ContactTitle = @"Owner",
Address = @"67, rue des Cinquante Otages",
City = @"Nantes",
Region = @"East",
PostalCode = 44000,
Country = @"France",
Phone = @"40.67.88.88",
Fax = @"40.67.89.89"
});
this.Add(new CustomersDataItem()
{
ID = @"EASTC",
Company = @"Eastern Connection",
ContactName = @"Ann Devon",
ContactTitle = @"Sales Agent",
Address = @"35 King George",
City = @"London",
Region = @"East",
PostalCode = 41000,
Country = @"UK",
Phone = @"(171) 555-0297",
Fax = @"(171) 555-3373"
});
this.Add(new CustomersDataItem()
{
ID = @"ERNSH",
Company = @"Ernst Handel",
ContactName = @"Roland Mendel",
ContactTitle = @"Sales Manager",
Address = @"Kirchgasse 6",
City = @"Graz",
Region = @"South",
PostalCode = 8010,
Country = @"Austria",
Phone = @"7675-3425",
Fax = @"7675-3426"
});
this.Add(new CustomersDataItem()
{
ID = @"FAMIA",
Company = @"Familia Arquibaldo",
ContactName = @"Aria Cruz",
ContactTitle = @"Marketing Assistant",
Address = @"Rua Orós, 92",
City = @"Sao Paulo",
Region = @"SP",
PostalCode = 27000,
Country = @"Brazil",
Phone = @"(11) 555-9857",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"FISSA",
Company = @"FISSA Fabrica Inter. Salchichas S.A.",
ContactName = @"Diego Roel",
ContactTitle = @"Accounting Manager",
Address = @"C/ Moralzarzal, 86",
City = @"Madrid",
Region = @"East",
PostalCode = 28034,
Country = @"Spain",
Phone = @"(91) 555 94 44",
Fax = @"(91) 555 55 93"
});
this.Add(new CustomersDataItem()
{
ID = @"FOLIG",
Company = @"Folies gourmandes",
ContactName = @"Martine Rancé",
ContactTitle = @"Assistant Sales Agent",
Address = @"184, chaussée de Tournai",
City = @"Lille",
Region = @"South",
PostalCode = 59000,
Country = @"France",
Phone = @"20.16.10.16",
Fax = @"20.16.10.17"
});
this.Add(new CustomersDataItem()
{
ID = @"FOLKO",
Company = @"Folk och fä HB",
ContactName = @"Maria Larsson",
ContactTitle = @"Owner",
Address = @"Åkergatan 24",
City = @"Bräcke",
Region = @"East",
PostalCode = 36000,
Country = @"Sweden",
Phone = @"0695-34 67 21",
Fax = @"0695 33-4455"
});
this.Add(new CustomersDataItem()
{
ID = @"FRANK",
Company = @"Frankenversand",
ContactName = @"Peter Franken",
ContactTitle = @"Marketing Manager",
Address = @"Berliner Platz 43",
City = @"München",
Region = @"East",
PostalCode = 80805,
Country = @"Germany",
Phone = @"089-0877310",
Fax = @"089-0877451"
});
this.Add(new CustomersDataItem()
{
ID = @"FRANR",
Company = @"France restauration",
ContactName = @"Carine Schmitt",
ContactTitle = @"Marketing Manager",
Address = @"54, rue Royale",
City = @"Nantes",
Region = @"South",
PostalCode = 44000,
Country = @"France",
Phone = @"40.32.21.21",
Fax = @"40.32.21.20"
});
this.Add(new CustomersDataItem()
{
ID = @"FRANS",
Company = @"Franchi S.p.A.",
ContactName = @"Paolo Accorti",
ContactTitle = @"Sales Representative",
Address = @"Via Monte Bianco 34",
City = @"Torino",
Region = @"East",
PostalCode = 10100,
Country = @"Italy",
Phone = @"011-4988260",
Fax = @"011-4988261"
});
}
}
csusing System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbGrid
Name="grid"
@ref="grid"
Data="CustomersData"
RowEditable="true"
AllowFiltering="true"
FilterMode="FilterMode.ExcelStyleFilter"
PrimaryKey="Company"
GroupingExpressions="GroupingExpression1">
<IgbGridToolbar
>
<IgbGridToolbarTitle
>
</IgbGridToolbarTitle>
<IgbGridToolbarActions
>
<IgbGridToolbarPinning
>
</IgbGridToolbarPinning>
<IgbGridToolbarHiding
>
</IgbGridToolbarHiding>
</IgbGridToolbarActions>
</IgbGridToolbar>
<IgbColumnLayout
Header="ID">
<IgbColumn
Field="ID"
RowStart="1"
ColStart="1"
RowEnd="3"
Filterable="false"
Width="150px">
</IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout
Pinned="true"
Header="Contact Details">
<IgbColumn
Field="Company"
Header="Company"
RowStart="1"
ColStart="1"
ColEnd="3"
Sortable="true"
Width="350px">
</IgbColumn>
<IgbColumn
Field="ContactName"
Header="Name"
RowStart="2"
ColStart="1"
ColEnd="2"
Groupable="true">
</IgbColumn>
<IgbColumn
Field="ContactTitle"
Header="Title"
RowStart="2"
ColStart="2"
ColEnd="3"
Groupable="true">
</IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout
Pinned="false"
Header="Address Details">
<IgbColumn
Field="Country"
RowStart="1"
ColStart="1"
ColEnd="3"
Groupable="true"
Filterable="false"
Width="220px">
</IgbColumn>
<IgbColumn
Field="Region"
RowStart="1"
ColStart="3"
ColEnd="5"
Groupable="true"
Filterable="false"
Width="220px">
</IgbColumn>
<IgbColumn
Field="PostalCode"
RowStart="1"
ColStart="5"
ColEnd="7"
Groupable="true"
Filterable="false"
Width="220px">
</IgbColumn>
<IgbColumn
Field="City"
RowStart="2"
ColStart="1"
ColEnd="4"
Groupable="true"
Filterable="false"
Width="220px">
</IgbColumn>
<IgbColumn
Field="Address"
RowStart="2"
ColStart="4"
ColEnd="7"
Filterable="false">
</IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout
Header="Phone Details">
<IgbColumn
Field="Phone"
RowStart="1"
ColStart="1"
ColEnd="2"
Filterable="false"
Width="220px">
</IgbColumn>
<IgbColumn
Field="Fax"
RowStart="2"
ColStart="1"
ColEnd="2"
Filterable="false"
Width="220px">
</IgbColumn>
</IgbColumnLayout>
</IgbGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
}
private IgbGrid grid;
private IgbGroupingExpression[] _groupingExpression1 = null;
public IgbGroupingExpression[] GroupingExpression1
{
get
{
if (this._groupingExpression1 == null)
{
var groupingExpression1 = new IgbGroupingExpression[1];
var groupingExpression2 = new IgbGroupingExpression();
groupingExpression2.FieldName = "Country";
groupingExpression2.IgnoreCase = false;
groupingExpression2.Dir = SortingDirection.Asc;
groupingExpression1[0] = groupingExpression2;
this._groupingExpression1 = groupingExpression1;
}
return this._groupingExpression1;
}
}
private CustomersData _customersData = null;
public CustomersData CustomersData
{
get
{
if (_customersData == null)
{
_customersData = new CustomersData();
}
return _customersData;
}
}
}
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.
La declaración de diseño de varias filas se logra mediante el componente IgbColumnLayout
. Cada componente IgbColumnLayout
debe considerarse como un bloque que contiene uno o varios componentes IgbColumn
. Algunas de las funciones de la cuadrícula funcionan a nivel de bloque (esas se enumeran en la sección "Integración de funciones" a continuación). Por ejemplo, la virtualización utilizará el bloque para determinar los fragmentos virtuales, por lo que, para obtener un mejor rendimiento, divida las columnas en más bloques IgbColumnLayout
si el diseño lo permite. No debe haber columnas fuera de esos bloques ni se debe utilizar IgbColumnGroup
al configurar un diseño de varias filas. El diseño de varias filas se implementa sobre la especificación de diseño de cuadrícula y debe cumplir con sus requisitos.
El componente IgbColumn
expone cuatro propiedades IgbInput
para determinar la ubicación y el alcance de cada celda:
ColStart
: índice de columna desde el que comienza el campo. Esta propiedad es obligatoria.RowStart
: índice de fila desde el que comienza el campo. Esta propiedad es obligatoria.ColEnd
: índice de columna donde debe terminar el campo actual. La cantidad de columnas entre colStart y colEnd determinará la cantidad de columnas que abarcan ese campo. Esta propiedad es opcional. Si no, establezca el valor predeterminado en colStart + 1.RowEnd
: índice de fila donde debe terminar el campo actual. La cantidad de filas entre RowStart y RowEnd determinará la cantidad de filas que abarcan ese campo. Esta propiedad es opcional. Si no, establezca el valor predeterminado en rowStart + 1.
<IgbColumnLayout>
<IgbColumn RowStart="1" RowEnd="3" ColStart="1" Field="ID"></IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout>
<IgbColumn RowStart="1" ColStart="1" ColEnd="3" Field="CompanyName"></IgbColumn>
<IgbColumn RowStart="2" ColStart="1" ColEnd="2" Field="ContactName"></IgbColumn>
<IgbColumn RowStart="2" ColStart="2" ColEnd="3" Field="ContactTitle"></IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout>
<IgbColumn RowStart="1" ColStart="1" ColEnd="3" Field="Country"></IgbColumn>
<IgbColumn RowStart="1" ColStart="3" ColEnd="5" Field="Region"></IgbColumn>
<IgbColumn RowStart="1" ColStart="5" ColEnd="7" Field="PostalCode"></IgbColumn>
<IgbColumn RowStart="2" ColStart="1" ColEnd="4" Field="City"></IgbColumn>
<IgbColumn RowStart="2" ColStart="4" ColEnd="7" Field="Address"></IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout>
<IgbColumn RowStart="1" ColStart="1" Field="Phone"></IgbColumn>
<IgbColumn RowStart="2" ColStart="1" Field="Fax"></IgbColumn>
</IgbColumnLayout>
razor
El resultado de la configuración anterior se puede ver en la siguiente captura de pantalla:

RowStart and ColStart properties must be set for each IgbColumn into a IgbColumnLayout. The IgbColumnLayout component is not verifying if the layout is correct and not throwing errors or warnings about that. The developers must make sure that the declaration of their layout is correct and complete, otherwise they may end up in broken layout with misalignments, overlaps and browser inconsistencies.
Feature Integration
Debido al enfoque de representación completamente diferente del diseño de varias filas, algunas de las funciones de las columnas funcionarán solo en el componente IgbColumnLayout
. Estas funciones son Fijar columnas y Ocultar columnas. Otros como Ordenar y Agrupar funcionarán de la misma manera en el componente IgbColumn
.
- Filtrado: solo se admite el filtrado de estilos de Excel. Establecer
FilterMode
explícitamente enFilterMode.quickFilter
no tiene ningún efecto. - Paginación: funciona con registros, no con filas visuales.
- La opción Agrupar por:
HideGroupedColumns
no tiene ningún efecto en el diseño de varias filas. Las columnas agrupadas siempre están visibles.
Actualmente no se admiten las siguientes funciones:
- Columna en movimiento
- Encabezados de varias columnas
- Exportar a Excel
- resúmenes
Keyboard Navigation
IgbGrid
con diseños de varias filas proporciona navegación con teclado integrado.
Horizontal Navigation
- ← o →: se mueve a la celda adyacente a la izquierda/derecha dentro de la fila actual sin verse afectada por los diseños de columnas definidos. Si la celda actual abarca más de una fila, ← y → deben navegar a la primera celda a la izquierda y a la derecha con la misma
rowStart
, a menos que haya navegado a alguna otra celda adyacente antes. La navegación almacena la celda de navegación inicial y navega a las celdas con la mismarowStart
si es posible. - Ctrl + ← (INICIO) o Ctrl + → (FIN): navegue hasta el inicio o el final de la fila y seleccione la celda de acuerdo con la celda de navegación inicial.
Vertical Navigation
- ↑ o ↓: se mueve a la celda de arriba/abajo en relación con una posición inicial y no se ve afectado por las filas. Si la celda actual abarca más de una columna, se seleccionará la siguiente celda activa de acuerdo con la celda de navegación inicial.
- Ctrl + ↑ o Ctrl + Abajo: navega y aplica el foco en la misma columna en la primera o en la última fila.
- Ctrl + Inicio o Ctrl + Fin: navega a la primera fila y enfoca la primera celda o navega a la última fila y enfoca la última celda.
Navigation through cells which span on multiple rows or columns is done with accordance to the starting navigation cell and will allow returning to the starting cell using the key for the opposite direction. The same approach is used when navigating through group rows.
Selection and multi cell selection are working on layout, meaning that when a cell is active, its layout will be selected. Also all features of multiple selection like drag selection are applicable and will work per layout not per cell.
Custom Keyboard Navigation
La cuadrícula permite personalizar el comportamiento de navegación predeterminado cuando se presiona una determinada tecla. Acciones como ir a la siguiente celda o a la siguiente celda se pueden manejar fácilmente con la poderosa API de navegación por teclado:
GridKeydown
está expuesto. El evento emitiráIGridKeydownEventArgs
. Este evento está disponible solo a través de las combinaciones de teclas del teclado mencionadas anteriormente; para todas las demás acciones clave, puede usar el eventoKeyDown
.NavigateTo
: este método le permite navegar a una posición segúnRowIndex
yVisibleColumnIndex
proporcionados.
La siguiente demostración agrega navegación adicional hacia abajo/arriba mediante las teclas Enter y Shift + Enter, similar al comportamiento observado en Excel.
Demo
using System;
using System.Collections.Generic;
public class CompanyDataItem
{
public string ID { get; set; }
public string Company { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string Country { get; set; }
public double LifetimeSales { get; set; }
public double QuarterlySales { get; set; }
public double YearlySales { get; set; }
public double MarketPotential { get; set; }
public double AssetsCash { get; set; }
public double AccountsReceivable { get; set; }
public double AssetsBooks { get; set; }
}
public class CompanyData
: List<CompanyDataItem>
{
public CompanyData()
{
this.Add(new CompanyDataItem()
{
ID = @"abc1000",
Company = @"Sportan",
Address = @"Rapelye Street",
City = @"Oceola",
Country = @"VU",
LifetimeSales = 40882580.18,
QuarterlySales = 430845.78,
YearlySales = 1197420.17,
MarketPotential = 4210805124.61,
AssetsCash = 264714.71,
AccountsReceivable = 63084.44,
AssetsBooks = 7534.74
});
this.Add(new CompanyDataItem()
{
ID = @"abc1001",
Company = @"Bugsall",
Address = @"Hoyt Street",
City = @"Rosine",
Country = @"FM",
LifetimeSales = 29231147.89,
QuarterlySales = 227299.97,
YearlySales = 1486467.06,
MarketPotential = 2505447478.96,
AssetsCash = 370690.39,
AccountsReceivable = 69242.24,
AssetsBooks = 12507.92
});
this.Add(new CompanyDataItem()
{
ID = @"abc1002",
Company = @"Hydrocom",
Address = @"Sunnyside Court",
City = @"Cornfields",
Country = @"KE",
LifetimeSales = 35628528.18,
QuarterlySales = 226007.91,
YearlySales = 1092555.78,
MarketPotential = 4930069033.99,
AssetsCash = 403038.64,
AccountsReceivable = 56183.05,
AssetsBooks = 8113.52
});
this.Add(new CompanyDataItem()
{
ID = @"abc1003",
Company = @"Eclipto",
Address = @"Remsen Avenue",
City = @"Orin",
Country = @"TZ",
LifetimeSales = 20178683.42,
QuarterlySales = 319645.81,
YearlySales = 1249194.57,
MarketPotential = 2488740024.16,
AssetsCash = 237368.76,
AccountsReceivable = 50048.48,
AssetsBooks = 13100.31
});
this.Add(new CompanyDataItem()
{
ID = @"abc1004",
Company = @"Paprikut",
Address = @"Bay Parkway",
City = @"Motley",
Country = @"LR",
LifetimeSales = 25575955.42,
QuarterlySales = 347046.85,
YearlySales = 1611555.66,
MarketPotential = 1923959087.58,
AssetsCash = 235064.57,
AccountsReceivable = 74596.25,
AssetsBooks = 17057.85
});
this.Add(new CompanyDataItem()
{
ID = @"abc1005",
Company = @"Unia",
Address = @"Richards Street",
City = @"Herlong",
Country = @"DZ",
LifetimeSales = 13462122.23,
QuarterlySales = 368636.73,
YearlySales = 489642.54,
MarketPotential = 1679474693.72,
AssetsCash = 498174.1,
AccountsReceivable = 92476.88,
AssetsBooks = 6961.9
});
this.Add(new CompanyDataItem()
{
ID = @"abc1006",
Company = @"Isologix",
Address = @"Williams Court",
City = @"Marysville",
Country = @"JO",
LifetimeSales = 38448387.27,
QuarterlySales = 298248.71,
YearlySales = 1904695.32,
MarketPotential = 4696918929,
AssetsCash = 383266.93,
AccountsReceivable = 76247.35,
AssetsBooks = 6818.03
});
this.Add(new CompanyDataItem()
{
ID = @"abc1007",
Company = @"Deepends",
Address = @"Independence Avenue",
City = @"Riegelwood",
Country = @"NO",
LifetimeSales = 13730298.02,
QuarterlySales = 323612.72,
YearlySales = 953860.54,
MarketPotential = 4825809829.87,
AssetsCash = 416146.08,
AccountsReceivable = 62282.5,
AssetsBooks = 13686.42
});
this.Add(new CompanyDataItem()
{
ID = @"abc1008",
Company = @"Quantasis",
Address = @"Berriman Street",
City = @"Unionville",
Country = @"ID",
LifetimeSales = 19875841.19,
QuarterlySales = 468274.38,
YearlySales = 1569184.18,
MarketPotential = 3489758844.49,
AssetsCash = 415699.26,
AccountsReceivable = 54628.5,
AssetsBooks = 19321.38
});
this.Add(new CompanyDataItem()
{
ID = @"abc1009",
Company = @"Playce",
Address = @"India Street",
City = @"Joppa",
Country = @"VI",
LifetimeSales = 45960329.03,
QuarterlySales = 448358.99,
YearlySales = 1855678.13,
MarketPotential = 2740892152.3,
AssetsCash = 447054.49,
AccountsReceivable = 69204.65,
AssetsBooks = 23522.18
});
this.Add(new CompanyDataItem()
{
ID = @"abc1010",
Company = @"Ezent",
Address = @"Decatur Street",
City = @"Lithium",
Country = @"CV",
LifetimeSales = 43613913.07,
QuarterlySales = 140288.25,
YearlySales = 594517.52,
MarketPotential = 1419141218.99,
AssetsCash = 324254.03,
AccountsReceivable = 78826.89,
AssetsBooks = 20581.79
});
this.Add(new CompanyDataItem()
{
ID = @"abc1011",
Company = @"Corepan",
Address = @"Jefferson Street",
City = @"Roland",
Country = @"CA",
LifetimeSales = 19334236.7,
QuarterlySales = 413597.57,
YearlySales = 1871048.41,
MarketPotential = 3524818686.77,
AssetsCash = 464374.02,
AccountsReceivable = 68634.68,
AssetsBooks = 16572.39
});
this.Add(new CompanyDataItem()
{
ID = @"abc1012",
Company = @"Quonata",
Address = @"Bristol Street",
City = @"Belgreen",
Country = @"ER",
LifetimeSales = 21467135.56,
QuarterlySales = 224717.89,
YearlySales = 657562.96,
MarketPotential = 3686684834.77,
AssetsCash = 345941.49,
AccountsReceivable = 51842.73,
AssetsBooks = 12948.79
});
this.Add(new CompanyDataItem()
{
ID = @"abc1013",
Company = @"Empirica",
Address = @"Eaton Court",
City = @"Hampstead",
Country = @"LY",
LifetimeSales = 21711544.57,
QuarterlySales = 290740.22,
YearlySales = 1202336.44,
MarketPotential = 2343942535.11,
AssetsCash = 331479.28,
AccountsReceivable = 61027.27,
AssetsBooks = 6199.99
});
this.Add(new CompanyDataItem()
{
ID = @"abc1014",
Company = @"Eventix",
Address = @"Gain Court",
City = @"Dowling",
Country = @"NG",
LifetimeSales = 27108803.74,
QuarterlySales = 322969.25,
YearlySales = 951465.66,
MarketPotential = 4841022751.3,
AssetsCash = 287818.89,
AccountsReceivable = 79152.96,
AssetsBooks = 9047.59
});
this.Add(new CompanyDataItem()
{
ID = @"abc1015",
Company = @"Dogspa",
Address = @"Quay Street",
City = @"Marne",
Country = @"TW",
LifetimeSales = 15372014.44,
QuarterlySales = 376294.9,
YearlySales = 978453.71,
MarketPotential = 1275418042.2,
AssetsCash = 374628.65,
AccountsReceivable = 84888.29,
AssetsBooks = 20578.59
});
this.Add(new CompanyDataItem()
{
ID = @"abc1016",
Company = @"Jumpstack",
Address = @"Quincy Street",
City = @"Hobucken",
Country = @"CF",
LifetimeSales = 38882346.28,
QuarterlySales = 140607.23,
YearlySales = 1197166.82,
MarketPotential = 4820347822.28,
AssetsCash = 231516.29,
AccountsReceivable = 87415.74,
AssetsBooks = 12896.54
});
this.Add(new CompanyDataItem()
{
ID = @"abc1017",
Company = @"Sybixtex",
Address = @"Ryder Street",
City = @"Alderpoint",
Country = @"IO",
LifetimeSales = 21445732.45,
QuarterlySales = 369036.23,
YearlySales = 499606.34,
MarketPotential = 2807389991.36,
AssetsCash = 408474.47,
AccountsReceivable = 65344.38,
AssetsBooks = 8862.63
});
this.Add(new CompanyDataItem()
{
ID = @"abc1018",
Company = @"Dognosis",
Address = @"Wolcott Street",
City = @"Edgewater",
Country = @"GL",
LifetimeSales = 41661881.98,
QuarterlySales = 141108.09,
YearlySales = 522969.48,
MarketPotential = 4374478218.15,
AssetsCash = 225730.61,
AccountsReceivable = 72839.21,
AssetsBooks = 8728.07
});
this.Add(new CompanyDataItem()
{
ID = @"abc1019",
Company = @"Twiggery",
Address = @"Irwin Street",
City = @"Blackgum",
Country = @"ZM",
LifetimeSales = 36017506.06,
QuarterlySales = 354562.4,
YearlySales = 1449893.92,
MarketPotential = 1948021644.72,
AssetsCash = 376383.08,
AccountsReceivable = 62385.03,
AssetsBooks = 14270.75
});
this.Add(new CompanyDataItem()
{
ID = @"abc1020",
Company = @"Bizmatic",
Address = @"Jerome Street",
City = @"Sylvanite",
Country = @"MM",
LifetimeSales = 11722193.14,
QuarterlySales = 213212.65,
YearlySales = 1310614.58,
MarketPotential = 3463018300.01,
AssetsCash = 252123.01,
AccountsReceivable = 57229.43,
AssetsBooks = 19165.76
});
this.Add(new CompanyDataItem()
{
ID = @"abc1021",
Company = @"Accel",
Address = @"Louisiana Avenue",
City = @"Cornucopia",
Country = @"IE",
LifetimeSales = 27607249.98,
QuarterlySales = 236774.12,
YearlySales = 1546611.47,
MarketPotential = 2024251139.72,
AssetsCash = 294508.31,
AccountsReceivable = 71612.5,
AssetsBooks = 18155.66
});
this.Add(new CompanyDataItem()
{
ID = @"abc1022",
Company = @"Brainquil",
Address = @"Tompkins Avenue",
City = @"Hanover",
Country = @"MX",
LifetimeSales = 25699331.36,
QuarterlySales = 186296.88,
YearlySales = 736119.79,
MarketPotential = 1098592989.14,
AssetsCash = 321341.22,
AccountsReceivable = 82055.95,
AssetsBooks = 10149.55
});
this.Add(new CompanyDataItem()
{
ID = @"abc1023",
Company = @"Eplode",
Address = @"Desmond Court",
City = @"Lupton",
Country = @"GA",
LifetimeSales = 22446181.35,
QuarterlySales = 346390.58,
YearlySales = 712190.68,
MarketPotential = 2534215258.43,
AssetsCash = 266537.14,
AccountsReceivable = 87164.54,
AssetsBooks = 24489.71
});
this.Add(new CompanyDataItem()
{
ID = @"abc1024",
Company = @"Crustatia",
Address = @"Woodhull Street",
City = @"Conestoga",
Country = @"GR",
LifetimeSales = 48060275.78,
QuarterlySales = 319385.17,
YearlySales = 1662973.16,
MarketPotential = 3562317203.73,
AssetsCash = 471269.15,
AccountsReceivable = 98834.5,
AssetsBooks = 10641.41
});
this.Add(new CompanyDataItem()
{
ID = @"abc1025",
Company = @"Buzzness",
Address = @"Guider Avenue",
City = @"Gratton",
Country = @"MD",
LifetimeSales = 26377352.6,
QuarterlySales = 439844.54,
YearlySales = 601430.59,
MarketPotential = 1486755775.28,
AssetsCash = 252524.24,
AccountsReceivable = 51795.96,
AssetsBooks = 10315.84
});
this.Add(new CompanyDataItem()
{
ID = @"abc1026",
Company = @"Helixo",
Address = @"Logan Street",
City = @"Broadlands",
Country = @"RE",
LifetimeSales = 31633703.02,
QuarterlySales = 256392.06,
YearlySales = 602291.9,
MarketPotential = 4323633265.68,
AssetsCash = 468025.56,
AccountsReceivable = 95638.46,
AssetsBooks = 22985.41
});
this.Add(new CompanyDataItem()
{
ID = @"abc1027",
Company = @"Geekosis",
Address = @"Dictum Court",
City = @"Bellamy",
Country = @"NF",
LifetimeSales = 29268437.79,
QuarterlySales = 147691.1,
YearlySales = 1691764.93,
MarketPotential = 1362207226.45,
AssetsCash = 434628.23,
AccountsReceivable = 66871.54,
AssetsBooks = 12574.59
});
this.Add(new CompanyDataItem()
{
ID = @"abc1028",
Company = @"Zipak",
Address = @"Hendrix Street",
City = @"Enetai",
Country = @"MH",
LifetimeSales = 18691983.29,
QuarterlySales = 218666.54,
YearlySales = 1038077.26,
MarketPotential = 1362313421.44,
AssetsCash = 276294.7,
AccountsReceivable = 59302.02,
AssetsBooks = 11183.04
});
}
}
csusing System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbGridModule),
typeof(IgbColumnLayoutModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS
<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#grid {
--ig-size: var(--ig-size-medium);
}
</style>
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbGrid
AutoGenerate="false"
Name="grid"
@ref="grid"
Id="grid"
Data="CompanyData"
GridKeydownScript="WebGridMRLCustomNavigationEvent">
<IgbColumnLayout
Name="CompanyInfo"
@ref="companyInfo"
Header="Company">
<IgbColumn
Name="Company"
@ref="company"
Field="Company"
Header="Company"
RowStart="1"
ColStart="1"
ColEnd="3">
</IgbColumn>
<IgbColumn
Name="Country"
@ref="country"
Field="Country"
Header="Country"
RowStart="2"
ColStart="1">
</IgbColumn>
<IgbColumn
Name="City"
@ref="city"
Field="City"
Header="City"
RowStart="2"
ColStart="2">
</IgbColumn>
<IgbColumn
Name="Address"
@ref="address"
Field="Address"
Header="Address"
RowStart="3"
ColStart="1"
ColEnd="3">
</IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout
Name="Sales"
@ref="sales"
Header="Sales">
<IgbColumn
Name="LifetimeSales"
@ref="lifetimeSales"
Field="LifetimeSales"
Header="Lifetime Sales"
RowStart="1"
RowEnd="3"
ColStart="1"
ColEnd="3">
</IgbColumn>
<IgbColumn
Name="Quarterly"
@ref="quarterly"
Field="QuarterlySales"
Header="Quarterly"
RowStart="3"
ColStart="1">
</IgbColumn>
<IgbColumn
Name="Yearly"
@ref="yearly"
Field="YearlySales"
Header="Yearly"
RowStart="3"
ColStart="2">
</IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout
Name="MarketPotentialInfo"
@ref="marketPotentialInfo"
Header="Market Potential">
<IgbColumn
Name="MarketPotential"
@ref="marketPotential"
Field="MarketPotential"
Header="Market Potential"
RowStart="1"
RowEnd="4"
ColStart="1">
</IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout
Name="Assets"
@ref="assets"
Header="Assets">
<IgbColumn
Name="AssetsCash"
@ref="assetsCash"
Field="AssetsCash"
Header="Assets Cash"
RowStart="1"
ColStart="1">
</IgbColumn>
<IgbColumn
Name="AccountsReceivable"
@ref="accountsReceivable"
Field="AccountsReceivable"
Header="Accounts Receivable"
RowStart="1"
ColStart="2"
ColEnd="4">
</IgbColumn>
<IgbColumn
Name="AssetsBooks"
@ref="assetsBooks"
Field="AssetsBooks"
Header="Assets Books"
RowStart="2"
RowEnd="4"
ColStart="1"
ColEnd="4">
</IgbColumn>
</IgbColumnLayout>
</IgbGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
var companyInfo = this.companyInfo;
var company = this.company;
var country = this.country;
var city = this.city;
var address = this.address;
var sales = this.sales;
var lifetimeSales = this.lifetimeSales;
var quarterly = this.quarterly;
var yearly = this.yearly;
var marketPotentialInfo = this.marketPotentialInfo;
var marketPotential = this.marketPotential;
var assets = this.assets;
var assetsCash = this.assetsCash;
var accountsReceivable = this.accountsReceivable;
var assetsBooks = this.assetsBooks;
}
private IgbGrid grid;
private IgbColumnLayout companyInfo;
private IgbColumn company;
private IgbColumn country;
private IgbColumn city;
private IgbColumn address;
private IgbColumnLayout sales;
private IgbColumn lifetimeSales;
private IgbColumn quarterly;
private IgbColumn yearly;
private IgbColumnLayout marketPotentialInfo;
private IgbColumn marketPotential;
private IgbColumnLayout assets;
private IgbColumn assetsCash;
private IgbColumn accountsReceivable;
private IgbColumn assetsBooks;
private CompanyData _companyData = null;
public CompanyData CompanyData
{
get
{
if (_companyData == null)
{
_companyData = new CompanyData();
}
return _companyData;
}
}
}
razor
igRegisterScript("WebGridMRLCustomNavigationEvent", (args) => {
const target = args.detail.target;
if (args.detail.event.key.toLowerCase() === 'enter') {
args.detail.event.preventDefault();
args.detail.cancel = true;
const rowIndex = target.intRow.index === undefined ? target.index : target.intRow.index;
this.grid.navigateTo(args.detail.event.shiftKey ? rowIndex - 1 : rowIndex + 1, target.column.visibleIndex,
(obj) => {
obj.target.activate();
});
}
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#grid {
--ig-size: var(--ig-size-medium);
}
css
Styling
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 algunos de los colores, primero debe establecer una clase para la cuadrícula:
<IgbGrid class="grid"></IgbGrid>
razor
Luego establezca las propiedades CSS relacionadas con esta clase:
.grid {
--ig-grid-cell-active-border-color: #ffcd0f;
--ig-grid-cell-selected-background: #6f6f6f;
--ig-grid-row-hover-background: #fde069;
--ig-grid-row-selected-background: #8d8d8d;
--ig-grid-header-background: #494949;
--ig-grid-header-text-color: #fff;
}
css
Demo
using System;
using System.Collections.Generic;
public class CustomersDataItem
{
public string ID { get; set; }
public string Company { get; set; }
public string ContactName { get; set; }
public string ContactTitle { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string Region { get; set; }
public double PostalCode { get; set; }
public string Country { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
}
public class CustomersData
: List<CustomersDataItem>
{
public CustomersData()
{
this.Add(new CustomersDataItem()
{
ID = @"ALFKI",
Company = @"Alfreds Futterkiste",
ContactName = @"Maria Anders",
ContactTitle = @"Sales Representative",
Address = @"Obere Str. 57",
City = @"Berlin",
Region = @"East",
PostalCode = 12209,
Country = @"Germany",
Phone = @"030-0074321",
Fax = @"030-0076545"
});
this.Add(new CustomersDataItem()
{
ID = @"ANATR",
Company = @"Ana Trujillo Emparedados y helados",
ContactName = @"Ana Trujillo",
ContactTitle = @"Owner",
Address = @"Avda. de la Constitución 2222",
City = @"México D.F.",
Region = @"South",
PostalCode = 5021,
Country = @"Mexico",
Phone = @"(5) 555-4729",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"ANTON",
Company = @"Antonio Moreno Taquería",
ContactName = @"Antonio Moreno",
ContactTitle = @"Owner",
Address = @"Mataderos 2312",
City = @"México D.F.",
Region = @"South",
PostalCode = 5023,
Country = @"Mexico",
Phone = @"(5) 555-3932",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"AROUT",
Company = @"Around the Horn",
ContactName = @"Thomas Hardy",
ContactTitle = @"Sales Representative",
Address = @"120 Hanover Sq.",
City = @"London",
Region = @"East",
PostalCode = 22000,
Country = @"UK",
Phone = @"(171) 555-7788",
Fax = @"(171) 555-6750"
});
this.Add(new CustomersDataItem()
{
ID = @"BERGS",
Company = @"Berglunds snabbköp",
ContactName = @"Christina Berglund",
ContactTitle = @"Order Administrator",
Address = @"Berguvsvägen 8",
City = @"Luleå",
Region = @"South",
PostalCode = 17000,
Country = @"Sweden",
Phone = @"0921-12 34 65",
Fax = @"0921-12 34 67"
});
this.Add(new CustomersDataItem()
{
ID = @"BLAUS",
Company = @"Blauer See Delikatessen",
ContactName = @"Hanna Moos",
ContactTitle = @"Sales Representative",
Address = @"Forsterstr. 57",
City = @"Mannheim",
Region = @"East",
PostalCode = 68306,
Country = @"Germany",
Phone = @"0621-08460",
Fax = @"0621-08924"
});
this.Add(new CustomersDataItem()
{
ID = @"BLONP",
Company = @"Blondesddsl père et fils",
ContactName = @"Frédérique Citeaux",
ContactTitle = @"Marketing Manager",
Address = @"24, place Kléber",
City = @"Strasbourg",
Region = @"East",
PostalCode = 67000,
Country = @"France",
Phone = @"88.60.15.31",
Fax = @"88.60.15.32"
});
this.Add(new CustomersDataItem()
{
ID = @"BOLID",
Company = @"Bólido Comidas preparadas",
ContactName = @"Martín Sommer",
ContactTitle = @"Owner",
Address = @"C/ Araquil, 67",
City = @"Madrid",
Region = @"East",
PostalCode = 28023,
Country = @"Spain",
Phone = @"(91) 555 22 82",
Fax = @"(91) 555 91 99"
});
this.Add(new CustomersDataItem()
{
ID = @"BONAP",
Company = @"Bon app'",
ContactName = @"Laurence Lebihan",
ContactTitle = @"Owner",
Address = @"12, rue des Bouchers",
City = @"Marseille",
Region = @"West",
PostalCode = 13008,
Country = @"France",
Phone = @"91.24.45.40",
Fax = @"91.24.45.41"
});
this.Add(new CustomersDataItem()
{
ID = @"BOTTM",
Company = @"Bottom-Dollar Markets",
ContactName = @"Elizabeth Lincoln",
ContactTitle = @"Accounting Manager",
Address = @"23 Tsawassen Blvd.",
City = @"Tsawassen",
Region = @"BC",
PostalCode = 28000,
Country = @"Canada",
Phone = @"(604) 555-4729",
Fax = @"(604) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"BSBEV",
Company = @"B's Beverages",
ContactName = @"Victoria Ashworth",
ContactTitle = @"Sales Representative",
Address = @"Fauntleroy Circus",
City = @"London",
Region = @"South",
PostalCode = 10000,
Country = @"UK",
Phone = @"(171) 555-1212",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"CACTU",
Company = @"Cactus Comidas para llevar",
ContactName = @"Patricio Simpson",
ContactTitle = @"Sales Agent",
Address = @"Cerrito 333",
City = @"Buenos Aires",
Region = @"East",
PostalCode = 1010,
Country = @"Argentina",
Phone = @"(1) 135-5555",
Fax = @"(1) 135-4892"
});
this.Add(new CustomersDataItem()
{
ID = @"CENTC",
Company = @"Centro comercial Moctezuma",
ContactName = @"Francisco Chang",
ContactTitle = @"Marketing Manager",
Address = @"Sierras de Granada 9993",
City = @"México D.F.",
Region = @"South",
PostalCode = 5022,
Country = @"Mexico",
Phone = @"(5) 555-3392",
Fax = @"(5) 555-7293"
});
this.Add(new CustomersDataItem()
{
ID = @"CHOPS",
Company = @"Chop-suey Chinese",
ContactName = @"Yang Wang",
ContactTitle = @"Owner",
Address = @"Hauptstr. 29",
City = @"Bern",
Region = @"East",
PostalCode = 3012,
Country = @"Switzerland",
Phone = @"0452-076545",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"COMMI",
Company = @"Comércio Mineiro",
ContactName = @"Pedro Afonso",
ContactTitle = @"Sales Associate",
Address = @"Av. dos Lusíadas, 23",
City = @"Sao Paulo",
Region = @"SP",
PostalCode = 34000,
Country = @"Brazil",
Phone = @"(11) 555-7647",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"CONSH",
Company = @"Consolidated Holdings",
ContactName = @"Elizabeth Brown",
ContactTitle = @"Sales Representative",
Address = @"Berkeley Gardens 12 Brewery",
City = @"London",
Region = @"South",
PostalCode = 27000,
Country = @"UK",
Phone = @"(171) 555-2282",
Fax = @"(171) 555-9199"
});
this.Add(new CustomersDataItem()
{
ID = @"DRACD",
Company = @"Drachenblut Delikatessen",
ContactName = @"Sven Ottlieb",
ContactTitle = @"Order Administrator",
Address = @"Walserweg 21",
City = @"Aachen",
Region = @"South",
PostalCode = 52066,
Country = @"Germany",
Phone = @"0241-039123",
Fax = @"0241-059428"
});
this.Add(new CustomersDataItem()
{
ID = @"DUMON",
Company = @"Du monde entier",
ContactName = @"Janine Labrune",
ContactTitle = @"Owner",
Address = @"67, rue des Cinquante Otages",
City = @"Nantes",
Region = @"East",
PostalCode = 44000,
Country = @"France",
Phone = @"40.67.88.88",
Fax = @"40.67.89.89"
});
this.Add(new CustomersDataItem()
{
ID = @"EASTC",
Company = @"Eastern Connection",
ContactName = @"Ann Devon",
ContactTitle = @"Sales Agent",
Address = @"35 King George",
City = @"London",
Region = @"East",
PostalCode = 41000,
Country = @"UK",
Phone = @"(171) 555-0297",
Fax = @"(171) 555-3373"
});
this.Add(new CustomersDataItem()
{
ID = @"ERNSH",
Company = @"Ernst Handel",
ContactName = @"Roland Mendel",
ContactTitle = @"Sales Manager",
Address = @"Kirchgasse 6",
City = @"Graz",
Region = @"South",
PostalCode = 8010,
Country = @"Austria",
Phone = @"7675-3425",
Fax = @"7675-3426"
});
this.Add(new CustomersDataItem()
{
ID = @"FAMIA",
Company = @"Familia Arquibaldo",
ContactName = @"Aria Cruz",
ContactTitle = @"Marketing Assistant",
Address = @"Rua Orós, 92",
City = @"Sao Paulo",
Region = @"SP",
PostalCode = 27000,
Country = @"Brazil",
Phone = @"(11) 555-9857",
Fax = @"(5) 555-3745"
});
this.Add(new CustomersDataItem()
{
ID = @"FISSA",
Company = @"FISSA Fabrica Inter. Salchichas S.A.",
ContactName = @"Diego Roel",
ContactTitle = @"Accounting Manager",
Address = @"C/ Moralzarzal, 86",
City = @"Madrid",
Region = @"East",
PostalCode = 28034,
Country = @"Spain",
Phone = @"(91) 555 94 44",
Fax = @"(91) 555 55 93"
});
this.Add(new CustomersDataItem()
{
ID = @"FOLIG",
Company = @"Folies gourmandes",
ContactName = @"Martine Rancé",
ContactTitle = @"Assistant Sales Agent",
Address = @"184, chaussée de Tournai",
City = @"Lille",
Region = @"South",
PostalCode = 59000,
Country = @"France",
Phone = @"20.16.10.16",
Fax = @"20.16.10.17"
});
this.Add(new CustomersDataItem()
{
ID = @"FOLKO",
Company = @"Folk och fä HB",
ContactName = @"Maria Larsson",
ContactTitle = @"Owner",
Address = @"Åkergatan 24",
City = @"Bräcke",
Region = @"East",
PostalCode = 36000,
Country = @"Sweden",
Phone = @"0695-34 67 21",
Fax = @"0695 33-4455"
});
this.Add(new CustomersDataItem()
{
ID = @"FRANK",
Company = @"Frankenversand",
ContactName = @"Peter Franken",
ContactTitle = @"Marketing Manager",
Address = @"Berliner Platz 43",
City = @"München",
Region = @"East",
PostalCode = 80805,
Country = @"Germany",
Phone = @"089-0877310",
Fax = @"089-0877451"
});
this.Add(new CustomersDataItem()
{
ID = @"FRANR",
Company = @"France restauration",
ContactName = @"Carine Schmitt",
ContactTitle = @"Marketing Manager",
Address = @"54, rue Royale",
City = @"Nantes",
Region = @"South",
PostalCode = 44000,
Country = @"France",
Phone = @"40.32.21.21",
Fax = @"40.32.21.20"
});
this.Add(new CustomersDataItem()
{
ID = @"FRANS",
Company = @"Franchi S.p.A.",
ContactName = @"Paolo Accorti",
ContactTitle = @"Sales Representative",
Address = @"Via Monte Bianco 34",
City = @"Torino",
Region = @"East",
PostalCode = 10100,
Country = @"Italy",
Phone = @"011-4988260",
Fax = @"011-4988261"
});
}
}
csusing System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}
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-cell-active-border-color: #ffcd0f;
--ig-grid-cell-selected-background: #6f6f6f;
--ig-grid-row-hover-background: #fde069;
--ig-grid-row-selected-background: #8d8d8d;
--ig-grid-header-background: #494949;
--ig-grid-header-text-color: #fff;
}
</style>
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbGrid
Name="grid"
@ref="grid"
Id="grid"
Data="CustomersData"
PrimaryKey="Company">
<IgbColumnLayout
Hidden="true"
Header="ID">
<IgbColumn
Field="ID"
RowStart="1"
ColStart="1"
RowEnd="3"
Filterable="false"
Width="150px">
</IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout
Pinned="true"
Header="Contact Details">
<IgbColumn
Field="Company"
Header="Company"
RowStart="1"
ColStart="1"
ColEnd="3"
Sortable="true"
Width="350px">
</IgbColumn>
<IgbColumn
Field="ContactName"
Header="Name"
RowStart="2"
ColStart="1"
ColEnd="2">
</IgbColumn>
<IgbColumn
Field="ContactTitle"
Header="Title"
RowStart="2"
ColStart="2"
ColEnd="3">
</IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout
Pinned="false"
Header="Address Details">
<IgbColumn
Field="Country"
RowStart="1"
ColStart="1"
ColEnd="3"
Filterable="false"
Width="220px">
</IgbColumn>
<IgbColumn
Field="Region"
RowStart="1"
ColStart="3"
ColEnd="5"
Filterable="false"
Width="220px">
</IgbColumn>
<IgbColumn
Field="PostalCode"
RowStart="1"
ColStart="5"
ColEnd="7"
Filterable="false"
Width="220px">
</IgbColumn>
<IgbColumn
Field="City"
RowStart="2"
ColStart="1"
ColEnd="4"
Filterable="false"
Width="220px">
</IgbColumn>
<IgbColumn
Field="Address"
RowStart="2"
ColStart="4"
ColEnd="7">
</IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout
Header="Phone Details">
<IgbColumn
Field="Phone"
RowStart="1"
ColStart="1"
ColEnd="2"
Width="220px">
</IgbColumn>
<IgbColumn
Field="Fax"
RowStart="2"
ColStart="1"
ColEnd="2"
Width="220px">
</IgbColumn>
</IgbColumnLayout>
</IgbGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
}
private IgbGrid grid;
private CustomersData _customersData = null;
public CustomersData CustomersData
{
get
{
if (_customersData == null)
{
_customersData = new CustomersData();
}
return _customersData;
}
}
}
razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#grid {
--ig-grid-cell-active-border-color: #ffcd0f;
--ig-grid-cell-selected-background: #6f6f6f;
--ig-grid-row-hover-background: #fde069;
--ig-grid-row-selected-background: #8d8d8d;
--ig-grid-header-background: #494949;
--ig-grid-header-text-color: #fff;
}
css
API References
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.