Input look like a telerik textbox

0 Answers 46 Views
TextBox
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Dan asked on 27 Sep 2022, 12:50 PM

At some point the telerik textbox has become a full widget and it generates a script.

I have a form where I need to have an input and it should look like the telerik textbox. I do not want to use the span / input template I just need to have the input alone.

I know I can define my own styling but I would need just a telerik class on the input that if I change something to be applied to all telerik textboxes.

Yanislav
Telerik team
commented on 30 Sep 2022, 06:13 AM

Hello Dan, 

What I can suggest is to declare an ordinary input field and apply the following classes to it.

<input class="k-input k-textbox k-input-solid k-input-md k-rounded-md" style="width:100%;" />

Here is an example: https://netcorerepl.telerik.com/wwuNHaEU113MaYqa31

Thus, the input field should appear like a normal Telerik Textbox. However, note that those classes are designed to be used on the span element that wraps the actual input field. With that said, keep in mind that such an approach is not recommended, and we encourage you to use the actual Telerik UI TextBox component.


Dan
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 30 Sep 2022, 06:21 AM

Hi Yanislav,

I was afraid that I had to add so many classes. However I can not use the telerik textbox for the reason I already said because the textbox is a full widget with javascript behind and my page contains the same field in two different forms so the javascript will just find the first one.

Yanislav
Telerik team
commented on 04 Oct 2022, 10:20 AM

Hello Dan,

You are correct, this is one of the requirements when using the Telerik UI components. The component name should be unique. However, I'm afraid there isn't much that can be done in this case. By using the classes I shared in my previous post, you can achieve the same appearance for input fields as the Telerik UI TextBox. If you still want to use the helpers, what you can do to work around this problem is to use a different model which will actually be the same but their property names are different. E.g. Name - DummyName. When the dummy model form is submitted to the server, however, you will need to map it to the original model. I don't know if such an approach would work for you, but it is a possible alternative solution.

No answers yet. Maybe you can help?

Tags
TextBox
Asked by
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or