If you want to validate a form using FluentValidation right now you must rely on a third party validator like the ones suggested in the FluentValidation documentation.

We have noticed most of these libraries have not been updated in a long while despite issues being opened and pull requests pending:

• Blazored.FluentValidation - Last release: Dec 31, 2022

• Blazor-Validation - Last release: Jun 30, 2023

• Accelist.FluentValidation.Blazor - Last release: Nov 17, 2020

• vNext.BlazorComponents.FluentValidation - Last release: Sep 9, 2022

Also, we noticed that these libraries don't fully implement all the features that FluentValidation has to offer.

Ex: We wanted to use the Rulesets to validate fields partially when the input has changed (like maximum lenght or regexes) and then validate the more complex rules like "unique in DB" after the "submit" button of the form has been pressed but it seemed like it would run all validations ignoring the rulesets.

Other components libraries have already implemented FluentValidation natively, could Telerik consider implementing this aswell so we can stop relying on third party libraries and have a better implementation of the FluentValidation?

The OnRowClick event of the TelerikGrid is only triggered when clicking the row with the left mouse button as discussed on the following forum post: 
https://www.telerik.com/forums/grid-onrowclick-event-for-middle-mouse-button-click

Please add support to the OnRowClick event to trigger it for a middle mouse button click (and pass the mouse button clicked in the eventargs) or add a separate OnRowClick event that is triggered on middle mouse button click.

Greetings,

I find input adornments very useful. However I noticed that when I click them, the control doesn't get the focus. E.g., with this code:

    <TelerikTextBox>
        <TextBoxPrefixTemplate>
            First name
        </TextBoxPrefixTemplate>
    </TelerikTextBox>

Clicking on First name doesn't do anything. I would expect the control to be focused when I do that.

You will find an image in attachment showing a green area that, when clicked, brings focus on the textbox. Input adornment is in dark gray. I'm using it as a label for the control but even if it was simply an icon, it would be strange to not be able to focus on the control when clicking it.

Hi,

We use compact sized grid all the time in our application.

However, with sorting and filtering enabled, the icons take too much space in the header cell and make the actual header text hard to read.

Please consider scale down those icons and reduce padding.

Thanks and best regards,

Peili

Demo: https://blazorrepl.telerik.com/mSOIQZvO51cwrorJ49

===ADMIN EDIT===

To reduce the size of the icons and the font in a Compact Grid, you can follow the approach from the knowledge base article How to make Compact Grid elements smaller.

We would like to see all the Blazor controls support the ability to show the time in the browser's local time as a feature that can be enabled.  It should support converted from both UTC and server time.

A question on how to do this has been asked at least twice on the forums:

• https://www.telerik.com/forums/using-client-side-time-zone-for-time-columns-in-blazor-server-grid
• https://www.telerik.com/forums/utc-datetimes-as-local-datetimes-and-vice-versa

Some examples of how other's have implemented this as a control can be founde here:

• https://www.meziantou.net/convert-datetime-to-user-s-time-zone-with-server-side-blazor-time-provider.htm
• https://github.com/dustout/BlazorTime

Thanks

Hi Telerik Team,

when using the (currently) latest versions of VS (17.11.0) and Blazor 8.0.8 runtimes (and custom css theme version 8.2.0) I get the following error when running my project in debug mode:

