Hi.

Why in this snippet https://blazorrepl.telerik.com/wGvwOxGP22SKTu0O14

the "Item 1" is not taking the size of the 3 columns on the first row as defined in the snippet

Thanks

I know how to style the horizontal separator like this:

.horizontal > .k-separator {
    margin: 0;
    background-color: #0062cc !important;
}

but I can not figure out how to do it for the vertical separators in a submenu.

I have problems to inspect the submenu because it closes itself if I try to inspect it (maybe I need a trick here too...)

I have a blazor server script that dynamically generates several TelerikUpload controls to upload documents for different purposes.

All controls use the same OnSelect function to handle the uploaded file.

when a user uploads a file using one of these controls, I need the OnSelect  or onUpload function to rename the uploaded file based on which TelerikUpload control was triggered.

How can I reference the ID of the dynamically generated TelerikUpload that triggered the OnSelect  or onUpload function so that I can rename the file as needed?

Thank you!

I have a question regarding the TelerikValidationMessage, which is showing in one form, but not in another. I am using data annotations on the properties of the User class. 

public class User
{
    [Display(Name = "Voornaam*")]
    [Required(ErrorMessage = "Voornaam ontbreekt.")]
    [Placeholder(Description = "Voer de voornaam in.")]
    public string FirstName { get; set; }
...

The first form is a non-dynamic form with fields for every property in the User class. It is using a Model with bind-Value instead of an EditContext with Value and ValueChanged. When I press the Submit button, the validation summary is shows as are the validationmessages below the textinputs. This is the desired situation.

<TelerikForm Model="@TestUser"
                     OnValidSubmit="@HandleValidSubmit"
                     OnInvalidSubmit="@HandleInvalidSubmit">
            <FormValidation>
                <DataAnnotationsValidator></DataAnnotationsValidator>
            </FormValidation>
            <FormItems>
                
                <FormItem Field="@nameof(User.FirstName)">
                    <Template>
                        <div class="mb-3 row">
                            <label for="firstName" class="k-label k-form-label col-sm-2">Voornaam *</label>
                            <div class="col-sm-10">
                                <TelerikTextBox Id="firstName" @bind-Value="@TestUser.FirstName" InputMode="text" PlaceHolder="Voornaam"></TelerikTextBox>
                                <TelerikValidationMessage For="@(() => TestUser.FirstName)"></TelerikValidationMessage>
                            </div>
                        </div>
                    </Template>
                </FormItem>
...

Since I am trying to create a dynamic form which will work for all my classes, I have created a second form. This second form is a dynamic form using an EditContext.

<TelerikForm EditContext="@MyEditContext"
             OnValidSubmit="@HandleValidSubmit"
             OnInvalidSubmit="@HandleInvalidSubmit"
             ValidationMessageType="@FormValidationMessageType.Inline"
             >
    <FormValidation>
        <DataAnnotationsValidator></DataAnnotationsValidator>
        <ValidationSummary />
    </FormValidation>
    <FormItems>
        
        
        @foreach (var propertyInfo in DataContext.GetType().GetProperties())
        {
            <FormItem Field="@propertyInfo.Name">
                <Template>
                    <div class="mb-1 row">
                        <label for="@(propertyInfo.Name)" class="k-label k-form-label col-sm-2">@propertyInfo.DisplayName()</label>
                        <div class="col-sm-10">
                            <TelerikTextBox Id="@(propertyInfo.Name)"
                                            Value="@propertyInfo.GetValue(DataContext)?.ToString()"
                                            ValueExpression="@(() => propertyInfo.Name)"
                                            OnChange="OnChange"
                                            ValueChanged="@(value => OnValueChanged(value, propertyInfo.Name))"
                                            InputMode="text"
                                        PlaceHolder="@propertyInfo.PlaceholderDescription()">
                            </TelerikTextBox>
                            <TelerikValidationMessage For="@(() => propertyInfo.Name)"></TelerikValidationMessage>
                        </div>
                    </div>
                </Template>
            </FormItem>
        }
        
