This is a migrated thread and some comments may be shown as answers.

Help with assigning a data table to a grid

4 Answers 287 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 22 Feb 2012, 11:48 PM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Nikolay Rusev
Telerik team
answered on 23 Feb 2012, 09:26 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jon
Top achievements
Rank 1
answered on 23 Feb 2012, 02:47 PM
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.

0
Jon
Top achievements
Rank 1
answered on 23 Feb 2012, 07:01 PM
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; }
}

0
Jon
Top achievements
Rank 1
answered on 23 Feb 2012, 10:01 PM
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>
Tags
Data Source
Asked by
Jon
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Jon
Top achievements
Rank 1
Share this question
or