このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。

Blazor グリッド レイアウトの読み込みと保存

Ignite UI for Blazor データ テーブル / データ グリッドは、グリッド レイアウトの読み込みと保存をサポートしています。これは、グリッドの LoadLayout メソッドと SaveLayout メソッドを呼び出すことによって実行されます。これらの機能は、エンドユーザーが列を移動、ソート、グループ化でき、グリッドの状態を保持し、レイアウトを復元して後で作業を再開できるようにする場合に役立ちます。

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

無料で試してみる

Blazor グリッド レイアウトの読み込みと保存の例

EXAMPLE

MODULES

DATA GENERATOR

DATA SOURCE

RAZOR

JS

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(IgbDataGridModule),
                typeof(IgbDataGridToolbarModule),
                typeof(IgbGridColumnOptionsModule),
                typeof(IgbSparklineModule)
);
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;
using System.Linq;

namespace Infragistics.Samples
{
    public static class DataGenerator
    {
        readonly static string[] websites = { ".com", ".gov", ".edu", ".org" };
        readonly static string[] emails = { "gmail.com", "yahoo.com", "twitter.com" };
        readonly static string[] genders = { "male", "female" };
        readonly static string[] maleNames = { "Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce" };
        readonly static string[] femaleNames = { "Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally" };
        readonly static string[] lastNames = { "Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla" };
        readonly static string[] countries = { "USA", "UK", "France", "Canada", "Poland" };
        readonly static string[] citiesUS = { "New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas" };
        readonly static string[] citiesUK = { "London", "Liverpool", "Manchester" };
        readonly static string[] citiesFR = { "Paris", "Marseille", "Lyon" };
        readonly static string[] citiesCA = { "Toronto", "Vancouver", "Montreal" };
        readonly static string[] citiesPL = { "Krakow", "Warsaw", "Wroclaw", "Gdansk" };
        readonly static string[] citiesJP = { "Tokyo", "Osaka", "Kyoto", "Yokohama" };
        readonly static string[] citiesGR = { "Berlin", "Bonn", "Cologne", "Munich", "Hamburg" };
        readonly static string[] roadSuffixes = { "Road", "Street", "Way" };
        readonly static string[] roadNames = { "Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill" };

        public static Random Rand = new Random();

        public static string GetWebsite()
        {
            return GetItem(websites);
        }

        public static string GetEmail()
        {
            return GetItem(emails);
        }

        public static double GetNumber(double min, double max)
        {
            return Math.Round(min + (Rand.NextDouble() * (max - min)));
        }

        public static int GetInteger(double min, double max)
        {
            return (int)GetNumber(min, max);
        }

        public static string GetPhone()
        {
            var phoneCode = GetNumber(100, 900);
            var phoneNum1 = GetNumber(100, 900);
            var phoneNum2 = GetNumber(1000, 9000);
            var phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
            return phone;
        }

        public static string GetGender()
        {
            return GetItem(genders);
        }

        public static string GetNameFirst(string gender)
        {
            if (gender == "male")
                return GetItem(maleNames);
            else
                return GetItem(femaleNames);
        }

        public static string GetNameLast()
        {
            return GetItem(lastNames);
        }

        public static string GetItem(string[] array)
        {
            var index = (int)Math.Round(GetNumber(0, array.Length - 1));
            return array[index];
        }

        public static string GetCountry()
        {
            return GetItem(countries);
        }

        public static string GetCity(string country)
        {
            if (country == "Canada")
            {
                return GetItem(citiesCA);
            }
            else if (country == "France")
            {
                return GetItem(citiesFR);
            }
            else if (country == "Poland")
            {
                return GetItem(citiesPL);
            }
            else if (country == "USA")
            {
                return GetItem(citiesUS);
            }
            else if (country == "Japan")
            {
                return GetItem(citiesJP);
            }
            else if (country == "Germany")
            {
                return GetItem(citiesGR);
            }
            else
            { // if (country === "United Kingdom") {
                return GetItem(citiesUK);
            }
        }

        public static string GetStreet()
        {
            var num = Math.Round(GetNumber(100, 300)).ToString();
            var road = GetItem(roadNames);
            var suffix = GetItem(roadSuffixes);
            return num + " " + road + " " + suffix;
        }

