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

ListView will not populate from JSON String

1 Answer 160 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
DevLop
Top achievements
Rank 1
DevLop asked on 14 Aug 2020, 08:45 AM

I have the the following code:

module App.UI {
    export class News extends App.UI.UIComponent {
        constructor(selector: JQuery | string) {
            super(selector);
        }

        protected init() {
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: () => {
                        App.WCF.GET('/umbraco/aawNewsSurfaceController/NewsSurface/GetNewsItems?lang=de&id=1396').then((response) => {
                            console.log(response, "response");
                        })
                    }
                },
                pageSize: 21
            });

            console.log(dataSource);

            $("#pager").kendoPager({
                dataSource: dataSource
            });

            $(".news-list-view").kendoListView({
                dataSource: dataSource,
                template: kendo.template($("#ListViewTemplate").html())
            });
        }
    }
}

The Response from my Service is the following JSON String:

[ { "Headline": "Lorem Ipsum", "Content": "<p>Lorem ipsum ...</p>", "PublishDate": "2020-08-07T00:00:00", "Image": { "Description": "", "Photographer": [], "UmbracoFile": { "src": "/media/bedfs1h5/bild02.jpg", "focalPoint": { "left": 0.5, "top": 0.5 }, "crops": [ { "alias": "Reference Slider", "width": 800, "height": 545, "coordinates": null }, { "alias": "Slider", "width": 1070, "height": 600, "coordinates": null }] }, "Key": "fcdafa9b-3dff-407d-88b2-a4b85a9b2ac5", "Id": 1330, "Name": "Porsche Schwarz", "UrlSegment": null, "Level": 4, "Path": "-1,1111,1062,1146,1330", "Cultures": { "": { "Culture": "", "Date": "2020-07-13T15:47:22.943Z" } } } }, { "Headline": "Test 2", "Content": "<p>Test</p>", "PublishDate": "2020-08-15T00:00:00", "Image": { "Description": "", "Photographer": [ "Karl Kani" ], "UmbracoFile": { "src": "/media/pmpbnlqi/porsche.jpg", "focalPoint": { "left": 0.71333333333333337, "top": 0.34261241970021411 }, "crops": [ { "alias": "Reference Slider", "width": 800, "height": 545, "coordinates": { "x1": 0.0, "y1": 0.032119914346895075, "x2": 0.0, "y2": 0.092612419700214138 } }, { "alias": "Slider", "width": 1070, "height": 600, "coordinates": null } ] }, "Key": "3e95e2e9-c808-48d2-a71e-efca00d8ba55", "Id": 1147, "Name": "Porsche-Zentrum, Stuttgart-Zuffenhausen", "UrlSegment": null, "Level": 4, "Path": "-1,1111,1062,1146,1147", "Cultures": { "": { "Culture": "", "Date": "2020-03-04T09:28:31.753Z" } } } } ]

 

The JSON String can be parsed into a valid JSON Object so it should be fine right? So whats the Problem here? I also tried using the following schema:

 var dataSource = new kendo.data.DataSource({
                transport: {
                    read: () => {
                        App.WCF.GET('/umbraco/aawNewsSurfaceController/NewsSurface/GetNewsItems?lang=de&id=1396').then((response) => {
                            console.log(response, "response");
                        })
                    }
                },
                schema: {
                    type: "json",
                    model: {
                        fields: {
                            Headline: { field: "Headline", type: "string" },
                            Content: { field: "Content", type: "string" },
                            PublishDate: { field: "PublishDate", type: "DateTime" },
                            Image: { field: "Image", type: "Object" }
                        }
                    }
                },
                pageSize: 21
            });

And still my ListView Datasource wont get populated.

Any Help would be appreciated.

Thank you.

 

1 Answer, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 18 Aug 2020, 06:18 AM

Hi DevLop,

I've used the shared data response to create this Dojo example. You can see that the data is being displayed in the TreeList. It just has to be styled with appropriate CSS definitions. 
The template in the above example is defined as follows:

      <script type="text/x-kendo-template" id="template">
        <div class="product">
            <h3>#:Headline#</h3>
            <h3>#:Content#</h3>
            <h3>#:PublishDate#</h3>
        </div>

The marked in yellow code shows how the different dataSource fields are added to the template used for the ListView.

What I assume could be triggering the issue in your application is the template. Can you check if the different fields' definitions are correct inside the template? You can remove all currently defined fields and start to add them one-by-one to see if a newly added field will trigger the issue with the not loaded data. 

Regards,
Petar
Progress Telerik

Tags
Data Source
Asked by
DevLop
Top achievements
Rank 1
Answers by
Petar
Telerik team
Share this question
or