Blazor Hierarchical Grid Cell Editing
The Ignite UI for Blazor Cell Editing in Blazor Hierarchical Grid provides a great data manipulation capability of the content of individual cells within the Blazor Hierarchical Grid component and comes with powerful API for React CRUD operations. It is a fundamental feature in apps like spreadsheets, data tables, and data grids, allowing users to add, edit, or update data within specific cells. By default, the Grid in Ignite UI for Blazor is used in cell editing. And due to the default cell editing template, there will be different editors based on the column data type Top of Form.
In addition, you can define your own custom templates for update-data actions and to override the default behavior for committing and discarding any changes.
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.
Cell Editing
Editing through UI
You can enter edit mode for specific cell, when an editable cell is focused in one of the following ways:
- on double click;
- on single click - Single click will enter edit mode only if the previously selected cell was in edit mode and currently selected cell is editable. If the previously selected cell was not in edit mode, single click will select the cell without entering edit mode;
- on key press Enter;
- on key press F2;
You can exit edit mode without committing the changes in one of the following ways:
- on key press Escape;
- when you perform sorting, filtering, searching and hiding operations;
You can exit edit mode and commit the changes in one of the following ways:
- on key press Enter;
- on key press F2;
- on key press Tab;
- on single click to another cell - when you click on another cell in the
IgbHierarchicalGrid
, your changes will be submitted. - operations like paging, resize, pin or move will exit edit mode and changes will be submitted.
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
You can also modify the cell value through the IgbHierarchicalGrid
API but only if primary key is defined:
@code {
this.hierarchicalGrid.UpdateCell(newValue, rowID, 'ReorderLevel');
}
razor
Another way to update cell is directly through Update
method of Cell
:
@code {
private UpdateCell() {
IgbCell cell = this.hierarchicalGrid.GetCellByColumn(rowIndex, "ReorderLevel");
cell.Update(70);
}
}
razor
Cell Editing Templates
You can see and learn more for default cell editing templates in the general editing topic.
If you want to provide a custom template which will be applied to a cell, you can pass such template either to the cell itself, or to its header. First create the column as you usually would:
<IgbColumn
Field="Age"
DataType="GridColumnDataType.String"
InlineEditorTemplateScript="WebGridCellEditCellTemplate"
Editable="true"
Name="column1"
@ref="column1">
</IgbColumn>
razor
and pass the template:
*** 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
Working sample of the above can be found here for further reference:
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.
The IgbHierarchicalGrid
provides a straightforward API for basic CRUD operations.
Adding a new record
The IgbHierarchicalGrid
component exposes the AddRow
method which will add the provided data to the data source itself.
@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
Updating data in the Hierarchical Grid is achieved through UpdateRow
and UpdateCell
methods but only if the PrimaryKey for the grid is defined. You can also directly update a cell and/or a row value through their respective update methods.
@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
Please keep in mind that DeleteRow
method will remove the specified row only if a PrimaryKey
is defined.
@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
Using the IgbHierarchicalGrid
's editing events, we can alter how the user interacts with the IgbHierarchicalGrid
.
In this example, we'll validate a cell based on the data entered in it by binding to the CellEdit
event. If the new value of the cell does not meet our predefined criteria, we'll prevent it from reaching the data source by cancelling the event.
The first thing we need to do is bind to the grid's event:
<IgbHierarchicalGrid CellEditScript="HandleCellEdit" />
razor
The CellEdit
emits whenever any cell's value is about to be committed. In our CellEdit definition, we need to make sure that we check for our specific column before taking any action:
*** 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
Here, we are validating two columns. If the user tries to change an artist's Debut year or an album's Launch Date, the grid will not allow any dates that are greater than today.
The result of the above validation being applied to our IgbHierarchicalGrid
can be seen in the below demo:
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
In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set a class for the grid first:
<IgbHierarchicalGrid Class="hierarchicalGrid"></IgbHierarchicalGrid>
razor
Then set the related CSS properties for that class:
.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