Unplanned
Last Updated: 03 Jun 2020 01:43 by dubeg
dubeg
Created on: 01 Jun 2020 03:25
Category: UI for Blazor
Type: Feature Request
4
Way to modify default values of animations (such as duration and delay) for a component (such as Combobox)

I couldn't find a way to change the default AnimationDuration of the combobox's popup. Personally, I find the default AnimationDuration set at 300ms way too high.

I'd like a way to change it either per-component, by setting animation properties on them when appropriate, or globally, by configuring it in Startup.cs or on TelerikRootComponent perhaps. I've no idea how this should work.

2 comments
dubeg
Posted on: 03 Jun 2020 01:43
Hi Svetoslav, that works, thanks!
ADMIN
Svetoslav Dimitrov
Posted on: 01 Jun 2020 07:33

Hello Guillaume,

There is an open Feature Request for adding custom CSS classes per component instance in order to cascade some style through it. You can see if from here: https://feedback.telerik.com/blazor/1433654-component-specific-css-classes-and-ability-to-set-classes-per-instance. This would allow you to set the transition-duration of a specific component to a new value. You can Vote for it, to raise its popularity, and Follow it to receive email notifications on status updates.

For the time being, I have created a workaround solution. It will target all animation containers on the page (DropDownList, Calendar, DatePicker etc) and set their animation transition duration to the same amount. Below, you can see the code sample:

<style>
    div.k-animation-container .k-popup.k-reset {
        transition-duration: 100ms !important;
    }
</style>

Selected value: @selectedValue
<br />

<TelerikComboBox Data="@myComboData" 
                 TextField="MyTextField" 
                 ValueField="MyValueField" 
                 @bind-Value="selectedValue"
                 Placeholder="Select an item..." 
                 ClearButton="true" Filterable="true">
</TelerikComboBox>

@code {
    IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    int selectedValue { get; set; } = 3; //usually the current value should come from the model data

    //in a real case, the model is usually in a separate file
    //the model type and value field type must be provided to the dropdpownlist
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }
}

Regards,
Svetoslav Dimitrov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.