@page "/Syncfusion6"
@using Syncfusion.Blazor.Grids

@if (Data == null)
{
    <Loading />
}
else if (!Data.Any())
{
    <span>No data...</span>
}
else
{
<div class="row">
    <div class="col-3">
        <div style="height: 400px;">
            <SfGrid TValue="LogboekRecordDto" Height="100%" Width="100%"
                    AllowReordering="true"DataSource="@Data" EnablePersistence="true"
                    AllowSorting="true" AllowMultiSorting="true" AllowFiltering="true" AllowResizing="true" 
                    ShowColumnChooser="false" ShowColumnMenu="true" AllowPaging="true">

                <GridPageSettings PageSize="12" PageSizes="new int[]{ 5, 10, 12, 15, 20 }" />

                @*<GridDataManager Model="@typeof(LogboekRecordDto)" Filter="Filter" UrlChanged="UrlChanged" />*@

                <GridFilterSettings Mode="@FilterBarMode.OnEnter" ShowFilterBarStatus="false" Type="@Syncfusion.Blazor.Grids.FilterType.FilterBar">
                    <GridFilterColumns>
                        <GridFilterColumn Field="@nameof(LogboekRecordDto.Id)" Operator="@Operator.NotEqual" Value="0" Predicate="and" />
                    </GridFilterColumns>
                </GridFilterSettings>

                <GridColumns>
                    <GridColumn Field="@nameof(LogboekRecordDto.Id)" Visible="false" />

                    <GridColumn Field="@nameof(LogboekRecordDto.Medewerker)" HeaderText="Medewerker" AllowFiltering="true" FilterSettings="@(new FilterSettings { Operator = Syncfusion.Blazor.Operator.Contains })" />

                    <GridColumn Field="@nameof(LogboekRecordDto.Datum)" HeaderText="Datum" AllowFiltering="true"
                                Type="ColumnType.Date"
                                TextAlign="TextAlign.Left"
                                Format="d" />
                </GridColumns>
            </SfGrid>
        </div>
    </div>
    <div class="col-1">
        <div style="height: 400px; background-color: green;">
            Middle box of 400px high
        </div>
    </div>
    <div class="col-3">
        <div style="height: 400px;">
            <SfGrid TValue="LogboekRecordDto" Height="100%" Width="100%"
                    AllowReordering="true" DataSource="@Data"
                    AllowSorting="true" AllowMultiSorting="true" AllowFiltering="true" AllowResizing="true"
                    ShowColumnChooser="false" ShowColumnMenu="true" AllowPaging="true">

                <GridPageSettings PageSize="12" PageSizes="new int[]{ 5, 10, 12, 15, 20 }" />

                @*<GridDataManager Model="@typeof(LogboekRecordDto)" Filter="Filter" UrlChanged="UrlChanged" />*@

                <GridFilterSettings Mode="@FilterBarMode.OnEnter" ShowFilterBarStatus="false" Type="@Syncfusion.Blazor.Grids.FilterType.FilterBar">
                    <GridFilterColumns>
                        <GridFilterColumn Field="@nameof(LogboekRecordDto.Id)" Operator="@Operator.NotEqual" Value="0" Predicate="and" />
                    </GridFilterColumns>
                </GridFilterSettings>

                <GridColumns>
                    <GridColumn Field="@nameof(LogboekRecordDto.Id)" Visible="false" />

                    <GridColumn Field="@nameof(LogboekRecordDto.Medewerker)" HeaderText="Medewerker" AllowFiltering="true" FilterSettings="@(new FilterSettings { Operator = Syncfusion.Blazor.Operator.Contains })" />

                    <GridColumn Field="@nameof(LogboekRecordDto.Datum)" HeaderText="Datum" AllowFiltering="true"
                                Type="ColumnType.Date"
                                TextAlign="TextAlign.Left"
                                Format="d" />
                </GridColumns>
            </SfGrid>
        </div>
    </div>    <div class="col-1">
        <div style="height: 400px; background-color: green;">
            Middle box of 400px high
        </div>
    </div>
    <div class="col-3">
        <div style="height: 400px;">
            <SfGrid TValue="LogboekRecordDto" Height="100%" Width="100%"
                    AllowReordering="true" DataSource="@Data" EnablePersistence="true"
                    AllowSorting="true" AllowMultiSorting="true" AllowFiltering="false" AllowResizing="true"
                    ShowColumnChooser="false" ShowColumnMenu="true" AllowPaging="true">

                <GridPageSettings PageSize="12" PageSizes="new int[]{ 5, 10, 12, 15, 20 }" />

                @*<GridDataManager Model="@typeof(LogboekRecordDto)" Filter="Filter" UrlChanged="UrlChanged" />*@

                <GridFilterSettings Mode="@FilterBarMode.OnEnter" ShowFilterBarStatus="false" Type="@Syncfusion.Blazor.Grids.FilterType.FilterBar">
                    <GridFilterColumns>
                        <GridFilterColumn Field="@nameof(LogboekRecordDto.Id)" Operator="@Operator.NotEqual" Value="0" Predicate="and" />
                    </GridFilterColumns>
                </GridFilterSettings>

                <GridColumns>
                    <GridColumn Field="@nameof(LogboekRecordDto.Id)" Visible="false" />

                    <GridColumn Field="@nameof(LogboekRecordDto.Medewerker)" HeaderText="Medewerker" AllowFiltering="true" FilterSettings="@(new FilterSettings { Operator = Syncfusion.Blazor.Operator.Contains })" />

                    <GridColumn Field="@nameof(LogboekRecordDto.Datum)" HeaderText="Datum" AllowFiltering="true"
                                Type="ColumnType.Date"
                                TextAlign="TextAlign.Left"
                                Format="d" />
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>
}

