kendo dropdownlist set value after autocomplete selection

[TD]

I have an auto complete field that pulls in my vendors.  Related to my vendors are pay terms.  On the UI the pay terms is a drop down list.  When I select vendor from the auto complete, how do I get the pay terms to be selected on the drop down list?  Thanks in advance.  

 

<div class="form-group row mt-4">
            @Html.LabelFor(model => model.VendorName, new { @class = "col-sm-3 col-form-label" })
            <div class="col-sm-9">
                @Html.TextBoxFor(model => model.VendorName, new { @class = "form-control", maxlength = "50", type = "text", @id = "txtVendorName" })
                @Html.ValidationMessageFor(model => model.VendorName, "", new { @class = "text-danger" })

                <script id="noDataTemplate" type="text/x-kendo-tmpl">
                    <div>
                        No data found. Do you want to add new vendor - '#: instance.element.val() #' ?
                    </div>
                    <br />
                    <button class="k-button" onclick="addNewVendor('#: instance.element[0].id #', '#: instance.element.val() #')">Add new vendor</button>
                </script>
            </div>
        </div>

 

 <div class="form-group row mt-4">
            @Html.LabelFor(model => model.InvoiceTermID, new { @class = "col-sm-3 col-form-label" })
            <div class="col-sm-9">
                @(Html.Kendo().DropDownListFor(x => x.InvoiceTermID)
                               .OptionLabel("Select Terms")
                               .DataTextField("Text")
                               .DataValueField("Value")
                               .HtmlAttributes(new { style = "width: 100%" , @required = "required", @validationMessage = "The Terms field is required.", id="ddlTermID" })
                               .DataSource(source =>
                               {
                                   source.Read(read =>
                                   {
                                       read.Action("GetInvoiceTermsSelectList", "Dropdown");
                                   });
                               })
                               .Value(Convert.ToString(Model.InvoiceTermID))
                           )
                @Html.ValidationMessageFor(model => model.InvoiceTermID, "", new { @class = "text-danger" })
            </div>
        </div>

 

 

   $(document).ready(function () {
        $("#Date").attr("readonly", true);

        $("#txtVendorName").kendoAutoComplete({
            dataSource: {
                type: "json",
                severFiltering: true,
                serverPaging: true,
                transport: {
                    read: '@Url.Action("GetVendors", "PurchaseOrder")',
                    parameterMap: function (data, type) {
                        return { filter: $('#txtVendorName').val() };
                    }
                }
            },
            clearButton: true,
            filter: "contains",
            dataTextField: "Name",
            minLength: 3,
            placeholder: "Search Vendor Name ...",
            noDataTemplate: $("#noDataTemplate").html(),
            select: onSelectVendor,
            change: function (e) {
                var vendorId = $("#hdnVendorID").val();
                if (vendorId == "" || vendorId == 0) {
                    $("#hdnVendorID").val("");
                    $("#txtVendorName").val("");
                }
            },
            filtering: function (e) {
                $("#hdnVendorID").val("");
            }
        });

 

    function onSelectVendor(e) {
        var dataItem = this.dataItem(e.item.index());        
        if (dataItem && dataItem.VendorID > 0) {
            $("#hdnVendorID").val(dataItem.VendorID);              
            //$("#ddlTermID").val(1);
        }
    }

 

[TD]

Found the answer just in case it helps  you

    function onSelectVendor(e) {
        var dataItem = this.dataItem(e.item.index());        
        if (dataItem && dataItem.VendorID > 0) {
            $("#hdnVendorID").val(dataItem.VendorID);
            console.log(dataItem.TermID);
            var ddl = $("#ddlTerms").data("kendoDropDownList");
            console.log(ddl);
            ddl.value(dataItem.TermID);            
            $("#ddlTerms").value = dataItem.TermID;                        
        } else {
            $("#ddlTerms").data("kendoDropDownList").dataSource.data([]);
            }
    }

[TD]

function onSelectVendor(e) {
        var dataItem = this.dataItem(e.item.index());        
        if (dataItem && dataItem.VendorID > 0) {
            $("#hdnVendorID").val(dataItem.VendorID);
            console.log(dataItem.TermID);
            //var ddl = $("#ddlTerms").data("kendoDropDownList");
            //console.log(ddl);
            //ddl.value(dataItem.TermID);
            $("#ddlTerms").data("kendoDropDownList").value(dataItem.TermID);
            //$("#ddlTerms").value = dataItem.TermID;                        
        } else {
            $("#ddlTerms").data("kendoDropDownList").dataSource.data([]);
            }
    }

[Aleksandar]

Hello TD,

To set the value of a Kendo UI DropDownList you should get a reference to the widget as described here: https://docs.telerik.com/kendo-ui/intro/widget-basics/events-and-methods#getting-the-widget-instance

You can then use the value method to set the value of the widget: https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/methods/value Note that you will need to trigger the change event, as described in the documentation: https://docs.telerik.com/kendo-ui/api/javascript/observable/methods/trigger 

select:function(e){
              var ddl = $("#dropdownlist").getKendoDropDownList();
              ddl.value(2);
              ddl.trigger("change"); 
            }

Here is a sample dojo demonstrating the above.  Making a selection in the AutoComplete will set a value for the DropDownList.

I hope this helps.

Regards,
Aleksandar
Progress Telerik

[TD]

Thank you!