TypeError: Cannot read properties of null (reading 'classList')
Stapelüberwachung:
 >  at e.addClass (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1122923)
 >    at v.resetCallout (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1372516)
 >    at v.adjustCalloutPosition (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1372355)
 >    at e.invokeComponentMethod (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1112736)
 >    at https://localhost:7038/_framework/blazor.webassembly.js:1:2878
 >    at new Promise (<anonymous>)
 >    at b.beginInvokeJSFromDotNet (https://localhost:7038/_framework/blazor.webassembly.js:1:2835)
 >    at Object.vn [as invokeJSJson] (https://localhost:7038/_framework/blazor.webassembly.js:1:58849)
 >    at https://localhost:7038/_framework/dotnet.runtime.8.0.8.80cvijctdx.js:3:178428
 >    at Ll (https://localhost:7038/_framework/dotnet.runtime.8.0.8.80cvijctdx.js:3:179262)

It looks like the problem has something to do with a function that wants to set the css "k-callout-e" class to some object.
The problem appears in js when e is null in the following method:
e.classList.add(t)

In this case e = null and t = "k-callout-e". It seems there's no null check for e and VS 2022 reports the problem.

The debugger in VS cannot be disabled for js content as it seems it's the same debugger for Blazor itself.
When hitting F5 to continue multiple times the projects keeps running until it hits the same problem again.

In my project I added a single "TelerikTooltip" component for Tooltips. I tried disabling it but still the same problem.
Maybe the js code is used for some other component.

If you need more information just let me know.

Regards,
Tom

Hello,

related to my previous bug report.

When Add / Edit is clicked in the Grid, it causes a Dialog to open. 

The dialog has a Form, and if the model for that form is set through OnParametersSet, the method is called in an infinite loop, and the Dialog never gets shown.

When following the Blazor UI code examples for the Grid, the source for index.cshtml contains the following:

@page "/grid/index"

@using Telerik.Blazor.Components.Grid
@using TelerikBlazor.Shared
@inject HttpClient Http

Notice that the using directive for the Shared component doesn't have a . separating Telerik and Blazor. It should read:

@using Telerik.Blazor.Shared

 Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit '_2TiBAG0g2G9PCcWgKc-G4zmfFAGiDJEO7pd7Jbjxpk'.
System.IO.FileLoadException: Could not load file or assembly 'Telerik.DataSource, Version=1.2.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8'. The located assembly's manifest definition does not match the assembly reference. (0x80131040)
File name: 'Telerik.DataSource, Version=1.2.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8'
   at System.Signature.GetSignature(Void* pCorSig, Int32 cCorSig, RuntimeFieldHandleInternal fieldHandle, IRuntimeMethodInfo methodHandle, RuntimeType declaringType)

Did I miss installing something.

Used the installer telerik.ui.for.blazor.2.1.0.commercial.msi

In release 2.0.0 it was possible to set default property Visible to "true" for AnimationContainer. That is now gone. How do I make the AnimationContainer visible per default, i.e without calling ShowAsync() in some stage?

Br,

Sten

When I create multiple tabs and each tab has the same type of component, the OnInitialized is only running for the first one I click on.  

Here is a simplified example to demonstrate:

MAIN PAGE:

@page "/tabtest"
@using Telerik.Blazor.Components

<div>Product XYZ</div>

<TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top" @ref="productTabStrip" @bind-ActiveTabIndex="@ActiveTabIndex">
    <TabStripTab Title="Details">
        <div class="container sms-tab-content">
            GENERAL PRODUCT INTRO STUFF HERE
        </div>
    </TabStripTab>

    @foreach (var item in listOfWidgets)
    {
        <TabStripTab Title="@item.WidgetName" Disabled="false">
            <Widget WidgetID="@item.WidgetID" WidgetName="@item.WidgetName" />
        </TabStripTab>
    }

</TelerikTabStrip>

<div style="margin-top: 15px;">
    <div><b>Below is a flat non-tab example of repeating widgets:</b></div>
    @foreach (var item in listOfWidgets)
    {        
        <Widget WidgetID="@item.WidgetID" WidgetName="@item.WidgetName" />        
    }
</div>


@code {

    Telerik.Blazor.Components.TelerikTabStrip productTabStrip;

    public int ActiveTabIndex { get; set; } = 0;

    protected class Widget
    {
        public int WidgetID { get; set; }
        public string WidgetName { get; set; }
    }

    private List<Widget> listOfWidgets = new List<Widget>();

    protected void GetData()
    {
        listOfWidgets.Add(new Widget { WidgetID = 1, WidgetName = "Cog" });
        listOfWidgets.Add(new Widget { WidgetID = 2, WidgetName = "Wheel" });
        listOfWidgets.Add(new Widget { WidgetID = 3, WidgetName = "Bloof" });
    }

    protected override void OnInitialized()
    {
        GetData();
    }

}    

WIDGET COMPONENT:

Admin edit: While this cannot become a built-in feature, you may find useful the following example: https://github.com/telerik/blazor-ui/tree/master/common/grpc-example

Hello Team;

As .Net Core 3 offers gRPC support, I'm suggesting that the Blazor Team, look into some of the components that could automatically talk to backend gRPC services to get data, i.e. Auto Complete or DropDown box.

This way it could simplify different ways of providing datasource to some of these data oriented components.

Hope this suggestion helps!
..Ben

I have a TelerikComboBox in an EditorTemplate within a Grid. Code looks like this:

                   <TelerikComboBox Data="@CustomerPayCodes"
                                                     @bind-Value="@PayItemMapInEdit.ClientPayCode.UniqueId"
                                                     Placeholder="Select..."
                                                     Filterable="true"
                                                     TextField="PayCodeDisplayName"
                                                     ValueField="UniqueId"
                                                     @ref="_clientPayCodeComboBox"
                                                     Width="auto"
                                                     Enabled="@(string.IsNullOrEmpty(_payItemTextBoxRef?.Value))">
                                    </TelerikComboBox>

Where reference prop looks like this:

    private TelerikComboBox<PayCode, Guid> _clientPayCodeComboBox;

When adding a new row, the Placeholder text becomes the empty GUID, until I click in the box and then outside, upon it changes to correct "Select...". The GUID is never supposed to be showed at all in the box, that is only the binded value.

See attached pictures.

Please advice.

Br,

Sten

Hi!

I want to create a grid with multiselect options (controlled by checkboxes in the first column). I have used code from https://demos.telerik.com/blazor-ui/grid/selection but when i try this code in my project there are no checkboxes in the first column, just empty cells. Am i the only one with this problem?  

Hi,

Any information on when the Layout Components available in AspNetCore will be available in Blazor?

I am currently putting a proposal together to purchase Telerik for Blazor and could really use some of those components to enhance the application than relying on 3rd-Party integrations.

Submitted on customer behalf:

This line of code is taken directly out of your https://demos.telerik.com/blazor-ui/grid/editing-inline

What kind of magic updates the actual database?

privatevoidUpdateItem(GridCommandEventArgs args)

{

var argsItem = args.ItemasProductBindingModel;

var index =GridData.FindIndex(i => i.ProductId== argsItem.ProductId);

if(index !=-1)

{

GridData[index]= argsItem;

}

}"