ListView will not populate from JSON String

[DevLop]

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.

 

[Petar]

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