Autocomplete data-role...and input array :)

[sitefinitysteve]

Whats the best way to specify autocomplete on an input in my view such that I can define the datasource which will populate it?  A method in the observable somehow perhaps?

So question #2
If this is my markup structure
<div>
  <input data-role="numerictextbox" />
  <input data-role="autocomplete" />
  <input data-role="numerictextbox" />
  <input /> //Click this, adds a new row
  <input /> //Click this, deletes this row
</div>

How could that get bound to my model?...I'm not sure I understand the whole binding to an array...if this is even doable?

[Iliana Dyankova]

Hello Steve,

You could specify autocomplete on an input element through data-role attribute of the input element and bind it to dataSource through data-bind attribute. For example:

<input data-role="autocomplete" data-bind="source: colors"/>

I believe you might find this example very useful. It illustrates how to bind your Kendo UI widgets to the Model.


Greetings,
Iliana Nikolova
the Telerik team

[sitefinitysteve]

Yeah I have heavily referenced that page, where I'm hung-up though is that my DS for the autobind is a remote json service, not a local array in the object

[Iliana Dyankova]

Hi Steve,

A view-model is a representation of your data (the model) which is bound to a view (the UI elements - HTML input elements in your case). Indeed, the DataSource items are ObservableObject and can be use as MVVM binding source. For this purpose you need to define the transport, schema and model of your dataSource. This configuration describes the model of the data, type of the fields, etc. 
 For example:

var viewModel = kendo.observable({
    productsSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: "Some url",
                dataType: "jsonp"
            }
                   },
        batch: true,
        schema: {
            model: {

            }
        }
    }),

});

 Please check the following example which illustrate how you could bind a model to a remote dataSource.


Regards,
Iliana Nikolova
the Telerik team

[Joshua]

Is there anyway to bind the options for the auto complete using mvvm?

For example I would like to bind the minLength to something other than one. In the linked examples, I cannot see how this would be done.

[Iliana Dyankova]

Hi Joshua,

By design the autocomplete widget supports only the source and value bindings. Hence you could not bind the minLength of the autocomplete with MVVM, but you could set the properties declaratively. Like here:  

<input data-role="autocomplete" data-min-length="4" data-bind="source: colors, value: autoCompleteValue" />

I hope this helps.

Regards,

Iliana Nikolova
the Telerik team

[Joshua]

How would you set the animation via attribute? 

if i try to do something like:

<input data-placeholder='Clinic name filter...' data-animation='animation' data-role="autocomplete" data-text-field="Name" data-bind="source: clinicDS, value: ID" data-auto-bind='false' />

 

var viewModel = new kendo.observable({

clinicDS:...

                    animation: {

                        open: {

                            effects: "fadeIn",

                            duration: 300,

                            show: true

                        }

                    }});

then i just get an error: Uncaught TypeError: Cannot read property 'length' of undefined  

[Atanas Korchev]

Hi,

 Complex properties are set in JSON format:

data-animation='{"open":{"effects":"fadeIn","duration":300}}'

Regards,
Atanas Korchev
the Telerik team