2014-06-19 187 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