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

8 posts, 0 answers
  1. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 01 Apr 2012 Link to this post

    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?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 02 Apr 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 02 Apr 2012 Link to this post

    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
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 04 Apr 2012 Link to this post

    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!
  6. Joshua
    Joshua avatar
    66 posts
    Member since:
    May 2012

    Posted 03 Aug 2012 Link to this post

    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.
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 08 Aug 2012 Link to this post

    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!
  8. Joshua
    Joshua avatar
    66 posts
    Member since:
    May 2012

    Posted 16 Aug 2012 Link to this post

    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  
  9. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 17 Aug 2012 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready