The DateRangeSelector does not offer any properties that allows us to change the Label for start or end date on the TelerikDateRangePicker.

Are there any other options beside using JavaScript?

What I am thinking at the moment is using the following properties:

Then OnAfterRenderAsync, calling into JavaScript with the Id for each and pass in the new display value.

In my case: "Check-In Date" and "Check-Out Date"

What is the best way to resize a div within a TabStripPage to the size of the tab ?

I am still struggeling with css...

Hello,
I am trying to check some custom validation when a value is adjusted on a TelerikForm. And I am using
EditContext.OnFieldChanged += HandleFieldChanged;

But the value is still the old value,  it looks like the TelerikInputBase is firing the notification before the change is actually applied.

    private protected void TriggerChange(T value)
    {
      if (this.ValidateOn == ValidationEvent.Change)
        this.CascadedEditContext?.NotifyFieldChanged(this.FieldIdentifier);
      this.OnChange.InvokeAsync((object) value);
    }

Is there a better way to be doing this? 
I do not want to have to add the validation check on every input OnChange.


I have also tried OnFormUpdate with the same issue, this is the function I am using where EditContext still has the old values

protected async Task OnFormUpdate(FormUpdateEventArgs args)
{
    if (!IsUpdating)
    {
        IsUpdating = true;
        DataHasChanged = true;
        var type = args.Model.GetType();
        var property = type.GetProperty(args.FieldName);
        if (property != null)
        {
            if (property.GetCustomAttributes(typeof(SkipMessageCheckAttribute), true).FirstOrDefault() is not SkipMessageCheckAttribute)
            {
                await CheckMessagesAsync();
            }
        }
        IsUpdating = false;
    }
    DataIsValid = !EditContext.GetValidationMessages().Any() && Messages.All(m => m.Priority != PageMessagePriority.Error);
}

Thanks,

Matt

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.

We are updating the data bound to the treeview dynamically which has CheckParents and CheckChildren set to true . Issue is it appears the binding is ignoring these flags. screenshot show it ignoring CheckParents. This REPL shows it ignoring CheckChildren https://blazorrepl.telerik.com/GyuKmVPY13f8gREi18

                  <TelerikTreeView Data="@PermissionTreeData"
                                   @bind-CheckedItems="@CheckedItems"
                                   CheckBoxMode=@TreeViewCheckBoxMode.Multiple
                                   CheckParents=@true
                                   CheckChildren=@true>

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
            }
    }