title: Binding Kendo grid to a Complex dataSource
body: <p>I have a div which I am converting to a Kendo Grid in Jquery.</p>
  
  <pre><code> divSearchGrid.kendoGrid({
      dataSource: {
          transport: {
              read: function (options) {
                  var webMethod = "Portal.aspx/DisplayNotes";
                  $.ajax({
                      type: "POST",
                      url: urlSearch,
                      data: paramsSearch,
                      async: false,
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      success: function (result) {
                          options.success(result.d);
                      }
                  })
              }
          }
      },
      batch: true,
      selectable: "row",
      autoSync: true,
      editable: true,// "inline",
      navigatable: true,
      columnMenu: true
  })
  </code></pre>
  
  <p>It's Datasource is a List whose objects has another List as their properties.</p>
  
  <p>Example 
  Datasource : <code>[{a,b,c,List,g,h,i,},{a,b,c,List,g,h,i,},{a,b,c,List,g,h,i,}]</code></p>
  
  <p>and the List in above objects has following structure</p>
  
  <p><strong>List</strong> : <code>[{d},{e},{f}]</code></p>
  
  <p>I want to show my kendo grid with following columns:</p>
  
  <p>a,b,c,d,e,f,g,h,i</p>
  
  <p>How can I achieve this functionality.</p>