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();
    }

Answer 1

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.

Answer 2

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

Answer 3

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.