Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 13 Dec 2022 18:24 by ADMIN
dubeg
Created on: 01 Jun 2020 03:25
Category: UI for Blazor
Type: Feature Request
10
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.

---

ADMIN EDIT

Here is a way to change the animation of the dropdown per component - through the PopupClass (note that the popup class may move to the topmost element of the popup in a future version, if this stops working, inspect the rendering to see where the custom class is and how to cascade through it):

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

    .slow-animation.k-popup.k-reset {
        transition-duration: 1000ms !important;
    }

    .no-animation.k-popup.k-reset {
        transition: none !important;
    }
</style>



<TelerikComboBox PopupClass="fast-animation"
                 Data="@myComboData"
                 TextField="MyTextField"
                 ValueField="MyValueField"
                 @bind-Value="selectedValue"
                 Placeholder="Fast animation"
                 ClearButton="true" Filterable="true">
</TelerikComboBox>

<TelerikDropDownList PopupClass="no-animation"
                     Data="@myComboData"
                     TextField="MyTextField"
                     ValueField="MyValueField"
                     @bind-Value="selectedValue"
                     DefaultText="No Animation">
</TelerikDropDownList>

<TelerikDatePicker PopupClass="slow-animation" @bind-Value="@SelectedDate"></TelerikDatePicker>

@code {

    IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
    DateTime SelectedDate { get; set; } = DateTime.Now;
    int selectedValue { get; set; } 
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }
}

5 comments
ADMIN
Dimo
Posted on: 13 Dec 2022 18:24

@Kam - the necessary CSS rule is different now. See this request about a global animation speed setting.

Regards,
Dimo
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/.

Kam
Posted on: 13 Dec 2022 15:15

For Blazor TelerikDropDownList how do I remove the animation?

The suggested CSS does not speed up the drop-down animation.

    

ADMIN
Joana
Posted on: 28 Feb 2022 19:13

Hello everyone,

Customization of the popup is available through `ComboBoxPopupSettings`  tag that allows control over `AnimationDuration` along with size parameters and css class.  

https://docs.telerik.com/blazor-ui/components/combobox/overview#popup-settings 

Regarding the animation delay - it does not seem like a good fit for slide down animation that is the default one for selects and pickers. If any of you would like to have such option built-in, please open a separate request so that we can properly evaluate the demand.

Regards,
Joana
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

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.
Create an account Log In
View
Type
Status
Category