Kendo UI Grid Basic implementation

Question

I’m trying to implement the basic functionality of the Grid, in that while compiling my project I’m getting an error saying “Object Expected”

With the below lines of code:

 $(document).ready(function() { $("#grid").kendoGrid({ dataSource: { data: createRandomData(50), //exception in this line of code pageSize: 10 },

Can you help me in understanding what I need to write in place of the createRandomData? Is it the table name from where I’m taking the data to place it on the Grid or it is something else? (btw, I’m using as SQL server 2008 as the backend and running this code on Visual Studio 2010 MVC4) and i'm new to MVC and Kendo UI as well.

What i'm trying to implement is binding the data from SQL server to the Grid using MVC 4.

Thanks in advance! :)

here's the code:

 <script> $(document).ready(function () { $("#grid").kendoGrid({ dataSource: { data: createRandomData(50), pageSize: 10 }, groupable: true, sortable: true, pageable: { refresh: true, pageSizes: true }, columns: [{ field: "FirstName", width: 90, title: "First Name" }, { field: "LastName", width: 90, title: "Last Name" }, { width: 100, field: "City" }, { field: "Title" }, { field: "BirthDate", title: "Birth Date", template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' }, { width: 50, field: "Age" } ] }); }); </script>

here's the function defination:

 function createRandomData(count) { var data = [], now = new Date(); for (var i = 0; i < count; i++) { var firstName = firstNames[Math.floor(Math.random() * firstNames.length)], lastName = lastNames[Math.floor(Math.random() * lastNames.length)], city = cities[Math.floor(Math.random() * cities.length)], title = titles[Math.floor(Math.random() * titles.length)], birthDate = birthDates[Math.floor(Math.random() * birthDates.length)], age = now.getFullYear() - birthDate.getFullYear(); data.push({ Id: i + 1, FirstName: firstName, LastName: lastName, City: city, Title: title, BirthDate: birthDate, Age: age }); } return data;

}

should the controller return the value passed as count?

 public ActionResult createRandomData() { return View(); }

user244313 · Accepted Answer · 2013-02-26 04:30:04Z

There are quite a few tutorials for ASP.NET in the docs. I would recommend starting with this one. There are also tutorials for starting out with services in case you are new to returning JSON from the server.

Kiren S · Accepted Answer · 2013-02-26 05:51:33Z

0

The function createRandomData(50) should return a json object. Please show the function definition also..

Your column names in the grid and json object you returning are not matching

edited Feb 26, 2013 at 5:51

answered Feb 26, 2013 at 4:23

Kiren S

3,1178 gold badges43 silver badges73 bronze badges

1 Comment

Kiren S Over a year ago

You are passing object, isnt it.. Try to convert that data object into json

ideafountain · Accepted Answer · 2013-03-28 19:56:10Z

On the server side, define a type with the necessary properties. Then populate an array of objects using server side code either from data base or using some random data. From controller use inbuilt JavaScript Serializer to serialize the array into JSON and return as JsonResult. For example,

public JsonResult CreateRandomData(int count){

List persons =

return new JsonResult() { Data = persons, ContentType = "application/json", JsonRequestBehavior = JsonRequestBehavior.AllowGet };

}

Inbuilt JsonSerializer (System.Web.Mvc) provides JSON serialization and deserializatoin support.

Collectives™ on Stack Overflow

Kendo UI Grid Basic implementation

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions