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.

HI:

How Can I change the expanded i/collapsed con from TelerikTreeView?

There is a demo in the documentation but is for the main icon, not for the collapse/expanded icon.

Thanks in advance.

Hello, 
I have implemented searching, multiselect using telerik multiselect for multiple values. And relationship between multiselect is maintained between multiple multiselect. Also, i have used getter setter to set "All" option when there is no value selected. While Searching, i have implemented an api call and get the desired output.

Issue: Whenever I select a value from multiselect and search for other value and immediately remove the values using backspace, blank is shown in the respective multiselect. But when i click outside "All" is retained in the multiselect.

I have managed to retrieve the search text from MultiSelectReadEventArgs args using OnRead, as shown below:

"dynamic item = args.Request.Filters.FirstOrDefault();
var searchText = (string)item.Value; "

Expected Result : Whenever I select a value from multiselect and search for other value and immediately remove the selected values and text using backspace, "All" should be shown in the respective multiselect. But when i click outside "All" is retained in the multiselect. Is there anyway that I could achieve it?

Here is an example of Getter setter implementation as :

@page "/multiselect/overview"

<HobbiesTemplate>
    <TelerikMultiSelect Data="@Hobbies"
                        @bind-Value="@SelectedHobbyIds"
                        ValueField="@nameof(HobbiesDto.HobbyId)"
                        TextField="@nameof(HobbiesDto.HobbyName)"
                        Placeholder="Select your favourite sport..."
                        Id="products-multiselect" Width="100%">
    </TelerikMultiSelect>
</HobbiesTemplate>

@code {
    public List<int> SelectedHobbyIds { get{return SelectedHobbyIds;}
                        set {
                                // if nothing and 'All' option should be selected 
                                if (value.Count == 0 || (value.Any(x => x == 0) && !SelectedHobbyIds.Any(x => x == 0)))
                                {
                                    SelectedHobbyIds = new List<int>() { 0 };
                                }
                                else
                                {
                                    // if other option selected then remove 'All' option
                                    if (value.Count() > 1 && value.Any(x => x == 0))
                                    {
                                        SelectedHobbyIds = value.Where(x => x != 0).ToList();
                                    }
                                    else
                                    {
                                        SelectedHobbyIds = value;
                                    }
                                }
                            }

            }

    public IEnumerable<HobbiesDto> Hobbies { get; set; } = new List<HobbiesDto>()
    {
        new HobbiesDto(0,"All"),
        new HobbiesDto(1, "Basketball"),
        new HobbiesDto(2, "Golf"),
        new HobbiesDto(3, "Baseball"),
        new HobbiesDto(4, "Table Tennis"),
        new HobbiesDto(5, "Volleyball"),
        new HobbiesDto(6, "Football"),
        new HobbiesDto(7, "Boxing"),
        new HobbiesDto(8, "Badminton"),
        new HobbiesDto(9, "Cycling"),
        new HobbiesDto(10, "Gymnastics"),
        new HobbiesDto(11, "Swimming"),
        new HobbiesDto(12, "Wrestling"),
        new HobbiesDto(13, "Snooker"),
        new HobbiesDto(14, "Skiing"),
        new HobbiesDto(15, "Handball"),
    };

    public class HobbiesDto
    {
        public int HobbyId { get; set; }
        public string HobbyName { get; set; }

        public HobbiesDto() { }

        public HobbiesDto(int id, string name)
        {
            HobbyId = id;
            HobbyName = name;
        }
    }
}

this is my hobbiestemplate.razor page

<div class="demo-wrapper k-d-grid k-gap-8 k-flex-1 k-px-8 k-pt-7">
    <div data-role="skeletoncontainer" class="side-container k-skeleton k-opacity-20 !k-d-flex k-flex-col k-align-items-center k-px-5 k-pt-7.5 k-rounded-tl-md k-rounded-tr-md" aria-live="polite" aria-label="Loading...">
        <span class="k-skeleton k-opacity-80 k-skeleton-circle k-w-18 k-h-18 k-mb-5"></span>

        <div class="k-d-flex k-flex-col k-align-items-center k-gap-1">
            <span class="k-skeleton k-w-24 k-h-4 k-rounded-md"></span>
            <span class="k-skeleton k-opacity-80 k-w-14 k-h-2.5 k-rounded-md"></span>
        </div>

        <div class="k-d-flex k-flex-col k-w-full k-mt-13 k-gap-4">
            <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
            <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
            <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
        </div>

    </div>

    <div class="main-container k-pb-8 k-d-flex k-flex-col">
        <div class="k-d-flex k-gap-3 k-align-items-center k-mb-5">
            <span class="avatar !k-d-none k-skeleton k-opacity-30 k-skeleton-circle k-w-12 k-h-12"></span>
            <h4 class="k-h4 k-opacity-20 k-font-bold">Hobbies</h4>
        </div>
        <span class="k-d-inline-block">Favourite sport</span>
        @ChildContent
        <span class="hint k-font-size-sm k-font-italic k-mt-1.5">Add your favourite sport, if it is not in the list.</span>

        <div class="k-d-flex k-flex-col k-gap-1 k-mt-5">
            <span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
            <span class="k-skeleton k-opacity-30 k-rounded-md k-h-8"></span>
        </div>

        <div class="k-d-flex k-flex-col k-grow k-gap-1 k-mt-5">
            <span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
            <span class="content-expanded k-grow k-skeleton k-opacity-30 k-rounded-md k-h-14"></span>
        </div>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    }

I have a need to trigger the form validation process when certain actions are performed on the Grid popup add/edit form.  What would be the best way to trigger the validation from code?

 private async Task GetNameHandler()
    {
            var companyName = await AgentServices.GetAgentCompName(editedAgent.AgentNumber);
            if (!string.IsNullOrEmpty(companyName))
            {
                editedAgent.Name = await myServices.GetCompanyName(editedAgent.AgentNumber);
            }
            else
            {
                editedAgent.Name = null;
//           Trigger form validation here
            }
    }

My requirement is to align every grids columns at same postion.

Which component to use so that horizontal scrolbars aligned every columns of each grid at same vertical position.

I am using a TelerikTreeView in my component. When I click on a node (an expanded child node), I check whether the form for the currently selected node is dirty. If the form is dirty, I show a prompt asking the user to continue or not. When the user selects no/cancel, the clicked node should not be selected.

I am using the event below.

protected async Task OnItemClickedAsync(TreeViewItemClickEventArgs args)

I can't find a way to cancel this event or to prevent the newly clicked item to be selected. Is there any way to prevent a clicked item to be selected? I have been experimenting with @bind-SelectedItems to no avail. I haven't been able to find a solution for this problem.

Any help is appreciated.