Completed
Last Updated: 31 Aug 2020 16:00 by Patrick
Release 2.15.0
Arty
Created on: 03 Jul 2019 15:55
Category: TextBox
Type: Feature Request
42
Add to TelerikTextBox more parameters, such as: Type, Autocomplete, Required, ReadOnly
Type needed for Password set
17 comments
Patrick
Posted on: 31 Aug 2020 16:00
Works great, thank you.
ADMIN
Marin Bratanov
Posted on: 31 Aug 2020 15:32

Hello Patrick,

You can choose which event to bind to. With the standard HTML elements, that's the onchange event, whlie we use oninput, so you can do the same to get events on every keystroke.

Here's a basic example:

<input type="search" value="@theSearchText" @oninput="@InputHandler" />

@code{
    string theSearchText { get; set; }

    async Task InputHandler(ChangeEventArgs e)
    {
        theSearchText = e.Value.ToString();
        Console.WriteLine(theSearchText);
    }
}

 

Regards,
Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Patrick
Posted on: 31 Aug 2020 13:14

I want the cross icon functionality that you get with search, that's it. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search#Differences_between_search_and_text_types

I'm fine with using a normal input in place of the component, but how do I match the behavior of ValueChanged?

<TelerikTextBox ValueChanged="@(async (string s) => await QuickSearchHandler(s))" Id="pet-search" Class="form-control py-2 border-top-0 border-left-0 border-right-0 border rounded-0" Placeholder="Search by Name or Owner"></TelerikTextBox>

ADMIN
Marin Bratanov
Posted on: 31 Aug 2020 09:33

Hi Patrick,

The <TelerikTextBox> component will use an <input type="text" />. You can alter things like its autocomplete and inputtype parameters that match to the corresponding HTML attributes: https://demos.telerik.com/blazor-ui/textbox/customization. An <input type="search"> does not offer extra functionality or attributes, yet if the type attribute is important to you, you can use your own HTML element and style it through our themes: https://docs.telerik.com/blazor-ui/themes/form-elements#inputs.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Patrick
Posted on: 30 Aug 2020 23:51
Is there an update regarding the Type attribute? I am currently in need of being able to set my TelerikTextBox to a search type.
ADMIN
Marin Bratanov
Posted on: 27 Jul 2020 07:08

Hi Seth,

You can use the Enabled parameter to denote that a field cannot be edited to the user. Or, you can wrap it in an if-else block to show the values as text when they should not be editable, and only render a textbox when they should be.

If you are using a grid to insert/edit records, see here on changing the Editable parameter of a column based on a condition (such as edit or insert is being made).

 

Regards,
Marin Bratanov
Progress Telerik

Seth
Posted on: 26 Jul 2020 14:30

Hi Marin,

The most common scenario within our application is when an existing document is displayed on the page, it's primary key fields are ReadOnly. When the user is creating the document using perhaps a <New> action, the same fields are not read only as the user may want to enter / override the application assigned value. An example might be a sales order, where on new, the application assigns an order number that can be edited by the user. If the order is retrieved for editing, the order number cannot be modified but we'd like appearance to remain constant.

Our Blazor application is a rewrite of a WPF application and we'd like to adopt as many UI behaviors as possible, mainly to make it easier for our fairly large base of existing users. In our WPF app, the opacity of read only values is the same as editable values.  I acknowledge your recommendation regarding user experience.

Cheers,

Seth

ADMIN
Marin Bratanov
Posted on: 26 Jul 2020 08:21

Hi Seth,

Could you explain a Blazor scenario that requires ReadOnly and cannot be solved with Editable and/or an if-block around the textbox? We haven't been able to come up with a meaningful scenario for such a parameter and decided to leave it out to avoid clutter.

As for styling - I would recommend that you keep disabled inputs visually distinct from enabled inputs for your users so that they have a better experience.

Nevertheless, you could inspect the component and alter some CSS rules by following this blog post. Here's a sample I made for you that removes the two key settings that make up the disabled appearance.

<style>
    .k-textbox.k-state-disabled{
        filter: initial;
        opacity: 1;
    }
</style>

<TelerikTextBox @bind-Value="@EnabledTbValue" />
<br />
<br />
<TelerikTextBox @bind-Value="@DisabledTbValue" Enabled="false" />

@code{
    string EnabledTbValue { get; set; } = "first";
    string DisabledTbValue { get; set; } = "second";
}

Regards,
Marin Bratanov
Progress Telerik

Seth
Posted on: 24 Jul 2020 21:33
ReadOnly doesn't appear to be added, and I saw your reasoning. Is there a way to style the text when textbox is not enabled to match enabled textbox style?
Gilles
Posted on: 20 Mar 2020 15:00
I would say also Tooltip to be able to define the Tooltip text that would be displayed using a TelerikTooltip
ADMIN
Marin Bratanov
Posted on: 12 Feb 2020 10:29

An inputmode parameter would also be helpful. Just leaving this here for posterity in relation to this thread https://www.telerik.com/forums/support-for-inputmode-or-pattern

--Marin

ADMIN
Marin Bratanov
Posted on: 10 Feb 2020 11:31

Hi all,

As a first enhancement in this regard, our 2.8.0 release will provide Id parameters for all input type components (Textbox, NumericTexbox, DropDownList, and so on) so you can easily attach labels to them (<label for="theIdParamString">lorem ipsum</label>).

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
ADMIN
Marin Bratanov
Posted on: 13 Oct 2019 13:11

Hi Robert,

If you click the Follow button at the top of the page, you will get email notifications when there is an update on this task.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Robert
Posted on: 13 Oct 2019 12:33
Any update on this?
ADMIN
Marin Bratanov
Posted on: 04 Oct 2019 06:35

A quick update - you can try getting a Telerik-like appearance for standard textboxes by adding the k-textbox class to them, something like this:

            <TelerikTextBox Label="Username:" />
            <br />
            <br />
            <input type="password" placeholder="Password:" class="k-textbox" />

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
ADMIN
Marin Bratanov
Posted on: 04 Jul 2019 11:05
Hi again, Arty, you may want to also follow the development on this one: https://feedback.telerik.com/blazor/1416978-support-arbitrary-attributes.

Depending on what the framework starts doing, we may no longer have to implement parameters for DOM attributes. We will see, and until then I can't say what will happen with the current ones you requested.

--Marin

ADMIN
Marin Bratanov
Posted on: 04 Jul 2019 05:16
Hi Arty,

For the time being you can use Enabled instead of ReadOnly. For the others - I agree they would certainly be nice features.


Regards,
Marin Bratanov
Progress Telerik UI for Blazor