Excel Filtering in Blazor Grid
The Blazor Grid exposes an Excel-style filtering feature that provides an Excel-like filtering UI. It simplifies the process of working with large datasets. The main idea is to help them filter the data that is most relevant, while eliminating irrelevant entries.
Blazor Grid Excel Style Filtering Example
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}csusing 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"
}}
});
}
}cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS
<div class="container vertical ig-typography">
<div class="options vertical">
<IgbPropertyEditorPanel
Name="PropertyEditor"
@ref="propertyEditor"
DescriptionType="WebGrid"
IsHorizontal="true"
IsWrappingEnabled="true">
<IgbPropertyEditorPropertyDescription
Name="SizeEditor"
@ref="sizeEditor"
Label="Grid Size:"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "Small", "Medium", "Large" })"
DropDownValues="@(new string[] { "Small", "Medium", "Large" })"
ChangedScript="WebGridSetGridSize">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="container vertical fill">
<IgbGrid
AutoGenerate="false"
Id="grid"
Name="grid"
@ref="grid"
Data="NwindData"
Moving="true"
AllowFiltering="true"
FilterMode="FilterMode.ExcelStyleFilter">
<IgbGridToolbar
>
<IgbGridToolbarActions
>
<IgbGridToolbarHiding
>
</IgbGridToolbarHiding>
</IgbGridToolbarActions>
</IgbGridToolbar>
<IgbColumn
Field="ProductName"
Header="Product Name"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="QuantityPerUnit"
Header="Quantity Per Unit"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="UnitPrice"
Header="Unit Price"
DataType="GridColumnDataType.Currency"
Sortable="true"
PipeArgs="ColumnPipeArgs1"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date"
Sortable="true"
PipeArgs="ColumnPipeArgs2"
Name="column2"
@ref="column2">
</IgbColumn>
<IgbColumn
Field="Discontinued"
Header="Discontinued"
Sortable="true"
BodyTemplateScript="WebGridBooleanCellTemplate"
Name="column3"
@ref="column3">
</IgbColumn>
</IgbGrid>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var propertyEditor = this.propertyEditor;
var sizeEditor = this.sizeEditor;
var grid = this.grid;
var column1 = this.column1;
var column2 = this.column2;
var column3 = this.column3;
this.BindElements = () => {
propertyEditor.Target = this.grid;
};
this.BindElements();
}
private IgbPropertyEditorPanel propertyEditor;
private IgbPropertyEditorPropertyDescription sizeEditor;
private IgbGrid grid;
private IgbColumn column1;
private IgbColumnPipeArgs _columnPipeArgs1 = null;
public IgbColumnPipeArgs ColumnPipeArgs1
{
get
{
if (this._columnPipeArgs1 == null)
{
var columnPipeArgs1 = new IgbColumnPipeArgs();
columnPipeArgs1.DigitsInfo = "1.2-2";
this._columnPipeArgs1 = columnPipeArgs1;
}
return this._columnPipeArgs1;
}
}
private IgbColumn column2;
private IgbColumnPipeArgs _columnPipeArgs2 = null;
public IgbColumnPipeArgs ColumnPipeArgs2
{
get
{
if (this._columnPipeArgs2 == null)
{
var columnPipeArgs2 = new IgbColumnPipeArgs();
columnPipeArgs2.Format = "MM/dd/YYYY";
this._columnPipeArgs2 = columnPipeArgs2;
}
return this._columnPipeArgs2;
}
}
private IgbColumn column3;
private NwindData _nwindData = null;
public NwindData NwindData
{
get
{
if (_nwindData == null)
{
_nwindData = new NwindData();
}
return _nwindData;
}
}
}razor
igRegisterScript("WebGridBooleanCellTemplate", (ctx) => {
var html = window.igTemplating.html;
if (ctx.cell.value) {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
} else {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
}
}, false);
igRegisterScript("WebGridSetGridSize", (sender, evtArgs) => {
var newVal = evtArgs.newValue.toLowerCase();
var grid = document.getElementById("grid");
grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Usage
To turn on the IgbGrid component's Excel-style filtering, two inputs should be set. The AllowFiltering should be set to true and the FilterMode should be set to ExcelStyleFilter value.
<IgbGrid AllowFiltering="true" FilterMode="FilterMode.ExcelStyleFilter" >
</IgbGrid>
razorInteractions
In order to open the filter menu for a particular column, the Blazor filter icon in the header should be clicked. Additionally, you can use the Ctrl + Shift + L combination on a selected header. If the column can be sorted, pinned, moved, selected or hidden along with the filtering functionality, there will be buttons available for the features that are turned on.
If no filter is applied, all the items in the list will be selected. They can be filtered from the input above the list. In order to filter the data, you can select/deselect the items in the list and either click the Apply button, or press Enter. The filtering applied through the list items creates filter expressions with equals operator and the logic operator between the expressions is OR.
If you type something in the search box and apply the filter, only the items that match the search criteria will be selected. If you want to add items to the currently filtered ones, however, you should select the option Add current selection to filter.
If you want to clear the filter, you can check the Select All option and then click the Apply button.
To apply a filter with different expressions, you can click the Text filter, which will open a sub menu with all available filter operators for the particular column. Selecting one of them will open the custom filter dialog, where you can add as many expressions as you want with different filter and logic operators. There is also a clear button, which can clear the filter.
Configure Menu Features
Sorting, pinning and hiding features can be removed from the filter menu using the corresponding inputs: Sortable, Selected, DisablePinning, DisableHiding.
<IgbGrid AutoGenerate="false" Data=northwindEmployees AllowFiltering="true" FilterMode="FilterMode.ExcelStyleFilter">
<IgbColumn Field="ProductName" Sortable="true"></IgbColumn>
<IgbColumn Field="UnitPrice" Sortable="true" DisablePinning="true" DisableHiding="true"></IgbColumn>
<IgbColumn Field="QuantityPerUnit" Sortable="false" DisablePinning="true" DisableHiding="true"></IgbColumn>
<IgbColumn Field="OrderDate" Sortable="true" DisablePinning="false" DisableHiding="true"></IgbColumn>
<IgbColumn Field="Discontinued" Sortable="true"></IgbColumn>
</IgbGrid>
razorIn the sample below Product Name and Discontinued columns have all four features enabled, Quantity Per Unit have all three disabled, Unit Price has only sorting and Order Date has only pinning and hiding and all are Selectable.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}csusing 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"
}}
});
}
}cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbGrid
AutoGenerate="false"
Name="grid"
@ref="grid"
Data="NwindData"
Moving="true"
AllowFiltering="true"
FilterMode="FilterMode.ExcelStyleFilter">
<IgbGridToolbar
>
<IgbGridToolbarActions
>
<IgbGridToolbarHiding
>
</IgbGridToolbarHiding>
</IgbGridToolbarActions>
</IgbGridToolbar>
<IgbColumn
Field="ProductName"
Header="Product Name"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="QuantityPerUnit"
Header="Quantity Per Unit"
Sortable="false"
DisablePinning="true"
DisableHiding="true">
</IgbColumn>
<IgbColumn
Field="UnitPrice"
Header="Unit Price"
DataType="GridColumnDataType.Currency"
Sortable="true"
DisablePinning="true"
DisableHiding="true"
PipeArgs="ColumnPipeArgs1"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date"
Sortable="false"
PipeArgs="ColumnPipeArgs2"
Name="column2"
@ref="column2">
</IgbColumn>
<IgbColumn
Field="Discontinued"
Header="Discontinued"
Sortable="true"
BodyTemplateScript="WebGridBooleanCellTemplate"
Name="column3"
@ref="column3">
</IgbColumn>
</IgbGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
var column1 = this.column1;
var column2 = this.column2;
var column3 = this.column3;
}
private IgbGrid grid;
private IgbColumn column1;
private IgbColumnPipeArgs _columnPipeArgs1 = null;
public IgbColumnPipeArgs ColumnPipeArgs1
{
get
{
if (this._columnPipeArgs1 == null)
{
var columnPipeArgs1 = new IgbColumnPipeArgs();
columnPipeArgs1.DigitsInfo = "1.2-2";
this._columnPipeArgs1 = columnPipeArgs1;
}
return this._columnPipeArgs1;
}
}
private IgbColumn column2;
private IgbColumnPipeArgs _columnPipeArgs2 = null;
public IgbColumnPipeArgs ColumnPipeArgs2
{
get
{
if (this._columnPipeArgs2 == null)
{
var columnPipeArgs2 = new IgbColumnPipeArgs();
columnPipeArgs2.Format = "MM/dd/YYYY";
this._columnPipeArgs2 = columnPipeArgs2;
}
return this._columnPipeArgs2;
}
}
private IgbColumn column3;
private NwindData _nwindData = null;
public NwindData NwindData
{
get
{
if (_nwindData == null)
{
_nwindData = new NwindData();
}
return _nwindData;
}
}
}razor
igRegisterScript("WebGridBooleanCellTemplate", (ctx) => {
var html = window.igTemplating.html;
if (ctx.cell.value) {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
} else {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
}
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Templates
If you want to further customize the Excel style filter menu, you can use the ExcelStyleHeaderIconTemplate property to define a custom template for the header icon of the menu.
The following code demonstrates how to customize the Excel style filter menu using the ExcelStyleHeaderIconTemplate:
<IgbGrid
Data="Data"
AllowFiltering="true"
FilterMode="FilterMode.ExcelStyleFilter"
ExcelStyleHeaderIconTemplateScript="WebGridFilterAltIconTemplate">
</IgbGrid>
*** In JavaScript ***
igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`<img height="15px" width="15px" src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" title="Continued" alt="Continued" />`
}, false);
razorusing 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(IgbPropertyEditorPanelModule),
typeof(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}csusing 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"
}}
});
}
}cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbGrid
AutoGenerate="false"
Name="grid"
@ref="grid"
Data="NwindData"
Moving="true"
AllowFiltering="true"
FilterMode="FilterMode.ExcelStyleFilter"
ExcelStyleHeaderIconTemplateScript="WebGridFilterAltIconTemplate">
<IgbGridToolbar
>
<IgbGridToolbarActions
>
<IgbGridToolbarHiding
>
</IgbGridToolbarHiding>
</IgbGridToolbarActions>
</IgbGridToolbar>
<IgbColumn
Field="ProductName"
Header="Product Name">
</IgbColumn>
<IgbColumn
Field="QuantityPerUnit"
Header="Quantity Per Unit">
</IgbColumn>
<IgbColumn
Field="UnitPrice"
Header="Unit Price"
DataType="GridColumnDataType.Currency"
PipeArgs="ColumnPipeArgs1"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date"
PipeArgs="ColumnPipeArgs2"
Name="column2"
@ref="column2">
</IgbColumn>
<IgbColumn
Field="Discontinued"
Header="Discontinued"
BodyTemplateScript="WebGridBooleanCellTemplate"
Name="column3"
@ref="column3">
</IgbColumn>
</IgbGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
var column1 = this.column1;
var column2 = this.column2;
var column3 = this.column3;
}
private IgbGrid grid;
private IgbColumn column1;
private IgbColumnPipeArgs _columnPipeArgs1 = null;
public IgbColumnPipeArgs ColumnPipeArgs1
{
get
{
if (this._columnPipeArgs1 == null)
{
var columnPipeArgs1 = new IgbColumnPipeArgs();
columnPipeArgs1.DigitsInfo = "1.2-2";
this._columnPipeArgs1 = columnPipeArgs1;
}
return this._columnPipeArgs1;
}
}
private IgbColumn column2;
private IgbColumnPipeArgs _columnPipeArgs2 = null;
public IgbColumnPipeArgs ColumnPipeArgs2
{
get
{
if (this._columnPipeArgs2 == null)
{
var columnPipeArgs2 = new IgbColumnPipeArgs();
columnPipeArgs2.Format = "MM/dd/YYYY";
this._columnPipeArgs2 = columnPipeArgs2;
}
return this._columnPipeArgs2;
}
}
private IgbColumn column3;
private NwindData _nwindData = null;
public NwindData NwindData
{
get
{
if (_nwindData == null)
{
_nwindData = new NwindData();
}
return _nwindData;
}
}
}razor
igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`<img height="15px" width="15px" src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" title="Continued" alt="Continued" />`
}, false);
igRegisterScript("WebGridBooleanCellTemplate", (ctx) => {
var html = window.igTemplating.html;
if (ctx.cell.value) {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
} else {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
}
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
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:
<IgbGrid class="grid"></IgbGrid>
razorThen set the related CSS properties to this class:
.grid {
--ig-grid-filtering-row-background: #ffcd0f;
--ig-list-item-background: #ffcd0f;
}
cssDemo
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}csusing 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"
}}
});
}
}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-grid-filtering-row-background: #ffcd0f;
--ig-button-background: #FFCD0F;
--ig-button-foreground: #292826;
--ig-button-hover-background: #292826;
--ig-button-hover-foreground: #ffcd0f;
--ig-list-background: #FFCD0F;
--ig-list-item-background: #FFCD0F;
--ig-list-item-background-hover: #c2b1b1bd;
--ig-checkbox-empty-color: #292826;
--ig-checkbox-fill-color: #292826;
--ig-checkbox-tick-color: #FFCD0F;
--ig-checkbox-label-color: #292826;
--ig-drop-down-background-color: #FFCD0F;
--ig-drop-down-item-text-color: #292826;
--ig-drop-down-item-background: #FFCD0F;
--ig-drop-down-item-text-color: #292826;
--ig-drop-down-focused-item-background: #c2b1b1bd;
}
</style>
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbGrid
AutoGenerate="false"
Id="grid"
Name="grid"
@ref="grid"
Data="NwindData"
Moving="true"
AllowFiltering="true"
FilterMode="FilterMode.ExcelStyleFilter">
<IgbColumn
Field="ProductName"
Header="Product Name"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="QuantityPerUnit"
Header="Quantity Per Unit"
Sortable="false"
DisablePinning="true"
DisableHiding="true">
</IgbColumn>
<IgbColumn
Field="UnitPrice"
Header="Unit Price"
DataType="GridColumnDataType.Currency"
Sortable="true"
DisablePinning="true"
DisableHiding="true"
PipeArgs="ColumnPipeArgs1"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date"
Sortable="false"
PipeArgs="ColumnPipeArgs2"
Name="column2"
@ref="column2">
</IgbColumn>
<IgbColumn
Field="Discontinued"
Header="Discontinued"
Sortable="true"
BodyTemplateScript="WebGridBooleanCellTemplate"
Name="column3"
@ref="column3">
</IgbColumn>
</IgbGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
var column1 = this.column1;
var column2 = this.column2;
var column3 = this.column3;
}
private IgbGrid grid;
private IgbColumn column1;
private IgbColumnPipeArgs _columnPipeArgs1 = null;
public IgbColumnPipeArgs ColumnPipeArgs1
{
get
{
if (this._columnPipeArgs1 == null)
{
var columnPipeArgs1 = new IgbColumnPipeArgs();
columnPipeArgs1.DigitsInfo = "1.2-2";
this._columnPipeArgs1 = columnPipeArgs1;
}
return this._columnPipeArgs1;
}
}
private IgbColumn column2;
private IgbColumnPipeArgs _columnPipeArgs2 = null;
public IgbColumnPipeArgs ColumnPipeArgs2
{
get
{
if (this._columnPipeArgs2 == null)
{
var columnPipeArgs2 = new IgbColumnPipeArgs();
columnPipeArgs2.Format = "MM/dd/YYYY";
this._columnPipeArgs2 = columnPipeArgs2;
}
return this._columnPipeArgs2;
}
}
private IgbColumn column3;
private NwindData _nwindData = null;
public NwindData NwindData
{
get
{
if (_nwindData == null)
{
_nwindData = new NwindData();
}
return _nwindData;
}
}
}razor
igRegisterScript("WebGridBooleanCellTemplate", (ctx) => {
var html = window.igTemplating.html;
if (ctx.cell.value) {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
} else {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
}
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#grid {
--ig-grid-filtering-row-background: #ffcd0f;
--ig-button-background: #FFCD0F;
--ig-button-foreground: #292826;
--ig-button-hover-background: #292826;
--ig-button-hover-foreground: #ffcd0f;
--ig-list-background: #FFCD0F;
--ig-list-item-background: #FFCD0F;
--ig-list-item-background-hover: #c2b1b1bd;
--ig-checkbox-empty-color: #292826;
--ig-checkbox-fill-color: #292826;
--ig-checkbox-tick-color: #FFCD0F;
--ig-checkbox-label-color: #292826;
--ig-drop-down-background-color: #FFCD0F;
--ig-drop-down-item-text-color: #292826;
--ig-drop-down-item-background: #FFCD0F;
--ig-drop-down-item-text-color: #292826;
--ig-drop-down-focused-item-background: #c2b1b1bd;
}
css
API References
Additional Resources
- Virtualization and Performance
- Paging
- Sorting
- Summaries
- Column Moving
- Column Pinning
- Column Resizing
- Selection
Our community is active and always welcoming to new ideas.