Autocomplete input datasource everlive

6 posts, 0 answers
  1. Ignacio
    Ignacio avatar
    12 posts
    Member since:
    Feb 2013

    Posted 29 Jan Link to this post

    Hello,

    How can I to build an autocomplete input with the model data-bind="value: ..., source: ..., events: ..." and with a dataSource type everlive ?

    And even if it were possible, adding new items.

    The input is "cliente".

    The field to search/filter is "namecli" into the table "servicios".

    My form:

            <form>

                <ul data-role="listview" data-style="inset">

                    <li class="form-content-item">


                        <label id="numeroservicioField" class="field km-listview-label field--text">
                            <span class="field__label" data-bind="text: strings.servicio.servicioModel.editableListForm.numeroservicio.title" style="width: 40%;"></span>

                            <input id="numeroservicio" data-bind="value: addFormData.numeroservicio, enabled: false" type="text" style="width: 60%; font-weight: bold;">

                        </label>
                    </li>

                    <li class="form-content-item" style="visibility: visible;">

                        <label id="clienteField" class="field km-listview-label field--search">
                            <span class="field__label" data-bind="text: strings.servicio.servicioModel.editableListForm.cliente.title" style="width: 40%;"></span>                          

                            <input id="cliente" data-bind="value: addFormData.cliente"  type="search" style="width: 60%; font-weight: bold;">                     

                        </label>                 
                    </li>                

                    <li class="form-content-item" style="visibility: visible;">


                        <label id="nifField" class="field km-listview-label field--text">
                            <span class="field__label" data-bind="text: strings.servicio.servicioModel.editableListForm.nif.title" style="width: 40%;"></span>


                            <input id="nif" data-bind="value: addFormData.nif" type="text" style="width: 60%; font-weight: bold;">

                        </label>
                    </li>

                </ul>
            </form>

     

     

  2. Anton Dobrev
    Admin
    Anton Dobrev avatar
    568 posts

    Posted 01 Feb Link to this post

    @Ignacio

    You can use the AutoComplete widget with the everlive data source type in the same way as with the Kendo Data Source component. Please see an example of using the MVVM bindings of the widget here along with binding it to a data source.

    To be able to use this widget, you need an access to the Kendo UI Professional package (included in the Telerik Platform Business edition). Please follow this article to install it in the project.

    Also, please note that this is not a mobile-optimized widget, it is a web one and may not look and feel natively on mobile devices.

    I am not sure about your question -  And even if it were possible, adding new items.

    You will be able to get the selected item and use it along with its Id in you code when creating an item.

    I hope this helps.

    Regards,
    Anton Dobrev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Ignacio
    Ignacio avatar
    12 posts
    Member since:
    Feb 2013

    Posted 01 Feb Link to this post

    Hello Anton,

    Thank you very much for your attention. 

    I have installed the widget correctly, but the autocomplete doesn't work, also the form is locked.

    The problem is in this input property:       ..., source: products" .  If I write this, the form and the view are locked.   

     

    My code:

    <li class="form-content-item" style="visibility: visible;">

                        <label id="clienteField" class="field km-listview-label field--search">
                            <span class="field__label" data-bind="text: strings.servicio.servicioModel.editableListForm.cliente.title" style="width: 40%;"></span>                          

                            <input id="cliente" data-role="autocomplete" data-bind="value: addFormData.cliente, source: products" type="search" style="width: 60%; font-weight: bold;">

                        </label>    
                                     
                    </li>  

                    <script>
                        var viewModel = kendo.observable({
                            selectedProduct: null,
                            isPrimitive: false,
                            isVisible: true,
                            isEnabled: true,
                            primitiveChanged: function() {
                                this.set("selectedProduct", null);
                            },
                            displaySelectedProduct: function() {
                                var selectedProduct = this.get("selectedProduct");
                                return kendo.stringify(selectedProduct, null, 4);
                            },
                            products: new kendo.data.DataSource({
                                transport: {
                                    read: {
                                        url: "https://demos.telerik.com/kendo-ui/service/products",
                                        dataType: "jsonp"
                                    }
                                }
                            })
                        });
                        kendo.bind($("#cliente"), viewModel);
                    </script>

  4. Anton Dobrev
    Admin
    Anton Dobrev avatar
    568 posts

    Posted 03 Feb Link to this post

    Hello,

    You need to adjust the widget initialization as per the demo.

    Example here - http://dojo.telerik.com/OvaTe

    I hope this helps.

    Regards,
    Anton Dobrev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Ignacio
    Ignacio avatar
    12 posts
    Member since:
    Feb 2013

    Posted 03 Feb in reply to Anton Dobrev Link to this post

    I'm sorry, but doesn't work.
    I don't know if there is any conflict with another .js

    My index.html head (the code of my view.html is like the demo):

    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet">

        <link href="styles/overrides.css" rel="stylesheet">
        <link href="styles/main.css" rel="stylesheet">

        <link rel="stylesheet" href="kendo/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="kendo/styles/kendo.flat.min.css" />

        <script src="cordova.js"></script>

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>

        <!-- local
        <script src="kendo/jsignacio/kendo.core.ui.min.js"></script>    
        <script src="kendo/jsignacio/jquery-1.9.1.min.js"></script>
        <script src="kendo/jsignacio/kendo.all.min.js"></script>
        -->

        <script src="kendo/js/jquery.min.js"></script> 
        <script src="kendo/js/kendo.mobile.min.js"></script>
        <script src="app.js"></script>
        <script src="bower_components/everlive/min/everlive.all.min.js"></script>
        <script src="dataProviders/backendServices.js"></script>

    </head>

     

     

  6. Anton Dobrev
    Admin
    Anton Dobrev avatar
    568 posts

    Posted 07 Feb Link to this post

    @Ignacio

    Indeed, the way references are added in the head element is suggesting that there will be a conflict between all Kendo UI versions and references.

    You can only leave the references as used in the provided code snippet (utilizes the whole Kendo UI Pro) or as explained in the knowledge base article here. Please read the article to the end to examine the structure at the beginning and how it should look at the end after adding the Kendo UI Pro package.

    Let me know if you have questions.

    Regards,
    Anton Dobrev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top