CODEWITHSUNDEEP
jqueryasp.net-mvckendo-uihtml-helperkendo-autocomplete
Rahul
Rahul

Reputation: 2307

Bind ID as Value with Text in Autocomplete

I am using Kendo Autocomplete, In that I am filling the Text and also using that text parse data, But I want to use ID as Value to send it on server side on Form Submit.

I am using this Kendo Editor But Can't able to Bind the "CustomerID" as the Value of Autocomplete:: 

 @(Html.Kendo().AutoComplete()
                                  .Name("Customers")
                                  .DataTextField("CustomerShortName")
                                  .Value("CustomerID")
                                  .Filter("contains")
                                  .MinLength(3)
                                  .Template("<label>${ data.CustomerShortName }</label>")
                                  .HtmlAttributes(new {  disabled="disabled" })
                                  .DataSource(source =>
                                  {
                                      source.Read(read =>
                                      {
                                          read.Action("GetCustomers", "GetData");
                                      })
                                      .ServerFiltering(true);
                                  })
                            )

Please Help me on this ASAP.

Upvotes: 9

Views: 16591

Answers (5)

Mahdi Ahmadi
Mahdi Ahmadi

Reputation: 441

The marked solution doesn't work if you clear selected, I solved this problem by this solution:

$().ready(function () {

    $("#Customers").change(function () {
        var au = $("#Customers").data("kendoAutoComplete");
        var selected = au.listView.selectedDataItems();
        if (selected.length > 0) {
             $("#CustomerID").val(selected[0].CustomerID);
        } else {
             $("#CustomerID").val("");
        }
    });

}

Upvotes: 3

Rich Hildebrand
Rich Hildebrand

Reputation: 1885

You can't bind to just the ID but you can bind to the selected object using the MVVM bindings. From there you will be able access the ID.

The HTML.

 <div id="view">
    <div>
       <h4 data-bind="text: selectedCustomer.CustomerID"></h3>
   </div>

   <span> Select Customer: </span>
   <input data-role="autocomplete"
          data-value-primitive="false"
          data-text-field="CustomerShortName"
          data-bind="value: selectedCustomer,
                     source: Customers" />
   </div>

The javaScript.

var viewModel = kendo.observable({
  Customers: [
    { CustomerID:"1", CustomerShortName: "Customer One" },
    { CustomerID:"2", CustomerShortName: "Customer Two" },
    { CustomerID:"3", CustomerShortName: "Customer Three" },
  ],

  selectedCustomer: undefined,
});

var view = $("#view");
kendo.bind(view, viewModel);

A working example can be found here http://jsbin.com/vebiniqahi/1/edit?html,js,output

Upvotes: 1

Rudresha Parameshappa
Rudresha Parameshappa

Reputation: 3926

the binding of value field in Autocomplete is not possible alternate way is combobox

@(Html.Kendo().ComboBox()
            .Name("Combobox")
            .DataValueField("Value")
            .DataTextField("Text")
            .Filter(FilterType.Contains)
            .HtmlAttributes(new { value = propertyValue })
            .DataSource(source => {
                source.Read(read => {
                    read.Action(action, controller); //Set the Action and Controller name
                })
                .ServerFiltering(true);) //If true the DataSource will not filter the data on the client.
            })                              //, new { maxResults = 10 }
            .AutoBind(true).HighlightFirst(true).HtmlAttributes(htmlAttributes).Enable(true)
            .Events(e => e.Change("function(e){ if(ComboOnChange(e)){" + onChange + "(e);} }"));

the change event is the javascript function which you want to call on change of value in combobox.

Upvotes: 1

Rahul
Rahul

Reputation: 2307

I have done this in another way, I have made a Hidden type for its ID value i.e. for "CustomerID" as

@Html.HiddenFor(x=>x.CustomerID)

and on change of kendo Autocomplete I have written some event as,

    @(Html.Kendo().AutoComplete()
                                      .Name("Customers")
                                      .DataTextField("CustomerShortName")
                                     .Events(events => events.Select("CustomerSelect"))
                                      .Filter("contains")
                                      .MinLength(3)
                                      .Template("<label>${ data.CustomerShortName }</label>")
                                      .HtmlAttributes(new {  disabled="disabled" })
                                      .DataSource(source =>
                                      {
                                          source.Read(read =>
                                          {
                                              read.Action("GetCustomers", "GetData");
                                          })
                                          .ServerFiltering(true);
                                      })
                                )

And For that I am using Javascript Function as::

<script>
//Set CustomerID
    function CustomerSelect(e)
    {
        var DataItem = this.dataItem(e.item.index());
        $("#CustomerID").val(DataItem.CustomerID);
}
</script>

And that value I am using While Submitting the Form. Thanks for your help.

Upvotes: 20

Atanas Korchev
Atanas Korchev

Reputation: 30671

This can't be done with the AutoComplete. The latter is just a regular textbox with an attached suggestion list. You can use a different widget .e.g. ComboBox or DropDownList. Both allow having text and value.

Upvotes: 1

Related Questions