DevExtreme jQuery/JS - JSON Data

To bind the TreeList to data in the JSON format, assign the data's URL to the dataSource option.

JavaScript
  • $(function() {
  • $("#treeListContainer").dxTreeList({
  • dataSource: "https://jsonplaceholder.typicode.com/posts"
  • });
  • });

Note that you can also use a JSONP callback parameter supported by jQuery.ajax().

JavaScript
  • $(function() {
  • $("#treeListContainer").dxTreeList({
  • dataSource: "http://www.example.com/dataservices/jsonpdata?callback=?"
  • });
  • });

If you need to specify request headers or process response data, use the CustomStore - a flexible instrument that allows you to configure data access manually. Implement its load function as shown in the code below to add custom headers to the request. Note that you can specify CustomStore members directly in the DataSource object instead of declaring them explicitly.

JavaScript
  • $(function() {
  • $("#treeListContainer").dxTreeList({
  • dataSource: new DevExpress.data.DataSource({
  • load: function () {
  • var d = $.Deferred();
  • return $.getJSON('https://mydomain.com/MyDataService', {
  • header1: "customHeader1",
  • header2: "customHeader2",
  • // ...
  • })
  • .done(function(result) {
  • // Here, you can process the response
  • d.resolve(result);
  • });
  • }
  • })
  • });
  • });

The CustomStore requires requires thorough configuration if data is processed on the server. See the Custom Sources topic for more details.

See Also