DxTreeList.UnboundColumnData Event

Allows you to populate unbound columns with values.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.Grid.v26.1.dll

Declaration

[Parameter]
public Action<TreeListUnboundColumnDataEventArgs> UnboundColumnData { get; set; }

Parameters

Type	Description
TreeListUnboundColumnDataEventArgs	An object that contains data for this event.

Remarks

Unbound columns display values that are not stored in the assigned data collection. To create an unbound column, declare a DxTreeListDataColumn object in the Columns template and specify the following properties:

UnboundType

Indicates that the column is unbound and specifies its data type.

FieldName

Specifies a unique name that does not match field names in the bound data source.

Note

The TreeList does not support unbound columns when bound to a GridDevExtremeDataSource.

You can use one of the following APIs to populate unbound columns with data:

UnboundExpression

Specifies an expression used to calculate column values. An expression should use our Criteria Language Syntax and include field names, constants, operators, or functions. Unbound expression samples:

• "[Quantity] * [UnitPrice] * (1 - [BonusAmount])"
• "[FirstName] + ' ' + [LastName]"
• "[Country] == 'USA'"
• "[OrderDate] > #8/16/1994# AND [Quantity] > 20"

UnboundColumnData

Allows you to implement custom logic or obtain column values from a custom/external data source.

Example

The following code snippet creates two unbound columns:

• Q2 Sales uses UnboundExpression to calculate cell values.
• Q2 YoY Change (%) uses a UnboundColumnData event handler to obtain column data.

Razor

@inject ISalesByRegionDataProvider SalesByRegionDataProvider

<DxTreeList Data="TreeListData"
            KeyFieldName="ID"
            ParentKeyFieldName="RegionID"
            ShowAllRows="true"
            ColumnResizeMode="TreeListColumnResizeMode.NextColumn"
            TextWrapEnabled="false"
            SizeMode="Params.SizeMode"
            CssClass="max-h-480"
            UnboundColumnData="TreeList_UnboundColumnData">
    <Columns>
        <DxTreeListDataColumn FieldName="Region" />
        <DxTreeListDataColumn FieldName="AprilSales" DisplayFormat="c0" />
        <DxTreeListDataColumn FieldName="MaySales" DisplayFormat="c0" />
        <DxTreeListDataColumn FieldName="JuneSales" DisplayFormat="c0" />
        <DxTreeListDataColumn FieldName="Q2Sales"
                              Caption="Q2 Sales"
                              DisplayFormat="c0"
                              UnboundType="TreeListUnboundColumnType.Decimal"
                              UnboundExpression="[AprilSales] + [MaySales] + [JuneSales]" />
        <DxTreeListDataColumn FieldName="Q2YoYChange"
                              Caption="Q2 YoY Change (%)"
                              DisplayFormat="p0"
                              UnboundType="TreeListUnboundColumnType.Decimal" />
    </Columns>
</DxTreeList>

@code {
    object TreeListData { get; set; }

    protected override void OnInitialized() {
        TreeListData = SalesByRegionDataProvider.GenerateData();
    }

    void TreeList_UnboundColumnData(TreeListUnboundColumnDataEventArgs e) {
        if(e.FieldName == "Q2YoYChange") {
            var sales = ((SalesByRegion) e.DataItem);
            var currentValue = (decimal)e.GetRowValue("Q2Sales");
            var prevValue = sales.MonthlySalesPrev[3] + sales.MonthlySalesPrev[4] + sales.MonthlySalesPrev[5];
            e.Value = (currentValue - prevValue) / currentValue;
        }
    }
}

SalesByRegion.cs

