Edición de celdas en cuadrícula jerárquica Blazor
La Ignite UI for Blazor en Blazor Hierarchical Grid ofrece una gran capacidad de manipulación de datos del contenido de celdas individuales dentro del componente Blazor Hierarchical Grid y viene con una potente API para operaciones CRUD React. Es una característica fundamental en aplicaciones como hojas de cálculo, tablas de datos y cuadrículas de datos, que permite a los usuarios agregar, editar o actualizar datos dentro de celdas específicas. De forma predeterminada, la cuadrícula en Ignite UI for Blazor se utiliza en la edición de celdas. Y debido a la plantilla de edición de celdas predeterminada, habrá diferentes editores según el tipo de datos de la columna Parte superior del formulario.
Además, puede definir sus propias plantillas personalizadas para acciones de actualización de datos y anular el comportamiento predeterminado para confirmar y descartar cualquier cambio.
Blazor Hierarchical Grid Cell Editing and Edit Templates Example
using System;
using System.Collections.Generic;
public class NwindDataItem
{
public double ProductID { get; set; }
public string ProductName { get; set; }
public double SupplierID { get; set; }
public double CategoryID { get; set; }
public string QuantityPerUnit { get; set; }
public double UnitPrice { get; set; }
public double UnitsInStock { get; set; }
public double UnitsOnOrder { get; set; }
public double ReorderLevel { get; set; }
public bool Discontinued { get; set; }
public string OrderDate { get; set; }
public double Rating { get; set; }
public List<NwindDataItem_LocationsItem> Locations { get; set; }
}
public class NwindDataItem_LocationsItem
{
public string Shop { get; set; }
public string LastInventory { get; set; }
}
public class NwindData
: List<NwindDataItem>
{
public NwindData()
{
this.Add(new NwindDataItem()
{
ProductID = 1,
ProductName = @"Chai",
SupplierID = 1,
CategoryID = 1,
QuantityPerUnit = @"10 boxes x 20 bags",
UnitPrice = 18,
UnitsInStock = 39,
UnitsOnOrder = 30,
ReorderLevel = 10,
Discontinued = false,
OrderDate = @"2012-02-12",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 2,
ProductName = @"Chang",
SupplierID = 1,
CategoryID = 1,
QuantityPerUnit = @"24 - 12 oz bottles",
UnitPrice = 19,
UnitsInStock = 17,
UnitsOnOrder = 40,
ReorderLevel = 25,
Discontinued = true,
OrderDate = @"2003-03-17",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 3,
ProductName = @"Aniseed Syrup",
SupplierID = 1,
CategoryID = 2,
QuantityPerUnit = @"12 - 550 ml bottles",
UnitPrice = 10,
UnitsInStock = 13,
UnitsOnOrder = 70,
ReorderLevel = 25,
Discontinued = false,
OrderDate = @"2006-03-17",
Rating = 3,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"24/7 Market",
LastInventory = @"2018-11-11"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 4,
ProductName = @"Chef Antons Cajun Seasoning",
SupplierID = 2,
CategoryID = 2,
QuantityPerUnit = @"48 - 6 oz jars",
UnitPrice = 22,
UnitsInStock = 53,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2016-03-17",
Rating = 3,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 5,
ProductName = @"Chef Antons Gumbo Mix",
SupplierID = 2,
CategoryID = 2,
QuantityPerUnit = @"36 boxes",
UnitPrice = 21.35,
UnitsInStock = 0,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = true,
OrderDate = @"2011-11-11",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 6,
ProductName = @"Grandmas Boysenberry Spread",
SupplierID = 3,
CategoryID = 2,
QuantityPerUnit = @"12 - 8 oz jars",
UnitPrice = 25,
UnitsInStock = 0,
UnitsOnOrder = 30,
ReorderLevel = 25,
Discontinued = false,
OrderDate = @"2017-12-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 7,
ProductName = @"Uncle Bobs Organic Dried Pears",
SupplierID = 3,
CategoryID = 7,
QuantityPerUnit = @"12 - 1 lb pkgs.",
UnitPrice = 30,
UnitsInStock = 150,
UnitsOnOrder = 30,
ReorderLevel = 10,
Discontinued = false,
OrderDate = @"2016-07-17",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 8,
ProductName = @"Northwoods Cranberry Sauce",
SupplierID = 3,
CategoryID = 2,
QuantityPerUnit = @"12 - 12 oz jars",
UnitPrice = 40,
UnitsInStock = 6,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2018-01-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 9,
ProductName = @"Mishi Kobe Niku",
SupplierID = 4,
CategoryID = 6,
QuantityPerUnit = @"18 - 500 g pkgs.",
UnitPrice = 97,
UnitsInStock = 29,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = true,
OrderDate = @"2010-02-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 10,
ProductName = @"Ikura",
SupplierID = 4,
CategoryID = 8,
QuantityPerUnit = @"12 - 200 ml jars",
UnitPrice = 31,
UnitsInStock = 31,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2008-05-17",
Rating = 3,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Wall Market",
LastInventory = @"2018-12-06"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 11,
ProductName = @"Queso Cabrales",
SupplierID = 5,
CategoryID = 4,
QuantityPerUnit = @"1 kg pkg.",
UnitPrice = 21,
UnitsInStock = 22,
UnitsOnOrder = 30,
ReorderLevel = 30,
Discontinued = false,
OrderDate = @"2009-01-17",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 12,
ProductName = @"Queso Manchego La Pastora",
SupplierID = 5,
CategoryID = 4,
QuantityPerUnit = @"10 - 500 g pkgs.",
UnitPrice = 38,
UnitsInStock = 86,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2015-11-17",
Rating = 3,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 13,
ProductName = @"Konbu",
SupplierID = 6,
CategoryID = 8,
QuantityPerUnit = @"2 kg box",
UnitPrice = 6,
UnitsInStock = 24,
UnitsOnOrder = 30,
ReorderLevel = 5,
Discontinued = false,
OrderDate = @"2015-03-17",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 14,
ProductName = @"Tofu",
SupplierID = 6,
CategoryID = 7,
QuantityPerUnit = @"40 - 100 g pkgs.",
UnitPrice = 23.25,
UnitsInStock = 35,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2017-06-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 15,
ProductName = @"Genen Shouyu",
SupplierID = 6,
CategoryID = 2,
QuantityPerUnit = @"24 - 250 ml bottles",
UnitPrice = 15.5,
UnitsInStock = 39,
UnitsOnOrder = 30,
ReorderLevel = 5,
Discontinued = false,
OrderDate = @"2014-03-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Local Market",
LastInventory = @"2018-07-03"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Wall Market",
LastInventory = @"2018-12-06"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 16,
ProductName = @"Pavlova",
SupplierID = 7,
CategoryID = 3,
QuantityPerUnit = @"32 - 500 g boxes",
UnitPrice = 17.45,
UnitsInStock = 29,
UnitsOnOrder = 30,
ReorderLevel = 10,
Discontinued = false,
OrderDate = @"2018-03-28",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"24/7 Market",
LastInventory = @"2018-11-11"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 17,
ProductName = @"Alice Mutton",
SupplierID = 7,
CategoryID = 6,
QuantityPerUnit = @"20 - 1 kg tins",
UnitPrice = 39,
UnitsInStock = 0,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = true,
OrderDate = @"2015-08-17",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 18,
ProductName = @"Carnarvon Tigers",
SupplierID = 7,
CategoryID = 8,
QuantityPerUnit = @"16 kg pkg.",
UnitPrice = 62.5,
UnitsInStock = 42,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2005-09-27",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"24/7 Market",
LastInventory = @"2018-11-11"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 19,
ProductName = @"Teatime Chocolate Biscuits",
SupplierID = 8,
CategoryID = 3,
QuantityPerUnit = @"",
UnitPrice = 9.2,
UnitsInStock = 25,
UnitsOnOrder = 30,
ReorderLevel = 5,
Discontinued = false,
OrderDate = @"2001-03-17",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Local Market",
LastInventory = @"2018-07-03"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 20,
ProductName = @"Sir Rodneys Marmalade",
SupplierID = 8,
CategoryID = 3,
QuantityPerUnit = @"4 - 100 ml jars",
UnitPrice = 4.5,
UnitsInStock = 40,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2005-03-17",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
}
}
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(IgbHierarchicalGridModule),
typeof(IgbPaginatorModule)
);
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-size: var(--ig-size-medium);
}
</style>
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbHierarchicalGrid
AutoGenerate="false"
Id="grid"
Name="grid"
@ref="grid"
Data="NwindData"
PrimaryKey="ProductID"
AllowFiltering="true">
<IgbPaginator
PerPage="10">
</IgbPaginator>
<IgbColumn
Field="ProductName"
Header="Product Name"
DataType="GridColumnDataType.String"
Sortable="true"
HasSummary="true"
Editable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="UnitsInStock"
Header="Units in Stock"
DataType="GridColumnDataType.Number"
Sortable="true"
HasSummary="true"
Editable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date"
Sortable="true"
HasSummary="true"
Editable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Discontinued"
Header="Discontinued"
DataType="GridColumnDataType.Boolean"
Sortable="true"
HasSummary="true"
Editable="true">
</IgbColumn>
<IgbColumn
Field="ReorderLevel"
Header="Reorder Level"
DataType="GridColumnDataType.Number"
Sortable="true"
HasSummary="true"
Editable="true"
Filterable="false">
</IgbColumn>
<IgbRowIsland
ChildDataKey="Locations"
AutoGenerate="false">
<IgbColumn
Field="Shop"
Header="Shop"
DataType="GridColumnDataType.String"
Editable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="LastInventory"
Header="Last Inventory"
DataType="GridColumnDataType.Date"
Editable="true"
Resizable="true">
</IgbColumn>
</IgbRowIsland>
</IgbHierarchicalGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
}
private IgbHierarchicalGrid grid;
private NwindData _nwindData = null;
public NwindData NwindData
{
get
{
if (_nwindData == null)
{
_nwindData = new NwindData();
}
return _nwindData;
}
}
}
razor/*
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
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.
Edición de celdas
Editing through UI
Puede ingresar al modo de edición para una celda específica, cuando una celda editable está enfocada de una de las siguientes maneras:
- al hacer doble clic;
- con un solo clic: un solo clic ingresará al modo de edición solo si la celda seleccionada previamente estaba en modo de edición y la celda actualmente seleccionada es editable. Si la celda previamente seleccionada no estaba en modo de edición, un solo clic seleccionará la celda sin ingresar al modo de edición;
- en la tecla presione Enter;
- en la tecla presione F2;
Puede salir del modo de edición sin realizar los cambios de una de las siguientes maneras:
- en la tecla presione Escape;
- cuando realiza operaciones de clasificación, filtrado, búsqueda y ocultación;
Puede salir del modo de edición y confirmar los cambios de una de las siguientes maneras:
- en la tecla presione Enter;
- en la tecla presione F2;
- en la tecla presione Tab;
- Con un solo clic en otra celda: al hacer clic en
IgbHierarchicalGrid
otra celda, se enviarán los cambios. - operaciones como paginación, cambio de tamaño, anclar o mover saldrán del modo de edición y se enviarán los cambios.
The cell remains in edit mode when you scroll vertically or horizontally or click outside the IgbHierarchicalGrid. This is valid for both cell editing and row editing.
Editing through API
También puede modificar el valor de la celda a través de la API, pero solo si se define la IgbHierarchicalGrid
clave principal:
@code {
this.hierarchicalGrid.UpdateCell(newValue, rowID, 'ReorderLevel');
}
razor
Otra forma de actualizar la celda es directamente a través del Update
método de Cell
:
@code {
private UpdateCell() {
IgbCell cell = this.hierarchicalGrid.GetCellByColumn(rowIndex, "ReorderLevel");
cell.Update(70);
}
}
razor
Cell Editing Templates
Puede ver y obtener más información sobre las plantillas de edición de celdas predeterminadas en el tema de edición general.
Si desea proporcionar una plantilla personalizada que se aplicará a una celda, puede pasar dicha plantilla a la celda misma o a su encabezado. Primero cree la columna como lo haría normalmente:
<IgbColumn
Field="Age"
DataType="GridColumnDataType.String"
InlineEditorTemplateScript="WebGridCellEditCellTemplate"
Editable="true"
Name="column1"
@ref="column1">
</IgbColumn>
razor
y pasa la plantilla:
*** In JavaScript ***
igRegisterScript("WebGridCellEditCellTemplate", (ctx) => {
let cellValues = [];
let uniqueValues = [];
for(const i of ctx.cell.grid.data){
const field = ctx.cell.column.field;
if(uniqueValues.indexOf(i[field]) === -1 )
{
cellValues.push(html`<igc-select-item value=${i[field]}>${(i[field])}</igc-select-item>`);
uniqueValues.push(i[field]);
}
}
return html`<div>
<igc-select position-strategy="fixed" @igcChange=${ e => ctx.cell.editValue = e.detail.value}>
${cellValues}
</igc-select>
</div>`;
}, false);
razor
Puede encontrar una muestra funcional de lo anterior aquí para mayor referencia:
using System;
using System.Collections.Generic;
public class HGridDndDataItem
{
public string Name { get; set; }
public string Age { get; set; }
public string Alignment { get; set; }
public string Race { get; set; }
public string Class { get; set; }
public List<HGridDndDataItem_SkillsItem> Skills { get; set; }
}
public class HGridDndDataItem_SkillsItem
{
public string Skill { get; set; }
public string Level { get; set; }
}
public class HGridDndData
: List<HGridDndDataItem>
{
public HGridDndData()
{
this.Add(new HGridDndDataItem()
{
Name = @"Stredo",
Age = @"244",
Alignment = @"💜 Lawful evil",
Race = @"👩 Human",
Class = @"🎻 Bard",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"🎻 Bardic Inspiration",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🎻 Countercharm",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🎻 Jack of All Trades",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🎻 Song of Rest",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Haluun",
Age = @"40",
Alignment = @"🤍 Unaligned",
Race = @"🧒🏻 Hafling",
Class = @"🙏🏻 Monk",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"🙏🏻 Unarmored Defense",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🙏🏻 Martial Arts",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🙏🏻 Ki",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🙏🏻 Deflect Missiles",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Ivellios",
Age = @"244",
Alignment = @"🧡 Chaotic good",
Race = @"👩 Human",
Class = @"⚔️ Paladin",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"⚔️ Divine Sense",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"⚔️ Lay on Hands",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"⚔️ Divine Smite",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"⚔️ Aura of Protection",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Tes",
Age = @"35",
Alignment = @"💜 Lawful evil",
Race = @"🎭 Changeling",
Class = @"🧙♂️ Wizard",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"🧙♂️ Arcane Recovery",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🧙♂️ Arcane Tradition",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🧙♂️ Spell Mastery",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🧙♂️ Signature Spell",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Kalla",
Age = @"47",
Alignment = @"🤎 Neutral evil",
Race = @"🤖 Warforged",
Class = @"🦹♂️ Sorcerer",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"🦹♂️ Sorcerous Origin",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🦹♂️ Font of Magic",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🦹♂️ Metamagic",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🦹♂️ Sorcerous Restoration",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Halimath Dundragon",
Age = @"149",
Alignment = @"🤍 Unaligned",
Race = @"🐲 Dragonborn",
Class = @"⚔️ Paladin",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"⚔️ Divine Sense",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"⚔️ Lay on Hands",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"⚔️ Divine Smite",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"⚔️ Aura of Protection",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Iriphawa",
Age = @"39",
Alignment = @"💛 Lawful neutral",
Race = @"🧝🏻♂️ Half-Elf",
Class = @"🏹 Ranger",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"🏹 Favored Enemy",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🏹 Natural Explorer",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🏹 Primeval Awareness",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🏹 Land's Stride",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Quaf",
Age = @"25",
Alignment = @"💚 Neutral",
Race = @"👩 Human",
Class = @"🥊 Fighter",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"🥊 Second Wind",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🥊 Action Surge",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🥊 Martial Archetype",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🥊 Extra Attack",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Rat Scratch",
Age = @"15",
Alignment = @"🤎 Neutral evil",
Race = @"🐡 Locathah",
Class = @"🍁 Druid",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"🍁 Druidic",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🍁 Wild Shape",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🍁 Druid Circle",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🍁 Timeless Body",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Slicer",
Age = @"57",
Alignment = @"💜 Lawful evil",
Race = @"🐡 Locathah",
Class = @"💪 Barbarian",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"💪 Rage",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"💪 Unarmored Defense",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"💪 Reckless Attack",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"💪 Danger Sense",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Nereones Ahlorsath",
Age = @"95",
Alignment = @"💛 Lawful neutral",
Race = @"👩 Human",
Class = @"🥊 Fighter",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"🥊 Second Wind",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🥊 Action Surge",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🥊 Martial Archetype",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🥊 Extra Attack",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Nalvarti Stonecutter",
Age = @"118",
Alignment = @"❤️ Neutral good",
Race = @"🧝♀️ Elf",
Class = @"❤️ Cleric",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"❤️ Divine Domain",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"❤️ Channel Divinity",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"❤️ Destroy Undead",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"❤️ Divine Intervention",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Errk",
Age = @"22",
Alignment = @"🤎 Neutral evil",
Race = @"🧝🏻♂️ Half-Elf",
Class = @"🎻 Bard",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"🎻 Bardic Inspiration",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🎻 Countercharm",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🎻 Jack of All Trades",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🎻 Song of Rest",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Seven Thundercloud",
Age = @"43",
Alignment = @"💖 Lawful good",
Race = @"🐡 Locathah",
Class = @"⚔️ Paladin",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"⚔️ Divine Sense",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"⚔️ Lay on Hands",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"⚔️ Divine Smite",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"⚔️ Aura of Protection",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Navarra Chergoba",
Age = @"16",
Alignment = @"💜 Lawful evil",
Race = @"🐯 Tabaxi",
Class = @"❤️ Cleric",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"❤️ Divine Domain",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"❤️ Channel Divinity",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"❤️ Destroy Undead",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"❤️ Divine Intervention",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Sail Snap",
Age = @"56",
Alignment = @"💖 Lawful good",
Race = @"🌳 Arboren",
Class = @"💪 Barbarian",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"💪 Rage",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"💪 Unarmored Defense",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"💪 Reckless Attack",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"💪 Danger Sense",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Urreek",
Age = @"17",
Alignment = @"💜 Lawful evil",
Race = @"🧝🏻♂️ Half-Elf",
Class = @"🐉 Warlock",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"🐉 Otherworldly Patron",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🐉 Pact Magic",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🐉 Eldritch Invocations",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🐉 Mystic Arcanum",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Morkral Firetamer",
Age = @"24",
Alignment = @"🤎 Neutral evil",
Race = @"🐲 Dragonborn",
Class = @"🙏🏻 Monk",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"🙏🏻 Unarmored Defense",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🙏🏻 Martial Arts",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🙏🏻 Ki",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🙏🏻 Deflect Missiles",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Vithka",
Age = @"53",
Alignment = @"💜 Lawful evil",
Race = @"🐡 Locathah",
Class = @"⚔️ Paladin",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"⚔️ Divine Sense",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"⚔️ Lay on Hands",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"⚔️ Divine Smite",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"⚔️ Aura of Protection",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Sandrue Avhoste",
Age = @"19",
Alignment = @"💙 Chaotic Neutral",
Race = @"🐲 Dragonborn",
Class = @"🗡️ Rogue",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"🗡️ Sneak Attack",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🗡️ Thieves' Cant",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🗡️ Cunning Action",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🗡️ Uncanny Dodge",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Hapah Moq",
Age = @"34",
Alignment = @"💜 Lawful evil",
Race = @"🎅🏽 Dwarf",
Class = @"🎻 Bard",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"🎻 Bardic Inspiration",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🎻 Countercharm",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🎻 Jack of All Trades",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🎻 Song of Rest",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Kothar ",
Age = @"55",
Alignment = @"🤍 Unaligned",
Race = @"🧝🏻♂️ Half-Elf",
Class = @"🐉 Warlock",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"🐉 Otherworldly Patron",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🐉 Pact Magic",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🐉 Eldritch Invocations",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🐉 Mystic Arcanum",
Level = @"4"
}}
});
this.Add(new HGridDndDataItem()
{
Name = @"Senen",
Age = @"40",
Alignment = @"💜 Lawful evil",
Race = @"🧒🏻 Hafling",
Class = @"🥊 Fighter",
Skills = new List<HGridDndDataItem_SkillsItem>()
{
new HGridDndDataItem_SkillsItem()
{
Skill = @"🥊 Second Wind",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🥊 Action Surge",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🥊 Martial Archetype",
Level = @"4"
},
new HGridDndDataItem_SkillsItem()
{
Skill = @"🥊 Extra Attack",
Level = @"4"
}}
});
}
}
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(IgbHierarchicalGridModule),
typeof(IgbSelectModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbHierarchicalGrid
AutoGenerate="false"
Data="HGridDndData"
PrimaryKey="Name"
Name="hierarchicalGrid1"
@ref="hierarchicalGrid1">
<IgbColumn
Field="Name"
Header="Character Name"
DataType="GridColumnDataType.String">
</IgbColumn>
<IgbColumn
Field="Race"
Header="Race"
DataType="GridColumnDataType.String"
InlineEditorTemplateScript="HGridCellEditCellTemplate"
Editable="true"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="Class"
Header="Class"
InlineEditorTemplateScript="HGridCellEditCellTemplate"
Editable="true"
DataType="GridColumnDataType.String"
Name="column2"
@ref="column2">
</IgbColumn>
<IgbColumn
Field="Age"
Header="Age"
DataType="GridColumnDataType.String"
Editable="true">
</IgbColumn>
<IgbColumn
Field="Alignment"
Header="Alignment"
InlineEditorTemplateScript="HGridCellEditCellTemplate"
Editable="true"
DataType="GridColumnDataType.String"
Name="column3"
@ref="column3">
</IgbColumn>
<IgbRowIsland
ChildDataKey="Skills"
AutoGenerate="false">
<IgbColumn
Field="Skill"
Header="Skill"
DataType="GridColumnDataType.String"
Editable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Level"
Header="Level"
DataType="GridColumnDataType.String"
Editable="true"
Resizable="true">
</IgbColumn>
</IgbRowIsland>
</IgbHierarchicalGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var hierarchicalGrid1 = this.hierarchicalGrid1;
var column1 = this.column1;
var column2 = this.column2;
var column3 = this.column3;
}
private IgbHierarchicalGrid hierarchicalGrid1;
private IgbColumn column1;
private IgbColumn column2;
private IgbColumn column3;
private HGridDndData _hGridDndData = null;
public HGridDndData HGridDndData
{
get
{
if (_hGridDndData == null)
{
_hGridDndData = new HGridDndData();
}
return _hGridDndData;
}
}
}
razor
igRegisterScript("HGridCellEditCellTemplate", (ctx) => {
var html = window.igTemplating.html;
let cellValues = [];
let uniqueValues = [];
for (const i of ctx.cell.grid.data) {
const field = ctx.cell.column.field;
if (uniqueValues.indexOf(i[field]) === -1) {
if (ctx.cell.value == i[field]) {
cellValues.push(html`<igc-select-item selected value=${i[field]}>${(i[field])}</igc-select-item>`);
} else cellValues.push(html`<igc-select-item value=${i[field]}>${(i[field])}</igc-select-item>`);
uniqueValues.push(i[field]);
}
}
return html`
<igc-select style="width:100%; height:100%; --ig-size: var(--ig-size-large);" @igcChange=${e => ctx.cell.editValue = e.detail.value}>
${cellValues}
</igc-select>
`
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
CRUD operations
Please keep in mind that when you perform some CRUD operation all of the applied pipes like filtering, sorting and grouping will be re-applied and your view will be automatically updated.
Proporciona IgbHierarchicalGrid
una API sencilla para operaciones CRUD básicas.
Adding a new record
El IgbHierarchicalGrid
componente expone el AddRow
método que agregará los datos proporcionados a la propia fuente de datos.
@code {
//Assuming we have a `GetNewRecord` method returning the new row data.
const record = this.GetNewRecord();
this.HierarchicalGridRef.AddRow(record);
}
razor
Updating data in the Hierarchical Grid
La actualización de datos en la cuadrícula jerárquica se logra a través de UpdateRow
métodos UpdateCell
, pero solo si se define la clave principal de la cuadrícula. También puede actualizar directamente un valor de celda y/o fila a través de sus respectivos métodos de actualización.
@code {
// Updating the whole row
this.hierarchicalGrid.UpdateRow(newData, this.selectedCell.cellID.rowID);
// Just a particular cell through the Tree Grid API
this.hierarchicalGrid.UpdateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field);
// Directly using the cell `update` method
this.selectedCell.Update(newData);
// Directly using the row `update` method
IgbRowType row = this.hierarchicalGrid.GetRowByKey(rowID);
row.Update(newData);
}
razor
Deleting data from the Hierarchical Grid
Tenga en cuenta que el método DeleteRow
eliminará la fila especificada solo si se define una PrimaryKey
.
@code {
// Delete row through Grid API
this.hierarchicalGrid.DeleteRow(this.selectedCell.cellID.rowID);
// Delete row through row object
IgbRowType row = this.hierarchicalGrid.GetRowByIndex(rowIndex);
row.Del();
}
razor
Cell Validation on Edit Event
Usando los IgbHierarchicalGrid
eventos de edición, podemos alterar la forma en que el usuario interactúa con el IgbHierarchicalGrid
.
En este ejemplo, validaremos una celda según los datos ingresados en ella vinculándola al evento CellEdit
. Si el nuevo valor de la celda no cumple con nuestros criterios predefinidos, evitaremos que llegue a la fuente de datos cancelando el evento.
Lo primero que tenemos que hacer es enlazar al evento de la cuadrícula:
<IgbHierarchicalGrid CellEditScript="HandleCellEdit" />
razor
CellEdit
se emite cada vez que el valor de cualquier celda está a punto de confirmarse. En nuestra definición de CellEdit, debemos asegurarnos de verificar nuestra columna específica antes de realizar cualquier acción:
*** In JavaScript ***
igRegisterScript("HandleCellEdit", (ev) => {
const today = new Date();
const column = event.detail.column;
if (column.field === 'Debut') {
if (event.detail.newValue > today.getFullYear()) {
event.detail.cancel = true;
alert('The debut date must be in the past!');
}
} else if (column.field === 'LaunchDate') {
if (event.detail.newValue > today) {
event.detail.cancel = true;
alert('The launch date must be in the past!');
}
}
}, false);
razor
Aquí, estamos validando dos columnas. Si el usuario intenta cambiar el año de debut de un artista o la fecha de lanzamiento de un álbum, la cuadrícula no permitirá fechas posteriores a la actual.
El resultado de la aplicación de la validación anterior a nuestro IgbHierarchicalGrid
se puede ver en la siguiente demostración:
using System;
using System.Collections.Generic;
public class NwindDataItem
{
public double ProductID { get; set; }
public string ProductName { get; set; }
public double SupplierID { get; set; }
public double CategoryID { get; set; }
public string QuantityPerUnit { get; set; }
public double UnitPrice { get; set; }
public double UnitsInStock { get; set; }
public double UnitsOnOrder { get; set; }
public double ReorderLevel { get; set; }
public bool Discontinued { get; set; }
public string OrderDate { get; set; }
public double Rating { get; set; }
public List<NwindDataItem_LocationsItem> Locations { get; set; }
}
public class NwindDataItem_LocationsItem
{
public string Shop { get; set; }
public string LastInventory { get; set; }
}
public class NwindData
: List<NwindDataItem>
{
public NwindData()
{
this.Add(new NwindDataItem()
{
ProductID = 1,
ProductName = @"Chai",
SupplierID = 1,
CategoryID = 1,
QuantityPerUnit = @"10 boxes x 20 bags",
UnitPrice = 18,
UnitsInStock = 39,
UnitsOnOrder = 30,
ReorderLevel = 10,
Discontinued = false,
OrderDate = @"2012-02-12",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 2,
ProductName = @"Chang",
SupplierID = 1,
CategoryID = 1,
QuantityPerUnit = @"24 - 12 oz bottles",
UnitPrice = 19,
UnitsInStock = 17,
UnitsOnOrder = 40,
ReorderLevel = 25,
Discontinued = true,
OrderDate = @"2003-03-17",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 3,
ProductName = @"Aniseed Syrup",
SupplierID = 1,
CategoryID = 2,
QuantityPerUnit = @"12 - 550 ml bottles",
UnitPrice = 10,
UnitsInStock = 13,
UnitsOnOrder = 70,
ReorderLevel = 25,
Discontinued = false,
OrderDate = @"2006-03-17",
Rating = 3,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"24/7 Market",
LastInventory = @"2018-11-11"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 4,
ProductName = @"Chef Antons Cajun Seasoning",
SupplierID = 2,
CategoryID = 2,
QuantityPerUnit = @"48 - 6 oz jars",
UnitPrice = 22,
UnitsInStock = 53,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2016-03-17",
Rating = 3,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 5,
ProductName = @"Chef Antons Gumbo Mix",
SupplierID = 2,
CategoryID = 2,
QuantityPerUnit = @"36 boxes",
UnitPrice = 21.35,
UnitsInStock = 0,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = true,
OrderDate = @"2011-11-11",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 6,
ProductName = @"Grandmas Boysenberry Spread",
SupplierID = 3,
CategoryID = 2,
QuantityPerUnit = @"12 - 8 oz jars",
UnitPrice = 25,
UnitsInStock = 0,
UnitsOnOrder = 30,
ReorderLevel = 25,
Discontinued = false,
OrderDate = @"2017-12-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 7,
ProductName = @"Uncle Bobs Organic Dried Pears",
SupplierID = 3,
CategoryID = 7,
QuantityPerUnit = @"12 - 1 lb pkgs.",
UnitPrice = 30,
UnitsInStock = 150,
UnitsOnOrder = 30,
ReorderLevel = 10,
Discontinued = false,
OrderDate = @"2016-07-17",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 8,
ProductName = @"Northwoods Cranberry Sauce",
SupplierID = 3,
CategoryID = 2,
QuantityPerUnit = @"12 - 12 oz jars",
UnitPrice = 40,
UnitsInStock = 6,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2018-01-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 9,
ProductName = @"Mishi Kobe Niku",
SupplierID = 4,
CategoryID = 6,
QuantityPerUnit = @"18 - 500 g pkgs.",
UnitPrice = 97,
UnitsInStock = 29,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = true,
OrderDate = @"2010-02-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 10,
ProductName = @"Ikura",
SupplierID = 4,
CategoryID = 8,
QuantityPerUnit = @"12 - 200 ml jars",
UnitPrice = 31,
UnitsInStock = 31,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2008-05-17",
Rating = 3,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Wall Market",
LastInventory = @"2018-12-06"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 11,
ProductName = @"Queso Cabrales",
SupplierID = 5,
CategoryID = 4,
QuantityPerUnit = @"1 kg pkg.",
UnitPrice = 21,
UnitsInStock = 22,
UnitsOnOrder = 30,
ReorderLevel = 30,
Discontinued = false,
OrderDate = @"2009-01-17",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 12,
ProductName = @"Queso Manchego La Pastora",
SupplierID = 5,
CategoryID = 4,
QuantityPerUnit = @"10 - 500 g pkgs.",
UnitPrice = 38,
UnitsInStock = 86,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2015-11-17",
Rating = 3,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 13,
ProductName = @"Konbu",
SupplierID = 6,
CategoryID = 8,
QuantityPerUnit = @"2 kg box",
UnitPrice = 6,
UnitsInStock = 24,
UnitsOnOrder = 30,
ReorderLevel = 5,
Discontinued = false,
OrderDate = @"2015-03-17",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 14,
ProductName = @"Tofu",
SupplierID = 6,
CategoryID = 7,
QuantityPerUnit = @"40 - 100 g pkgs.",
UnitPrice = 23.25,
UnitsInStock = 35,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2017-06-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 15,
ProductName = @"Genen Shouyu",
SupplierID = 6,
CategoryID = 2,
QuantityPerUnit = @"24 - 250 ml bottles",
UnitPrice = 15.5,
UnitsInStock = 39,
UnitsOnOrder = 30,
ReorderLevel = 5,
Discontinued = false,
OrderDate = @"2014-03-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Local Market",
LastInventory = @"2018-07-03"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Wall Market",
LastInventory = @"2018-12-06"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 16,
ProductName = @"Pavlova",
SupplierID = 7,
CategoryID = 3,
QuantityPerUnit = @"32 - 500 g boxes",
UnitPrice = 17.45,
UnitsInStock = 29,
UnitsOnOrder = 30,
ReorderLevel = 10,
Discontinued = false,
OrderDate = @"2018-03-28",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"24/7 Market",
LastInventory = @"2018-11-11"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 17,
ProductName = @"Alice Mutton",
SupplierID = 7,
CategoryID = 6,
QuantityPerUnit = @"20 - 1 kg tins",
UnitPrice = 39,
UnitsInStock = 0,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = true,
OrderDate = @"2015-08-17",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 18,
ProductName = @"Carnarvon Tigers",
SupplierID = 7,
CategoryID = 8,
QuantityPerUnit = @"16 kg pkg.",
UnitPrice = 62.5,
UnitsInStock = 42,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2005-09-27",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"24/7 Market",
LastInventory = @"2018-11-11"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 19,
ProductName = @"Teatime Chocolate Biscuits",
SupplierID = 8,
CategoryID = 3,
QuantityPerUnit = @"",
UnitPrice = 9.2,
UnitsInStock = 25,
UnitsOnOrder = 30,
ReorderLevel = 5,
Discontinued = false,
OrderDate = @"2001-03-17",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Local Market",
LastInventory = @"2018-07-03"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 20,
ProductName = @"Sir Rodneys Marmalade",
SupplierID = 8,
CategoryID = 3,
QuantityPerUnit = @"4 - 100 ml jars",
UnitPrice = 4.5,
UnitsInStock = 40,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2005-03-17",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
}
}
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(IgbHierarchicalGridModule),
typeof(IgbPaginatorModule)
);
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">
<IgbHierarchicalGrid
AutoGenerate="false"
Id="grid"
Name="grid"
@ref="grid"
Data="NwindData"
CellEditScript="WebGridEditingEventsCellEdit"
PrimaryKey="ProductID"
AllowFiltering="true">
<IgbPaginator
PerPage="10">
</IgbPaginator>
<IgbColumn
Field="ProductName"
Header="Product Name"
DataType="GridColumnDataType.String"
Sortable="true"
HasSummary="true"
Editable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="UnitsInStock"
Header="Units in Stock"
DataType="GridColumnDataType.Number"
Sortable="true"
HasSummary="true"
Editable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="UnitsOnOrder"
Header="Units in Order"
DataType="GridColumnDataType.Number"
Sortable="true"
HasSummary="true"
Editable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date"
Sortable="true"
HasSummary="true"
Editable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Discontinued"
Header="Discontinued"
DataType="GridColumnDataType.Boolean"
Sortable="true"
HasSummary="true"
Editable="true">
</IgbColumn>
<IgbColumn
Field="ReorderLevel"
Header="Reorder Level"
DataType="GridColumnDataType.Number"
Sortable="true"
HasSummary="true"
Editable="true"
Filterable="false">
</IgbColumn>
<IgbRowIsland
ChildDataKey="Locations"
AutoGenerate="false">
<IgbColumn
Field="Shop"
Header="Shop"
DataType="GridColumnDataType.String"
Editable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="LastInventory"
Header="Last Inventory"
DataType="GridColumnDataType.Date"
Editable="true"
Resizable="true">
</IgbColumn>
</IgbRowIsland>
</IgbHierarchicalGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
}
private IgbHierarchicalGrid grid;
private NwindData _nwindData = null;
public NwindData NwindData
{
get
{
if (_nwindData == null)
{
_nwindData = new NwindData();
}
return _nwindData;
}
}
}
razor
igRegisterScript("WebGridEditingEventsCellEdit", (ev) => {
var d = ev.detail;
if (d.column != null && d.column.field == "UnitsOnOrder") {
if (d.newValue > d.rowData.UnitsInStock) {
d.cancel = true;
alert("You cannot order more than the units in stock!")
}
}
}, 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:
<IgbHierarchicalGrid Class="hierarchicalGrid"></IgbHierarchicalGrid>
razor
Luego configure las propiedades CSS relacionadas para esa clase:
.hierarchicalGrid {
--ig-grid-edit-mode-color: orange;
--ig-grid-cell-editing-background: lightblue;
}
css
Styling Example
using System;
using System.Collections.Generic;
public class NwindDataItem
{
public double ProductID { get; set; }
public string ProductName { get; set; }
public double SupplierID { get; set; }
public double CategoryID { get; set; }
public string QuantityPerUnit { get; set; }
public double UnitPrice { get; set; }
public double UnitsInStock { get; set; }
public double UnitsOnOrder { get; set; }
public double ReorderLevel { get; set; }
public bool Discontinued { get; set; }
public string OrderDate { get; set; }
public double Rating { get; set; }
public List<NwindDataItem_LocationsItem> Locations { get; set; }
}
public class NwindDataItem_LocationsItem
{
public string Shop { get; set; }
public string LastInventory { get; set; }
}
public class NwindData
: List<NwindDataItem>
{
public NwindData()
{
this.Add(new NwindDataItem()
{
ProductID = 1,
ProductName = @"Chai",
SupplierID = 1,
CategoryID = 1,
QuantityPerUnit = @"10 boxes x 20 bags",
UnitPrice = 18,
UnitsInStock = 39,
UnitsOnOrder = 30,
ReorderLevel = 10,
Discontinued = false,
OrderDate = @"2012-02-12",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 2,
ProductName = @"Chang",
SupplierID = 1,
CategoryID = 1,
QuantityPerUnit = @"24 - 12 oz bottles",
UnitPrice = 19,
UnitsInStock = 17,
UnitsOnOrder = 40,
ReorderLevel = 25,
Discontinued = true,
OrderDate = @"2003-03-17",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 3,
ProductName = @"Aniseed Syrup",
SupplierID = 1,
CategoryID = 2,
QuantityPerUnit = @"12 - 550 ml bottles",
UnitPrice = 10,
UnitsInStock = 13,
UnitsOnOrder = 70,
ReorderLevel = 25,
Discontinued = false,
OrderDate = @"2006-03-17",
Rating = 3,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"24/7 Market",
LastInventory = @"2018-11-11"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 4,
ProductName = @"Chef Antons Cajun Seasoning",
SupplierID = 2,
CategoryID = 2,
QuantityPerUnit = @"48 - 6 oz jars",
UnitPrice = 22,
UnitsInStock = 53,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2016-03-17",
Rating = 3,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 5,
ProductName = @"Chef Antons Gumbo Mix",
SupplierID = 2,
CategoryID = 2,
QuantityPerUnit = @"36 boxes",
UnitPrice = 21.35,
UnitsInStock = 0,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = true,
OrderDate = @"2011-11-11",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 6,
ProductName = @"Grandmas Boysenberry Spread",
SupplierID = 3,
CategoryID = 2,
QuantityPerUnit = @"12 - 8 oz jars",
UnitPrice = 25,
UnitsInStock = 0,
UnitsOnOrder = 30,
ReorderLevel = 25,
Discontinued = false,
OrderDate = @"2017-12-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 7,
ProductName = @"Uncle Bobs Organic Dried Pears",
SupplierID = 3,
CategoryID = 7,
QuantityPerUnit = @"12 - 1 lb pkgs.",
UnitPrice = 30,
UnitsInStock = 150,
UnitsOnOrder = 30,
ReorderLevel = 10,
Discontinued = false,
OrderDate = @"2016-07-17",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 8,
ProductName = @"Northwoods Cranberry Sauce",
SupplierID = 3,
CategoryID = 2,
QuantityPerUnit = @"12 - 12 oz jars",
UnitPrice = 40,
UnitsInStock = 6,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2018-01-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 9,
ProductName = @"Mishi Kobe Niku",
SupplierID = 4,
CategoryID = 6,
QuantityPerUnit = @"18 - 500 g pkgs.",
UnitPrice = 97,
UnitsInStock = 29,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = true,
OrderDate = @"2010-02-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 10,
ProductName = @"Ikura",
SupplierID = 4,
CategoryID = 8,
QuantityPerUnit = @"12 - 200 ml jars",
UnitPrice = 31,
UnitsInStock = 31,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2008-05-17",
Rating = 3,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Wall Market",
LastInventory = @"2018-12-06"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 11,
ProductName = @"Queso Cabrales",
SupplierID = 5,
CategoryID = 4,
QuantityPerUnit = @"1 kg pkg.",
UnitPrice = 21,
UnitsInStock = 22,
UnitsOnOrder = 30,
ReorderLevel = 30,
Discontinued = false,
OrderDate = @"2009-01-17",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Fun-Tasty Co.",
LastInventory = @"2018-06-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 12,
ProductName = @"Queso Manchego La Pastora",
SupplierID = 5,
CategoryID = 4,
QuantityPerUnit = @"10 - 500 g pkgs.",
UnitPrice = 38,
UnitsInStock = 86,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2015-11-17",
Rating = 3,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 13,
ProductName = @"Konbu",
SupplierID = 6,
CategoryID = 8,
QuantityPerUnit = @"2 kg box",
UnitPrice = 6,
UnitsInStock = 24,
UnitsOnOrder = 30,
ReorderLevel = 5,
Discontinued = false,
OrderDate = @"2015-03-17",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 14,
ProductName = @"Tofu",
SupplierID = 6,
CategoryID = 7,
QuantityPerUnit = @"40 - 100 g pkgs.",
UnitPrice = 23.25,
UnitsInStock = 35,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2017-06-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 15,
ProductName = @"Genen Shouyu",
SupplierID = 6,
CategoryID = 2,
QuantityPerUnit = @"24 - 250 ml bottles",
UnitPrice = 15.5,
UnitsInStock = 39,
UnitsOnOrder = 30,
ReorderLevel = 5,
Discontinued = false,
OrderDate = @"2014-03-17",
Rating = 4,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Local Market",
LastInventory = @"2018-07-03"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Wall Market",
LastInventory = @"2018-12-06"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 16,
ProductName = @"Pavlova",
SupplierID = 7,
CategoryID = 3,
QuantityPerUnit = @"32 - 500 g boxes",
UnitPrice = 17.45,
UnitsInStock = 29,
UnitsOnOrder = 30,
ReorderLevel = 10,
Discontinued = false,
OrderDate = @"2018-03-28",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Street Market",
LastInventory = @"2018-12-12"
},
new NwindDataItem_LocationsItem()
{
Shop = @"24/7 Market",
LastInventory = @"2018-11-11"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 17,
ProductName = @"Alice Mutton",
SupplierID = 7,
CategoryID = 6,
QuantityPerUnit = @"20 - 1 kg tins",
UnitPrice = 39,
UnitsInStock = 0,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = true,
OrderDate = @"2015-08-17",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Farmer Market",
LastInventory = @"2018-04-04"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 18,
ProductName = @"Carnarvon Tigers",
SupplierID = 7,
CategoryID = 8,
QuantityPerUnit = @"16 kg pkg.",
UnitPrice = 62.5,
UnitsInStock = 42,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2005-09-27",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"24/7 Market",
LastInventory = @"2018-11-11"
},
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 19,
ProductName = @"Teatime Chocolate Biscuits",
SupplierID = 8,
CategoryID = 3,
QuantityPerUnit = @"",
UnitPrice = 9.2,
UnitsInStock = 25,
UnitsOnOrder = 30,
ReorderLevel = 5,
Discontinued = false,
OrderDate = @"2001-03-17",
Rating = 2,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Local Market",
LastInventory = @"2018-07-03"
}}
});
this.Add(new NwindDataItem()
{
ProductID = 20,
ProductName = @"Sir Rodneys Marmalade",
SupplierID = 8,
CategoryID = 3,
QuantityPerUnit = @"4 - 100 ml jars",
UnitPrice = 4.5,
UnitsInStock = 40,
UnitsOnOrder = 30,
ReorderLevel = 0,
Discontinued = false,
OrderDate = @"2005-03-17",
Rating = 5,
Locations = new List<NwindDataItem_LocationsItem>()
{
new NwindDataItem_LocationsItem()
{
Shop = @"Super Market",
LastInventory = @"2018-09-09"
}}
});
}
}
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(IgbHierarchicalGridModule),
typeof(IgbPaginatorModule)
);
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-size: var(--ig-size-medium);
}
#grid {
--ig-grid-edit-mode-color: #FFA500;
--ig-grid-cell-active-border-color: #FFA500;
--ig-grid-cell-editing-background: #add8e6;
}
</style>
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbHierarchicalGrid
AutoGenerate="false"
Id="grid"
Name="grid"
@ref="grid"
Data="NwindData"
PrimaryKey="ProductID"
AllowFiltering="true">
<IgbPaginator
PerPage="10">
</IgbPaginator>
<IgbColumn
Field="ProductName"
Header="Product Name"
DataType="GridColumnDataType.String"
Sortable="true"
HasSummary="true"
Editable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="UnitsInStock"
Header="Units in Stock"
DataType="GridColumnDataType.Number"
Sortable="true"
HasSummary="true"
Editable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date"
Sortable="true"
HasSummary="true"
Editable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="Discontinued"
Header="Discontinued"
DataType="GridColumnDataType.Boolean"
Sortable="true"
HasSummary="true"
Editable="true">
</IgbColumn>
<IgbColumn
Field="ReorderLevel"
Header="Reorder Level"
DataType="GridColumnDataType.Number"
Sortable="true"
HasSummary="true"
Editable="true"
Filterable="false">
</IgbColumn>
<IgbRowIsland
ChildDataKey="Locations"
AutoGenerate="false">
<IgbColumn
Field="Shop"
Header="Shop"
DataType="GridColumnDataType.String"
Editable="true"
Resizable="true">
</IgbColumn>
<IgbColumn
Field="LastInventory"
Header="Last Inventory"
DataType="GridColumnDataType.Date"
Editable="true"
Resizable="true">
</IgbColumn>
</IgbRowIsland>
</IgbHierarchicalGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
}
private IgbHierarchicalGrid grid;
private NwindData _nwindData = null;
public NwindData NwindData
{
get
{
if (_nwindData == null)
{
_nwindData = new NwindData();
}
return _nwindData;
}
}
}
razor/*
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);
}
#grid {
--ig-grid-edit-mode-color: #FFA500;
--ig-grid-cell-active-border-color: #FFA500;
--ig-grid-cell-editing-background: #add8e6;
}
css