Hi @all,
I am currently trying to create a TreeDropDownComponent.
so far it works, but I have the problem that it doesn't make sense inside a grid.
I am currently trying to create a TreeDropDownComponent.
so far it works, but I have the problem that it doesn't make sense inside a grid.
Because this component inside the grid cell
and so the popupElement is not above the grid. Does anyone have an idea how I can fix this?
here is my css and code:
@using Telerik.Blazor
@using Telerik.Blazor.Components
<div id="treeSelectorComponent">
<span class="telerik-blazor k-dropdownlist k-valid k-picker k-picker-solid k-picker-md k-rounded-md"
onclick="@ToggleDropdown">
<span class="k-input-inner @( DropDownShown ? "k-state-focused" : "" )">
<span class="k-input-value-text">@GetSelectedItemsText()</span>
</span>
<button class="telerik-blazor k-button k-input-button k-button-solid k-button-md k-button-solid-base k-icon-button"
type="button">
<span class="telerik-blazor k-button-icon k-icon k-i-caret-alt-down"></span>
</button>
</span>
<TelerikAnimationContainer @ref="dropdown" Class="k-popup treeView-scrollable-element" >
<TelerikTreeView Data="TreeItems"
SelectionMode="TreeViewSelectionMode.Single"
OnItemClick="OnTreeItemClicked">
<TreeViewBindings>
<TreeViewBinding ParentIdField="ParentId"
TextField="Text"
IdField="Id">
<ItemTemplate>
@{
TreeItemSelector item = context as TreeItemSelector;
<span>@item!.Text</span>
}
</ItemTemplate>
</TreeViewBinding>
</TreeViewBindings>
</TelerikTreeView>
</TelerikAnimationContainer>
</div>
@code {
private bool DropDownShown { get; set; }
private TelerikAnimationContainer dropdown;
[Parameter, EditorRequired]
public List<TreeItemSelector> TreeItems { get; set; } = new List<TreeItemSelector>();
[Parameter]
public int TreeId { get; set; } = default!;
[Parameter]
public EventCallback<int> TreeIdChanged { get; set; }
async Task ToggleDropdown()
{
DropDownShown = !DropDownShown;
await dropdown.ToggleAsync();
}
string GetSelectedItemsText()
{
return TreeItems.FirstOrDefault(p => p.Id == TreeId)?.Text!;
}
private async Task OnTreeItemClicked(TreeViewItemClickEventArgs arg)
{
var item = arg.Item as TreeItemSelector;
TreeId = item!.Id;
if(TreeIdChanged.HasDelegate)
await TreeIdChanged.InvokeAsync(TreeId);
await ToggleDropdown();
}
public class TreeItemSelector
{
public int Id { get; set; }
public string Text { get; set; }
public int? ParentId { get; set; }
public bool HasChildren { get; set; }
}
}
#treeSelectorComponent {
.k-popup {
&.treeView-scrollable-element{
overflow-y: auto;
max-height: 300px;
}
}
}
I have an animation container for two fields inside the form. One component is a textbox, but the other components is a grid.
The problem is that grid show up other forms of component. This is for the position of css.
<TelerikAnimationContainer @ref="@tacHeaderJson" AnimationType="@AnimationType.PushRight" style="position: static !important;">
<TelerikTextBox @bind-Value="@DataMapHeaders.Value"
Enabled=@Enabled
Id="request-header">
</TelerikTextBox>
</TelerikAnimationContainer>
<TelerikAnimationContainer @ref="@tacHeaderTable" AnimationType="@AnimationType.PushLeft" style="position: static !important;">
<TelerikGrid Data=@HeadersTable
Width="100%"
EditMode="@GridEditMode.Inline"
@ref="@GridRef">
<GridToolBarTemplate>
<GridCommandButton Command="Add" Icon="@SvgIcon.Plus" Enabled="@Enabled">@Localizer!["Add"]</GridCommandButton>
</GridToolBarTemplate>
<GridColumns>
<GridColumn Field="@nameof(HeaderParameter.Parameter)" Title="@Localizer!["Key"]"></GridColumn>
<GridColumn Field="@nameof(HeaderParameter.Value)" Title="@Localizer!["Value"]"></GridColumn>
<GridCommandColumn>
<GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil" ThemeColor="@(ThemeConstants.Button.ThemeColor.Info)" Enabled="Enabled"></GridCommandButton>
<GridCommandButton Command="Cancel" Icon="@SvgIcon.X" ThemeColor="@(ThemeConstants.Button.ThemeColor.Error)" OnClick="@DeleteHandler" Enabled="Enabled"></GridCommandButton>
<GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true" OnClick="@UpdateHandler" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" Enabled="Enabled"></GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
</TelerikAnimationContainer>
I try this,
.k-animation-container {
position: static !important;
overflow: hidden;
z-index: 100;
}
But the style overide all style of current page. I have some dropdowns and the show the options in the bottom of the page.
Any solution?
Best regards
I feel a bit silly not being able to find the "right" solution to this, but here it goes...
I see the Blazor Card demos has an Expandable demo. I want to do something a lot like this but I will have many cards, each one of them should be able to expand it's own "sub-content" at will. The demo shows a single button tied to a single TelerikAnimationContainer. What is the best solution to have 1-n cards, each with their own expandable content that slides out? (mine will slide out to the right, but I don't know that that matters).
Thanks,
Justin
Telerik UI for Blazor 2.29.0