Hello, I am trying to create a reusable control (partial view) utilizing the Kendo UI Autocomplete widget. The issue is that since this new partial I am creating can appear multiple times in a view, how can you pass in or otherwise use a variable as the .Name() attribute in the AutoComplete helper?
Here is my partial view:
My controller will handle acquiring the specific data and then passing it to the partial (it needs to take a parameter to populate ViewBag.ControlId, for now it is just hard coded):
I then call this partial from my view like:
I tried JQuery, to change the name at run time, but this then breaks the Kendo jquery script as it will be looking for the original name.
Here is my partial view:
@using Kendo.Mvc.UI;
@model IEnumerable<
OTIS.AppServ.Shared.ViewModels.ddlOptions
>
@(Html.Kendo().AutoComplete()
.Name("TEST")
.Filter("startswith")
.DataTextField("DisplayName")
.BindTo(Model)
.Events(e => e
.Change("autocomplete_change")
)
.Placeholder("Select Customer...")
.HtmlAttributes(new {@class = "filter"})
)
<
input
class
=
"filter"
id
=
"@ViewBag.ControlId"
type
=
"hidden"
/>
<
script
>
//$("#TEST").attr("id", '@ViewBag.ControlId' + '_org');
function autocomplete_change() {
var hiddenInput = $('#' + '@ViewBag.ControlId');
var autoContainer = $("#" + 'TEST').data("kendoAutoComplete");
var result = $.grep(autoContainer.dataSource.data(),
function (itemInArray, itemIndex) {
return itemInArray.DisplayName == autoContainer.value();
}
);
//alert(result[0].Id)
hiddenInput.val(result[0].Id);
}
</
script
>
My controller will handle acquiring the specific data and then passing it to the partial (it needs to take a parameter to populate ViewBag.ControlId, for now it is just hard coded):
[ChildActionOnly]
public ActionResult Customers()
{
List<
ddlOptions
> viewModel = new List<
ddlOptions
>();
viewModel = _manageDDLsAppServ.GetCustomersDDLViewModel(_currentCompanyId).ToList();
ViewBag.ControlId = "customerIdFilter";
return PartialView("_ddlOptionsAutoComplete", viewModel);
}
@{ Html.RenderAction("Customers", "ManageDDLs", new { area = "Shared" }); }
I tried JQuery, to change the name at run time, but this then breaks the Kendo jquery script as it will be looking for the original name.