@page "/Test"

@using Telerik.Blazor.Components
@inject PreAwardJobSetupService preAwardSvr

<TelerikMultiColumnComboBox TItem="Estimate"
                            TValue="Guid?"
                            TextField="Display"
                            ValueField="Id"
                            @bind-Value="SelectedEstimateId"
                            Filterable="true"
                            ScrollMode="DropDownScrollMode.Virtual"
                            PageSize="@PageSize"
                            OnRead="@OnEstimateLookup"
                            Width="100%"
                            ItemHeight="@ItemHeight"
                            ListHeight="@ListHeight">
    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="Revision" Title="Revision" Width="80px" />
        <MultiColumnComboBoxColumn Field="RevisionName" Title="RevisionName" Width="200px" />
        <MultiColumnComboBoxColumn Field="Opportunity_Title" Title="Opportunity Title" Width="200px" />
        <MultiColumnComboBoxColumn Field="Customer_Name" Title="Customer" Width="200px" />
        <MultiColumnComboBoxColumn Field="ApprovalStatus" Title="Approval Status" Width="100px" />
        <MultiColumnComboBoxColumn Field="OppStatus" Title="Opp Status" Width="100px" />
    </MultiColumnComboBoxColumns>
</TelerikMultiColumnComboBox>

@code {
    private Guid? SelectedEstimateId { get; set; }
    public string ListHeight { get; set; } = "268px";
    public int ItemHeight { get; set; } = 28;
    public int PageSize { get; set; } = 50;

    private async Task OnEstimateLookup(MultiColumnComboBoxReadEventArgs args)
    {
        string? filter = args.Request?.Filters?.OfType<Telerik.DataSource.FilterDescriptor>().FirstOrDefault()?.Value as string;

        if (string.IsNullOrWhiteSpace(filter))
        {
            args.Data = new List<Estimate>();
            args.Total = 0;
            return;
        }

        int page = args.Request?.Page ?? 1;
        int pageSize = args.Request?.PageSize ?? PageSize;

        var result = await preAwardSvr.GetEstimatesPagedAsync(filter, page, pageSize);

        args.Data = result.Estimates;
        args.Total = result.TotalCount;
    }
}

<TelerikDropDownTree Data="@myTreeData"
                     @bind-Value="selectedTreeValue"
                     DefaultText="None"
                     ShowClearButton="true">
    <ValueTemplate>
        @{
            var selectedItem = FindItemById(myTreeData, selectedTreeValue);
            <span>@(selectedItem != null ? selectedItem.Text : "None")</span>
        }
    </ValueTemplate>
</TelerikDropDownTree>

EditMode="GridEditMode.Incell"

EditMode="GridEditMode.Inline"

<TelerikSplitter Orientation="SplitterOrientation.Horizontal">
    <SplitterPanes>
        <SplitterPane Size="40%" Min="30%" Max="70%"
                      Collapsible="false"
                      Scrollable="true"
                      Class="gsi-align-top-pane">
            <TelerikSkeleton Height="600px" Width="100%" />
        </SplitterPane>
        <SplitterPane Collapsible="false" Min="30%" Max="70%" Scrollable="true">
            <TelerikGridLayout Class="grid-layout">
                <GridLayoutRows>
                    <GridLayoutRow />
                    <GridLayoutRow />
                    <GridLayoutRow />
                </GridLayoutRows>
                <GridLayoutItems>
                    <GridLayoutItem Row="1">
                        <TelerikSkeleton Height="75px"
                                         Class="k-display-inline-block" />
                    </GridLayoutItem>
                    <GridLayoutItem Row="2">
                        <table class="k-grid">
                            @for (int i = 0; i < 10; i++)
                            {
                                <tr class=skeleton-table-row>
                                    <td class="skeleton-table-col">
                                        <TelerikSkeleton Width="100%"></TelerikSkeleton>
                                    </td>
                                    <td class="skeleton-table-col">
                                        <TelerikSkeleton Width="100%"></TelerikSkeleton>
                                    </td>
                                    <td class="skeleton-table-col">
                                        <TelerikSkeleton Width="100%"></TelerikSkeleton>
                                    </td>
                                    <td class="skeleton-table-col">
                                        <TelerikSkeleton Width="100%"></TelerikSkeleton>
                                    </td>
                                </tr>
                            }
                        </table>
                    </GridLayoutItem>
                    <GridLayoutItem Row="3">
                        <TelerikSkeleton Height="75px"
                                         Class="k-display-inline-block" />
                    </GridLayoutItem>
                </GridLayoutItems>
            </TelerikGridLayout>
        </SplitterPane>
    </SplitterPanes>
</TelerikSplitter>

.gsi-align-top-pane {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
}

    .gsi-align-top-pane > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        align-self: flex-start !important;
    }

    .gsi-align-top-pane .k-skeleton {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        align-self: flex-start !important;
        /* Remove any auto margin that may be set by Telerik */
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
        margin-block: 0 !important;
        margin: 0 !important;
    }