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

How to configure remote datasource with declarative syntax

8 Answers 74 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 10 Mar 2016, 10:56 PM

For example:

<input id="myinput"
   data-role="autocomplete"
   data-delay = "100"
   data-min-length = "3"
   data-text-field = "value"
   data-source="WHAT GOES HERE???" />

I can define a DataSource in my js and then specify the variable name in the markup, and that works, but I want to be able to define the datasource in the html.

Is it possible? If so, any examples? The demos and docs don't seem to show how to do this.

Here's my dataSource for reference:

billingEdit.dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    // the remote service url
                    url: baseAreaUrl + "Lookup/CustomerKendo"
                }
            },
            serverFiltering: true,
            schema: {
               data: "Data"
            }
        });

I tried to copy the javascript object that I am passing to the datasource into the data-source and no go.

 

8 Answers, 1 is accepted

Sort by
0
Bob
Top achievements
Rank 1
answered on 11 Mar 2016, 04:22 PM

I also can't seem to get a template to work using the data-template attribute. So, and example of that as well if you please.

I used data-template="#= Text#" and get a js error.

 

 

 

0
Accepted
Alexander Popov
Telerik team
answered on 14 Mar 2016, 08:54 AM
Hi Bob,

There are couple of ways to achieve that. Basically, you can either use the value binding and declare the DataSource inside the observable or use JSON formatted string inside the data attribute. For example: 
<input data-role="autocomplete"
       data-value-primitive="true"
       data-text-field="ProductName"
       data-source="{transport: {read: { url: '//demos.telerik.com/kendo-ui/service/products', dataType: 'jsonp' }}}"
       data-bind="value: selectedProduct"
/>


Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bob
Top achievements
Rank 1
answered on 14 Mar 2016, 03:58 PM

Thanks, not sure why that didn't work when I tried it before.

What about defining a template. Any template I put in there I get an error message like:

 Syntax error, unrecognized expression: ##= CustomerID + ' - ' + Name#

when I used

data-template="#= CustomerID + ' - ' + Name#"

  

0
Bob
Top achievements
Rank 1
answered on 14 Mar 2016, 04:04 PM

Also, just an FYI, I'm not using MVVM, not passing an observable to bind(), I just want to configure in the DOM to simplify instantiating new widgets dynamically added to the dom.

 

0
Alexander Popov
Telerik team
answered on 16 Mar 2016, 11:57 AM
Hi Bob,

Would you be able to share a runnable Dojo example where the issue occurs? That would allow us to investigate further.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bob
Top achievements
Rank 1
answered on 16 Mar 2016, 06:20 PM

Sure here you go:

http://dojo.telerik.com/AcaWe/3

Gives the error. If you run this one where I basically "commented out" the template the autocomplete works fine.

http://dojo.telerik.com/AcaWe/4

Obviously this is a contrived example where the template isn't needed. Say I had firstname and lastname and I wanted to use a template that combined them.

 

0
Accepted
Alexander Popov
Telerik team
answered on 18 Mar 2016, 11:52 AM
Hello Bob,

The data-template attribute should contain the ID of a script element in which the template resides. Here is an example.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bob
Top achievements
Rank 1
answered on 18 Mar 2016, 01:22 PM
Ah, ok. Guess I'll do it that way then. thanks.
Tags
AutoComplete
Asked by
Bob
Top achievements
Rank 1
Answers by
Bob
Top achievements
Rank 1
Alexander Popov
Telerik team
Share this question
or