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);
}
}
<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);
}
}