在剑道UI MVC网格上排序

本文关键字:网格 排序 MVC UI | 更新日期: 2023-09-27 18:09:35

我正在开发与MVC 5的剑道UI网格。我发现,我似乎不能得到排序工作在我的专栏-我已经阅读线程在这里- http://www.telerik.com/forums/grid-sorting-filtering---doesn-t-work但看看我的Bundle配置,它看起来像我有正确的js文件,并在F12看网络,以及它看起来像它们已被包括在内。我正在使用Bootstrap以及在我的网站-是否可能有其他东西需要包括?

Bundle配置如下:

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"));

In my _Layout。在

一节中有以下内容
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/kendo/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")

在_Layout中的@RenderBody()之后。我有bootstrap的include

@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/initialize")
@RenderSection("scripts", required: false)
下面显示了我的Grid的配置
                @(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控制器——我的API文件夹中的CarController如下所示:

    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的数字列和名称/颜色/燃料类型的字母列都没有得到排序,当我单击列标题?我的配置中缺少了什么吗?

在剑道UI MVC网格上排序

您正在使用WebAPI -这意味着您必须编写自定义模型绑定器。这里介绍了WebAPI案例的事实。要查看演示,您应该检查此代码库。