Hi,

We're trying to make use of Telerik's NPM package with our Blazor project, along with that we want to only implement the individual components we want to use for our stylesheet instead of using `dist/all.

We are using DartSassBuilder to compile our SCSS files.

Below are screenshots of our implementation:

With this we are unable to actually build the app, the build errors didn't work well, but even changing this to use WebCompiler it doesn't work:


It seems both DartSassBuilder and WebCompiler can't make use of the @ naming, and we're unsure of what to do to solve this.

Note:

- Everything will work if we just run it with `dist/all.scss`, however to make the app load faster we want to rather compiler our own custom SCSS solution, namely for Grid and some inputs.

- This is the second blazor project with this issue.

- Both projects use Blazor WASM Standalone

How would I add an input to the template of a menu?  View the following REPL, it does not accept keyboard input, but it DOES accept input if holding down shift and entering capital letters.  I assume the menu is capturing keystrokes somewhere.

https://blazorrepl.telerik.com/QeEtnaFW52QfOcqb30

Good evening.

I would like to word wrap the text in the drawer component, this is an example where I would like the wrap (see the first row in which I've added more text to show the ellipses):

https://blazorrepl.telerik.com/mSEjwWvZ12HeWVRp26

May you kindly help me?

Thank you.

Hi, I am trying to implement Drag and Drop on the Blazor Treeview component. I am using version 4.4.0 and have been referencing this documentation: https://docs.telerik.com/blazor-ui/components/treeview/drag-drop#ondragstart-event

So far

The event "OnDragStart" does not exist,
The class "TreeViewDragStartEventArgs" does not exist.

Your documentation never seems to list when functionality is available so I have no idea if it is the version I am using, something I have done, or your components.
Would love some help clearing this up.

I have a grid and I want to present the user with a set of custom actions for each specific row. I am using the splitbutton control in the gridcolumn template. The grid and splitbutton renders but the splitbutton popup is not visible.

https://blazorrepl.telerik.com/mykXmBPX33zR9mDO27

<TelerikGrid Data="@data">
    <GridColumns>
        <GridColumn>
            <Template>
                <TelerikSplitButton Icon="@SvgIcon.FileExcel">
                    <SplitButtonContent />
                    <SplitButtonItems>
                        <SplitButtonItem Icon="@SvgIcon.FilePdf" />
                        <SplitButtonItem Icon="@SvgIcon.DataJson" />
                    </SplitButtonItems>
                </TelerikSplitButton>
            </Template>
        </GridColumn>
        <GridColumn Field="@nameof(Data.field)" />
    </GridColumns>
</TelerikGrid>

@code {
    class Data
    {
        public string field{ get; set; }
    }

    IEnumerable<Data> data = Enumerable.Range(0, 10).Select(x => new Data { field = x.ToString() });
}

I'm using an editor to capture rich text to add to the database. After I add it, I clear the field out that is bound to the editor but the editor does not update on the page. It still has the previous values.

<TelerikEditor @ref="@AnswerEditor"
	       @bind-Value="@FaqToAdd.Answer"
	       Tools="@EditorTools"
	       EditMode="EditorEditMode.Div" 
	       Height="auto" 
	       DebounceDelay="0"
	       Width="100%">
</TelerikEditor>

I have a control that has a form on it.  That form has a MultiSelect control on it. The Multiselect is populated with records from a DB Table.  I have also added a button below the multiselect control that triggers a window control that allows the user to add a new record to that table.  When I close the window I would like to refresh the multiselect control without refreshing the whole form that it is part of.  How do I go about refreshing only the MultiSelect control?

  <TelerikMultiSelect @bind-Value="@AppState.Party.SelectedAssocFirmIds"
                                                TItem="AssocFirmDDL"
                                                Placeholder="Click here for existing firms or add a new one."
                                                TValue="int"
                                                ValueField="Id"
                                                TextField="Name"
                                                OnRead=@ReadAssocFirms
                                                AdaptiveMode="AdaptiveMode.Auto"
                                                Filterable="true"
                                                Id="AssocFirms"
                                                Width="90%">
                            </TelerikMultiSelect>
                            <TelerikButton Icon="SvgIcon.Plus" OnClick="@(()=>AssocFirmWindowIsVisible=!AssocFirmWindowIsVisible)">Add New Firm</TelerikButton>

  private async Task ReadAssocFirms(MultiSelectReadEventArgs args)
    {
        try
        {
            DataSourceRequest dsr = CreateDataSourceRequest();
            var assocFirms = await AssocFirmServices.GetAssocFirmsOnly(dsr);
            args.Data = mapper.Map<List<AssocFirm>, List<AssocFirmDDL>>(assocFirms.AssociatedFirms);
        }
        catch (Exception ex)
        {
            logger.LogError($"Error reading Associated firms for DDL.", ex.GetBaseException().Message);
            throw;
        }
    }

Hello Telerik Community,

I'm currently working on a Blazor application using the Telerik UI components, and I've run into an issue regarding the default validation behavior of the DateInput component. By default, the DateInput performs validation that sometimes interferes with my application's requirements.

Problem Description

When using the DateInput component, I noticed that it automatically validates the entered date and displays validation messages if the input does not conform to expected formats or ranges. However, I need to customize this behavior and allow users to enter dates without triggering these default validation checks.

Steps Taken

I've explored various approaches, including:

1. Custom Validation Attributes: Attempted to apply custom validation attributes to override the default behavior.
2. Disabling Validation: Looked for properties or methods to disable validation directly within the DateInput component.
3. Event Handling: Tried handling the OnBlur and OnChange events to manage validation manually.

Questions

1. Is there a built-in way to disable the default validation for the DateInput component?
2. If so, what properties or methods should I utilize to achieve this?
3. Are there best practices for implementing custom validation for the DateInput that you would recommend?

I see kendo Map UI demo like following and looking into source code, in there it's supporting events like "shapeMouseEnter", "shapeMouseLeave", etc.
https://demos.telerik.com/kendo-ui/html5-dashboard-sample-app

On shape mouse enter or leave, it's setting hover color on region. Also, on click on shape, it's also setting background color of shape as well as doing some data filter logic.

I am using Telerik Blazor, and my requirements are the same. I wanted to use shapeMouseEnter and shapeMouseLeave to highlight country. Also wanted to change its color when shape is clicked.

Can you guide me on how to achieve same behavior with Telerik Blazor component?

I have a very simple scenario with a TelerikDropDownList, like the following:

<TelerikDropDownList Data="@foundComponents"
		     @bind-Value="@componentId"
		     ValueField="ComponentId"
		     TextField="Description">
</TelerikDropDownList>

Then, I have declared the required properties and then there is my method that loads the data in the "foundComponents" collection.

@code {
     protected string? componentId;
     protected IEnumerable<Component>? foundComponents;

     ...

     private async Task SearchComponentAsyncHandler()
     {
          foundComponents = (await JsonSerializer.DeserializeAsync<ZollerBrowseResult>(responseStream)).BrowseResult?.Select(x => x.Component);
     }
}

and this is my "ZollerBrowseResult" model and its related classes:

public class ZollerBrowseResult
{
	public required BrowseResult[]? BrowseResult { get; set; }
}

public class BrowseResult
{
	public required Component Component { get; set; }
}

public class Component
{
	public string? ComponentId { get; set; }
	[JsonPropertyName("Component.ComponentId")]
	private string Component_ComponentId { set { ComponentId = value; } }
	public string? Description { get; set; }
	public Article? Article { get; set; }
}

For some reason, when I run the application, the Dropdown doesn't show the Description property, it shows the class FullName instead.

I don't understand what I am doing wrong here.