How to configure remote datasource with declarative syntax

9 posts, 2 answers
  1. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 10 Mar Link to this post

    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.

     

  2. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 11 Mar Link to this post

    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.

     

     

     

  3. Kendo UI is VS 2017 Ready
  4. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 14 Mar Link to this post

    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!
     
  5. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 14 Mar in reply to Alexander Popov Link to this post

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

      

  6. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 14 Mar Link to this post

    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.

     

  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 16 Mar Link to this post

    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!
     
  8. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 16 Mar in reply to Alexander Popov Link to this post

    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.

     

  9. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 18 Mar Link to this post

    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!
     
  10. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 18 Mar in reply to Alexander Popov Link to this post

    Ah, ok. Guess I'll do it that way then. thanks.
Back to Top
Kendo UI is VS 2017 Ready