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

ASP.NET MVC 5 Sorting not working

2 Answers 140 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tomas
Top achievements
Rank 1
Tomas asked on 18 Jun 2014, 09:59 AM
I am developing with Kendo UI Grid with MVC 5.  I am finding that I cannot appear to get the sorting working on my columns - I have read the Thread here - http://www.telerik.com/forums/grid-sorting-filtering---doesn-t-work  but looking at my Bundle configs it looks like I have the correct js files included and looking at the Network in F12 as well it looks like they have been included.  I am using Bootstrap as well in my site - is there possibly something else needed to be included?

Bundle configs are as below:

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.cshtml I have the following in the <head> section

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

After @RenderBody() in _Layout.cshtml I have the includes for bootstrap

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

The folllowing shows the config of my 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").Type(HttpVerbs.Post))
                            )
                    )

Note I am using WebAPI controller - the CarController in my API folder looks like below:

        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();
        }

The data is getting returned to the table correctly by neither the Numeric column of ModelNo nor the Alphabetic columns of name/colour/fuel type are not getting sorted when I click the column header?  Is there something missing in my configurtaion?















2 Answers, 1 is accepted

Sort by
0
Accepted
Rosen
Telerik team
answered on 20 Jun 2014, 06:57 AM
Hello Tomas,

I have noticed that the grid is bound to a WebApi Controller. However, DataSource configuration is for MVC Controller. Please try configuring the DataSource to use WebApi and see if there is any change in the observed behavior. A runnable sample of binding to WebApi Controller can be found in the sample application accompanying the Telerik UI for ASP.NET MVC distribution.

Regards,
Rosen
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Tomas
Top achievements
Rank 1
answered on 25 Jun 2014, 08:18 AM
Hi Rosen - this worked - Many Thanks
Tags
Grid
Asked by
Tomas
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Tomas
Top achievements
Rank 1
Share this question
or