DxAccordion.ItemContentTemplate Property

Specifies a content template for all Accordion items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<IAccordionItemInfo> ItemContentTemplate { get; set; }

Property Value

Type	Description
RenderFragment<IAccordionItemInfo>	An item content template.

Remarks

You can define ItemContentTemplate to display custom content in all Accordion items. If your template uses components that contain RenderFragment<TValue> (for example, DxFormLayout), then a known Blazor issue may occur. To resolve the problem, specify the Context parameter explicitly.

The following code snippet applies the ItemContentTemplate:

Razor.cs

@using Accordion.Data;
@inject Data.EmployeeService EmployeeService

<DxAccordion Data=@Employees>
    <DataMappings>
        <DxAccordionDataMapping Key="LastName"
                                Text="LastName" />
    </DataMappings>
    <ItemContentTemplate>
        <div class="m-1">
            @{
                var dataItem = (Employee)context.DataItem;
            }
            <div class="text-center">
                <h5>@dataItem.LastName @dataItem.FirstName</h5>
                Position: @dataItem.Position
                Hire date: @dataItem.HireDate
            </div>
            <hr />
            <span>@dataItem.Notes</span>
        </div>
    </ItemContentTemplate>
</DxAccordion>

@code {
    IEnumerable<Employee> Employees;
    protected override async Task OnInitializedAsync() {
        Employees = (await EmployeeService.Load()).Skip(5).Take(3);
    }
}

Employee.cs

using System;

namespace Accordion.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; }
    }
}

Employees.cs

using System;
using System.Collections.Generic;

namespace Accordion.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(); } }
    }
}

EmployeeService.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Accordion.Data;

namespace Accordion.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);
        }
    }
}

You can also specify ItemHeaderTextTemplate for the item’s header or ItemTemplate for both the item’s header and content.

If you want to override a content template for one item, use the ContentTemplate.