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