Getting a selected value text from a drop down list

[Andrew]

I am trying to get a value and use it to change a label.
All the examples I have found in documentation include only the html helper version
I am using the tag helpers and can’t figure out how to do it.
I tried this:

<script>

        function onSelect(e) {
            alert(e.item.Text);
        }
    </script>

<kendo-dropdownlist name="DocumentTypes" on-select="onSelect" for="GovIdTypeID" class="jProfileMod" datatextfield="Name" datavaluefield="Id" bind-to="Model.GovIdTypes" cascade-from="CountryID" cascade-from-field="IssuingCountry.Id"></kendo-dropdownlist>

But it is not working.

[Marin Bratanov]

Hello Andrew,

The e.item reference in the select event is a jQuery object and so you must use jQuery methods on it: https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/events/select. jQuery objects do not have a .Text property and so accessing it throws an exception.

Here is a sample modification of our tag helper demo, where I highlighted the changes:

<div class="demo-section k-content">
    <h4>Search for shipping name</h4>
    <kendo-dropdownlist name="orders" style="width:100%"
                        datatextfield="ShipName"
                        datavaluefield="OrderID"
                        min-length="3"
                        template="#= OrderID # | For: #= ShipName #, #= ShipCountry #"
                        height="290"
                        filter="FilterType.Contains"
                        on-select="mySelectHandler">
        <datasource type="DataSourceTagHelperType.Ajax" page-size="80">
            <transport>
                <read url="@Url.Action("Virtualization_Read", "DropDownList")" />
            </transport>
        </datasource>
        <virtual item-height="26" value-mapper="valueMapper" />
        <popup-animation>
            <open duration="500" />
            <close duration="500" />
        </popup-animation>
    </kendo-dropdownlist>
    <div class="demo-hint">Hint: type at least three characters. For example "vin"</div>
</div>

<script>
    function mySelectHandler(e) {
        alert(e.item.text());//e.item is a jQuery object so you need to use jQuery methods to work with it
        alert(e.sender.text());//go through the dropdownlist object - can be useful if you use a template for the items
    }
    function valueMapper(options) {
        $.ajax({
            url: "@Url.Action("Orders_ValueMapper", "DropDownList")",
            data: convertValues(options.value),
            success: function (data) {
                options.success(data);
            }
        });
    }

    function convertValues(value) {
        var data = {};

        value = $.isArray(value) ? value : [value];

        for (var idx = 0; idx < value.length; idx++) {
            data["values[" + idx + "]"] = value[idx];
        }

        return data;
    }
</script>

Regards,
Marin Bratanov
Progress Telerik

[John]

How do you get the selected text and value via JQuery outside of a control event when using the tag helpers?

In the MVC version of the drop down list, you could do this to get the value.

$("#Input.StateId").data("kendoDropDownList").value()

However, this is not working when using the tag helpers.

[Marin Bratanov]

Hello John,

This is the general approach and it should work. Here is a basic snippet that works for me, and below you can find attached the sample I tested with.

<kendo-dropdownlist name="MyDdl"
                    datatextfield="TheText"
                    datavaluefield="TheValue">
    <datasource type="DataSourceTagHelperType.Custom">
        <transport>
            <read url="@Url.Action("GetDummyData", "DdlValueTagHelper")" />
        </transport>
    </datasource>
</kendo-dropdownlist>

<button onclick="getDdlValue();">get the value</button>

<script>
    function getDdlValue() {
        var ddl = $("#MyDdl").data("kendoDropDownList");
        alert(ddl.value());
    }
</script>

I also advise that you make sure that:

• the selector is correct and returns the desired element
• there are no JS errors on the page
• you are using the latest version

If neither helps you move forward after comparing against my sample, I advise that you open a support ticket and attach a modified runnable version of that sample to showcase the problem you are facing. This will ensure we can reproduce it, and offer a concrete response without guessing.

Regards,
Marin Bratanov
Progress Telerik

[John]

That works.  How can I get the value?  .e.item.value() or e.item.val() do not work.

[John]

Sorry, ignore my previous post.  That worked.