How to configure remote datasource with declarative syntax

[Bob]

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.

 

[Bob]

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.

 

 

 

[Alexander Popov]

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

 

 

[Bob]

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#"

  

[Bob]

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.

 

[Alexander Popov]

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

 

 

[Bob]

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.

 

[Alexander Popov]

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

 

 

[Bob]

Ah, ok. Guess I'll do it that way then. thanks.