CODEWITHSUNDEEP
jquerykendo-uieventhandlerkendo-mvvmkendo-autocomplete
GETools
GETools

Reputation: 43

Kendo ui - How to attach select event for kendo mvvm autocomplete field to the viewModel

Is there a straight-forward way to define a "select" event handler function within the mvvm html attributes for a kendo autocomplete field?

For example, here is a working version of an autocomplete field using a jquery setup:

$("#fieldProjectName").kendoAutoComplete({
  minLength: 4,
  filter: "contains",
  dataTextField: "ProjectName",
  placeholder: "Begin typing the Project Name",
  select: function (e) { selectAutoComplete(this.dataItem(e.item.index()), "ProjectItemKey", "ProjectName") },
  dataSource: dataProjectList,
});

So far, this is the equivalent version of defining a similar field within a template using the mvvm html attributes "data-???"

<input name="ProjectItemKey"
  data-bind="value:ProjectName"
  data-value-primitive="true"  
  data-value-field="ProjectItemKey"
  data-text-field="ProjectName"
  data-source="dataProjectList"
  data-role="autocomplete" 
  data-min-length="4"
  data-filter="contains"
  data-placeholder="Begin typing the Project Name"
/>

What we don't know how to do is defining the event handler for the select event within this mvvm html-attribute structure, which is the equivalent of the "select:" property in the first example:

  select: function (e) { selectAutoComplete(this.dataItem(e.item.index()), "ProjectItemKey", "ProjectName") },

For instance, if there was something like:

  data-select: "onSelectProject"

then we could include this function within the template to handle the 'select' event:

  function onSelectProject(e) {
    selectAutoComplete(this.dataItem(e.item.index()), "ProjectItemKey", "ProjectName");
  }

Unfortunately, we don't know how to do this. The only somewhat-related documentation we have seen involves setting up a custom kendo.observable model with a custom method embedded in the model, and then setting up something in the data-bind events. However, this seems like a very complicated and indirect approach. Also, we have no idea how we could manipulate the model since it is coming from a kendoGrid that is then using a custom record editing template that includes this autocomplete field.

We've spent many hours trying to track this one down, so any help would be greatly appreciated.

Upvotes: 1

Views: 1171

Answers (2)

Rahul Gupta
Rahul Gupta

Reputation: 10141

Some references for using Kendo MVVM for event and data attributes binding:

Kendo Autocomplete using MVVM

Events binding using MVVM

Here is how you can use data attributes for configuring widgets using MVVM

You can bind select event to your viewModel as:

<input data-role="autocomplete" 
       data-bind="events: { select: onAutocompleteSelect}" 
       .... 
/>

So assuming that you have your JS roughly as below then:

var names = [
{"name": "Gilberto"},
{"name": "Dennis"},
{"name": "Joanna"},
{"name": "Abbigail"},
{"name": "Shannon"},
{"name": "Kadyn"},
{"name": "Gregory"}
];
var viewModel = kendo.observable({
    list: names,
    sel:'',
    onAutocompleteSelect: function (e){
        alert('Autocomplete select event');
    }
});
kendo.bind($('#persons'), viewModel);

HTML:

<div id="persons">
<input
  data-role="autocomplete" 
  data-bind="source: list, value: sel, events: { select: onAutocompleteSelect}"
  data-value-primitive="true"  
  data-value-field="name"
  data-text-field="name"
  data-min-length="4"
  data-filter="contains"
  data-placeholder="Begin typing the Project Name"
/>
</div>

Upvotes: 0

Cara
Cara

Reputation: 644

You should include your select event in the data-bind attribute.

data-bind= events: { select: onSelect}

Check this jsFiddle.

Upvotes: 1

Related Questions