Blazor Tree Grid ソート
Blazor Tree Grid の Ignite UI for Blazor データ ソート機能は列ごとのレベルで有効になっています。つまり、IgbTreeGrid
にはソート可能な列とソート不可能な列を混在させることができます。Blazor でソートを実行すると、指定した条件に基づいてレコードの表示順序を変更できます。
Blazor Tree Grid ソート概要の例
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(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}
csusing System;
using System.Collections.Generic;
public class OrdersTreeDataItem
{
public double ID { get; set; }
public double ParentID { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public string OrderDate { get; set; }
public double Units { get; set; }
public double UnitPrice { get; set; }
public double Price { get; set; }
public bool Delivered { get; set; }
}
public class OrdersTreeData
: List<OrdersTreeDataItem>
{
public OrdersTreeData()
{
this.Add(new OrdersTreeDataItem()
{
ID = 1,
ParentID = -1,
Name = @"Order 1",
Category = @"",
OrderDate = @"2010-02-17",
Units = 1844,
UnitPrice = 3.73,
Price = 6884.38,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 101,
ParentID = 1,
Name = @"Chocolate Chip Cookies",
Category = @"Cookies",
OrderDate = @"2010-02-17",
Units = 834,
UnitPrice = 3.59,
Price = 2994.06,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 102,
ParentID = 1,
Name = @"Red Apples",
Category = @"Fruit",
OrderDate = @"2010-02-17",
Units = 371,
UnitPrice = 3.66,
Price = 1357.86,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 103,
ParentID = 1,
Name = @"Butter",
Category = @"Diary",
OrderDate = @"2010-02-17",
Units = 260,
UnitPrice = 3.45,
Price = 897,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 104,
ParentID = 1,
Name = @"Potato Chips",
Category = @"Snack",
OrderDate = @"2010-02-17",
Units = 118,
UnitPrice = 1.96,
Price = 231.28,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 105,
ParentID = 1,
Name = @"Orange Juice",
Category = @"Beverages",
OrderDate = @"2010-02-17",
Units = 261,
UnitPrice = 5.38,
Price = 1404.18,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 2,
ParentID = -1,
Name = @"Order 2",
Category = @"",
OrderDate = @"2022-05-27",
Units = 1831,
UnitPrice = 8.23,
Price = 15062.77,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 201,
ParentID = 2,
Name = @"Frozen Shrimps",
Category = @"Seafood",
OrderDate = @"2022-05-27",
Units = 120,
UnitPrice = 20.45,
Price = 2454,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 202,
ParentID = 2,
Name = @"Ice Tea",
Category = @"Beverages",
OrderDate = @"2022-05-27",
Units = 840,
UnitPrice = 7,
Price = 5880,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 203,
ParentID = 2,
Name = @"Fresh Cheese",
Category = @"Diary",
OrderDate = @"2022-05-27",
Units = 267,
UnitPrice = 16.55,
Price = 4418.85,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 204,
ParentID = 2,
Name = @"Carrots",
Category = @"Vegetables",
OrderDate = @"2022-05-27",
Units = 360,
UnitPrice = 2.77,
Price = 997.2,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 205,
ParentID = 2,
Name = @"Apple Juice",
Category = @"Beverages",
OrderDate = @"2022-05-27",
Units = 244,
UnitPrice = 5.38,
Price = 1312.72,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 3,
ParentID = -1,
Name = @"Order 3",
Category = @"",
OrderDate = @"2022-08-04",
Units = 1972,
UnitPrice = 3.47,
Price = 6849.18,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 301,
ParentID = 3,
Name = @"Skimmed Milk 1L",
Category = @"Diary",
OrderDate = @"2022-08-04",
Units = 1028,
UnitPrice = 3.56,
Price = 3659.68,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 302,
ParentID = 3,
Name = @"Bananas 5 Pack",
Category = @"Fruit",
OrderDate = @"2022-08-04",
Units = 370,
UnitPrice = 6.36,
Price = 2353.2,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 303,
ParentID = 3,
Name = @"Cauliflower",
Category = @"Vegetables",
OrderDate = @"2022-08-04",
Units = 283,
UnitPrice = 0.95,
Price = 268.85,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 304,
ParentID = 3,
Name = @"White Chocolate Cookies",
Category = @"Cookies",
OrderDate = @"2022-08-04",
Units = 291,
UnitPrice = 1.95,
Price = 567.45,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 4,
ParentID = -1,
Name = @"Order 4",
Category = @"",
OrderDate = @"2023-01-04",
Units = 1065,
UnitPrice = 5.56,
Price = 5923.5,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 401,
ParentID = 4,
Name = @"Mini Milk Chocolate Cookie Bites",
Category = @"Cookies",
OrderDate = @"2023-01-04",
Units = 68,
UnitPrice = 2.25,
Price = 153,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 402,
ParentID = 4,
Name = @"Wild Salmon Fillets",
Category = @"Seafood",
OrderDate = @"2023-01-04",
Units = 320,
UnitPrice = 16.15,
Price = 5168,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 403,
ParentID = 4,
Name = @"Diet Lemonade",
Category = @"Beverages",
OrderDate = @"2023-01-04",
Units = 437,
UnitPrice = 0.5,
Price = 218.5,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 404,
ParentID = 4,
Name = @"Potatoes",
Category = @"Vegetables",
OrderDate = @"2023-01-04",
Units = 240,
UnitPrice = 1.6,
Price = 384,
Delivered = true
});
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical ig-typography">
<div class="options vertical">
<IgbPropertyEditorPanel
Name="PropertyEditor"
@ref="propertyEditor"
DescriptionType="WebGrid"
IsHorizontal="true"
IsWrappingEnabled="true">
<IgbPropertyEditorPropertyDescription
PropertyPath="SortingOptions"
Name="SortingOptionsEditor"
@ref="sortingOptionsEditor">
</IgbPropertyEditorPropertyDescription>
<IgbPropertyEditorPropertyDescription
ValueType="PropertyEditorValueType.Button"
PrimitiveValue="@("Clear Sorting")"
ButtonClicked="WebGridClearSort"
Name="propertyEditorPropertyDescription1"
@ref="propertyEditorPropertyDescription1">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Data="OrdersTreeData"
Name="grid"
@ref="grid"
SortingExpressions="SortingExpression1"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbColumn
Field="ID"
Header="Order ID"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="Name"
Header="Name"
DataType="GridColumnDataType.String"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="Category"
Header="Category"
DataType="GridColumnDataType.String"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="Price"
DataType="GridColumnDataType.Currency"
Sortable="true"
PipeArgs="ColumnPipeArgs1"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="Units"
Header="Units"
DataType="GridColumnDataType.Number"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="Delivered"
Header="Units"
DataType="GridColumnDataType.Boolean"
Sortable="true">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var propertyEditor = this.propertyEditor;
var sortingOptionsEditor = this.sortingOptionsEditor;
var propertyEditorPropertyDescription1 = this.propertyEditorPropertyDescription1;
var grid = this.grid;
var column1 = this.column1;
this.BindElements = () => {
propertyEditor.Target = this.grid;
};
this.BindElements();
}
private IgbPropertyEditorPanel propertyEditor;
private IgbPropertyEditorPropertyDescription sortingOptionsEditor;
private IgbPropertyEditorPropertyDescription propertyEditorPropertyDescription1;
private IgbTreeGrid grid;
private IgbSortingExpression[] _sortingExpression1 = null;
public IgbSortingExpression[] SortingExpression1
{
get
{
if (this._sortingExpression1 == null)
{
var sortingExpression1 = new IgbSortingExpression[1];
var sortingExpression2 = new IgbSortingExpression();
sortingExpression2.FieldName = "Category";
sortingExpression2.Dir = SortingDirection.Asc;
sortingExpression2.IgnoreCase = true;
sortingExpression1[0] = sortingExpression2;
this._sortingExpression1 = sortingExpression1;
}
return this._sortingExpression1;
}
}
private IgbColumn column1;
private IgbColumnPipeArgs _columnPipeArgs1 = null;
public IgbColumnPipeArgs ColumnPipeArgs1
{
get
{
if (this._columnPipeArgs1 == null)
{
var columnPipeArgs1 = new IgbColumnPipeArgs();
columnPipeArgs1.CurrencyCode = "USD";
columnPipeArgs1.DigitsInfo = "1.2-2";
this._columnPipeArgs1 = columnPipeArgs1;
}
return this._columnPipeArgs1;
}
}
public void WebGridClearSort(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
{
this.grid.ClearSort("");
}
private OrdersTreeData _ordersTreeData = null;
public OrdersTreeData OrdersTreeData
{
get
{
if (_ordersTreeData == null)
{
_ordersTreeData = new OrdersTreeData();
}
return _ordersTreeData;
}
}
}
razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
以下のように Sortable
入力を使用します。IgbTreeGrid
のソートで、SortingIgnoreCase
プロパティを設定して大文字と小文字を区別するソートができます。
<IgbColumn Field="Title" Sortable="true"></IgbColumn>
razor
ソート インジケーター
ソートされた列数が一定数以上ある場合、ソート順の指定がないと混乱する可能性があります。
IgbTreeGrid
は、ソートされた各列のインデックスを示すことにより、この問題の解決策を提供します。
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(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}
csusing System;
using System.Collections.Generic;
public class OrdersTreeDataItem
{
public double ID { get; set; }
public double ParentID { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public string OrderDate { get; set; }
public double Units { get; set; }
public double UnitPrice { get; set; }
public double Price { get; set; }
public bool Delivered { get; set; }
}
public class OrdersTreeData
: List<OrdersTreeDataItem>
{
public OrdersTreeData()
{
this.Add(new OrdersTreeDataItem()
{
ID = 1,
ParentID = -1,
Name = @"Order 1",
Category = @"",
OrderDate = @"2010-02-17",
Units = 1844,
UnitPrice = 3.73,
Price = 6884.38,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 101,
ParentID = 1,
Name = @"Chocolate Chip Cookies",
Category = @"Cookies",
OrderDate = @"2010-02-17",
Units = 834,
UnitPrice = 3.59,
Price = 2994.06,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 102,
ParentID = 1,
Name = @"Red Apples",
Category = @"Fruit",
OrderDate = @"2010-02-17",
Units = 371,
UnitPrice = 3.66,
Price = 1357.86,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 103,
ParentID = 1,
Name = @"Butter",
Category = @"Diary",
OrderDate = @"2010-02-17",
Units = 260,
UnitPrice = 3.45,
Price = 897,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 104,
ParentID = 1,
Name = @"Potato Chips",
Category = @"Snack",
OrderDate = @"2010-02-17",
Units = 118,
UnitPrice = 1.96,
Price = 231.28,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 105,
ParentID = 1,
Name = @"Orange Juice",
Category = @"Beverages",
OrderDate = @"2010-02-17",
Units = 261,
UnitPrice = 5.38,
Price = 1404.18,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 2,
ParentID = -1,
Name = @"Order 2",
Category = @"",
OrderDate = @"2022-05-27",
Units = 1831,
UnitPrice = 8.23,
Price = 15062.77,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 201,
ParentID = 2,
Name = @"Frozen Shrimps",
Category = @"Seafood",
OrderDate = @"2022-05-27",
Units = 120,
UnitPrice = 20.45,
Price = 2454,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 202,
ParentID = 2,
Name = @"Ice Tea",
Category = @"Beverages",
OrderDate = @"2022-05-27",
Units = 840,
UnitPrice = 7,
Price = 5880,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 203,
ParentID = 2,
Name = @"Fresh Cheese",
Category = @"Diary",
OrderDate = @"2022-05-27",
Units = 267,
UnitPrice = 16.55,
Price = 4418.85,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 204,
ParentID = 2,
Name = @"Carrots",
Category = @"Vegetables",
OrderDate = @"2022-05-27",
Units = 360,
UnitPrice = 2.77,
Price = 997.2,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 205,
ParentID = 2,
Name = @"Apple Juice",
Category = @"Beverages",
OrderDate = @"2022-05-27",
Units = 244,
UnitPrice = 5.38,
Price = 1312.72,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 3,
ParentID = -1,
Name = @"Order 3",
Category = @"",
OrderDate = @"2022-08-04",
Units = 1972,
UnitPrice = 3.47,
Price = 6849.18,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 301,
ParentID = 3,
Name = @"Skimmed Milk 1L",
Category = @"Diary",
OrderDate = @"2022-08-04",
Units = 1028,
UnitPrice = 3.56,
Price = 3659.68,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 302,
ParentID = 3,
Name = @"Bananas 5 Pack",
Category = @"Fruit",
OrderDate = @"2022-08-04",
Units = 370,
UnitPrice = 6.36,
Price = 2353.2,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 303,
ParentID = 3,
Name = @"Cauliflower",
Category = @"Vegetables",
OrderDate = @"2022-08-04",
Units = 283,
UnitPrice = 0.95,
Price = 268.85,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 304,
ParentID = 3,
Name = @"White Chocolate Cookies",
Category = @"Cookies",
OrderDate = @"2022-08-04",
Units = 291,
UnitPrice = 1.95,
Price = 567.45,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 4,
ParentID = -1,
Name = @"Order 4",
Category = @"",
OrderDate = @"2023-01-04",
Units = 1065,
UnitPrice = 5.56,
Price = 5923.5,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 401,
ParentID = 4,
Name = @"Mini Milk Chocolate Cookie Bites",
Category = @"Cookies",
OrderDate = @"2023-01-04",
Units = 68,
UnitPrice = 2.25,
Price = 153,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 402,
ParentID = 4,
Name = @"Wild Salmon Fillets",
Category = @"Seafood",
OrderDate = @"2023-01-04",
Units = 320,
UnitPrice = 16.15,
Price = 5168,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 403,
ParentID = 4,
Name = @"Diet Lemonade",
Category = @"Beverages",
OrderDate = @"2023-01-04",
Units = 437,
UnitPrice = 0.5,
Price = 218.5,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 404,
ParentID = 4,
Name = @"Potatoes",
Category = @"Vegetables",
OrderDate = @"2023-01-04",
Units = 240,
UnitPrice = 1.6,
Price = 384,
Delivered = true
});
}
}
cs
@using IgniteUI.Blazor.Controls
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Data="OrdersTreeData"
Name="grid"
@ref="grid"
SortingExpressions="SortingExpression1"
Id="grid"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbColumn
Field="ID"
Header="Order ID"
Groupable="true"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="Name"
Header="Name"
DataType="GridColumnDataType.String"
Groupable="true"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="Category"
Header="Category"
DataType="GridColumnDataType.String"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="Price"
DataType="GridColumnDataType.Currency"
Sortable="true"
PipeArgs="ColumnPipeArgs1"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="Units"
Header="Units"
DataType="GridColumnDataType.Number"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="Delivered"
Header="Units"
DataType="GridColumnDataType.Boolean"
Sortable="true">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
var column1 = this.column1;
}
private IgbTreeGrid grid;
private IgbSortingExpression[] _sortingExpression1 = null;
public IgbSortingExpression[] SortingExpression1
{
get
{
if (this._sortingExpression1 == null)
{
var sortingExpression1 = new IgbSortingExpression[7];
var sortingExpression2 = new IgbSortingExpression();
sortingExpression2.Dir = SortingDirection.Asc;
sortingExpression2.FieldName = "ID";
sortingExpression2.IgnoreCase = true;
sortingExpression1[0] = sortingExpression2;
var sortingExpression3 = new IgbSortingExpression();
sortingExpression3.Dir = SortingDirection.Desc;
sortingExpression3.FieldName = "Name";
sortingExpression3.IgnoreCase = true;
sortingExpression1[1] = sortingExpression3;
var sortingExpression4 = new IgbSortingExpression();
sortingExpression4.Dir = SortingDirection.Asc;
sortingExpression4.FieldName = "Category";
sortingExpression4.IgnoreCase = true;
sortingExpression1[2] = sortingExpression4;
var sortingExpression5 = new IgbSortingExpression();
sortingExpression5.Dir = SortingDirection.Asc;
sortingExpression5.FieldName = "OrderDate";
sortingExpression5.IgnoreCase = true;
sortingExpression1[3] = sortingExpression5;
var sortingExpression6 = new IgbSortingExpression();
sortingExpression6.Dir = SortingDirection.Asc;
sortingExpression6.FieldName = "Price";
sortingExpression6.IgnoreCase = true;
sortingExpression1[4] = sortingExpression6;
var sortingExpression7 = new IgbSortingExpression();
sortingExpression7.Dir = SortingDirection.Asc;
sortingExpression7.FieldName = "Units";
sortingExpression7.IgnoreCase = true;
sortingExpression1[5] = sortingExpression7;
var sortingExpression8 = new IgbSortingExpression();
sortingExpression8.Dir = SortingDirection.Asc;
sortingExpression8.FieldName = "Delivered";
sortingExpression8.IgnoreCase = true;
sortingExpression1[6] = sortingExpression8;
this._sortingExpression1 = sortingExpression1;
}
return this._sortingExpression1;
}
}
private IgbColumn column1;
private IgbColumnPipeArgs _columnPipeArgs1 = null;
public IgbColumnPipeArgs ColumnPipeArgs1
{
get
{
if (this._columnPipeArgs1 == null)
{
var columnPipeArgs1 = new IgbColumnPipeArgs();
columnPipeArgs1.CurrencyCode = "USD";
columnPipeArgs1.DigitsInfo = "1.2-2";
this._columnPipeArgs1 = columnPipeArgs1;
}
return this._columnPipeArgs1;
}
}
private OrdersTreeData _ordersTreeData = null;
public OrdersTreeData OrdersTreeData
{
get
{
if (_ordersTreeData == null)
{
_ordersTreeData = new OrdersTreeData();
}
return _ordersTreeData;
}
}
}
razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
API でのソート
IgbTreeGrid
Sort
メソッドを使用し、列または複数の列を IgbTreeGrid
API でソートできます。
@code {
this.grtreeGridid.SortAsync(new IgbSortingExpression[]
{
new IgbSortingExpression
{
FieldName = "Category",
Dir = SortingDirection.Asc
},
new IgbSortingExpression
{
FieldName = "Price",
Dir = SortingDirection.Desc
}
});
}
razor
Sorting は、DefaultSortingStrategy アルゴリズムを使用して実行されます。IgbColumn または ISortingExpression は、代替アルゴリズムとして ISortingStrategy のカスタム実装を使用できます。たとえば複雑なテンプレート列や画像列にユーザー定義のソートを定義する必要がある場合に便利です。
フィルター動作と同様に、ソート状態をクリアするには ClearSort
メソッドを使用します。
@code {
@*Removes the sorting state from the Category column*@
this.treeGrid.ClearSortAsync("Category");
@*Removes the sorting state from every column in the Grid*@
this.treeGrid.ClearSortAsync("");
}
razor
IgbTreeGrid の SortStrategy は IgbColumn の SortStrategy と比較して異なるタイプです。異なるスコープで機能し、異なるパラメーターを公開するためです。
ソート操作で IgbTreeGrid の基になるデータ ソースは変更しません。
初期のソート状態
IgbTreeGrid
でソート状態を初期設定するには、ソート式の配列を IgbTreeGrid
の SortingExpressions
プロパティに渡します。
@code {
protected override void OnAfterRender(bool first)
{
if (first)
{
this.treeGrid.SortingExpressions = new IgbSortingExpression[]{
new IgbSortingExpression()
{
FieldName = "Category",
Dir = SortingDirection.Asc
}};
}
}
}
razor
string 型の値が DataType Date の列で使用される場合、IgbTreeGrid が値を Date オブジェクトに解析しないため IgbTreeGrid Sorting が正しく動作しません。string オブジェクトを使用する場合、値を Date オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。
ソート インジケーター テンプレート
列ヘッダーのソート インジケーター アイコンは、テンプレートを使用してカスタマイズできます。次のプロパティは、任意のソート状態 (昇順、降順、なし) のソート インジケーターをテンプレート化するために使用できます。
SortHeaderIconTemplate
– ソートが適用されない場合にソート アイコンを再テンプレート化します。
<IgbTreeGrid SortHeaderIconTemplate="SortDefaultTemplate"></IgbTreeGrid>
@code {
public RenderFragment<IgbGridHeaderTemplateContext> SortDefaultTemplate = (ctx) =>
{
return @<IgbIcon Size="SizableComponentSize.Small" IconName="unfold_more" Collection="material"></IgbIcon>;
};
}
razor
SortAscendingHeaderIconTemplate
– 列が昇順にソートされたときにソート アイコンを再テンプレート化します。
<IgbTreeGrid SortAscendingHeaderIconTemplate="SortAscendingTemplate"></IgbTreeGrid>
@code {
public RenderFragment<IgbGridHeaderTemplateContext> SortAscendingTemplate = (ctx) =>
{
return @<IgbIcon Size="SizableComponentSize.Small" IconName="expand_less" Collection="material"></IgbIcon>;
};
}
razor
SortDescendingHeaderIconTemplate
– 列が降順にソートされたときにソート アイコンを再テンプレート化します。
<IgbTreeGrid SortDescendingHeaderIconTemplate="SortDescendingTemplate"></IgbTreeGrid>
@code {
public RenderFragment<IgbGridHeaderTemplateContext> SortDescendingTemplate = (ctx) =>
{
return @<IgbIcon Size="SizableComponentSize.Small" IconName="expand_more" Collection="material"></IgbIcon>;
};
}
razor
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
<IgbTreeGrid class="grid">
</IgbTreeGrid>
razor
次に、そのクラスに関連する CSS プロパティを設定します。
.grid {
--ig-grid-sorted-header-icon-color: #ffb06a;
--ig-grid-sortable-header-icon-hover-color: black;
}
css
デモ
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(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}
csusing System;
using System.Collections.Generic;
public class OrdersTreeDataItem
{
public double ID { get; set; }
public double ParentID { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public string OrderDate { get; set; }
public double Units { get; set; }
public double UnitPrice { get; set; }
public double Price { get; set; }
public bool Delivered { get; set; }
}
public class OrdersTreeData
: List<OrdersTreeDataItem>
{
public OrdersTreeData()
{
this.Add(new OrdersTreeDataItem()
{
ID = 1,
ParentID = -1,
Name = @"Order 1",
Category = @"",
OrderDate = @"2010-02-17",
Units = 1844,
UnitPrice = 3.73,
Price = 6884.38,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 101,
ParentID = 1,
Name = @"Chocolate Chip Cookies",
Category = @"Cookies",
OrderDate = @"2010-02-17",
Units = 834,
UnitPrice = 3.59,
Price = 2994.06,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 102,
ParentID = 1,
Name = @"Red Apples",
Category = @"Fruit",
OrderDate = @"2010-02-17",
Units = 371,
UnitPrice = 3.66,
Price = 1357.86,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 103,
ParentID = 1,
Name = @"Butter",
Category = @"Diary",
OrderDate = @"2010-02-17",
Units = 260,
UnitPrice = 3.45,
Price = 897,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 104,
ParentID = 1,
Name = @"Potato Chips",
Category = @"Snack",
OrderDate = @"2010-02-17",
Units = 118,
UnitPrice = 1.96,
Price = 231.28,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 105,
ParentID = 1,
Name = @"Orange Juice",
Category = @"Beverages",
OrderDate = @"2010-02-17",
Units = 261,
UnitPrice = 5.38,
Price = 1404.18,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 2,
ParentID = -1,
Name = @"Order 2",
Category = @"",
OrderDate = @"2022-05-27",
Units = 1831,
UnitPrice = 8.23,
Price = 15062.77,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 201,
ParentID = 2,
Name = @"Frozen Shrimps",
Category = @"Seafood",
OrderDate = @"2022-05-27",
Units = 120,
UnitPrice = 20.45,
Price = 2454,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 202,
ParentID = 2,
Name = @"Ice Tea",
Category = @"Beverages",
OrderDate = @"2022-05-27",
Units = 840,
UnitPrice = 7,
Price = 5880,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 203,
ParentID = 2,
Name = @"Fresh Cheese",
Category = @"Diary",
OrderDate = @"2022-05-27",
Units = 267,
UnitPrice = 16.55,
Price = 4418.85,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 204,
ParentID = 2,
Name = @"Carrots",
Category = @"Vegetables",
OrderDate = @"2022-05-27",
Units = 360,
UnitPrice = 2.77,
Price = 997.2,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 205,
ParentID = 2,
Name = @"Apple Juice",
Category = @"Beverages",
OrderDate = @"2022-05-27",
Units = 244,
UnitPrice = 5.38,
Price = 1312.72,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 3,
ParentID = -1,
Name = @"Order 3",
Category = @"",
OrderDate = @"2022-08-04",
Units = 1972,
UnitPrice = 3.47,
Price = 6849.18,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 301,
ParentID = 3,
Name = @"Skimmed Milk 1L",
Category = @"Diary",
OrderDate = @"2022-08-04",
Units = 1028,
UnitPrice = 3.56,
Price = 3659.68,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 302,
ParentID = 3,
Name = @"Bananas 5 Pack",
Category = @"Fruit",
OrderDate = @"2022-08-04",
Units = 370,
UnitPrice = 6.36,
Price = 2353.2,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 303,
ParentID = 3,
Name = @"Cauliflower",
Category = @"Vegetables",
OrderDate = @"2022-08-04",
Units = 283,
UnitPrice = 0.95,
Price = 268.85,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 304,
ParentID = 3,
Name = @"White Chocolate Cookies",
Category = @"Cookies",
OrderDate = @"2022-08-04",
Units = 291,
UnitPrice = 1.95,
Price = 567.45,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 4,
ParentID = -1,
Name = @"Order 4",
Category = @"",
OrderDate = @"2023-01-04",
Units = 1065,
UnitPrice = 5.56,
Price = 5923.5,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 401,
ParentID = 4,
Name = @"Mini Milk Chocolate Cookie Bites",
Category = @"Cookies",
OrderDate = @"2023-01-04",
Units = 68,
UnitPrice = 2.25,
Price = 153,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 402,
ParentID = 4,
Name = @"Wild Salmon Fillets",
Category = @"Seafood",
OrderDate = @"2023-01-04",
Units = 320,
UnitPrice = 16.15,
Price = 5168,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 403,
ParentID = 4,
Name = @"Diet Lemonade",
Category = @"Beverages",
OrderDate = @"2023-01-04",
Units = 437,
UnitPrice = 0.5,
Price = 218.5,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 404,
ParentID = 4,
Name = @"Potatoes",
Category = @"Vegetables",
OrderDate = @"2023-01-04",
Units = 240,
UnitPrice = 1.6,
Price = 384,
Delivered = true
});
}
}
cs
@using IgniteUI.Blazor.Controls
<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#grid {
--ig-grid-sorted-header-icon-color: #ffb06a;
--ig-grid-sortable-header-icon-hover-color: black;
}
</style>
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Id="grid"
Name="grid"
@ref="grid"
Data="OrdersTreeData"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbColumn
Field="ID"
Header="Order ID"
Groupable="true"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="Name"
Header="Name"
DataType="GridColumnDataType.String"
Groupable="true"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="Category"
Header="Category"
DataType="GridColumnDataType.String"
Groupable="true"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date"
Groupable="true"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="Price"
DataType="GridColumnDataType.Currency"
Groupable="true"
Sortable="true"
PipeArgs="ColumnPipeArgs1"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="Units"
Header="Units"
DataType="GridColumnDataType.Number"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="Delivered"
Header="Units"
DataType="GridColumnDataType.Boolean"
Sortable="true">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
var column1 = this.column1;
}
private IgbTreeGrid grid;
private IgbColumn column1;
private IgbColumnPipeArgs _columnPipeArgs1 = null;
public IgbColumnPipeArgs ColumnPipeArgs1
{
get
{
if (this._columnPipeArgs1 == null)
{
var columnPipeArgs1 = new IgbColumnPipeArgs();
columnPipeArgs1.CurrencyCode = "USD";
columnPipeArgs1.DigitsInfo = "1.2-2";
this._columnPipeArgs1 = columnPipeArgs1;
}
return this._columnPipeArgs1;
}
}
private OrdersTreeData _ordersTreeData = null;
public OrdersTreeData OrdersTreeData
{
get
{
if (_ordersTreeData == null)
{
_ordersTreeData = new OrdersTreeData();
}
return _ordersTreeData;
}
}
}
razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#grid {
--ig-grid-sorted-header-icon-color: #ffb06a;
--ig-grid-sortable-header-icon-hover-color: black;
}
css
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。