Binding KendoUI to Sql data with Entity Framework - kendo-ui

Question

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.
So I have a db context:
public DbSet<FranchiseInfoDto> Franchises { get; set; }
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:
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;
}
The serialized json data is in this format :
[{ ParentId: 0, Title: "Deposit", Type: "link", Link: "http://www.abv.bg" }, { ParentId: 2, Title: "Cash", Type: "link", Link: "http://www.facebook.com"}];
I read the documentation about the KendoUI Grid and was able to bind it to some local data like this:
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
});​
But when I tried to bind it to the Index controller returning Json I did not succeed. I tried something like this:
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
}
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!

Answer 1

I managed to populate the grid with the serialized data to json from the database. Here is the controller code returning json data:
public ActionResult SampleData()
{
JsonNetResult jsonNetResult = new JsonNetResult { Formatting = Formatting.Indented };
var f1 = new FranchiseInfoSampleData();
f1.ParentId = 0;
f1.Title = "Deposit";
f1.Type = "functionality";
f1.Link = "http://www.abv.bg";
var f2 = new FranchiseInfoSampleData();
f2.ParentId = 1;
f2.Title = "Cash Out";
f2.Type = "link";
f2.Link = "www.abv.bg";
List<FranchiseInfoSampleData> sampleData = new List<FranchiseInfoSampleData>();
sampleData.Add(f1);
sampleData.Add(f2);
jsonNetResult.Data = sampleData;
return jsonNetResult;
}
And here is the Kendo Grid code:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "Home/SampleData",
dataType: "json"
}
},
schema: {
model: {
fields: {
ParentId: { editable: true },
Title: { type: "string", editable: true },
Type: { type: "string", editable: true },
Link: { type: "string", editable: true }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "ParentId",
filterable: false
},
{
field: "Title",
width: 100
}, {
field: "Type",
width: 200
}, {
field: "Link"
}
]
});
});