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 Grid Column Pinning Overview

Ignite UI for Blazor 열 고정 기능을 지원하여 최종 사용자가 특정 열 순서로 열을 잠글 수 있습니다.

하나 이상의 열을 데이터 그리드의 왼쪽이나 오른쪽에 고정할 수 있습니다. 또한 PinColumn 기능을 활용하여 열의 핀 상태를 변경할 수 있습니다.

Blazor Grid Column Pinning Example

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(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;
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 IgniteUI.Blazor.Controls

<div class="container vertical">

    <div class="options horizontal">
        <input type="button" class="options-item" disabled=@IsPinningToLeftDisabled  @onclick="OnPinLeft" value="Pin Left" />
        <input type="button" class="options-item" disabled=@IsPinningToRightDisabled @onclick="OnPinRight" value="Pin Right" />
        <input type="button" class="options-item" @onclick="OnUnPin" value="Unpin Columns" />
    </div>

    <div class="container vertical">

        @if (Data != null)
        {
            <div style="overflow: hidden">
                <IgbDataGrid Height="100%" Width="100%"
                    DefaultColumnMinWidth="120"
                    DataSource="Data"
                    AutoGenerateColumns="false"
                    @ref="DataGridRef">
                    <IgbTextColumn Field="ID" Pinned="PinnedPositions.Left" Width="@("*>110")" />
                    <IgbTextColumn Field="FirstName" Pinned="PinnedPositions.Left" Width="@("*>190")" />
                    <IgbTextColumn Field="LastName" Pinned="PinnedPositions.Left" Width="@("*>190")" />
                    <IgbDateTimeColumn Field="Birthday" Width="@("*>170")" />
                    <IgbNumericColumn Field="Age" Width="@("*>120")" />
                    <IgbImageColumn IsEditable="false" Field="CountryFlag" />
                    <IgbTextColumn Field="Street" Width="@("*>160")" />
                    <IgbTextColumn Field="City" Width="260" />
                    <IgbTextColumn Field="Country" Width="@("*>170")" />
                    <IgbNumericColumn Field="Salary" Width="@("*>170")" />
                    <IgbNumericColumn Field="Sales" Width="@("*>120")" />
                    <IgbNumericColumn Field="Salary" Width="@("*>120")" PositivePrefix="$"
                                ShowGroupingSeparator="true"
                                MaxFractionDigits="0"
                                MinFractionDigits="0" />
                </IgbDataGrid>
            </div>
        }

    </div>
</div>

@code {

    private List<Employee> Data;
    public IgbDataGrid grid;
    public IgbDataGrid DataGridRef
    {
        get
        {
            return grid;
        }
        set
        {
            grid = value;
            StateHasChanged();
        }
    }
    public Boolean IsPinningToLeftDisabled { get; set; } = false;
    public Boolean IsPinningToRightDisabled { get; set; } = false;

    protected override void OnInitialized()
    {

        this.Data = EmployeeData.Create(200, false);
    }

    private async Task OnPinLeft()
    {
        IsPinningToLeftDisabled = true;
        IsPinningToRightDisabled = true;

        var idColumn = this.grid.ActualColumns[0];
        var firstNameColumn = this.grid.ActualColumns[1];
        var lastNameColumn = this.grid.ActualColumns[2];
        await this.grid.PinColumnAsync(idColumn, PinnedPositions.Left);
        await this.grid.PinColumnAsync(firstNameColumn, PinnedPositions.Left);
        await this.grid.PinColumnAsync(lastNameColumn, PinnedPositions.Left);
    }

    private async Task OnPinRight()
    {
        IsPinningToLeftDisabled = true;
        IsPinningToRightDisabled = true;

        var streetColumn = this.grid.ActualColumns[6];
        var cityColumn = this.grid.ActualColumns[7];
        var countryColumn = this.grid.ActualColumns[8];
        await this.grid.PinColumnAsync(streetColumn, PinnedPositions.Right);
        await this.grid.PinColumnAsync(cityColumn, PinnedPositions.Right);
        await this.grid.PinColumnAsync(countryColumn, PinnedPositions.Right);
    }

    private async Task OnUnPin()
    {
        IsPinningToLeftDisabled = false;
        IsPinningToRightDisabled = false;

        var idColumn = this.grid.ActualColumns[0];
        var firstNameColumn = this.grid.ActualColumns[1];
        var lastNameColumn = this.grid.ActualColumns[2];
        await this.grid.PinColumnAsync(idColumn, PinnedPositions.None);
        await this.grid.PinColumnAsync(firstNameColumn, PinnedPositions.None);
        await this.grid.PinColumnAsync(lastNameColumn, PinnedPositions.None);

        var streetColumn = this.grid.ActualColumns[6];
        var cityColumn = this.grid.ActualColumns[7];
        var countryColumn = this.grid.ActualColumns[8];
        await this.grid.PinColumnAsync(streetColumn, PinnedPositions.None);
        await this.grid.PinColumnAsync(cityColumn, PinnedPositions.None);
        await this.grid.PinColumnAsync(countryColumn, PinnedPositions.None);
    }

}razor

/* 
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.

데이터 그리드의 Column Pinning API는 열의 Pinned 속성을 설정하거나 그리드의 PinColumn 기능을 활용하여 설정할 때 활성화할 수 있습니다.

Pinned 속성에는 세 가지 옵션이 있습니다.

왼쪽 -Left 활성화하면 고정된 열이 그리드의 왼쪽에 배치됩니다.
오른쪽 -Right 활성화하면 고정된 열이 그리드 오른쪽에 배치됩니다.
없음 -None 활성화하면 열의 고정이 해제되고 그리드 내 기본 배치 위치가 변경됩니다.

고정된 열에 인접한 고정되지 않은 열은 여전히 가로 스크롤을 유지합니다.

PinColumn 함수에는 두 개의 필수 매개변수가 포함되어 있습니다. 첫 번째 매개 변수는 고정할 열이고 두 번째 매개 변수는 PinnedPositions 열거 설정입니다.

Code Snippet

다음 코드는 Pinned 속성과 PinColumn 함수를 사용하여 열 고정을 통해 Blazor Data Grid에 열 고정을 구현하는 방법을 보여줍니다.

<IgbDataGrid Height="100%" Width="100%"
    DefaultColumnMinWidth="120"
    DataSource="@DataSource"
    AutoGenerateColumns="false"
    @ref="DataGridRef">

    @*Columns Pinned Left*@
    <IgbTextColumn Field="ID" Pinned="PinnedPositions.Left" />
    <IgbTextColumn Field="FirstName" Pinned="PinnedPositions.Left" />
    <IgbTextColumn Field="LastName" Pinned="PinnedPositions.Left" />

    @*Columns Unpinned*@
    <IgbDateTimeColumn Field="Birthday" Pinned="PinnedPositions.None" />
    <IgbNumericColumn Field="Age" Pinned="PinnedPositions.None" />
    <IgbImageColumn Field="CountryFlag" Pinned="PinnedPositions.None" />

    @*Columns Pinned Right*@
    <IgbTextColumn Field="Street" Pinned="PinnedPositions.Right" />
    <IgbTextColumn Field="City" Pinned="PinnedPositions.Right" />
    <IgbTextColumn Field="Country" Pinned="PinnedPositions.Right" />
</IgbDataGrid>
razor

Toolbar's Column Pinning UI

열 고정 UI는 그리드와 별도로 IgbDataGridToolbar 구성 요소 내에서 액세스할 수 있습니다. 이를 위해 우리가 해야 할 일은 도구 모음의 columnPinning 속성을 true로 설정하는 것뿐입니다. 그러면 도구 모음에 IgbButton 표시되고, 클릭하면 열 고정 UI가 표시됩니다. 이 버튼은 고정된 왼쪽 열의 합계도 표시합니다. 도구 모음이 생성되지 않은 경우, columnPinning 속성을 활성화해도 효과가 없으며 버튼이 숨겨집니다.

그만큼 IgbDataGridToolbar 도구 모음에 제목을 추가하는 등의 추가 속성을 제공합니다. ToolbarTitle 속성, 텍스트 배치 IgbButton 설정하여 columnPinningText 속성을 설정하고 UI를 숨기는 열에 제목 헤더를 추가합니다. columnPinningTitle.

Demo

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)
);
            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 IgniteUI.Blazor.Controls

<div class="container vertical">

    <div class="container vertical">

        @if (Data != null)
        {
            <IgbDataGridToolbar TargetGrid="Grid" ToolbarTitle="Global Sales"
                             ColumnPinning="true">
            </IgbDataGridToolbar>
            <div style="overflow: hidden">
                <IgbDataGrid Height="100%" Width="100%"
                @ref="Grid"
                DataSource="Data"
                AutoGenerateColumns="false">
                    <IgbTextColumn Field="ID" Pinned="PinnedPositions.Left" Width="@("*>110")" />
                    <IgbTextColumn Field="FirstName" Pinned="PinnedPositions.Left" Width="@("*>190")" />
                    <IgbTextColumn Field="LastName" Pinned="PinnedPositions.Left" Width="@("*>190")" />
                    <IgbDateTimeColumn Field="Birthday" Width="@("*>170")" />
                    <IgbNumericColumn Field="Age" Width="@("*>120")" />
                    <IgbImageColumn IsEditable="false" Field="CountryFlag" />
                    <IgbTextColumn Field="Street" Width="@("*>160")"/>
                    <IgbTextColumn Field="City" Width="260"/>
                    <IgbTextColumn Field="Country" Width="@("*>170")"/>
                    <IgbNumericColumn Field="Salary" Width="@("*>170")"/>
                    <IgbNumericColumn Field="Sales" Width="@("*>120")"/>
                    <IgbNumericColumn Field="Salary" Width="@("*>120")" PositivePrefix="$"
                        ShowGroupingSeparator="true"
                        MaxFractionDigits="0"
                        MinFractionDigits="0" />
                </IgbDataGrid>
            </div>
        }

    </div>
</div>

@code {

    private List<Employee> Data;
    private IgbDataGrid grid;
    public IgbDataGrid Grid
    {
        get
        {
            return grid;
        }
        set
        {
            grid = value;
            StateHasChanged();
        }
    }

    protected override void OnInitialized()
    {
;

        this.Data = EmployeeData.Create(200, false);
    }
}razor

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

Code Snippet

<IgbDataGridToolbar TargetGrid="DataGridRef"
    ToolbarTitle="Grid Toolbar Title"
    ColumnPinning="true"
    ColumnPinningText="Pinning"
    ColumnPinningTitle="Column Pinning" />
<IgbDataGrid Height="100%" Width="100%"
    @ref="DataGridRef"
    DataSource="DataSource" />

@code {
    private IgbDataGrid grid;
    public IgbDataGrid DataGridRef
    {
        get
        {
            return grid;
        }
        set
        {
            grid = value;
            StateHasChanged();
        }
    }
}
razor

API References

IgbButton
IgbDataGridToolbar
PinColumn
PinnedPositions
Pinned