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 Merging
Ignite UI for Blazor 셀 병합을 지원합니다. 특정 열에 대한 인접한 형제 레코드에 동일한 값이 포함되어 있는 경우 옵트인하여 감지할 수 있습니다. 셀이 활성화되지 않았거나 선택되지 않았거나 편집 모드에 있지 않은 경우 값이 셀 전체에 표시됩니다.
Blazor Grid Cell Merging 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();
}
}
}csusing System;
using System.Collections;
using System.Collections.Generic;
namespace Infragistics.Samples
{
public class Region
{
public string Name { get; set; }
public List<string> Countries { get; set; }
}
public class PortfolioData // LiveFinancialData
{
public static Random random = new Random();
public static List<string> DealType = new List<string>() { "Buy", "Sell" };
public static List<string> Contracts = new List<string>() { "Forwards", "Futures", "Options", "Swap", "CFD" };
public static List<string> Settlements = new List<string>() { "Credit", "Cash", "Loan" };
public static List<string> SectorTypes = new List<string>() { "Public", "Private", "Government" };
public static List<string> CurrencyTypes = new List<string>() { "USD", "EUR", "PLN", "GBP", "YEN" };
public static List<string> CountryRisks = new List<string>() { "Low", "High" };
public static List<string> SecurityTypes = new List<string>() { "Poor", "Good", "High", };
public static List<string> IssuerNames = new List<string>() { "American Airlines", "Delta Airlines", "Southwest", "FedEx", };
public static List<string> RatingTypes = new List<string>() { "AAA", "BBB", "CCC", };
public static List<PortfolioInfo> DataItems = GetDataItems();
public static List<Region> Regions = GetRegions();
public static List<PortfolioInfo> Create(int count)
{
var dataItems = new List<PortfolioInfo>();
var defaultItem = GetDefaultData();
for (int i = 0; i < count; i++)
{
var rand = (int)Math.Floor(random.NextDouble() * DataItems.Count);
var region = DataRandomizer.GetItem(Regions) as Region;
var item = DataItems[rand].Clone();
item.Region = region.Name;
// generating random values of properties
item.Settlement = DataRandomizer.GetItem(Settlements).ToString();
item.Contract = DataRandomizer.GetItem(Contracts).ToString();
item.Country = DataRandomizer.GetItem(region.Countries).ToString();
item.Risk = DataRandomizer.GetItem(CountryRisks).ToString();
item.Sector = DataRandomizer.GetItem(SectorTypes).ToString();
item.Currency = DataRandomizer.GetItem(CurrencyTypes).ToString();
item.Security = DataRandomizer.GetItem(SecurityTypes).ToString();
item.Issuer = DataRandomizer.GetItem(IssuerNames).ToString();
item.Maturity = DataRandomizer.GetDate();
item.Rating = DataRandomizer.GetItem(RatingTypes).ToString();
// setting default properties
item.IndGroup = defaultItem.IndGroup;
item.IndSector = defaultItem.IndSector;
item.IndCategory = defaultItem.IndCategory;
item.Fitch = defaultItem.Fitch;
item.Collateral = defaultItem.Collateral;
item.Transactions = defaultItem.Transactions;
item.Spread = defaultItem.Spread;
item.KRD_1YR = defaultItem.KRD_1YR;
item.KRD_3YR = defaultItem.KRD_3YR;
item.KRD_5YR = defaultItem.KRD_5YR;
item.ID = i;
RandomizeDataValues(item);
dataItems.Add(item);
}
return dataItems;
}
public static PortfolioInfo GetDefaultData()
{
return new PortfolioInfo
{
IndGroup = "Airlines",
IndSector = "Consumer, Cyclical",
IndCategory = "Airlines",
Fitch = "N.A.",
Collateral = "Assets",
Transactions = "1765866",
CPN = 7.875,
Maturity = new DateTime(2022, 1, 1),
Spread = 28.302,
KRD_3YR = 0.00006,
KRD_5YR = 0,
KRD_1YR = -0.00187,
};
}
public static List<Region> GetRegions()
{
var data = new List<Region>
{
new Region {
Name = "North America",
Countries = new List<string>() {"Canada", "United States", "Mexico" }
},
new Region {
Name = "Middle East",
Countries = new List<string>() {"Turkey", "Iraq", "Saudi Arabia", "Syria", "UAE", "Israel", "Jordan", "Lebanon", "Oman", "Kuwait", "Qatar", "Bahrain", "Iran" }
},
new Region {
Name = "Europe",
Countries = new List<string>() {
"Russia", "Germany", "France", "United Kingdom", "Italy", "Spain", "Poland", "Romania", "Netherlands", "Belgium", "Greece",
"Portugal", "Czechia", "Hungary", "Sweden", "Austria", "Switzerland", "Bulgaria", "Denmark", "Finland", "Slovakia", "Norway",
"Ireland", "Croatia", "Slovenia", "Estonia", "Iceland"
}
},
new Region {
Name = "Africa",
Countries= new List<string>() { "Nigeria", "Ethiopia", "Egypt", "South Africa", "Algeria", "Morocco", "Cameroon", "Niger", "Senegal", "Tunisia", "Libya" }
},
new Region {
Name = "Asia Pacific",
Countries = new List<string>() {
"Afghanistan", "Australia", "Azerbaijan", "China", "Hong Kong", "India", "Indonesia", "Japan",
"Malaysia", "New Zealand", "Pakistan", "Philippines", "Korea", "Singapore", "Taiwan", "Thailand"}
},
new Region {
Name = "South America",
Countries = new List<string>() { "Argentina", "Bolivia", "Brazil", "Chile", "Colombia", "Ecuador", "Guyana", "Paraguay", "Peru", "Suriname", "Uruguay", "Venezuela" }
},
};
return data;
}
#region Default Data Items
public static List<PortfolioInfo> GetDataItems()
{
var data = new List<PortfolioInfo>()
{
new PortfolioInfo {
Category = "Metal",
Type = "Gold",
Spread = 0.01,
Open = 1281.10,
Price = 1280.7317,
Buy = 1280.7267,
Sell = 1280.7367,
Change = -0.3683,
ChangePercent = -0.0287,
Volume = 48387,
DailyHigh = 1289.50,
DailyLow = 1279.10,
YearlyHigh = 1306,
YearlyLow = 1047.20,
YearlyStart = 1176.60,
ChangeOnYear = 8.8502
},
new PortfolioInfo {
Category = "Metal",
Type = "Silver",
Spread = 0.01,
Open = 17.43,
Price = 17.42,
Buy = 17.43,
Sell = 17.43,
Change = -0.01,
ChangePercent = -0.0287,
Volume = 48387,
DailyHigh = 1289.50,
DailyLow = 1279.10,
YearlyHigh = 1306,
YearlyLow = 1047.20,
YearlyStart = 1176.60,
ChangeOnYear = 8.8502
},
new PortfolioInfo {
Category= "Metal",
Type = "Copper",
Spread = 0.02,
Open = 2.123,
Price = 2.113,
Buy = 2.123,
Sell = 2.123,
Change = -0.01,
ChangePercent = -0.471,
Volume = 28819,
DailyHigh = 2.16,
DailyLow = 2.11,
YearlyHigh = 2.94,
YearlyLow = 1.96,
YearlyStart = 2.45,
ChangeOnYear = -13.7551
},
new PortfolioInfo {
Category = "Metal",
Type = "Platinum",
Spread = 0.01,
Open = 1071.60,
Price = 1071.0993,
Buy = 1071.0943,
Sell = 1071.1043,
Change = -0.5007,
ChangePercent = -0.0467,
Volume = 3039,
DailyHigh = 1081.20,
DailyLow = 1070.50,
YearlyHigh = 1120.60,
YearlyLow = 812.40,
YearlyStart = 966.50,
ChangeOnYear = 10.8225
},
new PortfolioInfo {
Category = "Metal",
Type = "Palladium",
Spread = 0.01,
Open = 600.55,
Price = 601.0005,
Buy = 600.9955,
Sell = 601.0055,
Change = 0.4505,
ChangePercent = 0.075,
Volume = 651,
DailyHigh = 607.20,
DailyLow = 598.40,
YearlyHigh = 690,
YearlyLow = 458.6,
YearlyStart = 574.3,
ChangeOnYear = 4.6492
},
new PortfolioInfo
{
Category = "Oil",
Type = "Oil",
Spread = 0.015,
Open = 45.54,
Price = 45.7899,
Buy = 45.7824,
Sell = 45.7974,
Change = 0.2499,
ChangePercent = 0.5487,
Volume = 107196,
DailyHigh = 45.94,
DailyLow = 45.00,
YearlyHigh = 65.28,
YearlyLow = 30.79,
YearlyStart = 48.035,
ChangeOnYear = -4.6739
},
new PortfolioInfo
{
Category = "Oil",
Type = "Brent",
Spread = 0.01,
Open = 46.06,
Price = 46.05,
Buy = 46.06,
Sell = 46.06,
Change = -0.01,
ChangePercent = -0.0217,
Volume = 59818,
DailyHigh = 46.48,
DailyLow = 45.60,
YearlyHigh = 71.14,
YearlyLow = 30.02,
YearlyStart = 50.58,
ChangeOnYear = -8.9561
},
new PortfolioInfo
{
Category = "Oil",
Type = "Natural Gas",
Spread = 0.02,
Open = 2.094,
Price = 2.104,
Buy = 2.094,
Sell = 2.094,
Change = 0.01,
ChangePercent = 0.4776,
Volume = 2783,
DailyHigh = 2.11,
DailyLow = 2.09,
YearlyHigh = 3.20,
YearlyLow = 1.84,
YearlyStart = 2.52,
ChangeOnYear = -16.5079
},
new PortfolioInfo
{
Category = "Oil",
Type = "Gas",
Spread = 0.015,
Open = 1.5086,
Price = 1.9532,
Buy = 1.9457,
Sell = 1.9607,
Change = 0.4446,
ChangePercent = 29.4686,
Volume = 2646,
DailyHigh = 1.9532,
DailyLow = 1.50,
YearlyHigh = 2.05,
YearlyLow = 1.15,
YearlyStart = 1.60,
ChangeOnYear = 22.0727
},
new PortfolioInfo
{
Category = "Oil",
Type = "Diesel",
Spread = 0.015,
Open = 1.3474,
Price = 1.3574,
Buy = 1.3474,
Sell = 1.3474,
Change = 0.01,
ChangePercent = 0.7422,
Volume = 2971,
DailyHigh = 1.36,
DailyLow = 1.34,
YearlyHigh = 2.11,
YearlyLow = 0.92,
YearlyStart = 1.515,
ChangeOnYear = -10.4026
},
new PortfolioInfo
{
Category = "Oil",
Type = "Ethanol",
Spread = 0.01,
Open = 1.512,
Price = 2.7538,
Buy = 2.7488,
Sell = 2.7588,
Change = 1.2418,
ChangePercent = 82.1323,
Volume = 14,
DailyHigh = 2.7538,
DailyLow = 1.1168,
YearlyHigh = 2.7538,
YearlyLow = 1.1168,
YearlyStart = 1.475,
ChangeOnYear = 86.7011
},
new PortfolioInfo
{
Category = "Oil",
Type = "Crude",
Spread = 0.02,
Open = 27.55,
Price = 27.58,
Buy = 27.55,
Sell = 27.55,
Change = 0.03,
ChangePercent = 0.1089,
Volume = 1200,
DailyHigh = 27.55,
DailyLow = 27.55,
YearlyHigh = 29.32,
YearlyLow = 21.28,
YearlyStart = 25.30,
ChangeOnYear = 9.0119
},
new PortfolioInfo
{
Category = "Oil",
Type = "Coal",
Spread = 0.015,
Open = 0.4363,
Price = 0.4163,
Buy = 0.4363,
Sell = 0.4363,
Change = -0.02,
ChangePercent = -4.584,
Volume = 300,
DailyHigh = 0.4363,
DailyLow = 0.4363,
YearlyHigh = 0.4841,
YearlyLow = 0.3954,
YearlyStart = 0.4398,
ChangeOnYear = -5.3326
},
new PortfolioInfo
{
Category = "Agriculture",
Type = "Wheat",
Spread = 0.01,
Open = 465.50,
Price = 465.52,
Buy = 465.50,
Sell = 465.50,
Change = 0.02,
ChangePercent = 0.0043,
Volume = 4318,
DailyHigh = 467.00,
DailyLow = 463.25,
YearlyHigh = 628.50,
YearlyLow = 449.50,
YearlyStart = 539.00,
ChangeOnYear = -13.6327
},
new PortfolioInfo
{
Category = "Agriculture",
Type = "Corn",
Spread = 0.01,
Open = 379.50,
Price = 379.8026,
Buy = 379.7976,
Sell = 379.8076,
Change = 0.3026,
ChangePercent = 0.0797,
Volume = 11266,
DailyHigh = 381.00,
DailyLow = 377.75,
YearlyHigh = 471.25,
YearlyLow = 351.25,
YearlyStart = 411.25,
ChangeOnYear = -7.6468
},
new PortfolioInfo
{
Category = "Agriculture",
Type = "Sugar",
Spread = 0.01,
Open = 15.68,
Price = 14.6742,
Buy = 14.6692,
Sell = 14.6792,
Change = -1.0058,
ChangePercent = -6.4146,
Volume = 4949,
DailyHigh = 15.70,
DailyLow = 14.6742,
YearlyHigh = 16.87,
YearlyLow = 11.37,
YearlyStart = 14.12,
ChangeOnYear = 3.9249
},
new PortfolioInfo
{
Category = "Agriculture",
Type = "Soybean",
Spread = 0.01,
Open = 1038.00,
Price = 1038.6171,
Buy = 1038.6121,
Sell = 1038.6221,
Change = 0.6171,
ChangePercent = 0.0595,
Volume = 20356,
DailyHigh = 1044.00,
DailyLow = 1031.75,
YearlyHigh = 1057.00,
YearlyLow = 859.50,
YearlyStart = 958.25,
ChangeOnYear = 8.3869
},
new PortfolioInfo
{
Category = "Agriculture",
Type = "Soy oil",
Spread = 0.01,
Open = 33.26,
Price = 33.7712,
Buy = 33.7662,
Sell = 33.7762,
Change = 0.5112,
ChangePercent = 1.5371,
Volume = 10592,
DailyHigh = 33.7712,
DailyLow = 33.06,
YearlyHigh = 35.43,
YearlyLow = 26.61,
YearlyStart = 31.02,
ChangeOnYear = 8.8692
},
new PortfolioInfo
{
Category = "Agriculture",
Type = "Soy Meat",
Spread = 0.01,
Open = 342.60,
Price = 342.62,
Buy = 342.60,
Sell = 342.60,
Change = 0.02,
ChangePercent = 0.0058,
Volume = 5646,
DailyHigh = 345.40,
DailyLow = 340.30,
YearlyHigh = 353.40,
YearlyLow = 261.70,
YearlyStart = 307.55,
ChangeOnYear = 11.403
},
new PortfolioInfo
{
Category = "Agriculture",
Type = "OJ Future",
Spread = 0.01,
Open = 140.60,
Price = 140.1893,
Buy = 140.1843,
Sell = 140.1943,
Change = -0.4107,
ChangePercent = -0.2921,
Volume = 7000,
DailyHigh = 140.1893,
DailyLow = 0.00,
YearlyHigh = 155.95,
YearlyLow = 113.00,
YearlyStart = 134.475,
ChangeOnYear = 4.2493
},
new PortfolioInfo
{
Category = "Agriculture",
Type = "Coffee",
Spread = 0.01,
Open = 125.70,
Price = 125.69,
Buy = 125.70,
Sell = 125.70,
Change = -0.01,
ChangePercent = -0.008,
Volume = 1654,
DailyHigh = 125.80,
DailyLow = 125.00,
YearlyHigh = 155.75,
YearlyLow = 115.35,
YearlyStart = 135.55,
ChangeOnYear = -7.2741
},
new PortfolioInfo
{
Category = "Agriculture",
Type = "Cocoa",
Spread = 0.01,
Open = 3076.00,
Price = 3076.03,
Buy = 3076.00,
Sell = 3076.00,
Change = 0.03,
ChangePercent = 0.001,
Volume = 978,
DailyHigh = 3078.00,
DailyLow = 3066.00,
YearlyHigh = 3406.00,
YearlyLow = 2746.00,
YearlyStart = 3076.00,
ChangeOnYear = 0.001
},
new PortfolioInfo
{
Category = "Agriculture",
Type = "Rice",
Spread = 0.01,
Open = 11.245,
Price = 10.4154,
Buy = 10.4104,
Sell = 10.4204,
Change = -0.8296,
ChangePercent = -7.3779,
Volume = 220,
DailyHigh = 11.38,
DailyLow = 10.4154,
YearlyHigh = 14.14,
YearlyLow = 9.70,
YearlyStart = 11.92,
ChangeOnYear = -12.6228
},
new PortfolioInfo
{
Category = "Agriculture",
Type = "Oats",
Spread = 0.01,
Open = 194.50,
Price = 194.2178,
Buy = 194.2128,
Sell = 194.2228,
Change = -0.2822,
ChangePercent = -0.1451,
Volume = 640,
DailyHigh = 195.75,
DailyLow = 194.00,
YearlyHigh = 241.25,
YearlyLow = 183.75,
YearlyStart = 212.50,
ChangeOnYear = -8.6034
},
new PortfolioInfo
{
Category = "Agriculture",
Type = "Milk",
Spread = 0.01,
Open = 12.87,
Price = 12.86,
Buy = 12.87,
Sell = 12.87,
Change = -0.01,
ChangePercent = -0.0777,
Volume = 7000,
DailyHigh = 12.89,
DailyLow = 12.81,
YearlyHigh = 16.96,
YearlyLow = 12.81,
YearlyStart = 14.885,
ChangeOnYear = -13.6043
},
new PortfolioInfo
{
Category = "Agriculture",
Type = "Cotton",
Spread = 0.01,
Open = 61.77,
Price = 61.76,
Buy = 61.77,
Sell = 61.77,
Change = -0.01,
ChangePercent = -0.0162,
Volume = 3612,
DailyHigh = 62.06,
DailyLow = 61.32,
YearlyHigh = 67.59,
YearlyLow = 54.33,
YearlyStart = 60.96,
ChangeOnYear = 1.3123
},
new PortfolioInfo
{
Category = "Agriculture",
Type = "Lumber",
Spread = 0.01,
Open = 303.90,
Price = 304.5994,
Buy = 304.5944,
Sell = 304.6044,
Change = 0.6994,
ChangePercent = 0.2302,
Volume = 200,
DailyHigh = 304.5994,
DailyLow = 303.90,
YearlyHigh = 317.10,
YearlyLow = 236.00,
YearlyStart = 276.55,
ChangeOnYear = 10.1426
},
new PortfolioInfo
{
Category = "Livestock",
Type = "LV Cattle",
Spread = 0.01,
Open = 120.725,
Price = 120.705,
Buy = 120.725,
Sell = 120.725,
Change = -0.02,
ChangePercent = -0.0166,
Volume = 4000,
DailyHigh = 120.725,
DailyLow = 120.725,
YearlyHigh = 147.98,
YearlyLow = 113.90,
YearlyStart = 130.94,
ChangeOnYear = -7.8166
},
new PortfolioInfo
{
Category = "Livestock",
Type = "FD Cattle",
Spread = 0.01,
Open = 147.175,
Price = 148.6065,
Buy = 148.6015,
Sell = 148.6115,
Change = 1.4315,
ChangePercent = 0.9727,
Volume = 500,
DailyHigh = 148.6065,
DailyLow = 147.175,
YearlyHigh = 190.00,
YearlyLow = 138.10,
YearlyStart = 164.05,
ChangeOnYear = -9.4139
},
new PortfolioInfo
{
Category = "Livestock",
Type = "Lean Hogs",
Spread = 0.01,
Open = 81.275,
Price = 81.8146,
Buy = 81.8096,
Sell = 81.8196,
Change = 0.5396,
ChangePercent = 0.664,
Volume = 1000,
DailyHigh = 81.8146,
DailyLow = 81.275,
YearlyHigh = 83.98,
YearlyLow = 70.25,
YearlyStart = 77.115,
ChangeOnYear = 6.0943
},
new PortfolioInfo
{
Category = "Currencies",
Type = "USD IDX Future",
Spread = 0.02,
Open = 93.88,
Price = 93.7719,
Buy = 93.7619,
Sell = 93.7819,
Change = -0.1081,
ChangePercent = -0.1151,
Volume = 5788,
DailyHigh = 94.05,
DailyLow = 93.7534,
YearlyHigh = 100.70,
YearlyLow = 91.88,
YearlyStart = 96.29,
ChangeOnYear = -2.6151
},
new PortfolioInfo
{
Category = "Currencies",
Type = "USD/JPY Future",
Spread = 0.02,
Open = 9275.50,
Price = 9277.3342,
Buy = 9277.3242,
Sell = 9277.3442,
Change = 1.8342,
ChangePercent = 0.0198,
Volume = 47734,
DailyHigh = 9277.3342,
DailyLow = 0.93,
YearlyHigh = 9483.00,
YearlyLow = 0.93,
YearlyStart = 4741.965,
ChangeOnYear = 95.6432
},
new PortfolioInfo
{
Category = "Currencies",
Type = "GBP/USD Future",
Spread = 0.02,
Open = 1.4464,
Price = 1.1941,
Buy = 1.1841,
Sell = 1.2041,
Change = -0.2523,
ChangePercent = -17.4441,
Volume = 29450,
DailyHigh = 1.45,
DailyLow = 1.1941,
YearlyHigh = 1.59,
YearlyLow = 1.1941,
YearlyStart = 1.485,
ChangeOnYear = -19.59
},
new PortfolioInfo
{
Category = "Currencies",
Type = "AUD/USD Future",
Spread = 0.02,
Open = 0.7344,
Price = 0.7444,
Buy = 0.7344,
Sell = 0.7344,
Change = 0.01,
ChangePercent = 1.3617,
Volume = 36764,
DailyHigh = 0.74,
DailyLow = 0.73,
YearlyHigh = 0.79,
YearlyLow = 0.68,
YearlyStart = 0.735,
ChangeOnYear = 1.2789
},
new PortfolioInfo
{
Category = "Currencies",
Type = "USD/CAD Future",
Spread = 0.02,
Open = 0.7744,
Price = 0.9545,
Buy = 0.9445,
Sell = 0.9645,
Change = 0.1801,
ChangePercent = 23.2622,
Volume = 13669,
DailyHigh = 0.9545,
DailyLow = 0.77,
YearlyHigh = 0.9545,
YearlyLow = 0.68,
YearlyStart = 0.755,
ChangeOnYear = 26.4295
},
new PortfolioInfo
{
Category = "Currencies",
Type = "USD/CHF Future",
Spread = 0.02,
Open = 1.0337,
Price = 1.0437,
Buy = 1.0337,
Sell = 1.0337,
Change = 0.01,
ChangePercent = 0.9674,
Volume = 5550,
DailyHigh = 1.03,
DailyLow = 1.03,
YearlyHigh = 1.11,
YearlyLow = 0.98,
YearlyStart = 1.045,
ChangeOnYear = -0.1244
},
new PortfolioInfo
{
Category = "Index",
Type = "DOW Future",
Spread = 0.01,
Open = 17711.00,
Price = 17712.1515,
Buy = 17712.1465,
Sell = 17712.1565,
Change = 1.1515,
ChangePercent = 0.0065,
Volume = 22236,
DailyHigh = 17727.00,
DailyLow = 17642.00,
YearlyHigh = 18083.00,
YearlyLow = 15299.00,
YearlyStart = 16691.00,
ChangeOnYear = 6.118
},
new PortfolioInfo
{
Category = "Index",
Type = "S&P Future",
Spread = 0.01,
Open = 2057.50,
Price = 2056.6018,
Buy = 2056.5968,
Sell = 2056.6068,
Change = -0.8982,
ChangePercent = -0.0437,
Volume = 142780,
DailyHigh = 2059.50,
DailyLow = 2049.00,
YearlyHigh = 2105.50,
YearlyLow = 1794.50,
YearlyStart = 1950.00,
ChangeOnYear = 5.4668
},
new PortfolioInfo
{
Category = "Index",
Type = "NAS Future",
Spread = 0.01,
Open = 4341.25,
Price = 4341.28,
Buy = 4341.25,
Sell = 4341.25,
Change = 0.03,
ChangePercent = 0.0007,
Volume = 18259,
DailyHigh = 4347.00,
DailyLow = 4318.00,
YearlyHigh = 4719.75,
YearlyLow = 3867.75,
YearlyStart = 4293.75,
ChangeOnYear = 1.107
},
new PortfolioInfo
{
Category = "Index",
Type = "S&P MID MINI",
Spread = 0.01,
Open = 1454.30,
Price = 1455.7812,
Buy = 1455.7762,
Sell = 1455.7862,
Change = 1.4812,
ChangePercent = 0.1018,
Volume = 3380,
DailyHigh = 1455.7812,
DailyLow = 1448.00,
YearlyHigh = 1527.30,
YearlyLow = 1236.00,
YearlyStart = 1381.65,
ChangeOnYear = 5.3654
},
new PortfolioInfo
{
Category = "Index",
Type = "S&P 600 MINI",
Spread = 0.01,
Open = 687.90,
Price = 687.88,
Buy = 687.90,
Sell = 687.90,
Change = -0.02,
ChangePercent = -0.0029,
Volume = 3340,
DailyHigh = 0.00,
DailyLow = 0.00,
YearlyHigh = 620.32,
YearlyLow = 595.90,
YearlyStart = 608.11,
ChangeOnYear = 13.1177
},
new PortfolioInfo
{
Category = "Interest Rate",
Type = "US 30YR Future",
Spread = 0.01,
Open = 164.875,
Price = 164.1582,
Buy = 164.1532,
Sell = 164.1632,
Change = -0.7168,
ChangePercent = -0.4347,
Volume = 28012,
DailyHigh = 165.25,
DailyLow = 164.0385,
YearlyHigh = 169.38,
YearlyLow = 151.47,
YearlyStart = 160.425,
ChangeOnYear = 2.3271
},
new PortfolioInfo
{
Category = "Interest Rate",
Type = "US 2Y Future",
Spread = 0.01,
Open = 109.3984,
Price = 109.3884,
Buy = 109.3984,
Sell = 109.3984,
Change = -0.01,
ChangePercent = -0.0091,
Volume = 17742,
DailyHigh = 109.41,
DailyLow = 109.38,
YearlyHigh = 109.80,
YearlyLow = 108.62,
YearlyStart = 109.21,
ChangeOnYear = 0.1634
},
new PortfolioInfo
{
Category = "Interest Rate",
Type = "US 10YR Future",
Spread = 0.01,
Open = 130.5625,
Price = 130.5825,
Buy = 130.5625,
Sell = 130.5625,
Change = 0.02,
ChangePercent = 0.0153,
Volume = 189310,
DailyHigh = 130.63,
DailyLow = 130.44,
YearlyHigh = 132.64,
YearlyLow = 125.48,
YearlyStart = 129.06,
ChangeOnYear = 1.1797
},
new PortfolioInfo
{
Category = "Interest Rate",
Type = "Euro$ 3M",
Spread = 0.01,
Open = 99.18,
Price = 99.17,
Buy = 99.18,
Sell = 99.18,
Change = -0.01,
ChangePercent = -0.0101,
Volume = 29509,
DailyHigh = 99.18,
DailyLow = 99.17,
YearlyHigh = 99.38,
YearlyLow = 98.41,
YearlyStart = 98.895,
ChangeOnYear = 0.2781
}
};
return data;
}
#endregion
public static List<PortfolioInfo> UpdateAllPrices(List<PortfolioInfo> data)
{
var updateItems = new List<PortfolioInfo>();
foreach (var item in data)
{
var changeItem = item.Clone();
RandomizeDataValues(changeItem as PortfolioInfo);
updateItems.Add(changeItem);
}
return updateItems;
}
public static List<PortfolioInfo> UpdateRandomPrices(List<PortfolioInfo> data)
{
var updateItems = new List<PortfolioInfo>();
foreach (var item in data)
{
updateItems.Add(item.Clone());
}
var updatedCount = 0;
var start = (int)Math.Round(random.NextDouble() * 10);
var step = (int)Math.Round(random.NextDouble() * 10);
for (var i = start; i < data.Count; i += step)
{
var item = data[i].Clone();
RandomizeDataValues(item as PortfolioInfo);
updateItems[i] = item;
updatedCount++;
}
return data;
}
public static void RandomizeDataValues(PortfolioInfo item)
{
var priceChange = DataRandomizer.GetPriceChange(item.Price);
item.Change = priceChange.ByAmount;
item.Price = priceChange.New;
item.ChangePercent = priceChange.Percentage;
}
}
public static class DataRandomizer
{
public static Random random = new Random();
public static DateTime GetDate()
{
var year = DateTime.Now.Year;
var month = GetInteger(10, 12);
var day = GetInteger(10, 25);
return new DateTime(year, month, day);
}
public static object GetItem(IList list)
{
var index = GetInteger(0, list.Count - 1);
return list[index];
}
public static double GetNumber(double min, double max)
{
return Math.Round(min + (random.NextDouble() * (max - min)));
}
public static int GetInteger(double min, double max)
{
return (int)GetNumber(min, max);
}
public static PriceChange GetPriceChange(double oldPrice)
{
var rnd = float.Parse(random.NextDouble().ToString("N2"));
var volatility = 2;
var changePercent = 2 * volatility * rnd;
if (changePercent > volatility)
{
changePercent -= (2 * volatility);
}
var changeAmount = oldPrice * (changePercent / 100);
var newPrice = oldPrice + changeAmount;
var result = new PriceChange();
result.ByAmount = changeAmount;
result.New = Math.Round(newPrice * 100) / 100;
result.Old = Math.Round(oldPrice * 100) / 100;
result.Percentage = Math.Round(changePercent * 100) / 100;
return result;
}
}
public class PriceChange {
public double New { get; set; }
public double Old { get; set; }
public double ByAmount { get; set; }
public double Percentage { get; set; }
}
public class PortfolioInfo
{
public PortfolioInfo Clone()
{
return (PortfolioInfo)this.MemberwiseClone();
}
public double PriceHeat { get; set; }
public string IndGroup { get; set; }
public string IndSector { get; set; }
public string IndCategory { get; set; }
public string Fitch { get; set; }
public string Collateral { get; set; }
public string Transactions { get; set; }
public double CPN { get; set; }
public double Spread { get; set; }
public double KRD_3YR { get; set; }
public double KRD_5YR { get; set; }
public double KRD_1YR { get; set; }
public DateTime Maturity { get; set; }
public int ID { get; set; }
public string Settlement { get; set; }
public string Category { get; set; }
public string Contract { get; set; }
public string Country { get; set; }
public string Currency { get; set; }
public string Type { get; set; }
public double Open { get; set; }
public double Price { get; set; }
public double Buy { get; set; }
public string Rating { get; set; }
public string Region { get; set; }
public string Risk { get; set; }
public double Sell { get; set; }
public string Sector { get; set; }
public string Security { get; set; }
public string Issuer { get; set; }
public double Change { get; set; }
public double ChangePercent { get; set; }
public double Volume { get; set; }
public double DailyHigh { get; set; }
public double DailyLow { get; set; }
public double YearlyHigh { get; set; }
public double YearlyLow { get; set; }
public double YearlyStart { get; set; }
public double ChangeOnYear { get; set; }
}
public class UpdateResponse
{
public List<object> Data { get; set; }
public int RecordsUpdated { get; set; }
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="options horizontal">
<label class="options-label">Merged Cell Mode:</label>
<select @onchange="OnMergedCellModeChange">
<option>Always</option>
<option>Never</option>
<option>OnlyWhenSorted</option>
</select>
</div>
<div class="container vertical">
@if (Data != null)
{
<div style="overflow: hidden">
<IgbDataGrid Height="100%" Width="100%" MergedCellMode="@MergedCellSelection"
DataSource="Data"
AutoGenerateColumns="false"
ActivationMode="GridActivationMode.Cell"
HeaderClickAction="HeaderClickAction.SortByMultipleColumnsTriState">
<IgbTextColumn Width="@("*>140")" Field="Category" />
<IgbTextColumn Width="@("*>160")" Field="Type" />
<IgbTextColumn Width="@("*>140")" Field="Contract" />
<IgbTextColumn Width="@("*>150")" Field="Settlement" />
<IgbTextColumn Width="@("*>150")" Field="Region" />
<IgbTextColumn Width="@("*>160")" Field="Country" />
<IgbNumericColumn Width="@("*>140")" Field="Open" HeaderText="Open" ShowGroupingSeparator="true" PositivePrefix="$" MinFractionDigits="2" MaxFractionDigits="2" />
<IgbNumericColumn Width="@("*>140")" Field="Price" HeaderText="Close" ShowGroupingSeparator="true" PositivePrefix="$" MinFractionDigits="2" MaxFractionDigits="2" />
<IgbNumericColumn Width="@("*>130")" Field="Change" MinFractionDigits="2" MaxFractionDigits="2" />
<IgbNumericColumn Width="@("*>150")" Field="ChangePercent" NegativeSuffix="%" PositiveSuffix="%" MinFractionDigits="2" MaxFractionDigits="2" />
<IgbNumericColumn Width="@("*>110")" Field="Buy" ShowGroupingSeparator="true" PositivePrefix="$" MinFractionDigits="2" MaxFractionDigits="2" />
<IgbNumericColumn Width="@("*>110")" Field="Sell" ShowGroupingSeparator="true" PositivePrefix="$" MinFractionDigits="2" MaxFractionDigits="2" />
<IgbNumericColumn Width="@("*>130")" Field="Spread" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" />
<IgbNumericColumn Width="@("*>130")" Field="Volume" ShowGroupingSeparator="true" MinFractionDigits="0" MaxFractionDigits="0" />
<IgbNumericColumn Width="@("*>130")" Field="DailyHigh" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" PositivePrefix="$" />
<IgbNumericColumn Width="@("*>130")" Field="DailyLow" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" PositivePrefix="$" />
<IgbNumericColumn Width="@("*>130")" Field="YearlyHigh" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" PositivePrefix="$" />
<IgbNumericColumn Width="@("*>130")" Field="YearlyLow" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" PositivePrefix="$" />
<IgbNumericColumn Width="@("*>130")" Field="YearlyStart" ShowGroupingSeparator="true" MinFractionDigits="2" MaxFractionDigits="2" PositivePrefix="$" />
<IgbDateTimeColumn Width="@("*>140")" Field="Maturity" HorizontalAlignment="@CellContentHorizontalAlignment.Right" />
<IgbTextColumn Width="@("*>120")" Field="Currency" />
<IgbTextColumn Width="@("*>110")" Field="Risk" />
<IgbTextColumn Width="@("*>130")" Field="Sector" />
<IgbTextColumn Width="@("*>130")" Field="Security" />
<IgbTextColumn Width="@("*>170")" Field="Issuer" />
</IgbDataGrid>
</div>
}
</div>
</div>
@code {
private List<PortfolioInfo> Data;
private MergedCellMode MergedCellSelection { get; set; }
protected override void OnInitialized()
{
this.MergedCellSelection = MergedCellMode.Always;
this.Data = PortfolioData.Create(100);
}
private void OnMergedCellModeChange(ChangeEventArgs args)
{
string value = (string)args.Value;
if (value == "Always")
{
this.MergedCellSelection = MergedCellMode.Always;
}
else if (value == "Never")
{
this.MergedCellSelection = MergedCellMode.Never;
}
else if (value == "OnlyWhenSorted")
{
this.MergedCellSelection = MergedCellMode.OnlyWhenSorted;
}
else
{
this.MergedCellSelection = MergedCellMode.Default;
}
StateHasChanged();
}
}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.
개요
Blazor 데이터 그리드의 셀 병합은 전체 Blazor 그리드 또는 개별 열의 MergedCellMode 옵션을 사용하여 구성할 수 있습니다. 이 속성은 아래에 나열된 다음 옵션 중 하나로 설정할 수 있습니다.
Never: 그리드나 열이 셀을 병합하지 않습니다. 이것이 기본 동작입니다.Always: 그리드 또는 열이 항상 셀 병합을 시도합니다.OnlyWhenSorted: 그리드 또는 열은 열이 정렬될 때만 셀 병합을 시도합니다.
이 속성의 값에 관계없이 셀은 형제 레코드 간에만 병합될 수 있습니다.
셀 병합은 MergedCellEvaluationCriteria 속성을 사용하여 데이터 형식이 지정되었는지 여부에 따라 평가할 수 있습니다. 이는 전체 그리드 또는 개별 열에 적용 가능하며 아래 나열된 옵션 중 하나로 설정할 수 있습니다.
RawValue: 셀의 원시 값이 동일한 경우 인접한 행의 셀을 병합합니다. 이것이 기본값입니다.FormattedText: 셀의 서식이 지정된 값이 동일한 경우 인접한 행의 셀을 병합합니다.
API References
FormattedTextMergedCellEvaluationCriteriaMergedCellModeOnlyWhenSorted