CODEWITHSUNDEEP
kendo-ui
Alan Fisher
Alan Fisher

Reputation: 2055

Kendo UI Grid sortable (and other properties) not working

I'm trying to configure a Kendo grid and I'm having issues when trying to add properties such as sorting, grouping, etc. The grid works until I add the property, then it doesn't display any of the data. I have looked at the documentation on Kendo's site and it looks as if I have everything the same as theirs but obviously I'm nissing something.

Here is the View:

@model ExampleKendoUI.Models.HeaderVm
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>

<div>@Model.Name</div>

@section scripts {
<script>
  // Output the data as JSON
  var podata = @Html.Raw(Json.Encode(ViewBag.LineItems));
</script>

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

<script> 
     $(document).ready(function () {

    $("#poGrid").kendoGrid({
        dataSource: {
            data: podata
        }, 
          // sortable:true, *** Uncommenting this will break the grid ***   
columns: [
  {
    field: "Description",
    title: "Desc"
  },
  {
    field: "Quantity",
    title: "Quantity"
  }
]

});
});   
</script>    
</div>
}

Here is the controller:

namespace ExampleKendoUI.Controllers
{
public class SampleController : Controller
{
//
// GET: /Sample/

public ActionResult Index(int id)
{
  var header = new HeaderVm()
  {
    Id = id,
    Name = "Req ID"
  };


 var results = new List<PoLineVm>()
  {
    new PoLineVm() 
    {
      Id = 1,
      Description = "Some Product",
      Quantity = 1.5
    },
    new PoLineVm() 
    {
      Id = 2,
      Description = "Another Product",
      Quantity = 4.0
    },
    new PoLineVm() 
    {
      Id = 3,
      Description = "Last Product",
      Quantity = 20
    },
  };

  ViewBag.LineItems = results;

  return View(header);
  }}}

Here is the _Layout:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
<link href="~/Content/kendo/2012.3.1114/kendo.default.min.css" rel="stylesheet" />
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
@RenderBody()

@Scripts.Render("~/bundles/jquery")
<script src="/scripts/kendo/2012.3.1114/kendo.core.min.js"></script>
<script src="~/Scripts/kendo/2012.3.1114/kendo.data.min.js"></script>
<script src="~/Scripts/kendo/2012.3.1114/kendo.grid.min.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>

Upvotes: 0

Views: 7658

Answers (1)

Atanas Korchev
Atanas Korchev

Reputation: 30671

You haven't included the required JavaScript files and the JavaScript error means that kendoSortable is missing. Check the documentation for the required JavaScript files: http://docs.kendoui.com/getting-started/javascript-dependencies

Upvotes: 1

Related Questions