title: kendo UI DataSource and complex JSON
body: <p>I want to fill a grid with a complex json returned from a webservice.
  My json contains two things:</p>
  
  <ul>
  <li>data: array with the records that will fill the grid</li>
  <li>columns: array with the config(layout) of the grid</li>
  </ul>
  
  <p>I have successfully filled the grid with the "data" by specifying the <code>schema.data</code>.</p>
  
  <p>My problem is that i how to get the "columns" (from the JSON) from the datasource so i can set the grid properties in my gridOptions.
  Is there a way to do it?</p>
  
  <p><strong>Here is my JSON</strong></p>
  
  <pre><code>{
    "data": [
      {
        "id": 0,
        "firstname": "Dalton",
        "lastname": "Holden",
        "gender": "male",
        "email": "daltonholden@tellifly.com",
        "phone": "871-407-2973",
        "address": "22 National Drive, Brenton, Louisiana",
        "birthday": "21/04/1965",
        "currency": "GBP"
      },
      {
        "id": 1,
        "firstname": "Allyson",
        "lastname": "Odom",
        "gender": "female",
        "email": "allysonodom@tellifly.com",
        "phone": "922-548-2725",
        "address": "44 Quincy Street, Thynedale, Georgia",
        "birthday": "28/08/1961",
        "currency": "CHF"
      },
      {
        "id": 2,
        "firstname": "Sweet",
        "lastname": "Branch",
        "gender": "male",
        "email": "sweetbranch@tellifly.com",
        "phone": "880-593-2244",
        "address": "81 Fenimore Street, Veguita, Missouri",
        "birthday": "08/08/1953",
        "currency": "AUD"
      }
    ],
  
    "columns": [
      {
        "field": "firstname",
        "title": "Frist Name",
        "width": 200,
        "attributes": {
          "class": "",
          "style": "text-align: left;"
        },
        "headerAttributes": {
          "class": "table-header-cell",
          "style": "text-align: left;"
        }
      },
      {
        "field": "lastname",
        "title": "Last Name",
        "attributes": {
          "class": "",
          "style": "text-align: left;"
        },
        "headerAttributes": {
          "class": "table-header-cell",
          "style": "text-align: left;"
        }
      },
      {
        "field": "gender",
        "title": "Gender",
        "attributes": {
          "class": "",
          "style": "text-align: left;"
        },
        "headerAttributes": {
          "class": "table-header-cell",
          "style": "text-align: left;"
        }
      },
      {
        "field": "email",
        "title": "e-mail",
        "attributes": {
          "class": "",
          "style": "text-align: left;"
        },
        "headerAttributes": {
          "class": "table-header-cell",
          "style": "text-align: left;"
        }
      },
      {
        "field": "phone",
        "title": "Phone Number",
        "attributes": {
          "class": "",
          "style": "text-align: right;"
        },
        "headerAttributes": {
          "class": "table-header-cell",
          "style": "text-align: right;"
        }
      },
      {
        "field": "address",
        "title": "Address",
        "attributes": {
          "class": "",
          "style": "text-align: left;"
        },
        "headerAttributes": {
          "class": "table-header-cell",
          "style": "text-align: left;"
        }
      },
      {
        "field": "birthday",
        "title": "Birthday",
        "attributes": {
          "class": "",
          "style": "text-align: center;"
        },
        "headerAttributes": {
          "class": "table-header-cell",
          "style": "text-align: center;"
        }
      },
      {
        "field": "currency",
        "title": "Currency",
        "attributes": {
          "class": "",
          "style": "text-align: center;"
        },
        "headerAttributes": {
          "class": "table-header-cell",
          "style": "text-align: center;"
        }
      }
    ]
  }
  </code></pre>
  
  <p><strong>And here is my code:</strong></p>
  
  <pre><code>var customersSource = new kendo.data.DataSource({
          transport: {
              read: {
                  url: "http://....",
                  dataType: "json"
              }
          },
          schema: {
              data: "data"
          }
      });
  
  $scope.mainGridOptions = {
          dataSource: customersSource,
          //columns: Here it should be something like --&gt; customersSource.columns,
          height: 500,
          scrollable: true,
          selectable: true
      };
  </code></pre>