Unplanned
Last Updated: 16 Feb 2021 10:48 by ADMIN
Andrzej
Created on: 10 Feb 2021 12:32
Category: UI for Blazor
Type: Feature Request
11
DropDown Container (Popup component tied to an anchor for positioning)

Please Add DropDown Container so it will be possible to add Nested Custom Editors inside Grid Cell

Regards

Andrzej

---

ADMIN EDIT

A dropdown container we would create would be a popup that ties to its anchor and gives you a template to render your own content rather than render its own items based on Data. It cannot, however, be tied to a specific case for a grid or other editor, it will be up to the developer to use the container and tie it to the application logic.

It should also expose events like PopupShowing (preferred to also cater for keyboard navigation) or ExpandClick so you can know when it is going to be expanded and, for example, fetch fresh data for scenarios with highly volatile data (example here).

---

5 comments
ADMIN
Marin Bratanov
Posted on: 16 Feb 2021 10:48

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Andrzej
Posted on: 16 Feb 2021 10:25

Hi,

thanks for status change.

Just one clarification, you wrote that "you are describing is a highly specific component that will fit your app, but is not generic" - I totally disagree.

IMHO it is something extremely generic. Maybe I explained it in wrong way.

I use very similar Component called DevExtreme DropDownBox in my Vue.js applications, it works in any scenario like inside Grid Cell, on Popup, etc...

Regards

Andrzej

ADMIN
Marin Bratanov
Posted on: 16 Feb 2021 10:09

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" Primary="true" 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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Andrzej
Posted on: 15 Feb 2021 08:26

Hi,

please reopen this feature since AnimationContainer is far from my expectation.

I followed this dropdown example and it works in some cases but it is still far from my needs. There are problems in more complex scenarios when control is placed on Window, on Bootstrap Grid or as InCell editor inside Grid placed on Window.

That I would like to have is a general DropDownContainer that use AnimationContainer like your DropDownList or ComboBox when Popup is located on TelerikRootComponent so all those problems will be fixed. 

My basic Idea is to have something like

<DropDownContainer>

   <Template />

   <EditTemplate />

   <PopupTemplate />

</DropDownContainer>

With such control all typical controls like DropDownGrid, DropDownTree or any complex object DropDownForm would be very easy to make.

Regards

Andrzej

ADMIN
Marin Bratanov
Posted on: 10 Feb 2021 13:27

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.