hello this my controller
How to bind data would ? and How can I bind Guid?
example : ?
{
field: "GUID",
title: ""
}, {
// northwind database
[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public JsonResult GetCustomer()
{
_CustomerItems.AddRange(_CustomerProcess.GetCustomer());
JsonResult js = Json(_CustomerItems); // ( 91 records ready )
return js;
}
<html>
<head>
</head
<body>
<div id="grid"></div>
</body>
</html>
function GridDataBind(modul) {
$("#grid).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 10
},
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "CompanyName",
title: "Company Name",
width: 140
}, {
field: "ContactTitle",
title: "Contact Title",
width: 190
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 110
}]
});
}
How to bind data would ? and How can I bind Guid?
example : ?
{
field: "GUID",
title: ""
}, {
// northwind database
[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public JsonResult GetCustomer()
{
_CustomerItems.AddRange(_CustomerProcess.GetCustomer());
JsonResult js = Json(_CustomerItems); // ( 91 records ready )
return js;
}
<html>
<head>
</head
<body>
<div id="grid"></div>
</body>
</html>
function GridDataBind(modul) {
$("#grid).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 10
},
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "CompanyName",
title: "Company Name",
width: 140
}, {
field: "ContactTitle",
title: "Contact Title",
width: 190
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 110
}]
});
}
7 Answers, 1 is accepted
0
Hello,
If you wish to bind the Grid to data comming from an MVC controller then you should remove the odata type and change the URL to the corresponding action and controller. The request type should also be set to POST or you should allow GET to be used for JSON:
I would suggest to check this code-library project which demonstrates binding to MVC controller.
Regards,
Daniel
Telerik
If you wish to bind the Grid to data comming from an MVC controller then you should remove the odata type and change the URL to the corresponding action and controller. The request type should also be set to POST or you should allow GET to be used for JSON:
JsonResult js = Json(_CustomerItems, JsonRequestBehavior.AllowGet);Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
serdar
Top achievements
Rank 1
Rank 1
answered on 11 Feb 2014, 09:02 AM
hello Can you give a better and simple example?...because I can not use server side mvc client side
I'm using entity data model
example
table fields
Name
LastName
Age
Adress
Phone
Controller
[HttpPost]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public JsonResult LoadData()
{
_CrewItems = _CrewProcess.GetCrews();
return Json(_CrewItems);
}
Function class
public List<t_Crew> GetCrews()
{
var query = from p in _DbEntities.t_Crew
select p;
List <t_Crew> _CrewItems = query.ToList();
return _CrewItems;
}
javascript
function DataBind() {
var serviceURL = "/Base/LoadData";
$.ajax({
url: serviceURL,
type: "POST",
dataType: "json",
async: true,
timeout: 25000,
contentType: "application/json; charset=utf-8",
success: function (data) {
GridDataBind(data);
}
});
}
function GridDataBind(gridData) {
// What I will write here
}
thank you
I'm using entity data model
example
table fields
Name
LastName
Age
Adress
Phone
Controller
[HttpPost]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public JsonResult LoadData()
{
_CrewItems = _CrewProcess.GetCrews();
return Json(_CrewItems);
}
Function class
public List<t_Crew> GetCrews()
{
var query = from p in _DbEntities.t_Crew
select p;
List <t_Crew> _CrewItems = query.ToList();
return _CrewItems;
}
javascript
function DataBind() {
var serviceURL = "/Base/LoadData";
$.ajax({
url: serviceURL,
type: "POST",
dataType: "json",
async: true,
timeout: 25000,
contentType: "application/json; charset=utf-8",
success: function (data) {
GridDataBind(data);
}
});
}
function GridDataBind(gridData) {
// What I will write here
}
thank you
0
serdar
Top achievements
Rank 1
Rank 1
answered on 11 Feb 2014, 09:04 AM
because I can not use server side
I'm using entity data model mvc client side
0
Hi,
You can use code similar to the one in the snippet below if you wish to use a separate request to load the data:
Regards,
Daniel
Telerik
You can use code similar to the one in the snippet below if you wish to use a separate request to load the data:
function GridDataBind(gridData) { var element = $("#grid"), grid = element.data("kendoGrid"); //if the grid was already initialize just set the dataSource data if (grid) { grid.dataSource.data(gridData); } else { element.kendoGrid({ dataSource: { data: gridData, pageSize: 10 }, groupable: true, sortable: true, pageable: { refresh: true, pageSizes: true, buttonCount: 5 }, columns: [{ field: "CompanyName", title: "Company Name", width: 140 }, { field: "ContactTitle", title: "Contact Title", width: 190 }, { field: "CompanyName", title: "Company Name" }, { field: "Country", width: 110 }] }); } }Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Samra
Top achievements
Rank 1
Rank 1
answered on 29 May 2017, 04:09 AM
Hi Telerik i have the same scenario i.e. using entityframework with mvc so what do i put into my gridData?
i tried $("#mapsDiv")
.kendoGrid(
{
sortable: true,
dataSource: {
data: @Model.students,
pageSize: 2
}
});
which was incorrect
0
Samra
Top achievements
Rank 1
Rank 1
answered on 29 May 2017, 04:17 AM
Hi iam also using entityframework in mvc..but this gave me error
$("#mapsDiv")
.kendoGrid(
{
sortable: true,
dataSource: {
data: @Model.students,
pageSize: 2
}
});
so what do i put in gridData?
0
Hi Samra,
As one of our Kendo UI Complete clients, you can utilise the UI for ASP.NET MVC extensions and return the result in the expected format as a DataSourceResult.
You could either use the Razor Syntax or continue using JavaScript.
1) Grid Binding with Razor: http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding
2) Grid Binding with JavaScript on the client:
- return the data from the controller as JSON
- use the schema to parse it on the client (in a similar fashion as shown in here with web API)
====================
Finally, just some feedback for the question in the thread - @Model.students call will not have any results(at the time the grid is initialized). The discussed approach in this thread is creating an $.ajax request and displaying the data on success. The below approach will also work:
Let me know if you need more help.
Regards,
Alex Hajigeorgieva
Progress Telerik
As one of our Kendo UI Complete clients, you can utilise the UI for ASP.NET MVC extensions and return the result in the expected format as a DataSourceResult.
You could either use the Razor Syntax or continue using JavaScript.
1) Grid Binding with Razor: http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding
2) Grid Binding with JavaScript on the client:
- return the data from the controller as JSON
- use the schema to parse it on the client (in a similar fashion as shown in here with web API)
====================
Finally, just some feedback for the question in the thread - @Model.students call will not have any results(at the time the grid is initialized). The discussed approach in this thread is creating an $.ajax request and displaying the data on success. The below approach will also work:
$.ajax({ url: serviceURL, dataType: "json", contentType: "application/json; charset=utf-8", success: function (data) { GridDataBind(data); } });function GridDataBind(gridData) { $("#mapsDiv") .kendoGrid({ sortable: true, dataSource: { data: gridData, pageSize: 2 } }); }Let me know if you need more help.
Regards,
Alex Hajigeorgieva
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.