@code{
    public List<LogboekRecordDto> Data;

    public SfGrid<LogboekRecordDto> grid;
    protected string gridId { get => $"tertios-grid-{this.GetType().FullName.Replace(".", "_")}"; }

    public class LogboekRecordDto
    {
        public int Id { get; set; }
        public DateTime Datum { get; set; }
        public int LogboekTypeId { get; set; }
        public string LogboekType { get; set; }
        public int LogboekSubTypeId { get; set; }
        public string LogboekSubType { get; set; }
        public int MedewerkerId { get; set; }
        public string Medewerker { get; set; }
        public string ClientOfGezin { get; set; }
        public int ClientId { get; set; }
        public int GezinId { get; set; }
        public int Count { get; set; }
    }

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);

        if (firstRender)
        {
            Data = new List<LogboekRecordDto>() {
                new LogboekRecordDto{ Id= 1, ClientId=1, GezinId=0,ClientOfGezin= "Client 1", Count = 2, Datum = new DateTime(2020,1,1), LogboekSubTypeId=1, LogboekSubType="SubType 1", LogboekTypeId=1, LogboekType="Type 1", MedewerkerId = 1, Medewerker="Medewerker 1"    },
                new LogboekRecordDto{ Id= 2, ClientId=1, GezinId=0,ClientOfGezin= "Client 1", Count = 3, Datum = new DateTime(2020,2,6), LogboekSubTypeId=1, LogboekSubType="SubType 1", LogboekTypeId=2, LogboekType="Type 2", MedewerkerId = 1, Medewerker="Medewerker 1"    },
                new LogboekRecordDto{ Id= 3, ClientId=1, GezinId=0,ClientOfGezin= "Client 1", Count = 5, Datum = new DateTime(2020,3,2), LogboekSubTypeId=1, LogboekSubType="SubType 1", LogboekTypeId=3, LogboekType="Type 3", MedewerkerId = 1, Medewerker="Medewerker 1"    },
                new LogboekRecordDto{ Id= 4, ClientId=1, GezinId=0,ClientOfGezin= "Client 1", Count = 8, Datum = new DateTime(2020,1,9), LogboekSubTypeId=1, LogboekSubType="SubType 1", LogboekTypeId=4, LogboekType="Type 4", MedewerkerId = 1, Medewerker="Medewerker 1"    },
                new LogboekRecordDto{ Id= 5, ClientId=2, GezinId=0,ClientOfGezin= "Client 2", Count = 1, Datum = new DateTime(2020,2,11), LogboekSubTypeId=1, LogboekSubType="SubType 1", LogboekTypeId=5, LogboekType="Type 5", MedewerkerId = 1, Medewerker="Medewerker 1"    },
                new LogboekRecordDto{ Id= 6, ClientId=2, GezinId=0,ClientOfGezin= "Client 2", Count = 7, Datum = new DateTime(2020,3,12), LogboekSubTypeId=1, LogboekSubType="SubType 1", LogboekTypeId=1, LogboekType="Type 1", MedewerkerId = 1, Medewerker="Medewerker 1"    },
                new LogboekRecordDto{ Id= 7, ClientId=2, GezinId=0,ClientOfGezin= "Client 2", Count = 6, Datum = new DateTime(2020,1,6), LogboekSubTypeId=1, LogboekSubType="SubType 1", LogboekTypeId=2, LogboekType="Type 2", MedewerkerId = 1, Medewerker="Medewerker 1"    },
                new LogboekRecordDto{ Id= 8, ClientId=2, GezinId=0,ClientOfGezin= "Client 2", Count = 1, Datum = new DateTime(2020,2,8), LogboekSubTypeId=1, LogboekSubType="SubType 1", LogboekTypeId=3, LogboekType="Type 3", MedewerkerId = 1, Medewerker="Medewerker 1"    },
                new LogboekRecordDto{ Id= 9, ClientId=3, GezinId=0,ClientOfGezin= "Client 3", Count = 3, Datum = new DateTime(2020,3,13), LogboekSubTypeId=1, LogboekSubType="SubType 1", LogboekTypeId=4, LogboekType="Type 4", MedewerkerId = 1, Medewerker="Medewerker 1"    },
                new LogboekRecordDto{ Id= 10, ClientId=3, GezinId=0,ClientOfGezin= "Client 3", Count = 4, Datum = new DateTime(2020,1,14), LogboekSubTypeId=1, LogboekSubType="SubType 1", LogboekTypeId=5, LogboekType="Type 5", MedewerkerId = 1, Medewerker="Medewerker 1"    },
                new LogboekRecordDto{ Id= 11, ClientId=3, GezinId=0,ClientOfGezin= "Client 3", Count = 5, Datum = new DateTime(2020,2,8), LogboekSubTypeId=1, LogboekSubType="SubType 1", LogboekTypeId=1, LogboekType="Type 1", MedewerkerId = 1, Medewerker="Medewerker 1"    },
                new LogboekRecordDto{ Id= 12, ClientId=3, GezinId=0,ClientOfGezin= "Client 3", Count = 8, Datum = new DateTime(2020,3,11), LogboekSubTypeId=1, LogboekSubType="SubType 1", LogboekTypeId=2, LogboekType="Type 2", MedewerkerId = 1, Medewerker="Medewerker 1"    },
                new LogboekRecordDto{ Id= 13, ClientId=4, GezinId=0,ClientOfGezin= "Client 4", Count = 7, Datum = new DateTime(2020,1,12), LogboekSubTypeId=1, LogboekSubType="SubType 1", LogboekTypeId=3, LogboekType="Type 3", MedewerkerId = 1, Medewerker="Medewerker 1"    },
                new LogboekRecordDto{ Id= 14, ClientId=4, GezinId=0,ClientOfGezin= "Client 4", Count = 9, Datum = new DateTime(2020,2,17), LogboekSubTypeId=1, LogboekSubType="SubType 1", LogboekTypeId=4, LogboekType="Type 4", MedewerkerId = 1, Medewerker="Medewerker 1"    }
            };
            InvokeAsync(() => StateHasChanged());
        }
    }
}