        public static DateTime GetBirthday()
        {
            var year = DateTime.Now.Year - GetInteger(30, 50);
            var month = GetNumber(10, 12);
            var day = GetNumber(20, 27);
            return new DateTime(year, (int)month, (int)day);
        }

        public static DateTime GetDate()
        {
            var year = DateTime.Now.Year;
            var month = GetNumber(10, 12);
            var day = GetNumber(20, 27);
            return new DateTime(year, (int)month, (int)day);
        }

        public static string Pad(int num, int size)
        {
            var s = num + "";
            while (s.Length < size)
            {
                s = "0" + s;
            }
            return s;
        }

        public static string GetPhotoMale(int id)
        {
            return "https://static.infragistics.com/xplatform/images/people/GUY" + Pad(id, 2) + ".png";
        }

        public static string GetPhotoFemale(int id)
        {
            return "https://static.infragistics.com/xplatform/images/people/GIRL" + Pad(id, 2) + ".png";
        }

        private static int maleCount = 0;
        private static int femaleCount = 0;
        public static string GetPhoto(string gender)
        {
            if (gender == "male")
            {
                maleCount++;
                if (maleCount > 24) maleCount = 1;
                return GetPhotoMale(maleCount);
            }
            else
            {
                femaleCount++;
                if (femaleCount > 24) femaleCount = 1;
                return GetPhotoFemale(femaleCount);
            }
        }

        public static string GetGenderPhoto(string gender)
        {
            return "https://static.infragistics.com/xplatform/images/genders/" + gender + ".png";
        }

        public static string GetCountryFlag(string country)
        {
            return "https://static.infragistics.com/xplatform/images/flags/" + country + ".png";
        }

        public static string GetIncomeRange(double salary)
        {
            if (salary < 50000)
            {
                return "Low";
            }
            else if (salary < 100000)
            {
                return "Average";
            }
            else
            {
                return "High";
            }
        }

    }

}csコピー

using System;
using System.Collections.Generic;
using System.ComponentModel;

