Blazor Grid Multi-row Layout

The Multi-row Layout in the Ignite UI for Blazor extends the rendering capabilities of the Blazor Grid. The feature allows splitting a single data record into multiple visible rows.

Blazor Multi-row Layout Example

EXAMPLE

MODULES

DATA

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(IgbInputModule),
                typeof(IgbGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

using System;
using System.Collections.Generic;
public class CustomersDataItem
{
    public string ID { get; set; }
    public string Company { get; set; }
    public string ContactName { get; set; }
    public string ContactTitle { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Region { get; set; }
    public double PostalCode { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string Fax { get; set; }
}

public class CustomersData
    : List<CustomersDataItem>
{
    public CustomersData()
    {
        this.Add(new CustomersDataItem()
        {
            ID = @"ALFKI",
            Company = @"Alfreds Futterkiste",
            ContactName = @"Maria Anders",
            ContactTitle = @"Sales Representative",
            Address = @"Obere Str. 57",
            City = @"Berlin",
            Region = @"East",
            PostalCode = 12209,
            Country = @"Germany",
            Phone = @"030-0074321",
            Fax = @"030-0076545"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"ANATR",
            Company = @"Ana Trujillo Emparedados y helados",
            ContactName = @"Ana Trujillo",
            ContactTitle = @"Owner",
            Address = @"Avda. de la Constitución 2222",
            City = @"México D.F.",
            Region = @"South",
            PostalCode = 5021,
            Country = @"Mexico",
            Phone = @"(5) 555-4729",
            Fax = @"(5) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"ANTON",
            Company = @"Antonio Moreno Taquería",
            ContactName = @"Antonio Moreno",
            ContactTitle = @"Owner",
            Address = @"Mataderos 2312",
            City = @"México D.F.",
            Region = @"South",
            PostalCode = 5023,
            Country = @"Mexico",
            Phone = @"(5) 555-3932",
            Fax = @"(5) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"AROUT",
            Company = @"Around the Horn",
            ContactName = @"Thomas Hardy",
            ContactTitle = @"Sales Representative",
            Address = @"120 Hanover Sq.",
            City = @"London",
            Region = @"East",
            PostalCode = 22000,
            Country = @"UK",
            Phone = @"(171) 555-7788",
            Fax = @"(171) 555-6750"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"BERGS",
            Company = @"Berglunds snabbköp",
            ContactName = @"Christina Berglund",
            ContactTitle = @"Order Administrator",
            Address = @"Berguvsvägen 8",
            City = @"Luleå",
            Region = @"South",
            PostalCode = 17000,
            Country = @"Sweden",
            Phone = @"0921-12 34 65",
            Fax = @"0921-12 34 67"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"BLAUS",
            Company = @"Blauer See Delikatessen",
            ContactName = @"Hanna Moos",
            ContactTitle = @"Sales Representative",
            Address = @"Forsterstr. 57",
            City = @"Mannheim",
            Region = @"East",
            PostalCode = 68306,
            Country = @"Germany",
            Phone = @"0621-08460",
            Fax = @"0621-08924"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"BLONP",
            Company = @"Blondesddsl père et fils",
            ContactName = @"Frédérique Citeaux",
            ContactTitle = @"Marketing Manager",
            Address = @"24, place Kléber",
            City = @"Strasbourg",
            Region = @"East",
            PostalCode = 67000,
            Country = @"France",
            Phone = @"88.60.15.31",
            Fax = @"88.60.15.32"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"BOLID",
            Company = @"Bólido Comidas preparadas",
            ContactName = @"Martín Sommer",
            ContactTitle = @"Owner",
            Address = @"C/ Araquil, 67",
            City = @"Madrid",
            Region = @"East",
            PostalCode = 28023,
            Country = @"Spain",
            Phone = @"(91) 555 22 82",
            Fax = @"(91) 555 91 99"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"BONAP",
            Company = @"Bon app'",
            ContactName = @"Laurence Lebihan",
            ContactTitle = @"Owner",
            Address = @"12, rue des Bouchers",
            City = @"Marseille",
            Region = @"West",
            PostalCode = 13008,
            Country = @"France",
            Phone = @"91.24.45.40",
            Fax = @"91.24.45.41"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"BOTTM",
            Company = @"Bottom-Dollar Markets",
            ContactName = @"Elizabeth Lincoln",
            ContactTitle = @"Accounting Manager",
            Address = @"23 Tsawassen Blvd.",
            City = @"Tsawassen",
            Region = @"BC",
            PostalCode = 28000,
            Country = @"Canada",
            Phone = @"(604) 555-4729",
            Fax = @"(604) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"BSBEV",
            Company = @"B's Beverages",
            ContactName = @"Victoria Ashworth",
            ContactTitle = @"Sales Representative",
            Address = @"Fauntleroy Circus",
            City = @"London",
            Region = @"South",
            PostalCode = 10000,
            Country = @"UK",
            Phone = @"(171) 555-1212",
            Fax = @"(5) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"CACTU",
            Company = @"Cactus Comidas para llevar",
            ContactName = @"Patricio Simpson",
            ContactTitle = @"Sales Agent",
            Address = @"Cerrito 333",
            City = @"Buenos Aires",
            Region = @"East",
            PostalCode = 1010,
            Country = @"Argentina",
            Phone = @"(1) 135-5555",
            Fax = @"(1) 135-4892"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"CENTC",
            Company = @"Centro comercial Moctezuma",
            ContactName = @"Francisco Chang",
            ContactTitle = @"Marketing Manager",
            Address = @"Sierras de Granada 9993",
            City = @"México D.F.",
            Region = @"South",
            PostalCode = 5022,
            Country = @"Mexico",
            Phone = @"(5) 555-3392",
            Fax = @"(5) 555-7293"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"CHOPS",
            Company = @"Chop-suey Chinese",
            ContactName = @"Yang Wang",
            ContactTitle = @"Owner",
            Address = @"Hauptstr. 29",
            City = @"Bern",
            Region = @"East",
            PostalCode = 3012,
            Country = @"Switzerland",
            Phone = @"0452-076545",
            Fax = @"(5) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"COMMI",
            Company = @"Comércio Mineiro",
            ContactName = @"Pedro Afonso",
            ContactTitle = @"Sales Associate",
            Address = @"Av. dos Lusíadas, 23",
            City = @"Sao Paulo",
            Region = @"SP",
            PostalCode = 34000,
            Country = @"Brazil",
            Phone = @"(11) 555-7647",
            Fax = @"(5) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"CONSH",
            Company = @"Consolidated Holdings",
            ContactName = @"Elizabeth Brown",
            ContactTitle = @"Sales Representative",
            Address = @"Berkeley Gardens 12 Brewery",
            City = @"London",
            Region = @"South",
            PostalCode = 27000,
            Country = @"UK",
            Phone = @"(171) 555-2282",
            Fax = @"(171) 555-9199"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"DRACD",
            Company = @"Drachenblut Delikatessen",
            ContactName = @"Sven Ottlieb",
            ContactTitle = @"Order Administrator",
            Address = @"Walserweg 21",
            City = @"Aachen",
            Region = @"South",
            PostalCode = 52066,
            Country = @"Germany",
            Phone = @"0241-039123",
            Fax = @"0241-059428"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"DUMON",
            Company = @"Du monde entier",
            ContactName = @"Janine Labrune",
            ContactTitle = @"Owner",
            Address = @"67, rue des Cinquante Otages",
            City = @"Nantes",
            Region = @"East",
            PostalCode = 44000,
            Country = @"France",
            Phone = @"40.67.88.88",
            Fax = @"40.67.89.89"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"EASTC",
            Company = @"Eastern Connection",
            ContactName = @"Ann Devon",
            ContactTitle = @"Sales Agent",
            Address = @"35 King George",
            City = @"London",
            Region = @"East",
            PostalCode = 41000,
            Country = @"UK",
            Phone = @"(171) 555-0297",
            Fax = @"(171) 555-3373"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"ERNSH",
            Company = @"Ernst Handel",
            ContactName = @"Roland Mendel",
            ContactTitle = @"Sales Manager",
            Address = @"Kirchgasse 6",
            City = @"Graz",
            Region = @"South",
            PostalCode = 8010,
            Country = @"Austria",
            Phone = @"7675-3425",
            Fax = @"7675-3426"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"FAMIA",
            Company = @"Familia Arquibaldo",
            ContactName = @"Aria Cruz",
            ContactTitle = @"Marketing Assistant",
            Address = @"Rua Orós, 92",
            City = @"Sao Paulo",
            Region = @"SP",
            PostalCode = 27000,
            Country = @"Brazil",
            Phone = @"(11) 555-9857",
            Fax = @"(5) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"FISSA",
            Company = @"FISSA Fabrica Inter. Salchichas S.A.",
            ContactName = @"Diego Roel",
            ContactTitle = @"Accounting Manager",
            Address = @"C/ Moralzarzal, 86",
            City = @"Madrid",
            Region = @"East",
            PostalCode = 28034,
            Country = @"Spain",
            Phone = @"(91) 555 94 44",
            Fax = @"(91) 555 55 93"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"FOLIG",
            Company = @"Folies gourmandes",
            ContactName = @"Martine Rancé",
            ContactTitle = @"Assistant Sales Agent",
            Address = @"184, chaussée de Tournai",
            City = @"Lille",
            Region = @"South",
            PostalCode = 59000,
            Country = @"France",
            Phone = @"20.16.10.16",
            Fax = @"20.16.10.17"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"FOLKO",
            Company = @"Folk och fä HB",
            ContactName = @"Maria Larsson",
            ContactTitle = @"Owner",
            Address = @"Åkergatan 24",
            City = @"Bräcke",
            Region = @"East",
            PostalCode = 36000,
            Country = @"Sweden",
            Phone = @"0695-34 67 21",
            Fax = @"0695 33-4455"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"FRANK",
            Company = @"Frankenversand",
            ContactName = @"Peter Franken",
            ContactTitle = @"Marketing Manager",
            Address = @"Berliner Platz 43",
            City = @"München",
            Region = @"East",
            PostalCode = 80805,
            Country = @"Germany",
            Phone = @"089-0877310",
            Fax = @"089-0877451"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"FRANR",
            Company = @"France restauration",
            ContactName = @"Carine Schmitt",
            ContactTitle = @"Marketing Manager",
            Address = @"54, rue Royale",
            City = @"Nantes",
            Region = @"South",
            PostalCode = 44000,
            Country = @"France",
            Phone = @"40.32.21.21",
            Fax = @"40.32.21.20"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"FRANS",
            Company = @"Franchi S.p.A.",
            ContactName = @"Paolo Accorti",
            ContactTitle = @"Sales Representative",
            Address = @"Via Monte Bianco 34",
            City = @"Torino",
            Region = @"East",
            PostalCode = 10100,
            Country = @"Italy",
            Phone = @"011-4988260",
            Fax = @"011-4988261"
        });
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbGrid
        Name="grid"
        @ref="grid"
        Data="CustomersData"
        RowEditable="true"
        AllowFiltering="true"
        FilterMode="FilterMode.ExcelStyleFilter"
        PrimaryKey="Company"
        GroupingExpressions="GroupingExpression1">
            <IgbGridToolbar
            >
                <IgbGridToolbarTitle
                >
                </IgbGridToolbarTitle>

                <IgbGridToolbarActions
                >
                    <IgbGridToolbarPinning
                    >
                    </IgbGridToolbarPinning>

                    <IgbGridToolbarHiding
                    >
                    </IgbGridToolbarHiding>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumnLayout
            Header="ID">
                <IgbColumn
                Field="ID"
                RowStart="1"
                ColStart="1"
                RowEnd="3"
                Filterable="false"
                Width="150px">
                </IgbColumn>

            </IgbColumnLayout>

            <IgbColumnLayout
            Pinned="true"
            Header="Contact Details">
                <IgbColumn
                Field="Company"
                Header="Company"
                RowStart="1"
                ColStart="1"
                ColEnd="3"
                Sortable="true"
                Width="350px">
                </IgbColumn>

                <IgbColumn
                Field="ContactName"
                Header="Name"
                RowStart="2"
                ColStart="1"
                ColEnd="2"
                Groupable="true">
                </IgbColumn>

                <IgbColumn
                Field="ContactTitle"
                Header="Title"
                RowStart="2"
                ColStart="2"
                ColEnd="3"
                Groupable="true">
                </IgbColumn>

            </IgbColumnLayout>

            <IgbColumnLayout
            Pinned="false"
            Header="Address Details">
                <IgbColumn
                Field="Country"
                RowStart="1"
                ColStart="1"
                ColEnd="3"
                Groupable="true"
                Filterable="false"
                Width="220px">
                </IgbColumn>

                <IgbColumn
                Field="Region"
                RowStart="1"
                ColStart="3"
                ColEnd="5"
                Groupable="true"
                Filterable="false"
                Width="220px">
                </IgbColumn>

                <IgbColumn
                Field="PostalCode"
                RowStart="1"
                ColStart="5"
                ColEnd="7"
                Groupable="true"
                Filterable="false"
                Width="220px">
                </IgbColumn>

                <IgbColumn
                Field="City"
                RowStart="2"
                ColStart="1"
                ColEnd="4"
                Groupable="true"
                Filterable="false"
                Width="220px">
                </IgbColumn>

                <IgbColumn
                Field="Address"
                RowStart="2"
                ColStart="4"
                ColEnd="7"
                Filterable="false">
                </IgbColumn>

            </IgbColumnLayout>

            <IgbColumnLayout
            Header="Phone Details">
                <IgbColumn
                Field="Phone"
                RowStart="1"
                ColStart="1"
                ColEnd="2"
                Filterable="false"
                Width="220px">
                </IgbColumn>

                <IgbColumn
                Field="Fax"
                RowStart="2"
                ColStart="1"
                ColEnd="2"
                Filterable="false"
                Width="220px">
                </IgbColumn>

            </IgbColumnLayout>

        </IgbGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var grid = this.grid;

    }

    private IgbGrid grid;
    private IgbGroupingExpression[] _groupingExpression1 = null;
    public IgbGroupingExpression[] GroupingExpression1
    {
        get
        {
            if (this._groupingExpression1 == null)
            {
                var groupingExpression1 = new IgbGroupingExpression[1];
                var groupingExpression2 = new IgbGroupingExpression();
                groupingExpression2.FieldName = "Country";
                groupingExpression2.IgnoreCase = false;
                groupingExpression2.Dir = SortingDirection.Asc;
                groupingExpression1[0] = groupingExpression2;
                this._groupingExpression1 = groupingExpression1;
            }
            return this._groupingExpression1;
        }
    }

    private CustomersData _customersData = null;
    public CustomersData CustomersData
    {
        get
        {
            if (_customersData == null)
            {
                _customersData = new CustomersData();
            }
            return _customersData;
        }
    }

}razorCOPY CODE

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

The declaration of Multi-row Layout is achieved through IgbColumnLayout component. Each IgbColumnLayout component should be considered as a block, containing one or multiple IgbColumn components. Some of the grid features work on block level (those are listed in the "Feature Integration" section below). For example the virtualization will use the block to determine the virtual chunks, so for better performance split the columns into more IgbColumnLayout blocks if the layout allows it. There should be no columns outside of those blocks and no usage of IgbColumnGroup when configuring a multi-row layout. Multi-row Layout is implemented on top of the grid layout specification and should conform to its requirements.

The IgbColumn component exposes four IgbInput properties to determine the location and span of each cell:

• ColStart - column index from which the field is starting. This property is mandatory.
• RowStart - row index from which the field is starting. This property is mandatory.
• ColEnd - column index where the current field should end. The amount of columns between colStart and colEnd will determine the amount of spanning columns to that field. This property is optional. If not set defaults to colStart + 1.
• RowEnd - row index where the current field should end. The amount of rows between rowStart and rowEnd will determine the amount of spanning rows to that field. This property is optional. If not set defaults to rowStart + 1.

<IgbColumnLayout>
    <IgbColumn RowStart="1" RowEnd="3" ColStart="1" Field="ID"></IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout>
    <IgbColumn RowStart="1" ColStart="1" ColEnd="3" Field="CompanyName"></IgbColumn>
    <IgbColumn RowStart="2" ColStart="1" ColEnd="2" Field="ContactName"></IgbColumn>
    <IgbColumn RowStart="2" ColStart="2" ColEnd="3" Field="ContactTitle"></IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout>
    <IgbColumn RowStart="1" ColStart="1" ColEnd="3" Field="Country"></IgbColumn>
    <IgbColumn RowStart="1" ColStart="3" ColEnd="5" Field="Region"></IgbColumn>
    <IgbColumn RowStart="1" ColStart="5" ColEnd="7" Field="PostalCode"></IgbColumn>
    <IgbColumn RowStart="2" ColStart="1" ColEnd="4" Field="City"></IgbColumn>
    <IgbColumn RowStart="2" ColStart="4" ColEnd="7" Field="Address"></IgbColumn>
</IgbColumnLayout>
<IgbColumnLayout>
    <IgbColumn RowStart="1" ColStart="1" Field="Phone"></IgbColumn>
    <IgbColumn RowStart="2" ColStart="1" Field="Fax"></IgbColumn>
</IgbColumnLayout>
razor

The result of the above configuration can be seen on the screenshot below:

RowStart and ColStart properties must be set for each IgbColumn into a IgbColumnLayout. The IgbColumnLayout component is not verifying if the layout is correct and not throwing errors or warnings about that. The developers must make sure that the declaration of their layout is correct and complete, otherwise they may end up in broken layout with misalignments, overlaps and browser inconsistencies.

Feature Integration

Due to the completly different rendering approach of Multi-row Layout, some of the column features will work only on IgbColumnLayout component. Such features are Column Pinning and Column Hiding. Othes like - Sorting and Grouping will work in the same way - on the IgbColumn component.

• Filtering - only Excel Style Filtering is supported. Setting FilterMode explicitly to FilterMode.quickFilter has no effect.
• Paging - works on records, not visual rows.
• Group By - HideGroupedColumns option has no effect in Multi-row Layout. The grouped columns are always visible.

The following features are currently not supported:

• Column Moving
• Multi-column Headers
• Export to Excel
• Summaries

Keyboard Navigation

IgbGrid with Multi-Row Layouts provides build-in keyboard navigation.

Horizontal Navigation

• ← or → - move to the adjacent cell on the left/right within the current row unaffected by the column layouts that are defined. If the current cell spans on more than one row, ← and → should navigate to the first cell on the left and right with the same rowStart, unless you have navigated to some other adjacent cell before. The navigation stores the starting navigation cell and navigates to the cells with the same rowStart if possible.
• Ctrl + ← (HOME) or Ctrl + → (END) - navigate to the start or end of the row and select the cell with accordance to the starting navigation cell.

Vertical Navigation

• ↑ or ↓ - move to the cell above/below in relation to a starting position and is unaffected by the rows. If the current cell spans on more than one column the next active cell will be selected with accordance to the starting navigation cell.
• Ctrl + ↑ or Ctrl + Down - Navigate and apply focus on the same column on the first or on the last row.
• Ctrl + Home or Ctrl + End - Navigate to the first row and focus first cell or navigate to the last row and focus the last cell.

Navigation through cells which span on multiple rows or columns is done with accordance to the starting navigation cell and will allow returning to the starting cell using the key for the opposite direction. The same approach is used when navigating through group rows.

Selection and multi cell selection are working on layout, meaning that when a cell is active, its layout will be selected. Also all features of multiple selection like drag selection are applicable and will work per layout not per cell.

Custom Keyboard Navigation

The grid allows customizing the default navigation behavior when a certain key is pressed. Actions like going to the next cell or cell below could be handled easily with the powerful keyboard navigation API:

• GridKeydown is exposed. The event will emit IGridKeydownEventArgs. This event is available only through the keyboard key combinations mentioned above, for all other key actions you can use KeyDown event.
• NavigateTo - this method allows you to navigate to a position based on provided RowIndex and VisibleColumnIndex

The demo below adds additional navigation down/up via the Enter and Shift + Enter keys, similar to the behavior observed in Excel.

Demo

EXAMPLE

MODULES

DATA

RAZOR

JS

CSS

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

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbGridModule),
                typeof(IgbColumnLayoutModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

using System;
using System.Collections.Generic;
public class CompanyDataItem
{
    public string ID { get; set; }
    public string Company { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public double LifetimeSales { get; set; }
    public double QuarterlySales { get; set; }
    public double YearlySales { get; set; }
    public double MarketPotential { get; set; }
    public double AssetsCash { get; set; }
    public double AccountsReceivable { get; set; }
    public double AssetsBooks { get; set; }
}

public class CompanyData
    : List<CompanyDataItem>
{
    public CompanyData()
    {
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1000",
            Company = @"Sportan",
            Address = @"Rapelye Street",
            City = @"Oceola",
            Country = @"VU",
            LifetimeSales = 40882580.18,
            QuarterlySales = 430845.78,
            YearlySales = 1197420.17,
            MarketPotential = 4210805124.61,
            AssetsCash = 264714.71,
            AccountsReceivable = 63084.44,
            AssetsBooks = 7534.74
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1001",
            Company = @"Bugsall",
            Address = @"Hoyt Street",
            City = @"Rosine",
            Country = @"FM",
            LifetimeSales = 29231147.89,
            QuarterlySales = 227299.97,
            YearlySales = 1486467.06,
            MarketPotential = 2505447478.96,
            AssetsCash = 370690.39,
            AccountsReceivable = 69242.24,
            AssetsBooks = 12507.92
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1002",
            Company = @"Hydrocom",
            Address = @"Sunnyside Court",
            City = @"Cornfields",
            Country = @"KE",
            LifetimeSales = 35628528.18,
            QuarterlySales = 226007.91,
            YearlySales = 1092555.78,
            MarketPotential = 4930069033.99,
            AssetsCash = 403038.64,
            AccountsReceivable = 56183.05,
            AssetsBooks = 8113.52
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1003",
            Company = @"Eclipto",
            Address = @"Remsen Avenue",
            City = @"Orin",
            Country = @"TZ",
            LifetimeSales = 20178683.42,
            QuarterlySales = 319645.81,
            YearlySales = 1249194.57,
            MarketPotential = 2488740024.16,
            AssetsCash = 237368.76,
            AccountsReceivable = 50048.48,
            AssetsBooks = 13100.31
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1004",
            Company = @"Paprikut",
            Address = @"Bay Parkway",
            City = @"Motley",
            Country = @"LR",
            LifetimeSales = 25575955.42,
            QuarterlySales = 347046.85,
            YearlySales = 1611555.66,
            MarketPotential = 1923959087.58,
            AssetsCash = 235064.57,
            AccountsReceivable = 74596.25,
            AssetsBooks = 17057.85
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1005",
            Company = @"Unia",
            Address = @"Richards Street",
            City = @"Herlong",
            Country = @"DZ",
            LifetimeSales = 13462122.23,
            QuarterlySales = 368636.73,
            YearlySales = 489642.54,
            MarketPotential = 1679474693.72,
            AssetsCash = 498174.1,
            AccountsReceivable = 92476.88,
            AssetsBooks = 6961.9
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1006",
            Company = @"Isologix",
            Address = @"Williams Court",
            City = @"Marysville",
            Country = @"JO",
            LifetimeSales = 38448387.27,
            QuarterlySales = 298248.71,
            YearlySales = 1904695.32,
            MarketPotential = 4696918929,
            AssetsCash = 383266.93,
            AccountsReceivable = 76247.35,
            AssetsBooks = 6818.03
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1007",
            Company = @"Deepends",
            Address = @"Independence Avenue",
            City = @"Riegelwood",
            Country = @"NO",
            LifetimeSales = 13730298.02,
            QuarterlySales = 323612.72,
            YearlySales = 953860.54,
            MarketPotential = 4825809829.87,
            AssetsCash = 416146.08,
            AccountsReceivable = 62282.5,
            AssetsBooks = 13686.42
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1008",
            Company = @"Quantasis",
            Address = @"Berriman Street",
            City = @"Unionville",
            Country = @"ID",
            LifetimeSales = 19875841.19,
            QuarterlySales = 468274.38,
            YearlySales = 1569184.18,
            MarketPotential = 3489758844.49,
            AssetsCash = 415699.26,
            AccountsReceivable = 54628.5,
            AssetsBooks = 19321.38
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1009",
            Company = @"Playce",
            Address = @"India Street",
            City = @"Joppa",
            Country = @"VI",
            LifetimeSales = 45960329.03,
            QuarterlySales = 448358.99,
            YearlySales = 1855678.13,
            MarketPotential = 2740892152.3,
            AssetsCash = 447054.49,
            AccountsReceivable = 69204.65,
            AssetsBooks = 23522.18
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1010",
            Company = @"Ezent",
            Address = @"Decatur Street",
            City = @"Lithium",
            Country = @"CV",
            LifetimeSales = 43613913.07,
            QuarterlySales = 140288.25,
            YearlySales = 594517.52,
            MarketPotential = 1419141218.99,
            AssetsCash = 324254.03,
            AccountsReceivable = 78826.89,
            AssetsBooks = 20581.79
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1011",
            Company = @"Corepan",
            Address = @"Jefferson Street",
            City = @"Roland",
            Country = @"CA",
            LifetimeSales = 19334236.7,
            QuarterlySales = 413597.57,
            YearlySales = 1871048.41,
            MarketPotential = 3524818686.77,
            AssetsCash = 464374.02,
            AccountsReceivable = 68634.68,
            AssetsBooks = 16572.39
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1012",
            Company = @"Quonata",
            Address = @"Bristol Street",
            City = @"Belgreen",
            Country = @"ER",
            LifetimeSales = 21467135.56,
            QuarterlySales = 224717.89,
            YearlySales = 657562.96,
            MarketPotential = 3686684834.77,
            AssetsCash = 345941.49,
            AccountsReceivable = 51842.73,
            AssetsBooks = 12948.79
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1013",
            Company = @"Empirica",
            Address = @"Eaton Court",
            City = @"Hampstead",
            Country = @"LY",
            LifetimeSales = 21711544.57,
            QuarterlySales = 290740.22,
            YearlySales = 1202336.44,
            MarketPotential = 2343942535.11,
            AssetsCash = 331479.28,
            AccountsReceivable = 61027.27,
            AssetsBooks = 6199.99
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1014",
            Company = @"Eventix",
            Address = @"Gain Court",
            City = @"Dowling",
            Country = @"NG",
            LifetimeSales = 27108803.74,
            QuarterlySales = 322969.25,
            YearlySales = 951465.66,
            MarketPotential = 4841022751.3,
            AssetsCash = 287818.89,
            AccountsReceivable = 79152.96,
            AssetsBooks = 9047.59
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1015",
            Company = @"Dogspa",
            Address = @"Quay Street",
            City = @"Marne",
            Country = @"TW",
            LifetimeSales = 15372014.44,
            QuarterlySales = 376294.9,
            YearlySales = 978453.71,
            MarketPotential = 1275418042.2,
            AssetsCash = 374628.65,
            AccountsReceivable = 84888.29,
            AssetsBooks = 20578.59
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1016",
            Company = @"Jumpstack",
            Address = @"Quincy Street",
            City = @"Hobucken",
            Country = @"CF",
            LifetimeSales = 38882346.28,
            QuarterlySales = 140607.23,
            YearlySales = 1197166.82,
            MarketPotential = 4820347822.28,
            AssetsCash = 231516.29,
            AccountsReceivable = 87415.74,
            AssetsBooks = 12896.54
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1017",
            Company = @"Sybixtex",
            Address = @"Ryder Street",
            City = @"Alderpoint",
            Country = @"IO",
            LifetimeSales = 21445732.45,
            QuarterlySales = 369036.23,
            YearlySales = 499606.34,
            MarketPotential = 2807389991.36,
            AssetsCash = 408474.47,
            AccountsReceivable = 65344.38,
            AssetsBooks = 8862.63
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1018",
            Company = @"Dognosis",
            Address = @"Wolcott Street",
            City = @"Edgewater",
            Country = @"GL",
            LifetimeSales = 41661881.98,
            QuarterlySales = 141108.09,
            YearlySales = 522969.48,
            MarketPotential = 4374478218.15,
            AssetsCash = 225730.61,
            AccountsReceivable = 72839.21,
            AssetsBooks = 8728.07
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1019",
            Company = @"Twiggery",
            Address = @"Irwin Street",
            City = @"Blackgum",
            Country = @"ZM",
            LifetimeSales = 36017506.06,
            QuarterlySales = 354562.4,
            YearlySales = 1449893.92,
            MarketPotential = 1948021644.72,
            AssetsCash = 376383.08,
            AccountsReceivable = 62385.03,
            AssetsBooks = 14270.75
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1020",
            Company = @"Bizmatic",
            Address = @"Jerome Street",
            City = @"Sylvanite",
            Country = @"MM",
            LifetimeSales = 11722193.14,
            QuarterlySales = 213212.65,
            YearlySales = 1310614.58,
            MarketPotential = 3463018300.01,
            AssetsCash = 252123.01,
            AccountsReceivable = 57229.43,
            AssetsBooks = 19165.76
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1021",
            Company = @"Accel",
            Address = @"Louisiana Avenue",
            City = @"Cornucopia",
            Country = @"IE",
            LifetimeSales = 27607249.98,
            QuarterlySales = 236774.12,
            YearlySales = 1546611.47,
            MarketPotential = 2024251139.72,
            AssetsCash = 294508.31,
            AccountsReceivable = 71612.5,
            AssetsBooks = 18155.66
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1022",
            Company = @"Brainquil",
            Address = @"Tompkins Avenue",
            City = @"Hanover",
            Country = @"MX",
            LifetimeSales = 25699331.36,
            QuarterlySales = 186296.88,
            YearlySales = 736119.79,
            MarketPotential = 1098592989.14,
            AssetsCash = 321341.22,
            AccountsReceivable = 82055.95,
            AssetsBooks = 10149.55
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1023",
            Company = @"Eplode",
            Address = @"Desmond Court",
            City = @"Lupton",
            Country = @"GA",
            LifetimeSales = 22446181.35,
            QuarterlySales = 346390.58,
            YearlySales = 712190.68,
            MarketPotential = 2534215258.43,
            AssetsCash = 266537.14,
            AccountsReceivable = 87164.54,
            AssetsBooks = 24489.71
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1024",
            Company = @"Crustatia",
            Address = @"Woodhull Street",
            City = @"Conestoga",
            Country = @"GR",
            LifetimeSales = 48060275.78,
            QuarterlySales = 319385.17,
            YearlySales = 1662973.16,
            MarketPotential = 3562317203.73,
            AssetsCash = 471269.15,
            AccountsReceivable = 98834.5,
            AssetsBooks = 10641.41
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1025",
            Company = @"Buzzness",
            Address = @"Guider Avenue",
            City = @"Gratton",
            Country = @"MD",
            LifetimeSales = 26377352.6,
            QuarterlySales = 439844.54,
            YearlySales = 601430.59,
            MarketPotential = 1486755775.28,
            AssetsCash = 252524.24,
            AccountsReceivable = 51795.96,
            AssetsBooks = 10315.84
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1026",
            Company = @"Helixo",
            Address = @"Logan Street",
            City = @"Broadlands",
            Country = @"RE",
            LifetimeSales = 31633703.02,
            QuarterlySales = 256392.06,
            YearlySales = 602291.9,
            MarketPotential = 4323633265.68,
            AssetsCash = 468025.56,
            AccountsReceivable = 95638.46,
            AssetsBooks = 22985.41
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1027",
            Company = @"Geekosis",
            Address = @"Dictum Court",
            City = @"Bellamy",
            Country = @"NF",
            LifetimeSales = 29268437.79,
            QuarterlySales = 147691.1,
            YearlySales = 1691764.93,
            MarketPotential = 1362207226.45,
            AssetsCash = 434628.23,
            AccountsReceivable = 66871.54,
            AssetsBooks = 12574.59
        });
        this.Add(new CompanyDataItem()
        {
            ID = @"abc1028",
            Company = @"Zipak",
            Address = @"Hendrix Street",
            City = @"Enetai",
            Country = @"MH",
            LifetimeSales = 18691983.29,
            QuarterlySales = 218666.54,
            YearlySales = 1038077.26,
            MarketPotential = 1362313421.44,
            AssetsCash = 276294.7,
            AccountsReceivable = 59302.02,
            AssetsBooks = 11183.04
        });
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

@inject IJSRuntime JS

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

#grid {
    --ig-size: var(--ig-size-medium);
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbGrid
        AutoGenerate="false"
        Name="grid"
        @ref="grid"
        Id="grid"
        Data="CompanyData"
        GridKeydownScript="WebGridMRLCustomNavigationEvent">
            <IgbColumnLayout
            Name="CompanyInfo"
            @ref="companyInfo"
            Header="Company">
                <IgbColumn
                Field="Company"
                Header="Company"
                RowStart="1"
                ColStart="1"
                ColEnd="3">
                </IgbColumn>

                <IgbColumn
                Field="Country"
                Header="Country"
                RowStart="2"
                ColStart="1">
                </IgbColumn>

                <IgbColumn
                Field="City"
                Header="City"
                RowStart="2"
                ColStart="2">
                </IgbColumn>

                <IgbColumn
                Field="Address"
                Header="Address"
                RowStart="3"
                ColStart="1"
                ColEnd="3">
                </IgbColumn>

            </IgbColumnLayout>

            <IgbColumnLayout
            Name="Sales"
            @ref="sales"
            Header="Sales">
                <IgbColumn
                Field="LifetimeSales"
                Header="Lifetime Sales"
                RowStart="1"
                RowEnd="3"
                ColStart="1"
                ColEnd="3">
                </IgbColumn>

                <IgbColumn
                Field="QuarterlySales"
                Header="Quarterly"
                RowStart="3"
                ColStart="1">
                </IgbColumn>

                <IgbColumn
                Field="YearlySales"
                Header="Yearly"
                RowStart="3"
                ColStart="2">
                </IgbColumn>

            </IgbColumnLayout>

            <IgbColumnLayout
            Name="MarketPotentialInfo"
            @ref="marketPotentialInfo"
            Header="Market Potential">
                <IgbColumn
                Field="MarketPotential"
                Header="Market Potential"
                RowStart="1"
                RowEnd="4"
                ColStart="1">
                </IgbColumn>

            </IgbColumnLayout>

            <IgbColumnLayout
            Name="Assets"
            @ref="assets"
            Header="Assets">
                <IgbColumn
                Field="AssetsCash"
                Header="Assets Cash"
                RowStart="1"
                ColStart="1">
                </IgbColumn>

                <IgbColumn
                Field="AccountsReceivable"
                Header="Accounts Receivable"
                RowStart="1"
                ColStart="2"
                ColEnd="4">
                </IgbColumn>

                <IgbColumn
                Field="AssetsBooks"
                Header="Assets Books"
                RowStart="2"
                RowEnd="4"
                ColStart="1"
                ColEnd="4">
                </IgbColumn>

            </IgbColumnLayout>

        </IgbGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var grid = this.grid;
        var companyInfo = this.companyInfo;
        var sales = this.sales;
        var marketPotentialInfo = this.marketPotentialInfo;
        var assets = this.assets;

    }

    private IgbGrid grid;
    private IgbColumnLayout companyInfo;
    private IgbColumnLayout sales;
    private IgbColumnLayout marketPotentialInfo;
    private IgbColumnLayout assets;

    private CompanyData _companyData = null;
    public CompanyData CompanyData
    {
        get
        {
            if (_companyData == null)
            {
                _companyData = new CompanyData();
            }
            return _companyData;
        }
    }

}razorCOPY CODE

igRegisterScript("WebGridMRLCustomNavigationEvent", (args) => {
    const target = args.detail.target;
    if (args.detail.event.key.toLowerCase() === 'enter') {
        args.detail.event.preventDefault();
        args.detail.cancel = true;
        const rowIndex = target.intRow.index === undefined ? target.index : target.intRow.index;
        this.grid.navigateTo(args.detail.event.shiftKey ? rowIndex - 1 : rowIndex + 1, target.column.visibleIndex,
             (obj) => {
                obj.target.activate();
            });
    }
}, false);

jsCOPY CODE

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

#grid {
    --ig-size: var(--ig-size-medium);
}

cssCOPY CODE

Styling

In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set a class for the grid first:

<IgbGrid class="grid"></IgbGrid>
razor

Then set the related CSS properties to this class:

.grid {
    --ig-grid-cell-active-border-color: #ffcd0f;
    --ig-grid-cell-selected-background: #6f6f6f;
    --ig-grid-row-hover-background: #fde069;
    --ig-grid-row-selected-background: #8d8d8d;
    --ig-grid-header-background: #494949;
    --ig-grid-header-text-color: #fff;
}
css

Demo

EXAMPLE

MODULES

DATA

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(IgbInputModule),
                typeof(IgbGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

using System;
using System.Collections.Generic;
public class CustomersDataItem
{
    public string ID { get; set; }
    public string Company { get; set; }
    public string ContactName { get; set; }
    public string ContactTitle { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Region { get; set; }
    public double PostalCode { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string Fax { get; set; }
}

public class CustomersData
    : List<CustomersDataItem>
{
    public CustomersData()
    {
        this.Add(new CustomersDataItem()
        {
            ID = @"ALFKI",
            Company = @"Alfreds Futterkiste",
            ContactName = @"Maria Anders",
            ContactTitle = @"Sales Representative",
            Address = @"Obere Str. 57",
            City = @"Berlin",
            Region = @"East",
            PostalCode = 12209,
            Country = @"Germany",
            Phone = @"030-0074321",
            Fax = @"030-0076545"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"ANATR",
            Company = @"Ana Trujillo Emparedados y helados",
            ContactName = @"Ana Trujillo",
            ContactTitle = @"Owner",
            Address = @"Avda. de la Constitución 2222",
            City = @"México D.F.",
            Region = @"South",
            PostalCode = 5021,
            Country = @"Mexico",
            Phone = @"(5) 555-4729",
            Fax = @"(5) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"ANTON",
            Company = @"Antonio Moreno Taquería",
            ContactName = @"Antonio Moreno",
            ContactTitle = @"Owner",
            Address = @"Mataderos 2312",
            City = @"México D.F.",
            Region = @"South",
            PostalCode = 5023,
            Country = @"Mexico",
            Phone = @"(5) 555-3932",
            Fax = @"(5) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"AROUT",
            Company = @"Around the Horn",
            ContactName = @"Thomas Hardy",
            ContactTitle = @"Sales Representative",
            Address = @"120 Hanover Sq.",
            City = @"London",
            Region = @"East",
            PostalCode = 22000,
            Country = @"UK",
            Phone = @"(171) 555-7788",
            Fax = @"(171) 555-6750"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"BERGS",
            Company = @"Berglunds snabbköp",
            ContactName = @"Christina Berglund",
            ContactTitle = @"Order Administrator",
            Address = @"Berguvsvägen 8",
            City = @"Luleå",
            Region = @"South",
            PostalCode = 17000,
            Country = @"Sweden",
            Phone = @"0921-12 34 65",
            Fax = @"0921-12 34 67"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"BLAUS",
            Company = @"Blauer See Delikatessen",
            ContactName = @"Hanna Moos",
            ContactTitle = @"Sales Representative",
            Address = @"Forsterstr. 57",
            City = @"Mannheim",
            Region = @"East",
            PostalCode = 68306,
            Country = @"Germany",
            Phone = @"0621-08460",
            Fax = @"0621-08924"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"BLONP",
            Company = @"Blondesddsl père et fils",
            ContactName = @"Frédérique Citeaux",
            ContactTitle = @"Marketing Manager",
            Address = @"24, place Kléber",
            City = @"Strasbourg",
            Region = @"East",
            PostalCode = 67000,
            Country = @"France",
            Phone = @"88.60.15.31",
            Fax = @"88.60.15.32"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"BOLID",
            Company = @"Bólido Comidas preparadas",
            ContactName = @"Martín Sommer",
            ContactTitle = @"Owner",
            Address = @"C/ Araquil, 67",
            City = @"Madrid",
            Region = @"East",
            PostalCode = 28023,
            Country = @"Spain",
            Phone = @"(91) 555 22 82",
            Fax = @"(91) 555 91 99"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"BONAP",
            Company = @"Bon app'",
            ContactName = @"Laurence Lebihan",
            ContactTitle = @"Owner",
            Address = @"12, rue des Bouchers",
            City = @"Marseille",
            Region = @"West",
            PostalCode = 13008,
            Country = @"France",
            Phone = @"91.24.45.40",
            Fax = @"91.24.45.41"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"BOTTM",
            Company = @"Bottom-Dollar Markets",
            ContactName = @"Elizabeth Lincoln",
            ContactTitle = @"Accounting Manager",
            Address = @"23 Tsawassen Blvd.",
            City = @"Tsawassen",
            Region = @"BC",
            PostalCode = 28000,
            Country = @"Canada",
            Phone = @"(604) 555-4729",
            Fax = @"(604) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"BSBEV",
            Company = @"B's Beverages",
            ContactName = @"Victoria Ashworth",
            ContactTitle = @"Sales Representative",
            Address = @"Fauntleroy Circus",
            City = @"London",
            Region = @"South",
            PostalCode = 10000,
            Country = @"UK",
            Phone = @"(171) 555-1212",
            Fax = @"(5) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"CACTU",
            Company = @"Cactus Comidas para llevar",
            ContactName = @"Patricio Simpson",
            ContactTitle = @"Sales Agent",
            Address = @"Cerrito 333",
            City = @"Buenos Aires",
            Region = @"East",
            PostalCode = 1010,
            Country = @"Argentina",
            Phone = @"(1) 135-5555",
            Fax = @"(1) 135-4892"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"CENTC",
            Company = @"Centro comercial Moctezuma",
            ContactName = @"Francisco Chang",
            ContactTitle = @"Marketing Manager",
            Address = @"Sierras de Granada 9993",
            City = @"México D.F.",
            Region = @"South",
            PostalCode = 5022,
            Country = @"Mexico",
            Phone = @"(5) 555-3392",
            Fax = @"(5) 555-7293"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"CHOPS",
            Company = @"Chop-suey Chinese",
            ContactName = @"Yang Wang",
            ContactTitle = @"Owner",
            Address = @"Hauptstr. 29",
            City = @"Bern",
            Region = @"East",
            PostalCode = 3012,
            Country = @"Switzerland",
            Phone = @"0452-076545",
            Fax = @"(5) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"COMMI",
            Company = @"Comércio Mineiro",
            ContactName = @"Pedro Afonso",
            ContactTitle = @"Sales Associate",
            Address = @"Av. dos Lusíadas, 23",
            City = @"Sao Paulo",
            Region = @"SP",
            PostalCode = 34000,
            Country = @"Brazil",
            Phone = @"(11) 555-7647",
            Fax = @"(5) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"CONSH",
            Company = @"Consolidated Holdings",
            ContactName = @"Elizabeth Brown",
            ContactTitle = @"Sales Representative",
            Address = @"Berkeley Gardens 12 Brewery",
            City = @"London",
            Region = @"South",
            PostalCode = 27000,
            Country = @"UK",
            Phone = @"(171) 555-2282",
            Fax = @"(171) 555-9199"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"DRACD",
            Company = @"Drachenblut Delikatessen",
            ContactName = @"Sven Ottlieb",
            ContactTitle = @"Order Administrator",
            Address = @"Walserweg 21",
            City = @"Aachen",
            Region = @"South",
            PostalCode = 52066,
            Country = @"Germany",
            Phone = @"0241-039123",
            Fax = @"0241-059428"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"DUMON",
            Company = @"Du monde entier",
            ContactName = @"Janine Labrune",
            ContactTitle = @"Owner",
            Address = @"67, rue des Cinquante Otages",
            City = @"Nantes",
            Region = @"East",
            PostalCode = 44000,
            Country = @"France",
            Phone = @"40.67.88.88",
            Fax = @"40.67.89.89"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"EASTC",
            Company = @"Eastern Connection",
            ContactName = @"Ann Devon",
            ContactTitle = @"Sales Agent",
            Address = @"35 King George",
            City = @"London",
            Region = @"East",
            PostalCode = 41000,
            Country = @"UK",
            Phone = @"(171) 555-0297",
            Fax = @"(171) 555-3373"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"ERNSH",
            Company = @"Ernst Handel",
            ContactName = @"Roland Mendel",
            ContactTitle = @"Sales Manager",
            Address = @"Kirchgasse 6",
            City = @"Graz",
            Region = @"South",
            PostalCode = 8010,
            Country = @"Austria",
            Phone = @"7675-3425",
            Fax = @"7675-3426"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"FAMIA",
            Company = @"Familia Arquibaldo",
            ContactName = @"Aria Cruz",
            ContactTitle = @"Marketing Assistant",
            Address = @"Rua Orós, 92",
            City = @"Sao Paulo",
            Region = @"SP",
            PostalCode = 27000,
            Country = @"Brazil",
            Phone = @"(11) 555-9857",
            Fax = @"(5) 555-3745"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"FISSA",
            Company = @"FISSA Fabrica Inter. Salchichas S.A.",
            ContactName = @"Diego Roel",
            ContactTitle = @"Accounting Manager",
            Address = @"C/ Moralzarzal, 86",
            City = @"Madrid",
            Region = @"East",
            PostalCode = 28034,
            Country = @"Spain",
            Phone = @"(91) 555 94 44",
            Fax = @"(91) 555 55 93"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"FOLIG",
            Company = @"Folies gourmandes",
            ContactName = @"Martine Rancé",
            ContactTitle = @"Assistant Sales Agent",
            Address = @"184, chaussée de Tournai",
            City = @"Lille",
            Region = @"South",
            PostalCode = 59000,
            Country = @"France",
            Phone = @"20.16.10.16",
            Fax = @"20.16.10.17"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"FOLKO",
            Company = @"Folk och fä HB",
            ContactName = @"Maria Larsson",
            ContactTitle = @"Owner",
            Address = @"Åkergatan 24",
            City = @"Bräcke",
            Region = @"East",
            PostalCode = 36000,
            Country = @"Sweden",
            Phone = @"0695-34 67 21",
            Fax = @"0695 33-4455"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"FRANK",
            Company = @"Frankenversand",
            ContactName = @"Peter Franken",
            ContactTitle = @"Marketing Manager",
            Address = @"Berliner Platz 43",
            City = @"München",
            Region = @"East",
            PostalCode = 80805,
            Country = @"Germany",
            Phone = @"089-0877310",
            Fax = @"089-0877451"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"FRANR",
            Company = @"France restauration",
            ContactName = @"Carine Schmitt",
            ContactTitle = @"Marketing Manager",
            Address = @"54, rue Royale",
            City = @"Nantes",
            Region = @"South",
            PostalCode = 44000,
            Country = @"France",
            Phone = @"40.32.21.21",
            Fax = @"40.32.21.20"
        });
        this.Add(new CustomersDataItem()
        {
            ID = @"FRANS",
            Company = @"Franchi S.p.A.",
            ContactName = @"Paolo Accorti",
            ContactTitle = @"Sales Representative",
            Address = @"Via Monte Bianco 34",
            City = @"Torino",
            Region = @"East",
            PostalCode = 10100,
            Country = @"Italy",
            Phone = @"011-4988260",
            Fax = @"011-4988261"
        });
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

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

#grid {
    --ig-grid-cell-active-border-color: #ffcd0f;
    --ig-grid-cell-selected-background: #6f6f6f;
    --ig-grid-row-hover-background: #fde069;
    --ig-grid-row-selected-background: #8d8d8d;
    --ig-grid-header-background: #494949;
    --ig-grid-header-text-color: #fff;
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbGrid
        Name="grid"
        @ref="grid"
        Id="grid"
        Data="CustomersData"
        PrimaryKey="Company">
            <IgbColumnLayout
            Hidden="true"
            Header="ID">
                <IgbColumn
                Field="ID"
                RowStart="1"
                ColStart="1"
                RowEnd="3"
                Filterable="false"
                Width="150px">
                </IgbColumn>

            </IgbColumnLayout>

            <IgbColumnLayout
            Pinned="true"
            Header="Contact Details">
                <IgbColumn
                Field="Company"
                Header="Company"
                RowStart="1"
                ColStart="1"
                ColEnd="3"
                Sortable="true"
                Width="350px">
                </IgbColumn>

                <IgbColumn
                Field="ContactName"
                Header="Name"
                RowStart="2"
                ColStart="1"
                ColEnd="2">
                </IgbColumn>

                <IgbColumn
                Field="ContactTitle"
                Header="Title"
                RowStart="2"
                ColStart="2"
                ColEnd="3">
                </IgbColumn>

            </IgbColumnLayout>

            <IgbColumnLayout
            Pinned="false"
            Header="Address Details">
                <IgbColumn
                Field="Country"
                RowStart="1"
                ColStart="1"
                ColEnd="3"
                Filterable="false"
                Width="220px">
                </IgbColumn>

                <IgbColumn
                Field="Region"
                RowStart="1"
                ColStart="3"
                ColEnd="5"
                Filterable="false"
                Width="220px">
                </IgbColumn>

                <IgbColumn
                Field="PostalCode"
                RowStart="1"
                ColStart="5"
                ColEnd="7"
                Filterable="false"
                Width="220px">
                </IgbColumn>

                <IgbColumn
                Field="City"
                RowStart="2"
                ColStart="1"
                ColEnd="4"
                Filterable="false"
                Width="220px">
                </IgbColumn>

                <IgbColumn
                Field="Address"
                RowStart="2"
                ColStart="4"
                ColEnd="7">
                </IgbColumn>

            </IgbColumnLayout>

            <IgbColumnLayout
            Header="Phone Details">
                <IgbColumn
                Field="Phone"
                RowStart="1"
                ColStart="1"
                ColEnd="2"
                Width="220px">
                </IgbColumn>

                <IgbColumn
                Field="Fax"
                RowStart="2"
                ColStart="1"
                ColEnd="2"
                Width="220px">
                </IgbColumn>

            </IgbColumnLayout>

        </IgbGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var grid = this.grid;

    }

    private IgbGrid grid;

    private CustomersData _customersData = null;
    public CustomersData CustomersData
    {
        get
        {
            if (_customersData == null)
            {
                _customersData = new CustomersData();
            }
            return _customersData;
        }
    }

}razorCOPY CODE

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

#grid {
    --ig-grid-cell-active-border-color: #ffcd0f;
    --ig-grid-cell-selected-background: #6f6f6f;
    --ig-grid-row-hover-background: #fde069;
    --ig-grid-row-selected-background: #8d8d8d;
    --ig-grid-header-background: #494949;
    --ig-grid-header-text-color: #fff;
}

cssCOPY CODE

API References

• IgbGrid
• IgbColumnLayout
• IgbColumn

Additional Resources

• Virtualization and Performance
• Paging
• Sorting
• Column Resizing
• Selection

Our community is active and always welcoming to new ideas.

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub