<div class="card m-2">
    <div class="card-body">
        <div class="card-text text-center">
            <img class="card-img-top" src="@ThumbnailUrl" alt="Card image cap">
            <p></p>
            <h5>@Name</h5>
        </div>
        <div>
            <h6 class="card-text"><b>Name</b>  : <small>John Maer</small></h6>
            <h6 class="card-text"><b>Title</b>: <small>Assistant Manager</small> </h6>
            <h6 class="card-text"><b>HireDate</b>: <small>3/24/2015</small></h6>
        </div>
    </div>
</div>

@code {
 
    [Parameter]
    public string Name { get; set; }
 
    [Parameter]
    public string Title { get; set; }
 
    [Parameter]
    public string ThumbnailUrl { get; set; }
 
    [Parameter]
    public DateTime HireDate { get; set; }
 
}

@page "/employeecarddemo"
 
<div class="container">
    <div class="row">
        @foreach (var employee in employeeList)
        {
            <div class="col-lg-4 mb-2">
                <EmployeeCard ThumbnailUrl=@employee.ThumbnailUrl Name=@employee.Name Title=@employee.Title HireDate=@employee.HireDate></EmployeeCard>
            </div>
        }
    </div>
</div>
 
@code {
    private List<Employee> employeeList;
 
    protected override async Task OnInitializedAsync()
    {
        XmlRepository repository = new XmlRepository();
        employeeList = repository.GetEmployees();
    }
}

public class XmlRepository
{
    private static List<Employee> _employeeList = new List<Employee>();
    private static List<Department> _departmentList = new List<Department>();
 
    public XmlRepository()
    {
        var assembly = typeof(XmlRepository).GetTypeInfo().Assembly;
 
        //TODO: add culture
        var stream = assembly.GetManifestResourceStream("BlazorDemo.Data.employees.xml");
 
        using (var reader = new System.IO.StreamReader(stream))
        {
            var serializer = new XmlSerializer(typeof(List<Employee>));
            _employeeList = (List<Employee>)serializer.Deserialize(reader);
        }
 
        var dstream = assembly.GetManifestResourceStream("BlazorDemo.Data.departments.xml");
 
        using (var reader = new System.IO.StreamReader(dstream))
        {
            var serializer = new XmlSerializer(typeof(List<Department>));
            _departmentList = (List<Department>)serializer.Deserialize(reader);
        }
    }
 
    public List<Employee> GetEmployees()
    {
        return _employeeList;
    }
 
    public List<Department> GetDepartments()
    {
        return _departmentList;
    }
 
    public Department GetDepartment(int index)
    {
        int realIndex = index - 1;
        if (_departmentList.Count > 0 && _departmentList.Count > realIndex)
            return _departmentList[realIndex];
        else
            return null;
    }
}
 
public class Employee
{
    public string Name { get; set; }
    public string Title { get; set; }
    public DateTime HireDate { get; set; }
    public double Status { get; set; }
    public string ThumbnailImage { get; set; }
    public string ThumbnailUrl
    {
        get
        {
            return "Employees/" + ThumbnailImage;
        }
    }
    public int DepartmentId { get; set; }
    public bool FullTime { get; set; }
}
 
public class Department
{
    public int Id { get; set; }
    public string Name { get; set; }
}

<div class="nav-item px-3">
    <NavLink class="nav-link" href="employeecarddemo">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Employee Card Demo
    </NavLink>
</div>

<link rel="stylesheet" href="~/_content/C1.Blazor.Core/styles.css" />
<link rel="stylesheet" href="~/_content/C1.Blazor.Grid/styles.css" />
<link rel="stylesheet" href="~/_content/C1.Blazor.ListView/styles.css" />
<link rel="stylesheet" href="~/_content/C1.Blazor.Input/styles.css" />
<link rel="stylesheet" href="~/_content/C1.Blazor.DataPager/styles.css" />
<link rel="stylesheet" href="~/_content/C1.Blazor.Calendar/styles.css" />
<link rel="stylesheet" href="~/_content/C1.Blazor.DateTimeEditors/styles.css" />
<link rel="stylesheet" href="~/_content/C1.Blazor.Chart/styles.css" />
 
<script src="~/_content/C1.Blazor.Core/scripts.js"></script>
<script src="~/_content/C1.Blazor.Input/scripts.js"></script>
<script src="~/_content/C1.Blazor.Grid/scripts.js"></script>
<script src="~/_content/C1.Blazor.Chart/scripts.js"></script>
<script src="~/_content/C1.Blazor.Calendar/scripts.js"></script>

@page "/flexgriddemo"
 
@using C1.Blazor.Core
@using C1.Blazor.Grid
@using C1.DataCollection
 
 
<FlexGrid ItemsSource="employeeDataCollection"
          AutoGenerateColumns="false"
          GridLinesVisibility="GridLinesVisibility.Horizontal"
          DefaultRowHeight="100"
          Style="@("max-height:50vh")"
          ColumnHeaderStyle="@("background-color:#b71c1c;color:#fff;font-size:16px")"
          SelectionStyle="@("background-color:#ef9a9a")"
          GroupRowStyle="@("background-color:#e53935;color:#fff")"
          AlternatingRowStyle="@("background-color:#ffebee")"
          CellStyle="@("align-items:center;padding:8px;")"
          IsVirtualizationEnabled="false"
          SelectionMode="GridSelectionMode.RowRange"
          SelectionChanged="OnSelectionChanged">
    <FlexGridColumns>
        <GridImageColumn Binding="ThumbnailUrl" Header="Employee Image" ClipPath="circle(50%)" AllowSorting="false" Width="200" />
        <GridColumn Binding="Name" Width="200"/>
        <GridColumn Binding="Title" WordWrap="true" Width="200"/>
        <GridDateTimeColumn Binding="HireDate" Format="d" Mode="GridDateTimeColumnMode.Date" Width="200"/>       
    </FlexGridColumns>
</FlexGrid>
 
@code {
    private C1DataCollection<Employee> employeeDataCollection;
 
    protected override async Task OnInitializedAsync()
    {
        XmlRepository repository = new XmlRepository();
        var employeeList = repository.GetEmployees();
        employeeDataCollection = new C1DataCollection<Employee>(employeeList);
    }
 
    public async void OnSelectionChanged(object sender, GridCellRangeEventArgs e)
    {
        if (e.CellRange != null)
        {
            int rowsSelected = Math.Abs(e.CellRange.Row2 - e.CellRange.Row) + 1;
            await JsRuntime.InvokeVoidAsync("alert", "Number of rows selected:" + rowsSelected.ToString());
        }
    }
}

<div class="nav-item px-3">
   <NavLink class="nav-link" href="flexgriddemo">
       <span class="oi oi-list-rich" aria-hidden="true"></span> FlexGrid
   </NavLink>
</div>