title: Binding KendoUI to Sql data with Entity Framework
body: <p>I am developing an Asp.net MVC3 application with Entity Framework. I am using Knockoutjs for bindings and KendoUI for the UI part of the view. I was able to implement most of the KendoUi widgets but now I need to use KendoUI grid control which takes its data from SQL server. As far as I understood the grid widget works with XML or JSON.</p>
  
  <p>So I have a db context:</p>
  
  <pre><code>public DbSet&lt;FranchiseInfoDto&gt; Franchises { get; set; }
  </code></pre>
  
  <p>I have saved some data in the tables in the local Sql server and retrieve it from the controller and serialize it to Json so I can bind it somehow to the grid widjet in the view:</p>
  
  <pre><code>private OmegaDB db = new OmegaDB();
  
          //
          // GET: /Franchise/
  
          public JsonNetResult Index()
          {
              JsonNetResult jsonNetResult = new JsonNetResult { Formatting = Formatting.Indented };
              var franchises = db.Franchises.ToList();
              jsonNetResult.Data = franchises;
              return jsonNetResult;
          }
  </code></pre>
  
  <p>The serialized json data is in this format : </p>
  
  <pre><code>[{ ParentId: 0, Title: "Deposit", Type: "link", Link: "http://www.abv.bg" }, { ParentId: 2, Title: "Cash", Type: "link", Link: "http://www.facebook.com"}];
  </code></pre>
  
  <p>I read the documentation about the KendoUI Grid and was able to bind it to some local data like this:</p>
  
  <pre><code>var menus = [{ ParentId: 0, Title: "Deposit", Type: "link", Link: "http://www.abv.bg" }, { ParentId: 2, Title: "Cash", Type: "link", Link: "http://www.facebook.com"}];
  
  var dataSource = new kendo.data.DataSource({
              data: menus,
              schema: {
                  model: {
                      fields: {
                          ParentId: { editable: true },
                          Title: { editable: true },
                          Type: { editable: true },
                          Link: { editable: true }
                      }
                  }
              }
          });
  
          $("#grid").kendoGrid({
              toolbar: ["create", "save", "cancel"],
              columns: [
                {
                    field: "ParentId",
                    title: "Id",
                    width: 50
                },
                {
                    field: "Title",
                    title: "Label",
                    width: 100
                },
                {
                    field: "Type",
                    title: "Type",
                    width: 100
                },
                {
                    field: "Link",
                    title: "Link"
  
                }
                ],
              dataSource: dataSource,
              editable: true,
              groupable: true,
              scrollable: true,
              sortable: true,
              pageable: true
          });​
  </code></pre>
  
  <p>But when I tried to bind it to the Index controller returning Json I did not succeed. I tried something like this:</p>
  
  <pre><code>dataSource: {
                              type: "odata",
                              transport: {
                                  read: "Franchise/Index" // this is my controller action //where I serialize the data coming from the local sql server to json
                              }
  </code></pre>
  
  <p>I am rather new to programming and I am not sure whether this approach is correct. Any suggestions with examples based on my sample code will be greatly appreciated. Thank You!</p>