Back to Devexpress

TabsRenderMode Enum

blazor-devexpress-dot-blazor-6e753fb2.md

latest10.4 KB
Original Source

TabsRenderMode Enum

Lists values that specify how the DxTabs and DxFormLayoutTabPages components load tab content.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
public enum TabsRenderMode

Members

NameDescription
Default

The component initially loads only content of an active tab. When a user selects another tab, its content replaces the content of the previously active tab in the DOM. Note the component does not keep the tab’s state.

| | AllTabs |

The component renders the content of all tabs in the DOM and maintains the tab’s state. This mode speeds up navigation between tabs, but can increase memory consumption.

| | OnDemand |

The component initially loads content of an active tab, then loads the content of other tabs when a user selects them. In this case, the component maintains the tab’s state. Use this mode to improve performance of your application.

|

The following properties accept/return TabsRenderMode values:

Remarks

Default Mode

razor
<DxTabs RenderMode="TabsRenderMode.Default">
    ...
</DxTabs>

AllTabs Mode

razor
<DxTabs RenderMode="TabsRenderMode.AllTabs">
    ...
</DxTabs>

OnDemand Mode

razor
<DxTabs RenderMode="TabsRenderMode.OnDemand">
    ...
</DxTabs>

Example

The following code snippet activates the OnDemand mode:

razor
@inject Data.EmployeeService EmployeeService
@using Tabs.Data

@if (Employees == null) {
    <p><em>Loading...</em></p>
}
else {
    <div class="card w-75 ch-220 m-5">
        <DxTabs RenderMode="TabsRenderMode.OnDemand">
            @foreach (var employee in Employees) {
                <DxTabPage Text="@(employee.FirstName + ' ' + employee.LastName)">
                    <div class="media demo-tab-page-content">
                        <div class="media-body px-3 pt-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>
    </div>
}

@code {
    IEnumerable<Employee> Employees;

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

namespace Tabs.Data {
    public class Employee {
        public string Title { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Position { get; set; }
        public DateTime BirthDate { get; set; }
        public DateTime HireDate { get; set; }
        public string Notes { get; set; }
        public string FileName { get; set; }
    }
}
csharp
using System;
using System.Collections.Generic;

namespace Tabs.Data {
    public static class Employees {
        public static List<Employee> Load() {
            var dataSource = new List<Employee>() {
                new Employee() { Title="Mr.", FirstName="John", LastName="Heart", Position="CEO", BirthDate=DateTime.Parse("1964/03/16"),
                    HireDate=DateTime.Parse("1995/01/15"),
                    Notes="John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003. When not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.", FileName="JohnHeart" },
                new Employee() { Title="Mrs.", FirstName="Olivia", LastName="Peyton", Position="Sales Assistant", BirthDate=DateTime.Parse("1981/06/03"),
                    HireDate=DateTime.Parse("2012/05/14"),
                    Notes="Olivia loves to sell. She has been selling DevAV products since 2012. Olivia was homecoming queen in high school. She is expecting her first child in 6 months. Good luck, Olivia.", FileName="OliviaPeyton" },
                new Employee() { Title="Mr.", FirstName="Robert", LastName="Reagan", Position="CMO", BirthDate=DateTime.Parse("1974/09/07"),
                    HireDate=DateTime.Parse("2002/11/08"),
                    Notes="Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team. Robert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.", FileName="RobertReagan" },
                new Employee() { Title="Ms.", FirstName="Greta", LastName="Sims", Position="HR Manager", BirthDate=DateTime.Parse("1977/11/22"),
                    HireDate=DateTime.Parse("1998/04/23"),
                    Notes="Greta has been DevAV's HR Manager since 2003. She joined DevAV from Sonee Corp. Greta is currently training for the NYC marathon. Her best marathon time is 4 hours. Go Greta.", FileName="GretaSims" },
                new Employee() { Title="Mr.", FirstName="Brett", LastName="Wade", Position="IT Manager", BirthDate=DateTime.Parse("1968/12/01"),
                    HireDate=DateTime.Parse("2009/03/06"),
                    Notes="Brett came to DevAv from Microsoft and has led our IT department since 2012. When he is not working hard for DevAV, he coaches Little League (he was a high school pitcher).", FileName="BrettWade" },
                new Employee() { Title="Mrs.", FirstName="Sandra", LastName="Johnson", Position="Controller", BirthDate=DateTime.Parse("1974/11/15"),
                    HireDate=DateTime.Parse("2005/05/11"),
                    Notes="Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you've not met her, be certain to say hi. Sandra has 2 daughters both of whom are accomplished gymnasts.", FileName="SandraJohnson" },
                new Employee() { Title="Mr.", FirstName="Kevin", LastName="Carter", Position="Shipping Manager", BirthDate=DateTime.Parse("1978/01/09"),
                    HireDate=DateTime.Parse("2009/08/11"),
                    Notes="Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months. When not in the office, he is usually on the basketball court playing pick-up games.", FileName="KevinCarter" },
                new Employee() { Title="Ms.", FirstName="Cynthia", LastName="Stanwick", Position="HR Assistant", BirthDate=DateTime.Parse("1985/06/05"),
                    HireDate=DateTime.Parse("2008/03/24"),
                    Notes="Cindy joined us in 2008 and has been in the HR department for 2 years. She was recently awarded employee of the month. Way to go Cindy!" , FileName="CynthiaStanwick"},
                new Employee() { Title="Dr.", FirstName="Kent", LastName="Samuelson", Position="Ombudsman", BirthDate=DateTime.Parse("1972/09/11"),
                    HireDate=DateTime.Parse("2009/04/22"),
                    Notes="As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field. He is a classically trained musician and is a member of the Chamber Orchestra." , FileName="KentSamuelson"},
            };
            return dataSource;
        }
        public static List<Employee> DataSource { get { return Load(); } }
    }
}
csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Tabs.Data;

namespace Tabs.Data {
    class EmployeeService {
        readonly IList<Employee> _dataSource;

        public EmployeeService() {
            _dataSource = Employees.Load();
        }
        public void Remove(Employee dataItem) {
            _dataSource.Remove(dataItem);
        }
        public void Update(Employee product, Dictionary<string, object> newValue) {
            foreach(var field in newValue.Keys) {
                switch(field) {
                    case "BirthDate":
                        product.BirthDate = (DateTime)newValue[field];
                        break;
                    case "FirstName":
                        product.FirstName = (string)newValue[field];
                        break;
                    case "LastName":
                        product.LastName = (string)newValue[field];
                        break;
                    case "Position":
                        product.Position = (string)newValue[field];
                        break;
                    case "Title":
                        product.Title = (string)newValue[field];
                        break;
                    case "Notes":
                        product.Notes = (string)newValue[field];
                        break;
                    case "HireDate":
                        product.HireDate = (DateTime)newValue[field];
                        break;
                    case "FileName":
                        product.FileName = (string)newValue[field];
                        break;
                }
            }
        }
        public Task<IQueryable<Employee>> Load() {
            return Task.FromResult(_dataSource.AsQueryable());
        }

        public void Insert(Dictionary<string, object> newValue) {
            if(!newValue.ContainsKey(nameof(Employee.LastName)))
                newValue.Add(nameof(Employee.LastName), Guid.NewGuid().ToString());

            var dataItem = new Employee();
            dataItem.FileName = "Unavailable";
            Update(dataItem, newValue);
            _dataSource.Add(dataItem);
        }
    }
}
csharp
// ...
builder.Services.AddSingleton<EmployeeService>();

See Also

DevExpress.Blazor Namespace