    </FormItems>
</TelerikForm>

And here's the imporant part of the code behind. This is proof of concept code and will be improved later.

protected void OnValueChanged(object e, string prop)
    {
        var propertyInfo = DataContext.GetType().GetProperty(prop);
        if (propertyInfo == null) return;

        if (propertyInfo.PropertyType == typeof(int))
        {
            var intValue = Convert.ToInt32(e);
            propertyInfo.SetValue(DataContext, intValue);
        }

        if (propertyInfo.PropertyType == typeof(string))
            propertyInfo.SetValue(DataContext, e.ToString());

        if (propertyInfo.PropertyType == typeof(DateTime) || propertyInfo.PropertyType == typeof(DateTime?))
            propertyInfo.SetValue(DataContext, DateTime.Now);

        if (propertyInfo.PropertyType == typeof(bool) || propertyInfo.PropertyType == typeof(bool))
            propertyInfo.SetValue(DataContext, true);
    }

    protected void OnChange(object e)
    {
        MyEditContext.Validate();
    }

When I press the submit button, the validationsummary is correctly shown, the labels color red and the border of the textinput colors red (after adding some css). So the validation seems to be working fine. However, the validationmessage below the textinput isn't showing. It isn't even in the DOM, so I assume it's not generated. I have searched the Interwebs and this forum/documentation, but I can't find the reason why the validationmessage isn't showing. Any help would be highly appreciated.

Btw; the second form shows the Inline messagetype, but that has no effect.

ValidationMessageType="@FormValidationMessageType.Inline"

I have a custom component (SearchRow) that is bound to a custom SearchParameter class. SearchParameter has IEnumerables for Fields ("Width", etc) and Operations ("Less than") as well as user-entered values. The idea being you'd select a field, an operation and enter a comparison value and that will all get passed to a service for a custom search against the database. I want to create a search bar that will be a user-addable (user clicks "Add Parameter" and a new row shows up) list of SearchRows bound to a collection of SearchParameters. Honestly I want it to look a lot like the Filter control but it seems like the Filter control is meant to act against a set of already-loaded data in a grid and I can't do that here as the searchable dataset is huge and I have to use the SearchParameter data to convert that into custom sql. 

Is the best way to do this to have a Grid in edit mode with a single column consisting of my SearchRow component and add to them and bind to them using OnRead? 

Hi

Is there a way to align the level 1 menu items to the right as opposed to the left of their level 0 parent item

context:

- A level 0 item with a long display text followed by an icon for the level 1 dropdown 

- the user moves the mouse towards the drop down icon and the level 1 menu appears

- the level 1 menu has items with short display names

- as the user moves the mouse from the icon to the sub-menu the sub-menu will disappear as they have left the parent menu item

(- if they moved the mouse along the parent item to the left then drop onto the sub-menu it is fine)

question:

can the sub-menu container be right aligned to the parent menu item so it effectively displays under the drop-down icon?

Hi,

A have a very simple code in order to test the DatePicker control:

@page "/datepicker/overview"
@page "/datepicker/index"
@layout EmptyLayout

<div>
    <div>
        <label for="travel-date" class="k-label k-form-label">Travel Date</label>
        <div class="k-form-field-wrap">
            <TelerikDatePicker Min="@Min" Max="@Max" @bind-Value="@selectedDate"
                               Id="travel-date" DebounceDelay="@DebounceDelay">
            </TelerikDatePicker>
        </div>
    </div>
    <div class="k-form-field">
        <p>The selected travel date is: <strong>@selectedDate?.ToLongDateString()</strong></p>
    </div>
</div>

@code {
    public DateTime Max = new DateTime(2050, 12, 31);
    public DateTime Min = new DateTime(1950, 1, 1);
    private DateTime? selectedDate;
    public int DebounceDelay { get; set; } = 200;
}

This is the result I get:

Looks like some styling is missing.

Developing in VisualStudio 2022 (Preview).

Any ideas?

Thank you...