Help with assigning a data table to a grid

[Jon]

Greetings,

I am brand new to Kendo and seek a little help. I have looked over the demos and some of the code others have posted in the forums and I am still stumped, because I am new to MVC, jSON, and Kendo.

If i could get some simple code to get started with, I think  I could finish it on my own.

Can someone provide a basic example of a project that takes a dataset or data table from a web service or wcf, and binds the datable to a grid? We need to see this in MVC 3 with Razor.

I would be VERY grateful, as we are evaluating Kendo for use on a large project.

Thanks

[Nikolay Rusev]

Hello Jon,

Bellow you can find various examples with Kendo UI:
https://github.com/telerik/kendo-examples-asp-net
https://github.com/telerik/kendo-examples-asp-net-mvc

Regards,
Nikolay Rusev
the Telerik team

[Jon]

Nikolay,

Thanks for pointing me in the right direction. I will work through these examples today. I am marking your post as the correct answer, but I may be back with more silly questions as I learn this new tool.

[Jon]

Ok I got something working. Thanks for the examples. The grid loads data but paging doesn't work at all. When I click on a different page number nothing happens. Any ideas?

//view

<div id="example" class="k-content">

    <div id="grid"></div>

    <script type="text/javascript">

        var dateRegExp = /^\/Date\((.*?)\)\/$/;

 

        function toDate(value)

        {

            var date = dateRegExp.exec(value);

            return new Date(parseInt(date[1]));

        }

 

        $(document).ready(function ()

        {

            $("#grid").kendoGrid({

                dataSource: {

                    type: "json",

                    transport: {

                        read: "JsonGetUsers"

                    },

                    schema: {

                        model: {

                            fields: {

                                Username: { type: "string" },

                                Email: { type: "string" },

                                LastLoginDate: { type: "date" },

                                DaysSinceActive: { type: "int" },

                                Name: {type: "string"}

                            }

                        }

                    },

                    pageSize: 10,

                    serverPaging: true,

                    serverFiltering: true,

                    serverSorting: true

                },

                height: 410,

                filterable: true,

                sortable: true,

                pageable: true,

                columns: [

                    "Username",

                    "Email",

                    { field: "LastLoginDate", template: '#= kendo.toString(toDate(LastLoginDate), "MM/dd/yyyy") #' },

                    "DaysSinceActive",

                    "Name"]

            });

 

 

 

        });

 

    </script>

</div>

//code in controller. Gets datatable, converts it to list and returns json version

[AcceptVerbs(HttpVerbs.Get)]

      public JsonResult JsonGetUsers()

      {

          var data = GetCustomers();

          var customerList = new List<CustomerService>();

          foreach (DataRow dr in data.Tables[0].Rows)

          {

              var cl = new CustomerService();

              int days;

              DateTime lastlogin;

              int.TryParse(dr["DaysSinceActive"].ToString(), out days);

              DateTime.TryParse(dr["LastLoginDate"].ToString(), out lastlogin);

              cl.DaysSinceActive = days;

              cl.Email = dr["LoweredEmail"].ToString();

              cl.LastLoginDate = lastlogin;

              cl.Name = dr["FullName"].ToString();

              cl.Username = dr["Username"].ToString();

              customerList.Add(cl);

          }

 

          return Json(customerList, JsonRequestBehavior.AllowGet);

      }

//model used, CustomerService

public class CustomerService

{

    public string Username { get; set; }

    public string Name { get; set; }

    public string Email { get; set; }

    public DateTime LastLoginDate { get; set; }

    public int DaysSinceActive { get; set; }

}

[Jon]

I got it working. I posted the modified view below so others can see the difference:

<div id="example" class="k-content">

    <div id="grid"></div>

    <script type="text/javascript">

        var dateRegExp = /^\/Date\((.*?)\)\/$/;

 

        function toDate(value)

        {

            var date = dateRegExp.exec(value);

            return new Date(parseInt(date[1]));

        }

 

        $(document).ready(function () {

            $("#grid").kendoGrid({

                dataSource: {

                    type: "json",

                    transport: {

                        read: "JsonGetUsers"

                    },

                    schema: {

                        model: {

                            fields: {

                                Username: { type: "string" },

                                Email: { type: "string" },

                                LastLoginDate: { type: "date" },

                                DaysSinceActive: { type: "int" },

                                Name: {type: "string"}

                            }

                        }

                    },

                    pageSize: 100

                },

                height: 410,

                filterable: true,

                sortable: true,

                pageable: true,

                columns: [

                    "Username",

                    "Email",

                    { field: "LastLoginDate", template: '#= kendo.toString(toDate(LastLoginDate), "MM/dd/yyyy") #' },

                    "DaysSinceActive",

                    "Name"]

            });

 

 

 

        });

 

    </script>

</div>