Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Blazor Column Summaries

Ignite UI for Blazor 열 요약을 지원합니다. 어떤 경우에는 최종 사용자가 그리드에 표시된 데이터 양에 압도당하여 종종 데이터 요약을 찾고 있을 수 있습니다. 최종 사용자는 특정 열의 데이터에서 추가 정보를 얻고 싶어할 수도 있습니다. 요약은 최종 사용자가 이를 달성하는 데 도움이 되며 SummaryScope 속성을 설정하여 이를 활성화할 수 있습니다.

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

無料で試してみる

Blazor Column Summaries Example

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(IgbGridColumnOptionsModule)
);
            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;

namespace Infragistics.Samples
{
    public class SaleInfo
    {
        public DateTime OrderDate { get; set; }
        public string ID { get; set; }
        public string ProductName { get; set; }
        public double ProductPrice { get; set; }
        public double BundlePrice { get; set; }
        public double Margin { get; set; }
        public double OrderItems { get; set; }
        public double OrderValue { get; set; }
        public double Profit { get; set; }
        public string Country { get; set; }
        public string CountryFlag { get; set; }
        public string City { get; set; }
        public string Status { get; set; }
    }

    public class SalesDataService
    {
        public static List<SaleInfo> Create(int? count)
        {
            if (count == null) count = 100;

            string[] names = {
                "Intel CPU", "AMD CPU",
                "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard",
                "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU",
                "Corsair Memory", "Patriot Memory", "Skill Memory",
                "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD",
                "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD",
                "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" };
            string[] countries = { "USA", "UK", "France", "Canada", "Poland", "Japan", "Germany" };
            string[] status = { "Packing", "Shipped", "Delivered" };

            var sales = new List<SaleInfo>();
            for (var i = 0; i < count; i++)
            {
                var price = DataGenerator.GetNumber(100, 900);
                var items = DataGenerator.GetNumber(10, 80);
                var value = price * items;
                var margin = DataGenerator.GetNumber(3, 10);
                var profit = Math.Round((price * margin / 100) * items);
                var country = DataGenerator.GetItem(countries);
                var city = DataGenerator.GetCity(country);

                sales.Add(new SaleInfo
                {
                    ID = DataGenerator.Pad(1001 + i, 4),
                    BundlePrice = price,
                    ProductPrice = price,
                    Margin = margin,
                    OrderDate = DataGenerator.GetDate(),
                    OrderItems = items,
                    OrderValue = value,
                    ProductName = DataGenerator.GetItem(names),
                    Profit = profit,
                    City = city,
                    Country = country,
                    CountryFlag = DataGenerator.GetCountryFlag(country),
                    Status = DataGenerator.GetItem(status)
                });
            }
            return sales;
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options horizontal">
        <span class="options-item">Summary Scope:</span>
        <select class="options-item" @bind="GridSummaryScope">
            <option>@SummaryScope.Root</option>
            <option>@SummaryScope.Groups</option>
            <option>@SummaryScope.Both</option>
            <option>@SummaryScope.None</option>
        </select>
        <span class="options-item" >Group Summary Display Mode:</span>
        <select class="options-item" @bind="GridGroupSummaryDisplayMode">
            <option>@GroupSummaryDisplayMode.List</option>
            <option>@GroupSummaryDisplayMode.Cells</option>
            <option>@GroupSummaryDisplayMode.RowTop</option>
            <option>@GroupSummaryDisplayMode.RowBottom</option>
            <option>@GroupSummaryDisplayMode.None</option>
        </select>
    </div>
    <div class="container vertical">
        @if (Data != null)
        {
            <div style="overflow: hidden">
                <IgbDataGrid Height="100%" Width="100%"
                      @ref="@DataGridRef"
                      SummaryScope="@GridSummaryScope"
                      GroupSummaryDisplayMode="@GridGroupSummaryDisplayMode"
                      AutoGenerateColumns="false"
                      IsGroupCollapsable="true"
                      GroupHeaderDisplayMode="@GroupHeaderDisplayMode.Combined"
                      IsColumnOptionsEnabled="true"
                      DataSource="Data">
                    <IgbNumericColumn Field="ID" Width="@("*>120")" HeaderText="ID" HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
                    <IgbTextColumn Field="ProductName" Width="@("*>130")" HeaderText="Product" />
                    <IgbNumericColumn Field="BundlePrice" PositivePrefix="$" Width="@("*>120")" ShowGroupingSeparator="true" HeaderText="Price" />
                    <IgbNumericColumn Field="OrderItems" Width="@("*>140")" HeaderText="Orders" />
                    <IgbNumericColumn Field="OrderValue" Width="@("*>160")" ShowGroupingSeparator="true" HeaderText="Order Totals" PositivePrefix="$" />
                    <IgbDateTimeColumn Field="OrderDate" Width="@("*>150")" HeaderText="Order Date" HorizontalAlignment="@CellContentHorizontalAlignment.Right" />
                    <IgbNumericColumn Field="Profit" Width="@("*>140")" ShowGroupingSeparator="true" HeaderText="Profit" PositivePrefix="$" />
                    <IgbTextColumn Field="Country" Width="@("*>170")" HeaderText="Ship Country" />
                </IgbDataGrid>
            </div>
        }
    </div>
</div>

@code {

    private List<SaleInfo> Data;
    private SummaryScope GridSummaryScope;
    private GroupSummaryDisplayMode GridGroupSummaryDisplayMode;

    private IgbDataGrid _grid;
    private IgbDataGrid DataGridRef
    {
        get { return _grid; }
        set
        {
            _grid = value;
            this.OnDataGridRef();
            StateHasChanged();
        }
    }

    protected override void OnInitialized()
    {

        this.Data = SalesDataService.Create(50);

        this.GridSummaryScope = SummaryScope.Root;
        this.GridGroupSummaryDisplayMode = GroupSummaryDisplayMode.RowBottom;
    }

    private void OnDataGridRef()
    {
        var productGroup = new IgbColumnGroupDescription()
        {
            Field = "ProductName",
            DisplayName = "ProductName"
        };

        var productCount = new IgbColumnSummaryDescription()
        {
            Field = "ProductName",
            Operand = DataSourceSummaryOperand.Count
        };

        var priceMin = new IgbColumnSummaryDescription()
        {
            Field = "BundlePrice",
            Operand = DataSourceSummaryOperand.Min
        };

        var priceMax = new IgbColumnSummaryDescription()
        {
            Field = "BundlePrice",
            Operand = DataSourceSummaryOperand.Max
        };

        var orderSum = new IgbColumnSummaryDescription()
        {
            Field = "OrderItems",
            Operand = DataSourceSummaryOperand.Sum
        };

        var orderValueSum = new IgbColumnSummaryDescription()
        {
            Field = "OrderValue",
            Operand = DataSourceSummaryOperand.Sum
        };

        var orderValueAvg = new IgbColumnSummaryDescription()
        {
            Field = "OrderValue",
            Operand = DataSourceSummaryOperand.Average
        };

        var orderDateMin = new IgbColumnSummaryDescription()
        {
            Field = "OrderDate",
            Operand = DataSourceSummaryOperand.Min,
            CalculatorDisplayName = "First"
        };

        var orderDateMax = new IgbColumnSummaryDescription()
        {
            Field = "OrderDate",
            Operand = DataSourceSummaryOperand.Max,
            CalculatorDisplayName = "Last"
        };

        var sum1 = new IgbColumnSummaryDescription()
        {
            Field = "Profit",
            Operand = DataSourceSummaryOperand.Sum
        };

        var avg2 = new IgbColumnSummaryDescription()
        {
            Field = "Profit",
            Operand = DataSourceSummaryOperand.Average
        };

        //var countryCustomSummary = new IgbColumnSummaryDescription()
        //{
        //    Field = "Country",
        //    Operand = DataSourceSummaryOperand.Custom,
        //    //ProvideCalculatorScript = "onProvideCalculator" // <= This seems like what needs to be done, but how do you specify the logic that the calculator uses?
        //};

        //TODO CUSTOM SUMMARY

        this.DataGridRef.GroupDescriptions.Add(productGroup);

        this.DataGridRef.SummaryDescriptions.Add(productCount);
        this.DataGridRef.SummaryDescriptions.Add(priceMin);
        this.DataGridRef.SummaryDescriptions.Add(priceMax);
        this.DataGridRef.SummaryDescriptions.Add(orderSum);
        this.DataGridRef.SummaryDescriptions.Add(orderValueSum);
        this.DataGridRef.SummaryDescriptions.Add(orderValueAvg);
        this.DataGridRef.SummaryDescriptions.Add(orderDateMin);
        this.DataGridRef.SummaryDescriptions.Add(orderDateMax);
        this.DataGridRef.SummaryDescriptions.Add(sum1);
        this.DataGridRef.SummaryDescriptions.Add(avg2);
        //this.DataGridRef.SummaryDescriptions.Add(countryCustomSummary);
    }
}razorコピー

function onProvideCalculator(grid, args) {

    args.setCalculator(null);

}

igRegisterScript("onProvideCalculator", onProvideCalculator, false);jsコピー

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

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Summary Scope Property

Blazor 데이터 그리드는 SummaryScope 속성을 사용하여 구성할 수 있는 4가지 요약 설정을 지원합니다. 다음은 나열하고 설명합니다.

• Root: 요약이 적용되는 열에 대한 그리드의 모든 행에 대한 총합계가 표시됩니다.
• Groups: 그룹화된 행에만 적용되며 특정 그룹의 모든 행에 대한 총계를 표시합니다.
• Both: Groups 및 Root 옵션을 동시에 사용합니다.
• None: 그리드에 대한 요약을 비활성화합니다.

Group Summary Display Mode Property

Blazor 데이터 그리드는 요약이 표시되는 위치 구성을 지원합니다. GroupSummaryDisplayMode 속성을 사용하여 이를 구성할 수 있습니다. 이 속성에 대한 다양한 옵션은 아래에 나열되어 설명되어 있습니다.

• 목록: 그룹 요약을 스패닝 그룹 헤더의 단순 목록으로 렌더링합니다.
• 셀: 그룹 헤더를 셀로 렌더링하고 요약 값은 해당 열에 맞춰 셀 내부에 렌더링됩니다. 이 옵션을 사용하면 그리드에 열당 단일 요약만 표시됩니다.
• RowTop: 그룹 요약을 그룹 상단의 요약 행으로 렌더링합니다.
• RowBottom: 그룹 요약을 그룹 하단의 요약 행으로 렌더링합니다.
• 없음: 그룹 요약 렌더링이 비활성화됩니다.

Code Snippets

<IgbDataGrid Height="500px" Width="100%"
    @ref="DataGridRef"
    SummaryScope="DataSourceSummaryScope.Root"
    GroupSummaryDisplayMode="GroupSummaryDisplayMode.RowTop"
    AutoGenerateColumns="false"
    IsGroupCollapsable="true"
    GroupHeaderDisplayMode="DataSourceSectionHeaderDisplayMode.Combined"
    DataSource="DataSource">
    <IgbTextColumn Field="ProductName" Width="130" HeaderText="Product" />
    <IgbNumericColumn Field="BundlePrice" PositivePrefix="$" Width="120" ShowGroupingSeparator="true" HeaderText="Price" />
    <IgbNumericColumn Field="OrderItems" Width="140" HeaderText="Orders" />
    <IgbNumericColumn Field="OrderValue" Width="160" ShowGroupingSeparator="true" HeaderText="Order Totals" PositivePrefix="$" />
    <IgbTextColumn Field="Country" Width="170" HeaderText="Ship Country" />
</IgbDataGrid>

@code {
    private IgbDataGrid grid;
    private IgbDataGrid DataGridRef
    {
        get { return grid; }
        set
        {
            grid = value;
            this.OnDataGridRef();
            StateHasChanged();
        }
    }

    private void OnDataGridRef()
    {
        var productCount = new ColumnSummaryDescription() { Field = "ProductName", Operand = SummaryOperand.Count };
        var priceMin = new ColumnSummaryDescription() { Field = "BundlePrice", Operand = SummaryOperand.Min };
        var priceMax = new ColumnSummaryDescription() { Field = "BundlePrice", Operand = SummaryOperand.Max };
        var orderSum = new ColumnSummaryDescription() { Field = "OrderItems", Operand = SummaryOperand.Sum };
        var orderValueAvg = new ColumnSummaryDescription() { Field = "OrderValue", Operand = SummaryOperand.Average };

        this.DataGridRef.SummaryDescriptions.Add(productCount);
        this.DataGridRef.SummaryDescriptions.Add(priceMin);
        this.DataGridRef.SummaryDescriptions.Add(priceMax);
        this.DataGridRef.SummaryDescriptions.Add(orderSum);
        this.DataGridRef.SummaryDescriptions.Add(orderValueAvg);
    }
}
razor

API References

• IgbGrid
• GroupSummaryDisplayMode
• SummaryScope