I'm trying to programmatically set the Text color of TelerikTextBox.  Problem I'm running into is that the Class being defined for the TelerikTextBox is based on CSS from TailwindCSS.  I was hoping I could just add color: as a parameter but that would only work if using a "Style" not "Class" and TelerikTextBox doesn't support Style.

<style>
    .safeText {
    color: black;
    }

    .warningText {
    color: red;
    }
</style>

<TelerikTextBox Id="emptyReleaseOn" Class="form-display sm:text-sm sm:leading-5 text-center @(_expireColor)" Size="12" Value="@_currentBookingMTYRelease" ReadOnly="true" Width="6rem"></TelerikTextBox>

Note: the above @(_expireColor) is not valid syntax to be used in Class attribute ... so not really sure how to go about this?

Code server-side:

private string _expireColor { get; set; } = "safeText";

if (DateTime.TryParse(_currentBookingExpiresOn, out var expireDateValue))
{
    if (DateTime.Now > expireDateValue)
    {
        _expireColor = "warningText";
    }
    
}

I found Telerik sample code here, but that's not what I'm trying to accomplish (need to retain the TailwindCSS).

Is there an easy way to accomplish this?

Rob.

Hello Telerik,

In my Blazor Hybrid application, I have a toolbar with a textbox in it; I want to add some hotkeys to it: on pressing Enter, process the textbox value, and in pressing Escape, revert the textbox value to the default.

The problem is with the toolbar. I have this piece of code:

@code {
    private void OnKeyUp(KeyboardEventArgs args)
    {
        Debug.WriteLine("key up: " + args.Code);
    }
}
<TelerikToolBar>
    <ToolBarTemplateItem>
        <div @onkeyup="OnKeyUp" tabindex="-1">
            <TelerikTextBox Value="Some Value" />
        </div>
    </ToolBarTemplateItem>
</TelerikToolBar>

It works perfectly for any pressed key, including Enter - except the Escape key. When I press Escape, the textbox loses focus, and I don't get the keyboard event. I tried the keydown and keypress events, too.

In contrast, when I press Tab, I get the keydown event before the textbox loses focus (but no keyup event).

If I place the textbox directly on the page, without the toolbar, the keydown and keyup events work correctly, and I get the events for the Escape key. Apparently, TelerikToolBar is doing... something.

Is there a way to:
a) make the toolbar less aggressive and let me handle the keydown/keyup events, or
b) detect the Escape and Enter keyclicks from the TelerikTextBox component, to avoid the need for handling the javascript events?

As a curiosity, when focussed on this text box, try pressing Win and then Escape. It produces this sequence of events: "keydown MetaLeft" -> "focusout" -> "focusin" -> "keyup Escape". Yes, you get the Escape event, and the focus returns to the textbox.

Thank you.

I have a scenario where I need to shift the position of TelerikTextBox's `k-input-inner` element using the CSS properties`top` and `left`. This works fine until I use FocusAsync() to programmatically focus on the textbox. This causes the textbox to reset its position and disregard the position styling.

Please see the REPL link below. To reproduce, click on the "Focus" button and observe how the placeholder shifts.

https://blazorrepl.telerik.com/wTkelobC56YIRoZL13

To note, the desired view is with the input text position shifted from the original position like so:

Hitting tab reverts it to the original positioning which is undesirable:

Is there a way to add a stylesheet to the prosemirror in the iframe?

I want to add a plugin for a Placeholder eg:

https://gist.github.com/amk221/1f9657e92e003a3725aaa4cf86a07cc0

Also: is there a way to let the user change the height of the TelerikEditor, just like with a text area (bottom right corner)?

I have some Grids which are fully managed by the TelerikGrid control (as far as sorting, filtering, and pagination goes). These grids use the Data property on the Grid. These TelerikGrids are using the <GridSearchBox />.

I am now building some API-driven grids, which are using the OnRead property. For the API-driven Grids I'm using a TelerikTextBox for searching, instead. I would like this grid to look the same as the managed grids.

Is there any way to make the TelerikTextBox look identical to the GridSearchBox?

I have followed this example to replace the GridSearchBox with a TelerikTextBox, but the appearance is very different.
Blazor Search Grid on Button Click - Telerik UI for Blazor

Thank you

-Adam

I'm trying to get Telerik working in a simple login form and I can't get the binding to work. This is a .NET 8 Blazor Web Assembly app. To narrow it down, I followed the instructions outlined here. I selected "Individual Accounts" for authentication and WebAssembly for Interactive render mode (and Global for Interactivity location as suggested in the article). I also included the sample pages and changed the email field in the login page to:

<TelerikTextBox @bind-Value="Input.Email" class="form-control" placeholder="name@example.com" />

When I submit the form, it says the Email field is required. It works fine with a standard InputText. I thought maybe it has to do with the control in an EditForm on the server since the click event works fine on a client page but I've seen other examples where it's supposed to work in an EditForm as well.

Hi, my goal is validate a form and focus telerik widget with validation errors.  

Now i can find the element search for class "k-invalid" but how to get the widget reference so i can call the FocusAsync() method?

Thanks

Working on a Blazor WASM app (.NET 8) and seeing the error below in the browser's console after successful Hot Reload from VS2022 and clicking on any button in the app. Same button works fine before the Hot Reload. The issue is not limited only to buttons. I believe this started with the latest VS update (17.10.3). The Telerik version we're using is old, 4.3.0, however we never had that particular issue before.

Anybody having the same issues? Is this VS issue?

Thank you,

Stefan

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'addEventListener')
TypeError: Cannot read properties of null (reading 'addEventListener')
    at gD.bindEvents (http://localhost:5137/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1844171)
    at gD.onAfterShow (http://localhost:5137/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1844381)
    at Module.fe (http://localhost:5137/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1044593)
    at http://localhost:5137/_framework/blazor.webassembly.js:1:2878
    at new Promise (<anonymous>)
    at b.beginInvokeJSFromDotNet (http://localhost:5137/_framework/blazor.webassembly.js:1:2835)
    at Object.vn [as invokeJSJson] (http://localhost:5137/_framework/blazor.webassembly.js:1:58849)
    at http://localhost:5137/_framework/dotnet.runtime.8.0.5.gongq8hbow.js:3:178364
    at Tl (http://localhost:5137/_framework/dotnet.runtime.8.0.5.gongq8hbow.js:3:179198)
    at wasm://wasm/00b2193a:wasm-function[349]:0x1fab4
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=8.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Telerik.Blazor.Components.Dialog.DialogBase.InvokeOnAfterShowAsync()
   at Telerik.Blazor.Components.Dialog.DialogBuilder.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

Hi everyone!

I hace this Rowfilter

This is the Telerik Code 

 <GridColumn FilterMenuType="@FilterMenuType.Menu" Field="@nameof(HechoDirectoClienteViewModel.FechaVencimiento)" Title="Fecha vencimiento" TextAlign="ColumnTextAlign.Right" Resizable="true" Sortable="true" Width="170px" HeaderClass="center-wrap">
     <Template>
         @((context as HechoDirectoClienteViewModel)?.FechaVencimiento?.ToString("dd/MM/yyyy"))
     </Template>
 </GridColumn>