This is a migrated thread and some comments may be shown as answers.

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

7 Answers 225 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 2
Veteran
Steve asked on 02 Apr 2012, 04:45 AM
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?

7 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 02 Apr 2012, 05:39 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Steve
Top achievements
Rank 2
Veteran
answered on 02 Apr 2012, 06:16 PM
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
0
Iliana Nikolova
Telerik team
answered on 04 Apr 2012, 05:08 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Joshua
Top achievements
Rank 1
Veteran
Iron
answered on 03 Aug 2012, 09:33 PM
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.
0
Iliana Nikolova
Telerik team
answered on 08 Aug 2012, 12:53 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Joshua
Top achievements
Rank 1
Veteran
Iron
answered on 16 Aug 2012, 06:15 PM
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  
0
Atanas Korchev
Telerik team
answered on 17 Aug 2012, 07:35 AM
Hi,

 Complex properties are set in JSON format:

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

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MVVM
Asked by
Steve
Top achievements
Rank 2
Veteran
Answers by
Iliana Nikolova
Telerik team
Steve
Top achievements
Rank 2
Veteran
Joshua
Top achievements
Rank 1
Veteran
Iron
Atanas Korchev
Telerik team
Share this question
or