Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxTabPage Class

A tab with content within a Tabs component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxTabPage :
    DxTabBase

#Remarks

The DxTabPage allows you to create a tab with content within the DxTabs component.

<DxTabs>
    @foreach (var employee in Employees)
    {
        <DxTabPage Text="@(employee.FirstName + ' ' +  employee.LastName)">
            <div class="media demo-tab-page-content">
                <img src="@(StaticAssetUtils.GetImagePath($"Employees/{employee.FileName}.png"))" width="125" />
                <div class="media-body pl-3">
                    <h5 class="mt-0">@employee.Title @employee.FirstName @employee.LastName</h5>
                    <p><b>Birthday:</b> @employee.BirthDate.ToShortDateString()</p>
                    <p>@employee.Notes</p>
                </div>
            </div>
        </DxTabPage>
    }
</DxTabs>
@code {
    IEnumerable<Employee> Employees;

    protected override async Task OnInitializedAsync()
    {
        Employees = (await EmployeeService.Load()).Skip(5).Take(3);
    }
}

Navigation Landing Tab

Run Demo: Tabs - Tab Pages Watch Video: Get Started with Tabs

A tab page can include other DevExpress Blazor components. The following code creates a tab page with the DxGrid component.

Razor
<DxTabs style="width:950px">
    <DxTabPage Text="Description">
        <div class="p-3">
            <b>7-Day Weather Forecast</b>
        </div>
    </DxTabPage>
    <DxTabPage Text="Forecast">
        <div class="py-3">
            <DxGrid Data="@Data" CustomizeElement="Grid_CustomizeElement">
                <Columns>
                    <DxGridDataColumn FieldName=@nameof(WeatherForecast.Date) />
                    <DxGridDataColumn FieldName=@nameof(WeatherForecast.TemperatureC) Caption="Temp. (C)" />
                    <DxGridDataColumn FieldName=@nameof(WeatherForecast.TemperatureF) Caption="Temp. (F)" />
                    <DxGridDataColumn FieldName="@nameof(WeatherForecast.CloudCover)" />
                    <DxGridDataColumn FieldName="@nameof(WeatherForecast.Precipitation)">
                        <CellDisplayTemplate>
                            <DxCheckBox Enabled="false" Checked="(bool)context.Value" />
                        </CellDisplayTemplate>
                    </DxGridDataColumn>
                </Columns>
            </DxGrid>
        </div>
    </DxTabPage>
</DxTabs>

@code {
    void Grid_CustomizeElement(GridCustomizeElementEventArgs args) {
        if (args.ElementType == GridElementType.DataCell && args.Column is IGridDataColumn dataColumn && dataColumn.FieldName == "Precipitation")
            args.CssClass = "p-0";
    }

    public class WeatherForecast {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
        public string CloudCover { get; set; }
        public bool Precipitation { get; set; }
    }
    String[] CloudCover = { "Sunny", "Partly cloudy", "Cloudy", "Storm" };
    object Data;

    public Task<IEnumerable<WeatherForecast>> GetForecastAsync(CancellationToken ct = default) {
        var rng = new Random();
        DateTime startDate = DateTime.Now;
        return Task.FromResult(Enumerable.Range(1, 7).Select(index => new WeatherForecast {
            Date = startDate.AddDays(index),
            TemperatureC = rng.Next(-15, 20),
            CloudCover = CloudCover[rng.Next(0, CloudCover.Length)],
            Precipitation = Convert.ToBoolean(rng.Next(0, 2))
        }).AsEnumerable());
    }

    protected override async Task OnInitializedAsync() {
        Data = await GetForecastAsync();
    }
}

Tabs With Data Grid

#Inheritance

Object
ComponentBase
DxComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
See Also