CODEWITHSUNDEEP
listviewkendo-uidatasource
Clemens
Clemens

Reputation: 61

Load json file into dataSource for ListView

I wanna load data from an json file to use it within the viewlist.

In my index.html there's just a div container 

<div id="listA"></div>

in the index I load a javascript ("Scripts/typescript/dragndropList.js") with the following code:

dataSourceListA = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "../../dataSource/person.json",
                        dataType: "json"
                    },
                    schema: {
                        data: "person",
                        model: {
                            id: "ID",
                            fields: {
                                name: { type: "string" }
                            }
                        }
                    }
                }
            });

            listA = $("#listA").kendoListView({

                dataSource: dataSourceListA,
                template: kendo.template("<div class='item'>#: name#</div>")
            }).data("kendoListView");

the json file looks like: 

{
"person": [
    {
        "name": "spade",
        "ID": 1
    },
    ...
]

}

I'm really struggling with this and I tried it with grid and other widgets, but I#M not able to load the content of a jason file into widget and I have no idea where the mistakes are. Is it the dataSource? the template?

thanks for your help!

Upvotes: 0

Views: 1446

Answers (2)

Clemens
Clemens

Reputation: 61

heck, I got it... it was an problem with the IIS- the extension json was unknown... changing the webconfig fixed it.

Upvotes: 2

Santhi Bharath
Santhi Bharath

Reputation: 2878

i think you can try by using this example. 

<script type="text/x-kendo-tmpl" id="mobile-listview-filtering-template">
    <h3>#:ProductName#</h3>
</script>

<script>
  function mobileListViewLocalFiltering() {
    var dataSource = new kendo.data.DataSource({
      data: products,
      schema: {
        model: {
          fields: {
            ProductName: { type: "string" },
            UnitPrice: { type: "number" },
            UnitsInStock: { type: "number" },
            Discontinued: { type: "boolean" }
          }
        }
      }
    });

    $("#local-filterable-listview").kendoMobileListView({
      dataSource: dataSource,
      template: $("#mobile-listview-filtering-template").text(),
      filterable: {
        field: "ProductName",
        operator: "startswith"
      },
      virtualViewSize: 100, // this configuration is needed to determine the items displayed, since the datasource does not (and should not) have paging set.
      endlessScroll: true
    });
  }
</script>
<script>
  var app = new kendo.mobile.Application(document.body);
</script>

Upvotes: 1

Related Questions