namespace BlazorDemo.Data {
    public class SalesByRegion {
        public SalesByRegion(int id, int regionId, string region, decimal[] monthlySales, decimal[] monthlySalesPrev, double marketShare) {
            ID = id;
            RegionID = regionId;
            Region = region;
            MonthlySales = monthlySales;
            MonthlySalesPrev = monthlySalesPrev;
            MarketShare = marketShare;
        }
        public int ID { get; set; }
        public int RegionID { get; set; }
        public string Region { get; set; }
        public decimal[] MonthlySales { get; set; }
        public decimal[] MonthlySalesPrev { get; set; }
        public double MarketShare { get; set; }

        decimal Calc(decimal current, decimal previous) {
            return (current - previous) / current;
        }

        public decimal JanuarySales => MonthlySales[0];
        public decimal FebruarySales => MonthlySales[1];
        public decimal MarchSales => MonthlySales[2];
        public decimal AprilSales => MonthlySales[3];
        public decimal MaySales => MonthlySales[4];
        public decimal JuneSales => MonthlySales[5];
        public decimal JulySales => MonthlySales[6];
        public decimal AugustSales => MonthlySales[7];
        public decimal SeptemberSales => MonthlySales[8];
        public decimal OctoberSales => MonthlySales[9];
        public decimal NovemberSales => MonthlySales[10];
        public decimal DecemberSales => MonthlySales[11];

        public decimal JanuaryChange => Calc(JanuarySales, MonthlySalesPrev[0]);
        public decimal FebruaryChange => Calc(FebruarySales, MonthlySalesPrev[1]);
        public decimal MarchChange => Calc(MarchSales, MonthlySalesPrev[2]);
        public decimal AprilChange => Calc(AprilSales, MonthlySalesPrev[3]);
        public decimal MayChange => Calc(MaySales, MonthlySalesPrev[4]);
        public decimal JuneChange => Calc(JuneSales, MonthlySalesPrev[5]);
        public decimal JulyChange => Calc(JulySales, MonthlySalesPrev[6]);
        public decimal AugustChange => Calc(AugustSales, MonthlySalesPrev[7]);
        public decimal SeptemberChange => Calc(SeptemberSales, MonthlySalesPrev[8]);
        public decimal OctoberChange => Calc(OctoberSales, MonthlySalesPrev[9]);
        public decimal NovemberChange => Calc(NovemberSales, MonthlySalesPrev[10]);
        public decimal DecemberChange => Calc(DecemberSales, MonthlySalesPrev[11]);
    }
}

ISalesByRegionDataProvider.cs

using System.Collections.Generic;
using BlazorDemo.Data;

namespace BlazorDemo.DataProviders {
    public interface ISalesByRegionDataProvider {
        public List<SalesByRegion> GenerateData();
    }
}

SalesByRegionDataProvider.cs

using System.Collections.Generic;
using BlazorDemo.Data;

