2014-06-19 146 views
1

我正在用Kendo UI Grid与MVC 5进行开发。我发现我无法看到在我的列上进行排序 - 我已阅读此处的线程 - http://www.telerik.com/forums/grid-sorting-filtering---doesn-t-work但看着我的Bundle配置它看起来像我有正确的js文件包括在内,并在F12中查看网络,看起来他们已被列入。我在我的网站中也使用Bootstrap - 是否还有其他需要包含的内容?在Kendo UI MVC Grid上排序

捆绑CONFIGS是如下:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
         "~/Scripts/jquery-{version}.js", 
         "~/Scripts/jquery.validate.js", 
         "~/Scripts/jquery.validate.unobtrusive.js")); 

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
         "~/Scripts/bootstrap.js", 
         "~/Scripts/respond.js")); 

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
         "~/Scripts/kendo/kendo.all.min.js", 
         "~/Scripts/kendo/kendo.aspnetmvc.min.js")); 

以我_Layout.cshtml在第一节有以下

@Styles.Render("~/Content/css") 
@Styles.Render("~/Content/kendo/css") 
@Scripts.Render("~/bundles/modernizr") 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/kendo") 

@RenderBody()在_Layout.cshtml我有包括用于后引导

@Scripts.Render("~/bundles/bootstrap") 
@Scripts.Render("~/bundles/initialize") 
@RenderSection("scripts", required: false) 

的folllowing显示了我的网

的配置
   @(Html.Kendo().Grid<Car.Web.Models.CarViewModel>() 
          .Name("CarView") 
          .Columns(columns => 
          { 
           columns.Bound(c => c.Name).Width(180); 
           columns.Bound(c => c.ModelNo).Width(280); 
           columns.Bound(c => c.Colour).Width(120); 
           columns.Bound(c => c.FuelType).Width(65); 
          }) 
         .HtmlAttributes(new { style = "height: 420px;" }) 
         .Scrollable() 
         .Sortable(sortable => sortable 
          .AllowUnsort(true) 
          .SortMode(GridSortMode.MultipleColumn)) 
         .Pageable(pageable => pageable 
         .PageSizes(true) 
         .ButtonCount(5)) 
         .DataSource(dataSource => dataSource 
         .Ajax() 
         .Read(read => read.Action("GetCarById", "api/Car")) 
         ) 
       ) 

注意我使用的WebAPI控制器 - CarController在我的API文件夹的样子如下:

public DataSourceResult Read([DataSourceRequest] DataSourceRequest request) 
    { 
     //note stubbed data 1 will need to be passed in as id 
     return GetCarById(1).ToDataSourceResult(request); 
    } 


    public IEnumerable<CarViewModel> GetCarById(int carId) 
    { 
     // call to service layer to get data 
     var carResponse = _carService.GetCarDataById(carId); 


     // map responses to grid 

     return MapCarSelectView(carResponse); 
    } 

    private static IEnumerable<CarViewModel> MapCarSelectView(IEnumerable<CarResponse> carResponses) 
    { 
     return carResponses.Select(carResponse => new CarViewModel 
     { 
      Id = carResponse.Id, CarName = carResponse.Name, CarModelNo = carResponse.ModelNo, Colour = carResponse .Colour, FuelType=   carResponse.FuelType 
     }).ToList(); 
    } 

的数据被退回表正常,但既不ModelNo的数字列,也不是按字母顺序列名称/颜色/燃料类型没有得到排序当我点击列标题?我的配置中是否缺少某些东西?

回答

1

您正在使用WebAPI - 这意味着您将不得不编写自定义模型联编程序。 WebAPI案件的事实涵盖here。要查看演示,您应该检查this code library