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>
5 Answers, 1 is accepted
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
Rank 1
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>
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
Rank 1
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>
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