@page "/dropdown-datagrid"
@page "/docs/guides/components/dropdowndatagrid.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    DropDownDataGrid
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>DropDownDataGrid</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase a dropdown with an embedded DataGrid displaying multiple columns, custom templates for header/footer/value/items, configurable filtering with case sensitivity and operators, custom filtering via <code>LoadData</code> event, multiple selection support, virtualization with <code>IQueryable</code> or <code>LoadData</code>, density control, and dynamic data binding.
</RadzenText>

<RadzenText Anchor="dropdown-datagrid#get-set-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Get and Set the value of DropDownDataGrid
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the <strong>DropDownDataGrid</strong> has a Value property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridBindValue">
    <DropDownDataGridBindValue />
</RadzenExample>

<RadzenText Anchor="dropdown-datagrid#value-and-change-event" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Get and Set the value of DropDownDataGrid using Value and Change event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Value property can be used to set the value of the component and <code>Change</code> event to get the user input.
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridChangeEvent">
    <DropDownDataGridChangeEvent />
</RadzenExample>

<RadzenText Anchor="dropdown-datagrid#text-value-properties" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Define Text and Value properties
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>TextProperty</code> and <code>ValueProperty</code> properties to specify which fields to display and use as values.
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridTextValueProperties">
    <DropDownDataGridTextValueProperties />
</RadzenExample>

<RadzenText Anchor="dropdown-datagrid#template" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    DropDownDataGrid with custom header, footer, value and item templates
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>HeaderTemplate</code>, <code>FooterTemplate</code>, <code>ValueTemplate</code>, and <code>Template</code> properties to customize the appearance.
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridTemplate">
    <DropDownDataGridTemplate />
</RadzenExample>

<RadzenText Anchor="dropdown-datagrid#multiple-columns" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Define multiple columns
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Add multiple <code>RadzenDropDownDataGridColumn</code> components to display additional data columns in the dropdown grid.
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridColumns">
    <DropDownDataGridColumns />
</RadzenExample>

<RadzenText Anchor="dropdown-datagrid#filtering-case-sensitivity-and-filter-operator" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Filtering case sensitivity and filter operator
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Configure filtering behavior with <code>FilterCaseSensitivity</code> and <code>FilterOperator</code> properties.
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridFiltering">
    <DropDownDataGridFiltering />
</RadzenExample>

<RadzenText Anchor="dropdown-datagrid#custom-filtering-with-loaddata" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Custom filtering with <strong>LoadData</strong> event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>LoadData</code> event to implement custom filtering logic and load data on-demand.
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridFilteringLoadData">
    <DropDownDataGridFilteringLoadData />
</RadzenExample>

<RadzenText Anchor="dropdown-datagrid#multiple-selection" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Multiple selection
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Multiple="true"</code> to enable selection of multiple items from the dropdown grid.
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridMultiple">
    <DropDownDataGridMultiple />
</RadzenExample>

<RadzenText Anchor="dropdown-datagrid#virtualization-with-iqueryable" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    DropDownDataGrid virtualization with <strong>IQueryable</strong> event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Enable virtualization with <code>IQueryable</code> to efficiently handle large datasets by loading items on demand.
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridVirtualization">
    <DropDownDataGridVirtualization />
</RadzenExample>

<RadzenText Anchor="dropdown-datagrid#virtualization-with-loaddata" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    DropDownDataGrid virtualization with <strong>LoadData</strong> event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Combine virtualization with the <code>LoadData</code> event for custom data loading with large datasets.
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridVirtualizationLoadData">
    <DropDownDataGridVirtualizationLoadData />
</RadzenExample>

<RadzenText Anchor="dropdown-datagrid#density" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Control DropDown's DataGrid Density with <strong>Density</strong> parameter
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Density</code> property to control the spacing and compactness of rows in the dropdown grid.
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridDensity">
    <DropDownDataGridDensity />
</RadzenExample>

<RadzenText Anchor="dropdown-datagrid#dynamic" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    DropDownDataGrid binding to dynamic data
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Bind the DropDownDataGrid to dynamic data sources where columns and data are determined at runtime.
</RadzenText>
<RadzenExample ComponentName="DropDownDataGrid" Example="DropDownDataGridDynamicData">
    <DropDownDataGridDynamicData />
</RadzenExample>



<RadzenText Anchor="dropdown-datagrid#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor DropDownDataGrid component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a DropDownDataGrid." },
        new KeyboardShortcut { Key = "Alt + DownArrow", Action = "Open DropDownDataGrid popup." },
        new KeyboardShortcut { Key = "DownArrow on closed popup", Action = "Select next DropDownDataGrid item." },
        new KeyboardShortcut { Key = "UpArrow on closed popup", Action = "Select previous DropDownDataGrid item." },
        new KeyboardShortcut { Key = "DownArrow in an opened popup", Action = "Focus next DropDownDataGrid item." },
        new KeyboardShortcut { Key = "UpArrow in an opened popup", Action = "Focus previous DropDownDataGrid item." },
        new KeyboardShortcut { Key = "LeftArrow in an opened popup", Action = "Goes to previous DropDownDataGrid page." },
        new KeyboardShortcut { Key = "RightArrow in an opened popup", Action = "Goes to next DropDownDataGrid page." },
        new KeyboardShortcut { Key = "Enter in an opened popup", Action = "Select the focused DropDownDataGrid item and close the popup." },
        new KeyboardShortcut { Key = "Esc or Alt + DownArrow in an opened popup", Action = "Close the DropDownDataGrid popup." }
    };
}
