Can you tell me how to force the Grid Layout to allow space for my TelerikAnimationContainer? It gets chopped off when the 3rd row is "short". I don't want the scroll bar to accommodate the height. I want to see the entire filter.
Fully opened (When data extends the Grid):
Short Closed:
Short Open
<TelerikGridLayout Class="grid-layout">
<GridLayoutRows>
<GridLayoutRow Height="28px" />
<GridLayoutRow />
<GridLayoutRow />
</GridLayoutRows>
<GridLayoutItems>
<GridLayoutItem Row="1">
@if (Groups?.Count > 0)
{
<TelerikButton OnClick="@OnCreate"
Class="gsi-width-100pct gsi-padding-0">
Create New
</TelerikButton>
}
</GridLayoutItem>
<GridLayoutItem Row="2">
<div>
<div class="gsi-background-color-light" style="height: 41px; display:flex;justify-content:space-between;">
<div class="align-self-center gsi-font-kendo gsi-margin-0">
Patient Filters
</div>
<TelerikButton FillMode="Clear"
Class="gsi-border-width-0 gsi-border-color-white gsi-padding-8"
Icon="@(Telerik.SvgIcons.SvgIcon.Filter)"
OnClick="@GridFilterExpandCollapse" />
</div>
<TelerikAnimationContainer @ref="@FilterContainer"
Class="gsi-background-color-light gsi-margin-5 k-rounded-0"
Width="100%"
Height="100vm">
<TelerikStackLayout Spacing="1px" Class="gsi-margin-5">
<TelerikCard Width="33vh">
<CardBody>
@if (SessionOption1Items?.Count > 0)
{
<div class="form-group-short gsi-max-width-250">
<label class="col-form-label">@SessionOption1Template.Name</label><br />
<TelerikDropDownList Data="@SessionOption1Items"
@bind-Value="@SessionOptionIndex1"
TextField="Name" ValueField="Id" />
</div>
@if (SessionOption2Items?.Count > 0)
{
<div class="form-group-short gsi-max-width-250">
<label class="col-form-label">@SessionOption2Template.Name</label><br />
<TelerikDropDownList Data="@SessionOption2Items"
@bind-Value="@SessionOptionIndex2"
TextField="Name" ValueField="Id" />
</div>
}
}
else
{
<small>No Defined Filter</small>
}
</CardBody>
</TelerikCard>
<TelerikCard Width="33vh">
<CardBody>
<div class="form-group-short gsi-max-width-250">
<label class="col-form-label">Date Range</label><br />
<TelerikDropDownList Data="@DateRangeOptions"
@bind-Value="@DateRangeIndex"
TextField="Name" ValueField="Id" />
</div>
<div class="form-group-short gsi-max-width-250">
<label class="col-form-label">Group Behavior</label><br />
<TelerikDropDownList Data="@GroupFilterOptions"
@bind-Value="@GroupFilterIndex"
TextField="Name" ValueField="Id" />
</div>
</CardBody>
</TelerikCard>
<TelerikCard Width="34vh">
<CardBody>
<div class="form-group-short gsi-max-width-250">
<label class="col-form-label">Status</label><br />
<TelerikDropDownList Data="@IsActiveFilterOptions"
@bind-Value="@IsActiveIndex"
TextField="Name" ValueField="Id" />
</div>
<div class="form-group-short align-bottom">
<label class="col-form-label gsi-color-white">Apply Filter</label><br />
<TelerikButton OnClick="OnFilterChanged"
Class="gsi-background-color gsi-color-white gsi-width-100pct">
Apply Filter
</TelerikButton>
</div>
</CardBody>
</TelerikCard>
</TelerikStackLayout>
</TelerikAnimationContainer>
</div>
</GridLayoutItem>
<GridLayoutItem Row="3">
<TelerikGrid Data=@Sessions
...
<div class="gsi-background-color-light" style="height: 41px; display:flex;justify-content:space-between;">
<div class="align-self-center gsi-font-kendo gsi-margin-0">
Patient Filters
</div>
<TelerikButton Id="filterChevronButton"
FillMode="Clear"
Class="gsi-border-width-0 gsi-border-color-white gsi-padding-8"
Icon="@( FilterVisible? Telerik.SvgIcons.SvgIcon.Filter : Telerik.SvgIcons.SvgIcon.Filter)"
OnClick="@(() => ExpandCollapse())" />
</div>
<TelerikAnimationContainer @ref="@AnimContainer"
Class="gsi-background-color-light gsi-margin-5 k-rounded-0"
Width="100%"
Height="100vm">
<TelerikStackLayout Spacing="1px" Class="gsi-margin-5">
<TelerikCard Width="25vh">
<CardBody>
<div class="form-group-short">
<label class="col-form-label" for="firstName">First Name</label><br />
<TelerikTextBox @bind-Value="@FirstNameFilter"
Name="firstName"
Placeholder="-No Filter-"
OnChange="@(x => OnFilterChanged(nameof(FirstNameFilter), x))">
</TelerikTextBox>
</div>
private async Task OnFilterChanged(string propertyName, object newValue) { await GetPatients(); ExpandCollapse(false); }
private async Task OnFilterChanged(string propertyName, object newValue) { object existingValue = this.GetPropertyValue(propertyName); if (newValue != existingValue) { this.SetPropertyValue(propertyName, newValue); await GetPatients(); ExpandCollapse(false); } }
public async void ExpandCollapse(bool? filterVisible = null) { if (filterVisible.HasValue) { await AnimContainer.ToggleAsync(); FilterVisible = filterVisible.Value; } else { await AnimContainer.ToggleAsync(); FilterVisible = !FilterVisible; } }
How can I set the Z-index for the AnimationContainer to make it visible in the foreground ?
I am using it inside a Window-Control (Modal=True) and that makes problems in my case...
The Telerik animation containers get placed on the body using position:absolute and have a z-index that is set based on other animation containers. (https://feedback.telerik.com/blazor/1548718-showing-the-context-menu-via-its-api-method-does-not-set-its-z-index?_)
So they seem to get set to be a value like 2.
I am using a ui framework that has some elements on the body with z-indexes > 1000. Eg a side menu.
I am using the Telerik grid. The column menu's use the animation container, and because the animation containers get placed directly on the body with a z-index of 2, they always appear behind this side menu.
I do not want to set a blanket CSS rule like `.k-animation-container { z-index: 2000 !important; }` because it will break any other behaviour that Telerik animation containers have. When i don't use `!important`, eg like here (https://feedback.telerik.com/blazor/1514877-css-class-does-not-render-on-the-topmost-element) the inline style overrides it anyway.
Could this be solved by any of these:
1. Set a default z-index value for animation containers, and have all subsequent animation containers base themselves off of that value? Eg a config setting, or a CSS variable, or a dummy animation container being placed into the dom with a set z-index value so that all others are based on it
Or,
2. A parameter as part of the grid column menu that lets me pass an extra class to the animation container, I can then use this class to specifically set the z-index for only column menu instances of the animation container.
I am having a really strange issue with an animation container. For reference, this animation container appears in one half of a Splitter, and the container includes a Grid which loads data.
When I prompt the animation container, with the container animation set to "SlideLeft", the container immediately appears in middle of the splitter, but then animates to the left before jumping back.
The confusing part is that I have other virtually identical implementations of the animation container that do not exhibit this issue. The animation container content is provided generically through a render fragment. Showing and hiding of the container is handled through a custom "container stack" component we have written, but this is common between the working and stuttering containers.
Any thoughts as to what would cause this? We are using the same parent container for multiple animation containers, although only one is shown on top at a time.
For mobile view in column item i want to add the a three dot menu.
On click of that button there will be a popup with two buttons (Like image)
I tried a number of things but not able to figure out which component will be helpful in this condition.
Any help will be appreciated
(Kendo Blazor)
I want to have a carousel on my page that fades instead of sliding, but there is no parameter that I can find to set this.
The animation container is able to use a fade animation. https://demos.telerik.com/blazor-ui/animationcontainer/overview
I would want it to function similarly to bootstraps version of crossfade. https://getbootstrap.com/docs/5.3/components/carousel/
Would I be better off trying to customize the existing carousel component somehow? Could the effect I want be achieved with CSS? Do I need to make a feature request, and where would I do that?
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