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

MVC, JavaScript kendoGrid sample

0 Answers 147 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Phil
Top achievements
Rank 2
Phil asked on 23 Jun 2012, 03:23 PM
Hi:

You have two way of invoking Kendo UI, one way is via javascript (this is the Index view):
@{
    ViewBag.Title = "Employees";
}
<script type="text/javascript">
    $(document).ready(function () {
        //
        $("#kjsimpleGrid").kendoGrid({
            groupable: true, scrollable: true,
            sortable: true, pageable: true, filterable: true,
            dataSource: {
                transport: { read: { url: "/Grid/GetEmployees" } }
            },
            columns: [
                { title: "Id", field: "EmployeeID", width: 80 },
                { title: "Last", field: "LastName", width: 100 },
                { title: "First", field: "FirstName", width: 100 },
                { title: "Title", field: "Title", width: 200 },
                { title: "City", field: "City", width: 200 },
                { title: "Region", field: "Region"}]
        });
    });
</script>
<fieldset><legend>Employees</legend>
    <br />
    <div id="kjsimpleGrid">
 
    </div>
</fieldset>

The view is as follows:
//
/// <summary>
///  GET: /Grid/
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
    return View( );
}
//
/// <summary>
///  GET: /Grid/GetEmployees/
/// </summary>
/// <returns></returns>
public JsonResult GetEmployees()
{
    var _emps =
        (from e in _db.Employees
            select new
            {
                EmployeeID = e.EmployeeID,
                LastName = e.LastName,
                FirstName = e.FirstName,
                Title = e.Title,
                TitleOfCourtesy = e.TitleOfCourtesy,
                BirthDate = e.BirthDate,
                HireDate = e.HireDate,
                Address = e.Address,
                City = e.City,
                Region = (e.Region == null ? "": e.Region)
            }).ToList();
    return Json(_emps, JsonRequestBehavior.AllowGet);
}

The Index view returns an empty view and gets the data asynchronously via call to GetEmployees.

Phil

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Phil
Top achievements
Rank 2
Share this question
or