namespace BlazorDemo.DataProviders.Implementation {
    public class SalesByRegionDataProvider : ISalesByRegionDataProvider {
        public List<SalesByRegion> GenerateData() {
            return [
                new SalesByRegion(1, 0, "Europe",
                    [187200, 194400, 206400, 204200, 214700, 220100, 226600, 231500, 234300, 237300, 241000, 244700],
                    [178400, 185600, 195600, 195400, 203900, 209200, 215700, 220600, 223500, 226600, 230300, 234000], 0.7),

                new SalesByRegion(2, 1, "Austria",
                    [19000, 20000, 22000, 21000, 24000, 25000, 27000, 28000, 29000, 30000, 31000, 32000],
                    [17000, 18000, 19000, 19500, 21000, 22000, 24000, 25000, 26000, 27000, 28000, 29000], 0.92),

                new SalesByRegion(3, 1, "Belgium",
                    [10500, 10000, 9500, 10000, 10200, 10000, 9800, 9500, 8800, 9200, 9000, 8800],
                    [11800, 11500, 11400, 11700, 11600, 11400, 11200, 11000, 11000, 10800, 10600, 10400], 0.16),

                new SalesByRegion(4, 1, "Denmark",
                    [18000, 18500, 19000, 19500, 20000, 20500, 21000, 21500, 21000, 20500, 20000, 19500],
                    [17000, 17500, 18000, 18500, 19000, 19500, 20000, 20500, 20000, 19500, 19000, 18500], 0.56),

                new SalesByRegion(5, 1, "France",
                    [20000, 21000, 18000, 22000, 24000, 25000, 26000, 27000, 23000, 28000, 28500, 29000],
                    [19000, 20000, 21000, 20500, 22000, 23000, 24000, 25000, 25500, 26000, 26500, 27000], 0.51),

                new SalesByRegion(6, 1, "Germany",
                    [28000, 29000, 31000, 30500, 32000, 33000, 34000, 35000, 35500, 36000, 37000, 38000],
                    [26000, 27000, 29000, 28500, 30000, 31000, 32000, 33000, 33500, 34000, 35000, 36000], 0.93),

                new SalesByRegion(7, 1, "Ireland",
                    [8500, 9000, 9500, 9800, 10200, 10500, 10800, 11000, 11200, 11400, 11600, 11800],
                    [8200, 8700, 9200, 9500, 9900, 10200, 10500, 10700, 10900, 11100, 11300, 11500], 0.34),

                new SalesByRegion(8, 1, "Italy",
                    [15000, 15500, 16500, 16200, 17000, 17500, 18000, 18500, 19000, 19500, 20000, 20500],
                    [14500, 15000, 16000, 15700, 16500, 17000, 17500, 18000, 18500, 19000, 19500, 20000], 0.22),

                new SalesByRegion(9, 1, "Netherlands",
                    [8000, 8300, 8800, 8600, 9000, 9200, 9400, 9500, 9600, 9700, 9800, 9900],
                    [7800, 8100, 8600, 8400, 8800, 9000, 9200, 9300, 9400, 9500, 9600, 9700], 0.85),

                new SalesByRegion(10, 1, "Poland",
                    [7500, 7800, 8500, 8200, 8800, 9000, 9300, 9500, 9700, 9800, 10000, 10200],
                    [7200, 7500, 8200, 7900, 8500, 8700, 9000, 9200, 9400, 9500, 9700, 9900], 0.52),

                new SalesByRegion(11, 1, "Romania",
                    [4200, 4400, 4600, 4700, 4900, 5000, 5100, 5200, 5300, 5400, 5500, 5600],
                    [4000, 4200, 4400, 4500, 4700, 4800, 4900, 5000, 5100, 5200, 5300, 5400], 0.3),

                new SalesByRegion(12, 1, "Spain",
                    [10500, 10800, 11000, 11200, 11000, 10800, 10500, 10200, 10000, 9800, 9600, 9400],
                    [10500, 10700, 9800, 11700, 11500, 11300, 11000, 10700, 9200, 10300, 10100, 9900], 0.82),

                new SalesByRegion(13, 1, "Switzerland",
                    [8500, 8800, 9000, 9200, 9500, 9700, 10000, 10200, 10500, 10700, 11000, 11200],
                    [8700, 9000, 8300, 9400, 9700, 9900, 10200, 10400, 9700, 10900, 11200, 11400], 0.14),

                new SalesByRegion(14, 1, "United Kingdom",
                    [13000, 13300, 14000, 13800, 14300, 14600, 15000, 15200, 15500, 15800, 16000, 16300],
                    [12500, 12800, 13500, 13300, 13800, 14100, 14500, 14700, 15000, 15300, 15500, 15800], 0.91),

                new SalesByRegion(15, 1, "Ukraine",
                    [16000, 16500, 17500, 17000, 18000, 18500, 19000, 19500, 20000, 20500, 21000, 21500],
                    [15000, 15500, 16500, 16000, 17000, 17500, 18000, 18500, 19000, 19500, 20000, 20500], 0.6),

                new SalesByRegion(16, 0, "Asia",
                    [30000, 31700, 33300, 32500, 34900, 35800, 37500, 38400, 39300, 40200, 41000, 41800],
                    [27800, 29500, 31100, 30300, 32700, 33600, 35300, 36200, 37100, 38000, 38800, 39600], 0.52),

                new SalesByRegion(17, 16, "China",
                    [18000, 19000, 20000, 19500, 21000, 21500, 22500, 23000, 23500, 24000, 24500, 25000],
                    [16500, 17500, 18500, 18000, 19500, 20000, 21000, 21500, 22000, 22500, 23000, 23500], 0.82),

                new SalesByRegion(18, 16, "India",
                    [4000, 4200, 4500, 4400, 4700, 4800, 5000, 5200, 5300, 5400, 5500, 5600],
                    [3800, 4000, 4300, 4200, 4500, 4600, 4800, 5000, 5100, 5200, 5300, 5400], 0.44),

                new SalesByRegion(19, 16, "Japan",
                    [8000, 8500, 8800, 8600, 9200, 9500, 10000, 10200, 10500, 10800, 11000, 11200],
                    [7500, 8000, 8300, 8100, 8700, 9000, 9500, 9700, 10000, 10300, 10500, 10700], 0.7),

                new SalesByRegion(20, 0, "Oceania",
                    [9500, 9750, 10000, 10250, 10400, 10550, 10700, 10850, 10900, 10950, 11000, 11050],
                    [9200, 9450, 9700, 9950, 10100, 10250, 10400, 10550, 10600, 10650, 10700, 10750], 0.8),

                new SalesByRegion(21, 20, "Australia",
                    [7600, 7800, 8000, 8200, 8400, 8600, 8800, 9000, 9100, 9200, 9300, 9400],
                    [7300, 7500, 7700, 7900, 8100, 8300, 8500, 8700, 8800, 8900, 9000, 9100], 0.75),

                new SalesByRegion(22, 20, "New Zealand",
                    [1900, 1950, 2000, 2050, 2000, 1950, 1900, 1850, 1800, 1750, 1700, 1650],
                    [1900, 1950, 2000, 2050, 2000, 1950, 1900, 1850, 1800, 1750, 1700, 1650], 0.4),

                new SalesByRegion(23, 0, "Middle East",
                    [11000, 11300, 11600, 11800, 12000, 12200, 12500, 12700, 12900, 13000, 13200, 13400],
                    [10700, 11000, 11300, 11500, 11700, 11900, 12200, 12400, 12600, 12700, 12900, 13100], 0.58),

                new SalesByRegion(24, 23, "Saudi Arabia",
                    [4500, 4600, 4800, 4900, 5000, 5100, 5200, 5300, 5400, 5500, 5600, 5700],
                    [4300, 4400, 4600, 4700, 4800, 4900, 5000, 5100, 5200, 5300, 5400, 5500], 0.65),

                new SalesByRegion(25, 23, "United Arab Emirates",
                    [6500, 6700, 6800, 6900, 7000, 7100, 7300, 7400, 7500, 7500, 7600, 7700],
                    [6400, 6600, 6700, 6800, 6900, 7000, 7200, 7300, 7400, 7400, 7500, 7600], 0.35),

                new SalesByRegion(26, 0, "Africa",
                    [60300, 62200, 63900, 64350, 66300, 67550, 69200, 70450, 71800, 72850, 73900, 74950],
                    [58450, 60350, 62050, 62500, 64450, 65700, 67350, 68600, 69950, 71000, 72050, 73100], 0.41),

                new SalesByRegion(27, 26, "Egypt",
                    [7500, 7700, 7900, 8000, 8200, 8300, 8500, 8600, 8700, 8800, 8900, 9000],
                    [7300, 7500, 7700, 7800, 8000, 8100, 8300, 8400, 8500, 8600, 8700, 8800], 0.52),

                new SalesByRegion(28, 26, "Nigeria",
                    [14500, 15000, 15500, 15200, 16000, 16500, 17000, 17500, 18000, 18300, 18500, 18800],
                    [14000, 14500, 15000, 14700, 15500, 16000, 16500, 17000, 17500, 17800, 18000, 18300], 0.3),

                new SalesByRegion(29, 26, "South Africa",
                    [16000, 16500, 17000, 17200, 17500, 17700, 18000, 18200, 18500, 18700, 19000, 19200],
                    [15500, 16000, 16500, 16700, 17000, 17200, 17500, 17700, 18000, 18200, 18500, 18700], 0.62),

                new SalesByRegion(30, 26, "Kenya",
                    [10500, 10800, 11000, 11200, 11500, 11700, 12000, 12200, 12400, 12600, 12800, 13000],
                    [10200, 10500, 10700, 10900, 11200, 11400, 11700, 11900, 12100, 12300, 12500, 12700], 0.55),

                new SalesByRegion(31, 26, "Morocco",
                    [10000, 10300, 10500, 10700, 11000, 11200, 11500, 11700, 11900, 12100, 12300, 12500],
                    [9700, 10000, 10200, 10400, 10700, 10900, 11200, 11400, 11600, 11800, 12000, 12200], 0.48),

                new SalesByRegion(32, 26, "Ghana",
                    [1800, 1900, 2000, 2050, 2100, 2150, 2200, 2250, 2300, 2350, 2400, 2450],
                    [1750, 1850, 1950, 2000, 2050, 2100, 2150, 2200, 2250, 2300, 2350, 2400], 0.38),

                new SalesByRegion(33, 0, "North America",
                    [30000, 31000, 32000, 32500, 33500, 34100, 35100, 35500, 36000, 36500, 37000, 37500],
                    [28500, 29500, 30500, 31000, 32000, 32600, 33600, 34000, 34500, 35000, 35500, 36000], 0.84),

                new SalesByRegion(34, 33, "Canada",
                    [11000, 11300, 11700, 12000, 12300, 12600, 12900, 13100, 13400, 13700, 14000, 14300],
                    [10500, 10800, 11200, 11500, 11800, 12100, 12400, 12600, 12900, 13200, 13500, 13800], 0.64),

                new SalesByRegion(35, 33, "USA",
                    [19000, 19700, 20300, 20500, 21200, 21500, 22200, 22400, 22600, 22800, 23000, 23200],
                    [18000, 18700, 19300, 19500, 20200, 20500, 21200, 21400, 21600, 21800, 22000, 22200], 0.87),

                new SalesByRegion(36, 0, "South America",
                    [16000, 16600, 17100, 17500, 17900, 18300, 18700, 19100, 19400, 19700, 20000, 20300],
                    [15200, 15800, 16300, 16700, 17100, 17500, 17900, 18300, 18600, 18900, 19200, 19500], 0.32),

                new SalesByRegion(37, 36, "Argentina",
                    [5500, 5700, 5900, 6000, 6200, 6300, 6500, 6600, 6700, 6800, 6900, 7000],
                    [5200, 5400, 5600, 5700, 5900, 6000, 6200, 6300, 6400, 6500, 6600, 6700], 0.88),

                new SalesByRegion(38, 36, "Brazil",
                    [4200, 4400, 4500, 4600, 4700, 4800, 4900, 5000, 5100, 5200, 5300, 5400],
                    [4000, 4200, 4300, 4400, 4500, 4600, 4700, 4800, 4900, 5000, 5100, 5200], 0.1),

                new SalesByRegion(39, 36, "Chile",
                    [6300, 6500, 6700, 6900, 7000, 7200, 7300, 7500, 7600, 7700, 7800, 7900],
                    [6000, 6200, 6400, 6600, 6700, 6900, 7000, 7200, 7300, 7400, 7500, 7600], 0.7)
            ];
        }
    }
}

Run Demo: Unbound Columns