blazor-devexpress-dot-blazor-6e753fb2.md
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
public enum TabsRenderMode
| Name | Description |
|---|---|
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:
<DxTabs RenderMode="TabsRenderMode.Default">
...
</DxTabs>
<DxTabs RenderMode="TabsRenderMode.AllTabs">
...
</DxTabs>
<DxTabs RenderMode="TabsRenderMode.OnDemand">
...
</DxTabs>
The following code snippet activates the OnDemand mode:
@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);
}
}
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; }
}
}
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(); } }
}
}
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);
}
}
}
// ...
builder.Services.AddSingleton<EmployeeService>();
See Also