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 Cell Activation

Ignite UI for Blazor 그리드 셀을 키보드로 탐색할 수 있는 셀 활성화 기능을 지원합니다. 이는 그리드의 ActivationMode 속성을 Cell로 설정하여 활성화합니다.

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

無料で試してみる

Blazor Grid Cell Activation Example

EXAMPLE

MODULES

DATA GENERATOR

DATA SOURCE

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(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="container vertical">
        <div class="options horizontal">
            <label>
                Enter Key Mode:
                <select @bind="EnterKeyMode">
                    <option>@EnterKeyBehaviors.Edit</option>
                    <option>@EnterKeyBehaviors.MoveDown</option>
                    <option>@EnterKeyBehaviors.MoveLeft</option>
                    <option>@EnterKeyBehaviors.MoveRight</option>
                    <option>@EnterKeyBehaviors.MoveUp</option>
                    <option>@EnterKeyBehaviors.None</option>
                </select>
            </label>
            <label>
                Enter Key After Edit Mode:
                <select @bind="EnterKeyAfterEditMode" disabled="@EditDisabled">
                    <option>@EnterKeyBehaviorAfterEdit.MoveDown</option>
                    <option>@EnterKeyBehaviorAfterEdit.MoveLeft</option>
                    <option>@EnterKeyBehaviorAfterEdit.MoveRight</option>
                    <option>@EnterKeyBehaviorAfterEdit.MoveUp</option>
                    <option>@EnterKeyBehaviorAfterEdit.None</option>
                </select>
            </label>
        </div>
        @if (Data != null)
        {
        <div style="overflow: hidden">
            <IgbDataGrid Height="100%" Width="100%"
                  DataSource="Data"
                  EnterBehavior="@EnterKeyMode"
                  EnterBehaviorAfterEdit="@EnterKeyAfterEditMode"
                  EditMode="@CanEdit"
                  AutoGenerateColumns="false"
                  SelectionMode="DataGridSelectionMode.SingleRow"
                  ActivationMode="GridActivationMode.Cell">
                <IgbTextColumn Width="@("*>170")" Field="Name" />
                <IgbImageColumn Width="@("*>120")" IsEditable="false" Field="Photo" PaddingTop="5" PaddingBottom="5" ContentOpacity="1" HorizontalAlignment="@CellContentHorizontalAlignment.Center"/>
                <IgbNumericColumn Width="@("*>100")" Field="Age" HorizontalAlignment="@CellContentHorizontalAlignment.Center"/>
                <IgbTextColumn Width="@("*>150")" Field="Street" HeaderText="Address" />
                <IgbTextColumn Width="@("*>130")"Field="City"  />
                <IgbImageColumn Width="@("*>120")" IsEditable="false" Field="CountryFlag" HeaderText="Country" PaddingTop="5" PaddingBottom="5" ContentOpacity="1" />
                <IgbTextColumn Field="Phone" Width="@("*>120")" />
                <IgbDateTimeColumn Width="@("*>150")" Field="Birthday" HorizontalAlignment="@CellContentHorizontalAlignment.Center"/>
                <IgbNumericColumn Width="@("*>170")" Field="Salary" PositivePrefix="$" ShowGroupingSeparator="true" MinFractionDigits="2" />
                <IgbTextColumn Width="@("*>150")" Field="Email" />
            </IgbDataGrid>
        </div>
        }

    </div>
</div>

@code {

    private object Data;
    private bool EditDisabled { get; set; }

    private EditModeType _canEdit;
    public EditModeType CanEdit
    {
        get { return _canEdit; }
        set
        {
            _canEdit = value;
        }
    }

    private EnterKeyBehaviors _enterKeyMode;
    public EnterKeyBehaviors EnterKeyMode
    {
        get { return _enterKeyMode; }
        set
        {
            _enterKeyMode = value;
            if (_enterKeyMode == EnterKeyBehaviors.Edit)
            {
                EditDisabled = false;
                CanEdit = EditModeType.Cell;
            }
            else
            {
                EditDisabled = true;
                CanEdit = EditModeType.None;
            }
        }
    }

    private EnterKeyBehaviorAfterEdit _enterKeyAfterEditMode;
    public EnterKeyBehaviorAfterEdit EnterKeyAfterEditMode
    {
        get { return _enterKeyAfterEditMode; }
        set
        {
            _enterKeyAfterEditMode = value;
        }
    }

    protected override void OnInitialized()
    {

        this.Data = EmployeeData.Create(200, false);
        this.EnterKeyMode = EnterKeyBehaviors.Edit;
        this.EnterKeyAfterEditMode = EnterKeyBehaviorAfterEdit.MoveDown;
    }

}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.

Excel Style Navigation

EnterBehaviorAfterEdit 속성은 편집 모드에서 Enter 키를 누른 후 위, 아래, 왼쪽 또는 오른쪽으로 다음 셀로 이동하도록 그리드를 구성합니다. 그렇지 않으면 그리드의 EnterBehavior 속성을 사용하여 편집 모드가 아닌 위, 아래, 왼쪽 또는 오른쪽에서 다른 셀로 이동할 수 있습니다.

Keyboard Navigation

그리드의 ActivationMode 속성을 로 Cell 설정하면 데이터 그리드에서 다양한 키보드 탐색 옵션을 사용할 수 있습니다. 다음은 각 키 누름/조합에 대한 설명과 현재 활성화된 셀에 대한 상대적인 효과입니다.

• ↑: 한 셀 위로 이동합니다.
• ↓: 한 셀 아래로 이동합니다.
• ←: 현재 행에서만 한 셀을 왼쪽으로 이동합니다.
• →: 현재 행에서만 한 셀을 오른쪽으로 이동합니다.
• Page Up: 그리드를 한 뷰포트 페이지 위로 스크롤합니다.
• Page Down: 그리드를 한 뷰포트 페이지 아래로 스크롤합니다.
• Tab: 활성 셀을 오른쪽의 다음 셀로 이동하거나 해당 행의 마지막 셀에 도달한 경우 다음 행의 가장 왼쪽 셀로 이동합니다.
• Shift + Tab: 활성 셀을 왼쪽의 다음 셀로 이동하거나 해당 행의 첫 번째 셀에 도달한 경우 이전 행의 가장 오른쪽 셀로 이동합니다.
• Ctrl + ↑: 열의 맨 위 셀로 이동합니다.
• Ctrl + ↓: 열의 맨 아래 셀로 이동합니다.
• Ctrl + ←: 행의 가장 왼쪽 셀로 이동합니다.
• Ctrl + →: 행의 가장 오른쪽 셀로 이동합니다.
• Ctrl + Home: 그리드의 왼쪽 상단 셀로 이동합니다.
• Ctrl + End: 그리드의 오른쪽 하단 셀로 이동합니다.

API References

• ActivationMode
• Cell