Binding label to Combobox

[Jonathan]

Hi, 

 

I want to bind a label to a combobox using the tag '<label asp-for="test"></label>'.

I followed the online demo example exactly and it didn't work.

Is this a bug in the code for .NET CORE? 

[Petar]

Hi Jonathan,

I've tested the reported issue using the below Label - ComboBox definition and Model: 

<label asp-for="@Model.ComboBoxName">Label text</label>

<kendo-combobox name="@Model.ComboBoxName" filter="FilterType.Contains"
                placeholder="Select product"
                datatextfield="ProductName"
                datavaluefield="ProductID"
                auto-bind="false"
                min-length="3" style="width: 100%;">
    <datasource type="DataSourceTagHelperType.Custom">
        <transport>
            <read url="@Url.Action("GetProducts", "Home")" />
        </transport>
    </datasource>
</kendo-combobox>

    public class TestViewModel
    {
        public string ComboBoxName
        {
            get;
            set;
        }

        public TestViewModel()
        {
            ComboBoxName = "MyCustomCombobox";
        }
    }

What I get is a ComboBox with a name MyCustomCombobox, but the label is not correctly associated with the component.  

I don't know if you are trying a similar scenario. Based on what I've tried there seems to be an issue but it isn't related to UI for ASP.NET Core but with the  APS.NET Core itself. 

What I can provide as a workaround in this situation is using:

@Html.Label(@Model.ComboBoxName, "Label text")

Instead of the "asp-for" definition. 

Regards,
Petar
Progress Telerik

[Jonathan]

Hi Petar,

 

Thank you for your reply.

 

When I try your piece of code:

@Html.Label(@Model.CategoryComboboxName, "Label text")

<kendo-combobox name="@Model.CategoryComboboxName" filter="FilterType.Contains"
    placeholder="Select product"
    datatextfield="ProductName"
    datavaluefield="ProductID"
    auto-bind="false"
    min-length="3" style="width: 100%;">
    <datasource type="DataSourceTagHelperType.Custom">
        <transport>
             <read url="@Url.Action("GetCategoriesAjax", "Category")" />
        </transport>
    </datasource>
</kendo-combobox>

 

It gets transformed to following HTML code:

<div>
                                        <label for="CategoryComboBox" id="CategoryComboBox_label">Label text</label>

                                        <span class="k-widget k-combobox k-combobox-clearable" style="width: 100%;"><span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default"><input name="CategoryComboBox_input" class="k-input" type="text" autocomplete="off" title="" role="combobox" aria-expanded="false" placeholder="Select product" style="" tabindex="0" aria-disabled="false" aria-autocomplete="list" aria-owns="CategoryComboBox_listbox" aria-labelledby="CategoryComboBox_label"><span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span><span unselectable="on" class="k-select" aria-label="select" role="button" tabindex="-1" aria-controls="CategoryComboBox_listbox"><span class="k-icon k-i-arrow-60-down"></span></span></span><input style="width: 100%; display: none;" id="CategoryComboBox" name="CategoryComboBox" type="text" value="" data-role="combobox" aria-disabled="false"></span><script>kendo.syncReady(function(){jQuery("#CategoryComboBox").kendoComboBox({"dataSource":{"transport":{"read":{"url":"/Category/GetCategoriesAjax"}}},"autoBind":false,"minLength":3,"placeholder":"Select product","filter":"contains","dataTextField":"ProductName","dataValueField":"ProductID"});});</script>
                                    </div>

 

 

It still does not work. When I click the label, the cursor doesn't focus on the combobox.

 

Kind Regards, 

Jonathan

 

 

[Petar]

Hi Jonathan,

I will prepare an example to test your code and will write you back with feedback regarding the issue in a few hours. 

Regards,
Petar
Progress Telerik

[Petar]

Hi Jonathan,

Please check the attached project. Once the Label in the example is clicked, the ComboBox gets focused. 

Can you check the attached example and compare it to the implementation in the project you are working at?

If the issue continues to exist, please send me a runnable project in which the reported behavior can be reproduced and I will further investigate the reason for it. 

Regards,
Petar
Progress Telerik

[Jonathan]

Hi Petar, 

 

I downloaded and was able to run your project.

The label seems to be correctly bound to the combobox. When I click the label, the focus is set tot the dropdownlist.

 

However...

I made an adjustment to the kendo-combobox tag in the Index.cshtml. I added the for-attruibute.

for="CategoryId"

 

In theTestViewModel, I added a CategoryId property:

public class TestViewModel
    {
        public string ComboBoxName
        {
            get;
            set;
        }

        public int CategoryId { get; set; }

        public TestViewModel()
        {
            ComboBoxName = "MyCustomCombobox";
            CategoryId = 1;

        }
    }

 

When I run that code, the label isn't bound tot the dropdownlist because the focus is not set when I click the label.

 

Could you look at this?

 

Thanks!

[Petar]

Hi Jonathan,

Adding for="CategoryId" to the kendo-combobox tag will change the name and the id of the ComboBox to "CategoryId". At the same time, the label is bound to a field with id = "MyCustomCombobox". This is why when the label is clicked, the ComboBox doesn't get focused. 

Can you give me more details about the functionality you are trying to achieve?

Regards,

Petar
Progress Telerik