remote JSON + template

[Vince]

Hello,

first of all, i want to say, i already love the kendo ui. I think i'll be using it a lot.
But, i have a problem and i can't seem to find the solution in the documentation.

I use the "customizing templates" example from the demo-section, because it's very similar to what i want to use.

I use the following javascript:

$("#products").kendoAutoComplete({

                        minLength: 3,

                        dataTextField: "title",

                        template: '<img src="${ data.image }" alt="${ data.title }" />' +

                                  '<dl>' +

                                      '<dt>Title:</dt><dd>${ data.title }</dd>' +

                                      '<dt>Price:</dt><dd>${ data.price }</dd>' +

                                  '</dl>',

                        dataSource: {

                            type: "json",

                             

                            pageSize: 20,

                            transport: {

                                read: "/getProducts.php"

                            }

                        }

                    });

 

                    // set width of the drop-down list

                    $("#products").data("kendoAutoComplete").list.width(400);

The getProducts.php is correctly linked to the file and with the OSX tool Charles i can see the data is retreived when i'm typing in the textbox. 

getProduct.php echoes a valid JSON object like this

[{"id":"6","code":"bbyb05","title":"05 : name1","price":"5.00","image":"uploads\/items\/6\/bbyb2011_-4_05.jpg"},{"id":"4","code":"bbyb058","title":"58 : name 2","price":"5.00","image":"uploads\/items\/4\/nr58_big.jpg"}]

I also tried already to add "data:" to the json, like below, but it doesn't make any difference.

{"data":[{"id":"6","code":"bbyb05","title":"05 : name1","price":"5.00","image":"uploads\/items\/6\/bbyb2011_-4_05.jpg"},{"id":"4","code":"bbyb058","title":"58 : name 2","price":"5.00","image":"uploads\/items\/4\/nr58_big.jpg"}]}

Can somebody please tell me, what i'm doing wrong?
Thanks!
Best regards,
vince

[Atanas Korchev]

Hi,

 You forgot to mention what the actual problem is. Here is a jsfiddle showing a working configuration using your data.

Kind regards,
Atanas Korchev
the Telerik team

[Vince]

Hi Atanas,

Thanks for your reply, but it seems the problem is the json data connection to my server.
If you paste this in jsfiddle, you can see, there's something wrong...

$("#products").kendoAutoComplete({

        minLength: 3,

        dataTextField: "title",

        template: '<img src="${ data.image }" alt="${ data.title }" />' +

                  '<dl>' +

                      '<dt>Title:</dt><dd>${ data.title }</dd>' +

                      '<dt>Price:</dt><dd>${ data.price }</dd>' +

                  '</dl>',

        dataSource: {

                            type: "json",

                              

                            pageSize: 20,

                            transport: {

                                read: "http://www.feelgoodinc.be/woo/backoffice/scripts/getProducts.php"

                            }

                        }

    });

[Atanas Korchev]

Hi,

 You can't make an ajax request cross domains. You need to use JSONP for this to happen. Your PHP page can't be requested as JSON from jsfiddle.net. You can find more info in the Same origin policy wikipedia article.

Greetings,
Atanas Korchev
the Telerik team