namespace Infragistics.Samples
{
    public class Employee : INotifyPropertyChanged
    {
        public string ID { get; set; }
        public string Address { get; set; }
        public double Age { get; set; }
        public string Gender { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Name { get; set; }
        public string Street { get; set; }
        public string City { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
        public string Photo { get; set; }
        public double Salary { get; set; }
        public double Sales { get; set; }
        public string Income { get; set; }
        public int Index { get; set; }

        public DateTime Birthday { get; set; }
        public List<Productivity> Productivity { get; set; }

        private string _Country;
        public string Country
        {
            get { return _Country; }
            set { if (_Country != value) { OnCountryChanged(value); } }
        }

        public string CountryFlag { get; set; }

        protected void OnCountryChanged(string countryName)
        {
            // syncronizing country name and country flag
            _Country = countryName;
            CountryFlag = DataGenerator.GetCountryFlag(countryName);
            City = DataGenerator.GetCity(countryName);
            OnPropertyChanged("Country");
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

    public class Productivity
    {
        public double Value { get; set; }
        public int Week { get; set; }
    }

    public static class EmployeeData
    {
        public static List<Employee> Create(int? count, bool? useProductivity)
        {
            if (count == null) count = 100;

            var employees = new List<Employee>();
            for (int i = 0; i < count; i++)
            {
                var age = Math.Round(DataGenerator.GetNumber(20, 40));
                var gender = DataGenerator.GetGender();
                var firstName = DataGenerator.GetNameFirst(gender);
                var lastName = DataGenerator.GetNameLast();
                var street = DataGenerator.GetStreet();
                var country = DataGenerator.GetCountry();
                var city = DataGenerator.GetCity(country);
                var email = firstName.ToLower() + "@" + DataGenerator.GetEmail();
                var photoPath = DataGenerator.GetPhoto(gender);

                var employee = new Employee
                {
                    Index = i,
                    Address = street + ", " + city,
                    Age = age,
                    Birthday = DataGenerator.GetBirthday(),
                    City = city,
                    Email = email,
                    Gender = gender,
                    ID = DataGenerator.Pad(1001 + i, 4),
                    FirstName = firstName,
                    LastName = lastName,
                    Name = firstName + " " + lastName,
                    Photo = photoPath,
                    Phone = DataGenerator.GetPhone(),
                    Street = DataGenerator.GetStreet(),
                    Salary = DataGenerator.GetNumber(40, 200) * 1000,
                    Sales = DataGenerator.GetNumber(200, 980) * 1000,
                };
                employee.Country = country;

                employee.Income = DataGenerator.GetIncomeRange(employee.Salary);

                if (useProductivity.HasValue && useProductivity.Value)
                {
                    employee.Productivity = GetProductivity(52);
                }
                employees.Add(employee);
            }

            return employees;
        }

        public static List<Productivity> GetProductivity(int weekCount)
        {
            var productivity = new List<Productivity>();

            for (var w = 1; w <= weekCount; w++)
            {
                var value = DataGenerator.GetNumber(-50, 50);
                var prod = new Productivity
                {
                    Value = value,
                    Week = w
                };
                productivity.Add(prod);
            };

            return productivity;
        }
    }
}csコピー

@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Rendering
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.RenderTree
@using Microsoft.AspNetCore.Components.Web

@using IgniteUI.Blazor.Controls

<div class="container vertical">

    <div class="container vertical">
        <div class="options horizontal">
            <button @onclick="OnLoadLayoutClick">Load</button>
            <button @onclick="OnSaveLayoutClick">Save</button>

        </div>

            @if (Employees != null)
            {

                <IgbDataGridToolbar ToolbarTitle="Sales Team" ColumnChooser="true" ColumnPinning="true" TargetGrid="@DataGridRef" />

                <div style="overflow: hidden">
                    <IgbDataGrid Height="100%" Width="100%"
                          @ref="@DataGridRef"
                          RowHeight="50"
                          DataSource="Employees"
                          AutoGenerateColumns="false"
                          IsColumnOptionsEnabled="true"
                          IsGroupCollapsable="true"
                          ActivationMode="GridActivationMode.Cell"
                          SummaryScope="@SummaryScope.Root"
                          GroupSummaryDisplayMode="@GroupSummaryDisplayMode.RowBottom"
                          GroupHeaderDisplayMode="@GroupHeaderDisplayMode.Combined"
                          CornerRadiusTopLeft="0"
                          CornerRadiusTopRight="0"
                          ColumnMovingSeparatorWidth="2"
                          ColumnMovingMode="ColumnMovingMode.Deferred"
                          ColumnMovingAnimationMode="ColumnMovingAnimationMode.SlideOver"
                          ColumnShowingAnimationMode="ColumnShowingAnimationMode.SlideFromRightAndFadeIn"
                          ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToRightAndFadeOut"
                          SelectionMode="DataGridSelectionMode.SingleRow">

                        <IgbImageColumn IsEditable="false" Width="@("*>120")" Field="Photo" PaddingTop="5" PaddingBottom="5" PaddingRight="10"
                                    HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" />

                        <IgbTextColumn Width="@("*>130")" Field="Name" />

                        @*NOTE: CellUpdatingScript is implemented in wwwroot/*.js file *@
                        <IgbTemplateColumn Width="@("*>160")" Field="Sales" CellUpdatingScript="onUpdatingSalesColumn"
                                        HorizontalAlignment="@CellContentHorizontalAlignment.Center" />

                        <IgbNumericColumn Width="@("*>130")" Field="Salary" PositivePrefix="$"
                                    ShowGroupingSeparator="true"
                                    MaxFractionDigits="0"
                                    MinFractionDigits="0" />

                        <IgbNumericColumn Width="100" Field="Age" HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
                        <IgbDateTimeColumn Width="@("*>140")" Field="Birthday" HeaderText="Date of Birth" />

                        <IgbImageColumn IsEditable="false" Width="@("*>110")" Field="CountryFlag" HeaderText="Country" PaddingTop="5" PaddingBottom="5" PaddingRight="10"
                                    HorizontalAlignment="@CellContentHorizontalAlignment.Stretch" />

                        @*NOTE: CellUpdatingScript is implemented in wwwroot/*.js file *@
                        <IgbTemplateColumn Width="@("*>170")" Field="Address" CellUpdatingScript="onUpdatingAddressColumn" />
                        <IgbTemplateColumn Width="@("*>130")" Field="Phone" CellUpdatingScript="onUpdatingPhoneColumn" />

                        <IgbTextColumn Width="@("*>120")" Field="Income" />
                        <IgbTextColumn Width="@("*>120")" Field="Email" IsEditable="false" />

                    </IgbDataGrid>
                </div>
            }

        </div>
    </div>

@code {

    private List<Employee> Employees;
    public string savedLayout;
    private IgbDataGrid _grid;
    private IgbDataGrid DataGridRef
    {
        get { return _grid; }
        set { _grid = value; this.OnDataGridRef(); StateHasChanged(); }
    }

    protected override void OnInitialized()
    {

        this.Employees = EmployeeData.Create(100, false);
    }

    private void OnDataGridRef()
    {
        var peopleGroup = new IgbColumnGroupDescription() { Field = "Country", DisplayName = "Country" };
        var incomeGroup = new IgbColumnGroupDescription() { Field = "Income", DisplayName = "Income" };
        this._grid.GroupDescriptions.Add(peopleGroup);
        this._grid.GroupDescriptions.Add(incomeGroup);

        var ageSummary = new IgbColumnSummaryDescription() { Field = "Age", Operand = DataSourceSummaryOperand.Average };
        var peopleSummary = new IgbColumnSummaryDescription() { Field = "Photo", Operand = DataSourceSummaryOperand.Count };
        var salarySummary = new IgbColumnSummaryDescription() { Field = "Salary", Operand = DataSourceSummaryOperand.Sum };
        var saleSummary = new IgbColumnSummaryDescription() { Field = "Sales", Operand = DataSourceSummaryOperand.Max };

        this._grid.SummaryDescriptions.Add(ageSummary);
        this._grid.SummaryDescriptions.Add(peopleSummary);
        this._grid.SummaryDescriptions.Add(salarySummary);
        this._grid.SummaryDescriptions.Add(saleSummary);

        // TODO fix onSummarziePeopleGender
        //var nameSummary = new IgbColumnSummaryDescription() { Field = "Name", Operand = DataSourceSummaryOperand.Custom,
        //    ProvideCalculatorScript = "onSummarziePeopleGender" };
        //this._grid.SummaryDescriptions.Add(nameSummary);
    }

    private void OnLoadLayoutClick(MouseEventArgs e)
    {
        this.DataGridRef.LoadLayout(this.savedLayout);
    }

    private void OnSaveLayoutClick(MouseEventArgs e)
    {
        this.DataGridRef.SaveLayout();
        this.savedLayout = this.DataGridRef.SaveLayout();
    }
}razorコピー

// NOTE this JavaScript file implements functions for styling/templating columnd of the DataGrid control
// at end of this file, the igRegisterScript registers functions that are used .razor file

function onUpdatingSalesColumn(grid, args) {
    let content = args.content;
    let info = args.cellInfo;
    let sales = info.rowItem.Sales;
    let gaugeValue = null;
    let gaugeBar = null;

    if (content.childElementCount === 0) {
        gaugeValue = document.createElement("span");
        gaugeValue.style.margin = "0px";
        gaugeValue.style.marginTop = "2px";
        gaugeValue.style.padding = "0px";
        gaugeValue.style.fontFamily = "Verdana";
        gaugeValue.style.fontSize = "13px";
        gaugeValue.style.textAlign = "center";

        gaugeBar = document.createElement("div");
        gaugeBar.style.background = "#7f7f7f";
        gaugeBar.style.padding = "0px";
        gaugeBar.style.margin = "0px";
        gaugeBar.style.height = "6px";
        gaugeBar.style.left = "0px";
        gaugeBar.style.top = "0px";
        gaugeBar.style.position = "relative";

        const gauge = document.createElement("div");
        gauge.style.background = "#dddddd";
        gauge.style.padding = "0px";
        gauge.style.margin = "0px";
        gauge.style.height = "4px";
        gauge.style.marginTop = "8px";
        gauge.style.width = "100%";
        gauge.appendChild(gaugeBar);

        content.style.verticalAlign = "center";
        content.style.lineHeight = "normal";
        content.style.display = "flex";
        content.style.flexDirection = "column";
        content.style.justifyContent = "center";
        content.style.height = "100%";
        content.style.width = "calc(100% - 2rem)";
        content.style.marginRight = "1rem";
        content.style.marginLeft = "1rem";

        content.appendChild(gauge);
        content.appendChild(gaugeValue);
    } else {
        const gauge = content.children[0];
        gaugeBar = gauge.children[0];
        gaugeValue = content.children[1];
    }

    // conditional formatting:
    if (sales < 400000) {
        gaugeValue.style.color = "rgb(211, 17, 3)";
        gaugeBar.style.background = "rgb(211, 17, 3)";
    }
    else if (sales < 650000) {
        gaugeValue.style.color = "Orange";
        gaugeBar.style.background = "Orange";
    }
    else {
        gaugeValue.style.color = "rgb(21, 190, 6)";
        gaugeBar.style.background = "rgb(21, 190, 6)";
    }

    let gaugeWidth = (sales / 990000) * 100;
    gaugeWidth = Math.min(100, gaugeWidth);
    gaugeBar.style.width = gaugeWidth + "%";

    gaugeValue.textContent = "$" + sales / 1000 + ",000";
}

function onUpdatingAddressColumn(grid, args) {
    let content = args.content;
    let info = args.cellInfo;
    let item = info.rowItem;
    let span1 = null;
    let span2 = null;

    if (content.childElementCount === 0) {
        content.style.fontFamily = "Verdana";
        content.style.fontSize = "13px";
        content.style.verticalAlign = "center";
        content.style.lineHeight = "normal";
        content.style.display = "flex";
        content.style.flexDirection = "column";
        content.style.justifyContent = "center";
        content.style.height = "100%";
        content.style.width = "100%";
        content.style.color = "rgb(24, 29, 31)";
        // stacking above elements in the content of grid's cell
        span1 = document.createElement("span");
        span2 = document.createElement("span");
        content.appendChild(span1);
        content.appendChild(span2);
    }
    else {
        span1 = content.children[0];
        span2 = content.children[1];
    }

    if (span1 && span2) {
        // updating elements in the content of grid's cell
        span1.textContent = item.Street;
        span2.textContent = item.City + ", " + item.Country;
    }
}

function onUpdatingPhoneColumn(grid, args) {
    let content = args.content;
    let info = args.cellInfo;
    let item = info.rowItem;
    let link = null;

    if (content.childElementCount === 0) {
        link = document.createElement("a");
        content.style.verticalAlign = "center";
        content.style.justifyContent = "center"; 
        content.style.lineHeight = "normal";
        content.style.display = "inline-block";
        // content.style.display = "inline-grid";
        content.style.fontFamily = "Verdana";
        content.style.fontSize = "13px";
        content.style.color = "#4286f4";
        content.style.width = "100%";

        content.appendChild(link);
    } else {
        link = content.children[0];
    }

    link.href = "tel:" + item.Phone;
    link.textContent = item.Phone;
}

// this code allows calling above functions from a .razor file
igRegisterScript("onUpdatingSalesColumn", onUpdatingSalesColumn, false);
igRegisterScript("onUpdatingAddressColumn", onUpdatingAddressColumn, false);
igRegisterScript("onUpdatingPhoneColumn", onUpdatingPhoneColumn, false);

function onSummarziePeopleGender(grid, args) {

    //TODO
    //let info = args.cellInfo;
    //let gender = info.rowItem.Gender;
    args.setCalculator(10);
}
igRegisterScript("onSummarziePeopleGender", onSummarziePeopleGender, false);
jsコピー

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

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

サポートされる機能

グリッドは、次の機能の保存をサポートしています:

• 列の表示状態
• 列のピン固定
• 列の移動
• 列のサイズ変更
• 行グループ
• 列のソート
• 列フィルタリング

API リファレンス

• IgbGrid
• LoadLayout
• SaveLayout