Hello Andrzej,

With a templated component you are free to add inputs or otherwise use @bind-Value and/or other events. What the demo shows is a dropdown tree and a dropdown grid or a multi column combo box. These are three components we will have out-of-the-box. Feel free to Vote and Follow them as well.

Regards,
Marin Bratanov
Progress Telerik

Hi Andrzej,

We have been reviewing this and we can see value in providing a popup that can be tied to an anchor like our dropdowns. Such a component would probably be pretty similar to the current DropDownList in terms of settings, but instead of Data, TextField, ValueField and Value related events, it would probably have a ValueTemplate and a PopupTemplate for you to render things, and the PopupWidth and PopupHeight parameters. I have tweaked the title of this request to better clarify this too and edited the opener post with what we could do.

For the time being you can

• either build your own dropodwns as desired by your app, including an entire dropdown form if you so wish, entirely from scratch (and maybe use a Telerik AnimationContainer or Window in them for popups, if CSS styling fits your needs),
• or you can use the set of dropdown components we provide - 8 at the time of writing - and Follow the implementation of new ones, and use the provided workarounds for the time being.
  

In your private ticket I have made a few examples for you that show how you can use CSS to control positioning and z-index order, and I am pasting one such example here as a reference for anyone else finding this thread (I highlighted in blue the popup itself, and in purple the value template, and in green positioning logic):

<style>
    .content-that-can-overflow .k-window-content {
        position: static;
    }
</style>

<TelerikWindow Visible="@(Selected != null)" Modal="true" Width="700px" Height="300px" Class="content-that-can-overflow">
    <WindowTitle>
        Edit
    </WindowTitle>
    <WindowContent>
        <EditForm Model="@Selected" OnValidSubmit="@Save">
            <div style="height: 2em;">@* one way to keep the layout *@
                <div style="position:absolute;display:inline-flex">
                    <span class="k-widget k-dropdown k-header" @onclick="@ToggleDropdown" style="width: 600px;">
                        <span class="k-dropdown-wrap k-state-default @( DropDownShown ? "k-state-focused" : "" )">
                            <span class="k-input">
                                @*@Organizations?.FirstOrDefault(o => o.OrganizationId == Selected.OrganizationId)?.Name*@
                                selection text
                            </span>
                            <span class="k-select">
                                <span class="k-icon k-i-arrow-60-down"></span>
                            </span>
                        </span>
                    </span>
                    <TelerikAnimationContainer @ref="dropdown" Width="600px" Height="400px" Class="k-popup" Top="35px">
                        lorem ipsum
                    </TelerikAnimationContainer>
                    @if (DropDownShown)
                    {
                        <div style="position:fixed;top:0;left:0;bottom:0;right:0;margin:-1000px" @onclick="@(() => ToggleDropdown())"></div>
                    }
                </div>
            </div>
            <div class="form-row">
                <ValidationSummary />
                <TelerikButton Icon="save" ThemeColor="@Telerik.Blazor.ThemeConstants.Button.ThemeColor.Primary" ButtonType="@ButtonType.Submit">Update</TelerikButton>
                @*<TelerikButton Icon="cancel" OnClick="@ClearSelection" ButtonType="@ButtonType.Button">Cancel</TelerikButton>*@
            </div>
        </EditForm>
    </WindowContent>
</TelerikWindow>

@code{
    bool DropDownShown { get; set; }
    private TelerikAnimationContainer dropdown;
    object Selected { get; set; } = new object();

    async Task ToggleDropdown()
    {
        DropDownShown = !DropDownShown;
        await dropdown.ToggleAsync();
    }

    void Save()
    {

    }
}

Ultimately, what you are describing is a highly specific component that will fit your app, but is not generic:

• The popup template for a generic component like ours is defined by our component and is based on the Data you provide - this is, effectively a codeless solution.
• The Template is unclear and it overlaps the popup template perhaps, because that's the core of the component.
• An EditTemplate is also unclear since all dropdowns are, inherently, editors, so there is no difference for them between edit and non-edit mode - they don't have a non-edit mode (except through Enabled=false, which is a separate case and functionality).

At the same time, our component suite must be generic and reusable, it must cater to the common and important scenarios and cannot focus on the needs of one particular design.

Regards,
Marin Bratanov
Progress Telerik

Hello Andrzej,

We already provide components like the Window and the AnimationContainer, and you can implement any other component to use there. You can even implement more complex things with them such as making a dropdowntree now - with a treeview and an animation container.

Regards,
Marin Bratanov
Progress Telerik