Datasource not read

4 posts, 0 answers
  1. Christophe
    Christophe avatar
    14 posts
    Member since:
    Jul 2018

    Posted 01 Apr Link to this post

    I cant manage to make anything work with the datasource, where ever I try to use one, grid or dropdownlist.

    my code is: 

     

    thanks for the assistance

     

     var customersData = new kendo.data.DataSource({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: {
                            url: SCH.webapp_api + '/scheduler/customers/data',
                            dataType: "json",
                            type: "GET",
                            cache: false,
                        },
                        schema: {                       
                            model: {
                                fields: {
                                    id: { type: "number" },
                                    name: { type: "string" },
                                    company: { type: "string" },
                                }
                            }
                        }
                    },
                    autoSync: true,
                    serverFiltering: true,
                }
            });

            $("#customers").kendoDropDownList({
                optionLabel: "Choose a customer",
                filter: "contains",
                dataTextField: "name",
                dataValueField: "id",
                dataSource: customersData,
                index: 0
            });

  2. Petar
    Admin
    Petar avatar
    84 posts

    Posted 02 Apr Link to this post

    Hello Christophe,

    What I can conclude you are trying to do is to bind your remote data to a DropDownList. 
    To do so you may take a look at this example from our documentation. It represents how one can bind remote data to a DropDownList.

    If you want to do more complex data binding with the DropDownList I would recommend to check this server filtering demo and this DropDownList virtualization demo

    Also, be sure that your API is returning data in the correct format. This is an example of properly structured data that could be read by the DropDownList:
    [
    {ProductID: 1, ProductName: "Chai", UnitPrice: 18, UnitsInStock: 39, Discontinued: false},
    {ProductID: 2, ProductName: "Chang", UnitPrice: 19, UnitsInStock: 17, Discontinued: false},
    {ProductID: 3, ProductName: "Aniseed Syrup", UnitPrice: 10, UnitsInStock: 13, Discontinued: false}
    ]

    All of the above are just suggestions what you want to do and where the problems in your code might come from.

    If you don't succeed to run your project with the above examples, to be able to help you we will need more details about your project, what are you trying to achieve and what is the structure of data you return. The best scenario would be to send us a Dojo with your code containing a link to your API.


    Regards,
    Petar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Christophe
    Christophe avatar
    14 posts
    Member since:
    Jul 2018

    Posted 02 Apr in reply to Petar Link to this post

    Thnaks Petar, I've looked at all the examples and I dont find a way to handle the response of my REST API

    my data source is in this format

     

    [

     currentPage: 1,

     perPage: 25,

     totalPage: 2,

     data: [
       {ProductID: 1, ProductName: "Chai", UnitPrice: 18, UnitsInStock: 39, Discontinued: false},
       {ProductID: 2, ProductName: "Chang", UnitPrice: 19, UnitsInStock: 17, Discontinued: false},
       {ProductID: 3, ProductName: "Aniseed Syrup", UnitPrice: 10, UnitsInStock: 13, Discontinued: false}

       ]

    ]

     

    How do I fetch the data in the DropdownList please?

  4. Petar
    Admin
    Petar avatar
    84 posts

    Posted 03 Apr Link to this post

    Hello Christophe,

    Please take a look at this example. In it, the data for the DropDownList is being fetched from a remote location. 

    What is different here compared to the examples you may have seen is that we fetch the data and after the data from the remote server come we pass selected elements from it to the DropDownList. As you can see in the console, our API returns 77 records but we use only 4 of them in the DropDownList. 

    You should do the same with your application. When you get the data from your API you must pass the data array to the DropDownList's dataSource. 

    In your case, following the structure you've sent, in the above example, you must change
    dataSource: [data[1], data[2], data[6], data[10]]
    to 
    dataSource: data[3]

    Note that I've removed the square brackets in the second code snippet. This is because dataSource expects to receive a data array. In my example, I am packing the selected elements to an array. Your API returns an array of data which element 3 is another array with the data you want to visualize in the DropDownList. This is why you should directly pass element 3 of your API response to the dataSource.  
     

    Regards,
    Petar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top