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?
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
0
Accepted
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
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
Rank 1
answered on 25 Jun 2014, 08:18 AM
Hi Rosen - this worked - Many Thanks