Blazor Tree Grid 列タイプの概要

Blazor Tree Grid は、デフォルトおよび編集テンプレートの外観に基づいて、number (数値)、string (文字列)、date (日付)、boolean (ブール値)、currency (通貨) および percent (パーセント) 列のデータ型のデフォルト処理を提供します。

すぐに使用できる機能のフルセット は、ページング、ソート、フィルタリング、編集、グループ化から行と列の仮想化まで、あらゆる機能をカバーします。.NET 開発者には制限はありません。

無料で試してみる

Blazor Tree Grid 列タイプの例

EXAMPLE

MODULES

DATA

RAZOR

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(IgbTreeGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

//begin data
using System;
using System.Collections.Generic;

public class WorkersData : List<Worker>
{
    public WorkersData()
    {
        List<Worker> data = new List<Worker>()
        {
            new Worker()
            {
                Age = 55,
                HireDate= DateTime.Parse("2008-03-20"),
                HireTime = DateTime.Parse("2008-03-20") + new TimeSpan(12,0,0),
                HireFullDate= DateTime.Parse("2008-03-20") + new TimeSpan(12,0,0),
                ID = 1,
                Name = "Johnathan Winchester",
                OnPTO = false,
                ParentID = -1,
                Avatar = "https://static.infragistics.com/xplatform/images/people/men/5.jpg",
                Salary = 15,
                CompletedTasks = 0.15,
                Title = "Development Manager"
            },
            new Worker()
            {
                Age = 42,
                HireDate = DateTime.Parse("2014-01-22"),
                HireTime = DateTime.Parse("2014-01-22") + new TimeSpan(12,0,0),
                HireFullDate = DateTime.Parse("2014-01-22") + new TimeSpan(12,0,0),
                ID = 4,
                Name = "Ana Sanders",
                OnPTO = true,
                ParentID = -1,
                Avatar = "https://static.infragistics.com/xplatform/images/people/women/4.jpg",
                Salary = 39,
                CompletedTasks = 0.39,
                Title = "CEO"
            },
            new Worker()
            {
                Age = 49,
                HireDate = DateTime.Parse("2014-01-22"),
                HireTime = DateTime.Parse("2014-01-22") + new TimeSpan(14,0,0),
                HireFullDate = DateTime.Parse("2014-01-22") + new TimeSpan(14,0,0),
                ID = 18,
                Name = "Victoria Lincoln",
                OnPTO = true,
                ParentID = -1,
                Avatar = "https://static.infragistics.com/xplatform/images/people/women/2.jpg",
                Salary = 52,
                CompletedTasks = 0.52,
                Title = "Accounting Manager"
            },
            new Worker()
            {
                Age = 61,
                HireDate = DateTime.Parse("2010-01-01"),
                HireTime = DateTime.Parse("2010-01-01") + new TimeSpan(14,0,0),
                HireFullDate = DateTime.Parse("2010-01-01") + new TimeSpan(14,0,0),
                ID = 10,
                Name = "Yang Wang",
                OnPTO = false,
                ParentID = -1,
                Avatar = "https://static.infragistics.com/xplatform/images/people/men/4.jpg",
                Salary = 13,
                CompletedTasks = 0.13,
                Title = "Localization Manager"
            },
            new Worker()
            {
                Age = 43,
                HireDate = DateTime.Parse("2011-06-03"),
                HireTime = DateTime.Parse("2011-06-03") + new TimeSpan(14,0,0),
                HireFullDate = DateTime.Parse("2011-06-03") + new TimeSpan(14,0,0),
                ID = 3,
                Name = "Michael Burke",
                OnPTO = true,
                ParentID = 1,
                Avatar = "https://static.infragistics.com/xplatform/images/people/men/1.jpg",
                Salary = 22,
                CompletedTasks = 0.22,
                Title = "Senior Software Developer"
            },
            new Worker()
            {
                Age = 29,
                HireDate = DateTime.Parse("2009-06-19"),
                HireTime = DateTime.Parse("2009-06-19") + new TimeSpan(14,0,0),
                HireFullDate = DateTime.Parse("2009-06-19") + new TimeSpan(14,0,0),
                ID = 2,
                Name = "Thomas Anderson",
                OnPTO = false,
                ParentID = 1,
                Avatar = "https://static.infragistics.com/xplatform/images/people/men/2.jpg",
                Salary = 30,
                CompletedTasks = 0.3,
                Title = "Senior Software Developer"
            },
            new Worker()
            {
                Age = 31,
                HireDate = DateTime.Parse("2014-08-18"),
                HireTime = DateTime.Parse("2014-08-18") + new TimeSpan(14,0,0),
                HireFullDate = DateTime.Parse("2014-08-18") + new TimeSpan(14,0,0),
                ID = 11,
                Name = "Monica Reyes",
                OnPTO = false,
                ParentID = 1,
                Avatar = "https://static.infragistics.com/xplatform/images/people/women/3.jpg",
                Salary = 45,
                CompletedTasks = 0.45,
                Title = "Software Development Team Lead"
            },
            new Worker()
            {
                Age = 35,
                HireDate = DateTime.Parse("2015-09-17"),
                HireTime = DateTime.Parse("2015-09-17") + new TimeSpan(14,0,0),
                HireFullDate = DateTime.Parse("2015-09-17") + new TimeSpan(14,0,0),
                ID = 6,
                Name = "Roland Mendel",
                OnPTO = false,
                ParentID = 11,
                Avatar = "https://static.infragistics.com/xplatform/images/people/men/3.jpg",
                Salary = 35,
                CompletedTasks = 0.35,
                Title = "Senior Software Developer"
            },
            new Worker()
            {
                Age = 44,
                HireDate = DateTime.Parse("2009-10-11"),
                HireTime = DateTime.Parse("2009-10-11") + new TimeSpan(14,0,0),
                HireFullDate = DateTime.Parse("2009-10-11") + new TimeSpan(14,0,0),
                ID = 12,
                Name = "Sven Cooper",
                OnPTO = true,
                ParentID = 11,
                Avatar = "https://static.infragistics.com/xplatform/images/people/men/6.jpg",
                Salary = 29,
                CompletedTasks = 0.29,
                Title = "Senior Software Developer"
            },
            new Worker()
            {
                Age = 44,
                HireDate = DateTime.Parse("2014-04-04"),
                HireTime = DateTime.Parse("2014-04-04") + new TimeSpan(14,0,0),
                HireFullDate = DateTime.Parse("2014-04-04") + new TimeSpan(14,0,0),
                ID = 14,
                Name = "Laurence Johnson",
                OnPTO = false,
                ParentID = 4,
                Avatar = "https://static.infragistics.com/xplatform/images/people/men/7.jpg",
                Salary = 63,
                CompletedTasks = 0.63,
                Title = "Director"
            },
            new Worker()
            {
                Age = 25,
                HireDate = DateTime.Parse("2017-11-09"),
                HireTime = DateTime.Parse("2017-11-09") + new TimeSpan(14,0,0),
                HireFullDate = DateTime.Parse("2017-11-09") + new TimeSpan(14,0,0),
                ID = 5,
                Name = "Elizabeth Richards",
                OnPTO = true,
                ParentID = 4,
                Avatar = "https://static.infragistics.com/xplatform/images/people/women/1.jpg",
                Salary = 67,
                CompletedTasks = 0.67,
                Title = "Vice President"
            },
            new Worker()
            {
                Age = 39,
                HireDate = DateTime.Parse("2010-03-22"),
                HireTime = DateTime.Parse("2010-03-22") + new TimeSpan(14,0,0),
                HireFullDate = DateTime.Parse("2010-03-22") + new TimeSpan(14,0,0),
                ID = 13,
                Name = "Trevor Ashworth",
                OnPTO = true,
                ParentID = 5,
                Avatar = "https://static.infragistics.com/xplatform/images/people/men/8.jpg",
                Salary = 70,
                CompletedTasks = 0.7,
                Title = "Director"
            },
            new Worker()
            {
                Age = 44,
                HireDate = DateTime.Parse("2014-04-04"),
                HireTime = DateTime.Parse("2014-04-04") + new TimeSpan(14,0,0),
                HireFullDate = DateTime.Parse("2014-04-04") + new TimeSpan(14,0,0),
                ID = 17,
                Name = "Antonio Moreno",
                OnPTO = false,
                ParentID = 18,
                Avatar = "https://static.infragistics.com/xplatform/images/people/men/9.jpg",
                Salary = 52,
                CompletedTasks = 0.52,
                Title = "Senior Accountant"
            },
            new Worker()
            {
                Age = 50,
                HireDate = DateTime.Parse("2007-11-18"),
                HireTime = DateTime.Parse("2007-11-18") + new TimeSpan(14,0,0),
                HireFullDate = DateTime.Parse("2007-11-18") + new TimeSpan(14,0,0),
                ID = 7,
                Name = "Pedro Rodriguez",
                OnPTO = false,
                ParentID = 10,
                Avatar = "https://static.infragistics.com/xplatform/images/people/men/10.jpg",
                Salary = 43,
                CompletedTasks = 0.43,
                Title = "Senior Localization Developer"
            },
            new Worker()
            {
                Age = 27,
                HireDate = DateTime.Parse("2016-02-19"),
                HireTime = DateTime.Parse("2016-02-19") + new TimeSpan(14,0,0),
                HireFullDate = DateTime.Parse("2016-02-19") + new TimeSpan(14,0,0),
                ID = 8,
                Name = "Casey Harper",
                OnPTO = true,
                ParentID = 10,
                Avatar = "https://static.infragistics.com/xplatform/images/people/women/5.jpg",
                Salary = 35,
                CompletedTasks = 0.35,
                Title = "Senior Localization"
            },
            new Worker()
            {
                Age = 25,
                HireDate = DateTime.Parse("2017-11-09"),
                HireTime = DateTime.Parse("2017-11-09") + new TimeSpan(14,0,0),
                HireFullDate = DateTime.Parse("2017-11-09") + new TimeSpan(14,0,0),
                ID = 15,
                Name = "Patricia Simpson",
                OnPTO = false,
                ParentID = 7,
                Avatar = "https://static.infragistics.com/xplatform/images/people/women/6.jpg",
                Salary = 15,
                CompletedTasks = 0.15,
                Title = "Localization Intern"
            },
            new Worker()
            {
                Age = 39,
                HireDate = DateTime.Parse("2010-03-22"),
                HireTime = DateTime.Parse("2010-03-22") + new TimeSpan(14,0,0),
                HireFullDate = DateTime.Parse("2010-03-22") + new TimeSpan(14,0,0),
                ID = 9,
                Name = "Francisco Chang",
                OnPTO = false,
                ParentID = 7,
                Avatar = "https://static.infragistics.com/xplatform/images/people/men/26.jpg",
                Salary = 15,
                CompletedTasks = 0.15,
                Title = "Localization Intern"
            },
            new Worker()
            {
               Age = 25,
                HireDate = DateTime.Parse("2018-03-18"),
                HireTime = DateTime.Parse("2018-03-18") + new TimeSpan(14,0,0),
                HireFullDate = DateTime.Parse("2018-03-18") + new TimeSpan(14,0,0),
                ID = 16,
                Name = "Peter Lewis",
                OnPTO = true,
                ParentID = 7,
                Avatar = "https://static.infragistics.com/xplatform/images/people/men/27.jpg",
                Salary = 15,
                CompletedTasks = 0.15,
                Title = "Localization Intern"
            }
        };

        this.AddRange(data);
    }
}

public class Worker
{
    public int ID { get; set; }
    public int ParentID { get; set; }
    public string Name { get; set; }
    public string Title { get; set; }
    public string Avatar { get; set; }
    public int Age { get; set; }
    public int Salary { get; set; }
    public double CompletedTasks { get; set; }
    public bool OnPTO { get; set; }
    public DateTime HireDate { get; set; }
    public DateTime HireTime { get; set; }
    public DateTime HireFullDate { get; set; }
}

//end datacsコピー

@using IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/

img {
    width: 50px;
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">

        <IgbTreeGrid
            AutoGenerate="false"
            Data="WorkersDataSource"
            PrimaryKey="ID"
            ForeignKey="ParentID"
            AllowFiltering="true"
            FilterMode="FilterMode.ExcelStyleFilter"
            Locale="EN"
            SummaryCalculationMode="GridSummaryCalculationMode.RootLevelOnly"
        >
            <IgbColumn
                Field="Name"
                Header="Full Name"
                DataType="GridColumnDataType.String"
                Width="220px"
                Sortable="true"
                HasSummary="true"
                Editable="true"
                Resizable="true"
            ></IgbColumn>
            <IgbColumn
                Field="Avatar"
                Header="Photo"
                DataType="GridColumnDataType.Image"
                Width="120px"
                Resizable="true"
            ></IgbColumn>
            <IgbColumn
                Field="Title"
                Header="Title"
                DataType="GridColumnDataType.String"
                Width="250px"
                Sortable="true"
                HasSummary="true"
                Editable="true"
                Resizable="true"
            ></IgbColumn>
            <IgbColumn
                Field="Age"
                Header="Age"
                DataType="GridColumnDataType.Number"
                Width="120px"
                Sortable="true"
                HasSummary="true"
                Editable="true"
                Resizable="true"
            ></IgbColumn>
            <IgbColumn
                Field="HireFullDate"
                Header="Hire Full Date"
                DataType="GridColumnDataType.DateTime"
                Width="300px"
                Sortable="true"
                HasSummary="true"
                Editable="true"
                Resizable="true"
                PipeArgs="ColumnPipeArgs1"
            ></IgbColumn>
            <IgbColumn
                Field="HireDate"
                Header="Hire Date"
                DataType="GridColumnDataType.Date"
                Width="160px"
                Sortable="true"
                HasSummary="true"
                Editable="true"
                Resizable="true"
                PipeArgs="ColumnPipeArgs2"
            ></IgbColumn>
            <IgbColumn
                Field="HireTime"
                Header="Hire Time"
                DataType="GridColumnDataType.Time"
                Width="160px"
                Sortable="true"
                HasSummary="true"
                Editable="true"
                Resizable="true"
                PipeArgs="ColumnPipeArgs3"
            ></IgbColumn>
            <IgbColumn
                Field="Salary"
                Header="Salary"
                DataType="GridColumnDataType.Currency"
                Width="120px"
                Sortable="true"
                HasSummary="true"
                Editable="true"
                Resizable="true"
                PipeArgs="ColumnPipeArgs4"
            ></IgbColumn>
            <IgbColumn
                Field="CompletedTasks"
                Header="Completed Tasks"
                DataType="GridColumnDataType.Percent"
                Width="200px"
                Sortable="true"
                Editable="true"
                Resizable="true"
                PipeArgs="ColumnPipeArgs5"
            ></IgbColumn>
            <IgbColumn
                Field="OnPTO"
                Header="On PTO"
                DataType="GridColumnDataType.Boolean"
                Width="120px"
                Sortable="true"
                Editable="true"
                Resizable="true"
            ></IgbColumn>
        </IgbTreeGrid>

    </div>
</div>

@code {
    

    public IgbColumnPipeArgs ColumnPipeArgs1 = new IgbColumnPipeArgs()
    {
        Format = "long",
        Timezone = "UTC+0"
    };

    public IgbColumnPipeArgs ColumnPipeArgs2 = new IgbColumnPipeArgs()
    {
        Format = "mediumDate"
    };

    public IgbColumnPipeArgs ColumnPipeArgs3 = new IgbColumnPipeArgs()
    {
        Format = "shortTime",
        Timezone = "UTC+0"
    };

    public IgbColumnPipeArgs ColumnPipeArgs4 = new IgbColumnPipeArgs()
    {
        CurrencyCode = "",
        DigitsInfo = "1.3-3"
    };

    public IgbColumnPipeArgs ColumnPipeArgs5 = new IgbColumnPipeArgs()
    {
        DigitsInfo = "2.2-3"
    };

    private WorkersData _WorkersData = null;
    public WorkersData WorkersDataSource
    {
        get
        {
            if (_WorkersData == null)
            {
                _WorkersData = new WorkersData();
            }
            return _WorkersData;
        }
    }

}razorコピー

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/

img {
    width: 50px;
}
cssコピー

このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

Blazor Tree Grid デフォルト テンプレート

データ型固有のテンプレートを有効にする場合、列の DataType 入力を設定する必要があります。設定しない場合、列は文字列の列として処理されます (これは列 DataType のデフォルト値であるためです)。

次に、各 DataType のデフォルト テンプレートについて説明します。

String (文字列)

この列 DataType はセル値の外観または書式を変更しません。

Number (数値)

DataType が number に設定されている場合、セル値はアプリケーションまたはグリッドの Locale 設定に基づいて書式設定され、PipeArgs プロパティが指定されている場合にも同じように設定されます。数値書式はそれらに基づいて変更されます。たとえば、以下を変更します:

• 小数点後の桁数。
• , または . の少数桁の区切り文字

<IgbColumn Field="Sales" DataType="GridColumnDataType.Number" PipeArgs=formatOptions></IgbColumn>

@code {
    private IgbColumnPipeArgs formatOptions = new IgbColumnPipeArgs() { DigitsInfo = "1.4-4" };
}
razor

DateTime、Date and Time (日付と時刻)

日付部分の外観は、Locale の形式または PipeArgs 入力に基づいて設定されます (例: 日、月、年)。Pipe 引数はカスタム日付書式またはタイムゾーンを指定するために使用できます。

• format - 日付の書式設定のデフォルト値は 'mediumDate' です。その他の利用可能なオプション 'short'、'long'、'shortDate'、'fullDate'、'longTime'、'fullTime' などです。
• timezone - ユーザーのローカル システム タイムゾーンがデフォルト値です。タイムゾーン オフセットまたは標準の UTC/GMT または米国本土のタイムゾーンの略語も渡すことができます。世界の任意の場所の対応する時間を表示するさまざまなタイムゾーンの例:

<IgbColumn Field="Date" DataType="GridColumnDataType.Date" PipeArgs=formatDateOptions></IgbColumn>

@code {
    private IgbColumnPipeArgs formatDateOptions = new IgbColumnPipeArgs()
    {
        /** The date/time components that a date column will display, using predefined options or a custom format string. */
        /** e.g 'dd/mm/yyyy' or 'shortDate' **/
        Format = "longDate",
        /** A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. */
        Timezone = "GMT"
    };
}
razor

利用可能なタイムゾーン:

タイムゾーン	値
Alpha Time Zone	‘UTC+1’
Australian Central Time	‘UTC+9:30/ +10:30’
Arabia Standard Time	‘UTC+3’
Central Standard Time	‘UTC-6’
China Standard Time	‘UTC+8’
Delta Time Zone	‘UTC+4’
Greenwich Mean Time	‘UTC+0’
Gulf Standard Time	‘UTC+4’
Hawaii Standard Time	‘UTC-10’
India Standard Time	‘UTC+4’

IgbTreeGrid は、Date オブジェクト、数値 (ミリ秒) または ISO 日付/時刻文字列の日付値を受け取ります。このセクションは、カスタム表示書式を構成する方法を示します。

サンプルでは、特定の列タイプで使用可能な書式を紹介するために、さまざまな書式設定オプションを指定しています。たとえば、以下は日付オブジェクトの time 部分の書式設定オプションのサンプルです。

// Time format with equivalent example
@code {
    public Dictionary<string, string> timeFormats = new() {
        { "shortTime", "h:mm a" },
        { "mediumTime", "h:mm:ss a" },
        { "longTime", "h:mm:ss a z" },
        { "fullTime", "h:mm:ss a zzzz" },
    };
}
razor

セルの編集

列タイプに基づくセル編集に関しては、別のエディターが表示されます。

• DateTime - DateTimeEditor が使用されます。このエディターは、DateTime オブジェクトの入力要素部分のマスクを提供します。
• Date - IgbDatePicker が使用されます。
• Time - TimePicker が使用されます。

フィルタリング

クイック フィルタリング/Excel スタイル フィルタリングに関しては、上記と同じエディターが使用されます。これらは、各タイプが公開する次のフィルタリング オペランドです。

• DateTime および Date - Equals、Does Not Equal、Before、After、Today、Yesterday、This Month、Last Month、Next Month、This Year、Last Year、Next Year、Empty、Not Empty、Null、Not Null;
• Time - At、Not At、Before、After、At or Before、At or After、Empty、Not Empty、Null、Not Null;

集計

使用可能な集計オペランドは、Count、Earliest (date/time)、および Latest (date/time) になります。

ソート

• Time: タイプの列は、オブジェクトの時間部分に基づいてソートされます。分/秒は無視されます。
• Date: タイプの列は、日付部分に基づいてソートされ、時間部分は無視されます。
• DateTime: タイプの列は、日付に基づいてソートされます。

Boolean (ブール値)

デフォルトのテンプレートは、ブール値の可視化にマテリアル アイコンを使用します。false 値には 'clear' アイコン、true 値には 'check' アイコンを使用します。編集テンプレートは IgbCheckbox コンポーネントを使用しています。

<IgbColumn DataType="GridColumnDataType.Boolean"></IgbColumn>
razor

Image (画像)

デフォルトのテンプレートは、デフォルの画像テンプレートへの画像ソースとしてデータからの値を使用しています。デフォルトの画像テンプレートは、画像ファイルの名前を抽出し、アクセシビリティ要件を満たすために画像の alt 属性として設定します。表示されるセル サイズは描画される画像のサイズに合わせて調整されるため、大きな画像も描画され、グリッド行は画像列の画像と同じ大きさになることに注意してください。画像タイプの列では、フィルタリング、ソート、およびグループ化はデフォルトでオフになっています。それらを有効にしたい場合は、データ操作を実行するカスタム ストラテジを提供する必要があります。

<IgbColumn DataType="GridColumnDataType.Image"></IgbColumn>
razor

列に AutoGenerate を使用すると、グリッドは最初のデータ レコードの値を分析します。値が文字列型で、画像拡張子 (gif、jpg、jpeg、tiff、png、webp、bmp) で終わる URL のパターンと一致する場合、列は自動的に dataType === GridColumnDataType.Image としてマークされ、デフォルトの画像テンプレートが描画されます。

Currency (通貨)

デフォルトのテンプレート

デフォルトのテンプレートには、接頭辞または接尾辞が付いた通貨記号を含む数値を表示します。

PipeArgs 入力を使用することにより、エンドユーザーは小数点、currencyCode および display によって数値書式をカスタマイズできます。

<IgbColumn Field="UnitsInStock" DataType="GridColumnDataType.Currency" PipeArgs=formatOptions></IgbColumn>

@code {
    private IgbColumnPipeArgs formatOptions = new IgbColumnPipeArgs()
    {
        DigitsInfo = "3.4-4",
        Display = "symbol-narrow"
    };
}
razor

パラメーター	説明
digitsInfo	通貨値の 10 進数表現を表します。
display*	狭義または広義の記号で値を表示します。

*display - デフォルトの en-US ロケールの場合、USD コードは省略記号 $ または記号 US$ で表すことができます。

注: 上/下矢印キーを使用する場合、値は digitsInfo - minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。

Percent (パーセント)

デフォルトのテンプレートは、基になる数値に相当するパーセントを表示します。表示されるセル値は、'100' の表示ファクタで乗算された結果です。たとえば、デフォルトのファクタは 100 で、セルに渡される値は 0.123 であるため、表示されるセル値は 12.3% になります。

セル編集の場合、値はデータ ソース値と同じになります。表示ファクタは '1' です。セルを編集すると、パーセント値のプレビューがサフィックス要素として表示されます。たとえば、'0.0547' の編集中にプレビュー要素に '5.47%' が表示されます。

<IgbColumn Field="UnitsInStock" DataType="GridColumnDataType.Percent" PipeArgs=formatPercentOptions></IgbColumn>

@code {
    private IgbColumnPipeArgs formatPercentOptions = new IgbColumnPipeArgs()
    {
        /**
        * Decimal representation options, specified by a string in the following format:
        * `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`.
        * `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1.
        * `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0.
        * `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3.
        */
        DigitsInfo = "2.2-3"
    };
}
razor

上/下矢印キーを使用する場合、値は digitsInfo - minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。

デフォルトの編集テンプレート

Tree Grid 編集トピックの編集テンプレート部分を参照してください。

カスタム編集テンプレートとフォーマッタ

カスタム テンプレートと列フォーマッタの定義は、列データ型セットより常に優先されます。

カスタム テンプレート

<IgbTreeGrid>
 <IgbColumn InlineEditorTemplate="EditTemplate"></IgbColumn>
</IgbTreeGrid>
@code {
    public RenderFragment<IgbCellTemplateContext> EditTemplate = (ctx) =>
    {
        var value = ctx.Cell.Value;
        return@<input value="@value" />;
    };
}
razor

列の書式設定

<IgbTreeGrid>
 <IgbColumn FormatterScript="CurrencyFormatter"></IgbColumn>
</IgbTreeGrid>

//In Javascript
igRegisterScript("CurrencyFormatter", (value) => {
    return `$ ${value.toFixed(0)}`;
}, false);
razor

API リファレンス

• Cell
• IgbColumn
• PipeArgs
• IgbTreeGrid
• Locale
• DataType

その他のリソース

カスタム テンプレートについては、セル編集トピックを参照してください。

• 編集
• 集計