Html.Kendo().TextBoxFor() with same ID is not initialized

1 Answer 648 Views
TextBox
Sebastien
Top achievements
Rank 1
Sebastien asked on 22 Dec 2021, 03:27 PM | edited on 23 Dec 2021, 01:41 PM

Hey Guys,

We upgraded our website to Telerik.UI.for.AspNet.Core 2021.3.1207. There are a lot pages in the site where an additional kendoDialog is loaded via ajax. In the dialog - there are textboxes with duplicated IDs (on purpose) as in the outer screen (for example id="Reference").

The issue is that - the texbox in the dialog is not initialized - it is rendered as simple <input /> (without  parent span) and the value in the outer screen became the same as the value from the dialog. My guess is that in version 2021.3.1207 all textboxes are initialized when the page is loaded (maybe for permanence) and they are refereed via ID.

Outer page:

@Html.Kendo().TextBoxFor(model => model.Reference).HtmlAttributes(new { @class = "form-control-x", @onchange = "window.page1.onFormChange();" })

kendoDialog - textbox not rendered with kendo html tags and styling

@Html.Kendo().TextBoxFor(model => model.Reference).HtmlAttributes(new { @class = "", @onchange = "window.page2.onFormChange();" })

Outer page after the content in kendoDialog is loaded - the value for Reference is the one from the dialog.

We have a lot of screens build in the same way. I know that this is not valid HTML, but we do not use <form action="something"></form> to save the fields. We are using ajax and all inputs are refereed by containderId and controld.

As this is blocking issue, any advice will be appreciated.
Thanks in advance.

1 Answer, 1 is accepted

Sort by
1
Accepted
Mihaela
Telerik team
answered on 27 Dec 2021, 08:58 AM

Hi Sebastien,

Thank you for the provided code snippets and screenshots.

Your assumption is correct - when using <WidgetName>For(), the attributes of the input element "name" and "id" match the name of the Model property (i.e. , "Reference").

The "id" attribute of the HTML element has to be always unique in the context of the whole web page. If a partial view is loaded multiple times, each instance of this partial view has to render all helpers with a unique "id". If this requirement is not met, the page will display duplicate element IDs, and only the helper instance which occurs first in the markup will be initialized and will work properly.

With that said, to have multiple TextBox controls bind to the same Model property, I would suggest passing a unique "id" through the HtmlAttributes() method:

@(Html.Kendo().TextBoxFor(model => model.Reference)
  .HtmlAttributes(new { @class = "form-control-x", @id = "reference-2" })
)

If any additional questions arise, feel free to let me know.

 

Regards, Mihaela 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/.

Tags
TextBox
Asked by
Sebastien
Top achievements
Rank 1
Answers by
Mihaela
Telerik team
Share this question
or