Completed
Last Updated: 12 Dec 2023 07:54 by ADMIN
Release 5.1.0 (31 Jan 2024) (R1 2024)
Andrzej
Created on: 10 Feb 2021 12:32
Category: UI for Blazor
Type: Feature Request
43
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).

---

10 comments
ADMIN
Nadezhda Tacheva
Posted on: 07 Sep 2023 09:26

Hi Ben,

Thank you for getting back to me!

I already notified our management of your request, so we can consider possible time frames. I will also inform our Professional Services team. They will additionally reach out to you to negotiate the terms.

Regards,
Nadezhda Tacheva
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Ben
Posted on: 31 Aug 2023 21:05

Hi Nadezhda,

My team is interested in looking into the "Feature Acceleration" program. Can you put me in touch with the Professional Services team?

Thanks!

ADMIN
Nadezhda Tacheva
Posted on: 23 Aug 2023 10:57

Hi Ben,

We do have plans for releasing the Popup component (or DropDown Container, the naming may be different). However, its implementation is not yet planned for a specific release and I am not able to provide a firm estimate.

In case this component is crucial for your application development, I can suggest our so-called "Feature Acceleration" program. This is a paid service that allows you to negotiate a deal with our management to include the desired feature/component sooner in our roadmap.

Let me know if you are interested in pursuing this option and I will put you in touch with our Professional Services team to discuss the details.

Regards,
Nadezhda Tacheva
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Ben
Posted on: 16 Aug 2023 19:01
We have a large Blazor application in our organization where we heavily use popovers in the UI. Is there a plan to officially support a popover Blazor component? Is it on the roadmap? My team needs to know so we know how to proceed with our development. Thanks!
Dale
Posted on: 21 Jan 2023 18:01
I'm hoping we see the component also in for Blazor. This component already exists for Telerik controls in others frameworks like Popover - ASP.NET MVC Controls | Telerik UI for ASP.NET MVC. I don't see why implementing in other Telerik frameworks is valuable but it's not in Blazor.
Attached Files:
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" 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

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/.