ASP.NET MVC 3 Custom WebGrid Sort with Bottom Bottom, Bottom Down Options
Helo, I am working on ASP.NET MVC 3 Application.
I have a View
var grid = new WebGrid(rowsPerPage: 10, ajaxUpdateContainerId: "GridDiv",canPage: true,canSort: true);
grid.Bind(source: Model);
grid.Pager(WebGridPagerModes.All);
@grid.GetHtml(htmlAttributes: new { id="grid" },
columns: grid.Columns(
grid.Column("Name"),
grid.Column("Age"),
grid.Column("Sex")
)
In the controller, I have a custom sorting algorithm for sorting the data. I have both a custom ascending sort and a custom descending sort.
I want when the user clicks on a column header to sort the rows following my configured sorting algorithm, rather than build in one.
For this I tried the following (I take "sortdir" and handle it accordingly)
controller
public ActionResult Persons(string sortdir)
{
PersonsListModel = GetAllPersonsList();
if(sortdir=="ASC")
return View(MyAscendingCustomSortAlgorithm(PersonsListModel ));
else
return View(MyDescendingCustomSortAlgorithm(PersonsListModel ));
}
MyAscendingCustomSortAlgorithm
and MyDescendingCustomSortAlgorithm
are functions that return a list sorted according to my custom algorithm.
When the page load is sorted correctly, but when I click on the header the sort is messed up. I debugged and everything worked correctly.
My question is how can I make this work and still maintain correct paging
I also tried to install canSort: false
, but then I can't click on the title anymore.
Thanks a lot for any help
source to share
You should look for this path:
- Disable sorting
- Add your own style to the column header ("headerStyle: customStyle" in the .GetHtml html attributes). Check out the chapter Styling the grid
- Use jquery to add a real-time click handler to all elements of this style, and when the user clicks, check which column it is listed in and position it appropriately for your controller, which will refresh the page
Also, you can add some style to the CSS related to your customStype, i.e. "cursor: hand" so that the user can see that the title can be clicked.
source to share
I would add the page number, row count, sort column and sort direction to your method parameters. It should also just return json data. You have to process this data in javascript to update your view.
You can add your own css sorting class to headers and ajax action link. You might be able to access your grid in javascript and just change the data lines.
public JsonResult Persons(int pagenumber,int rows, string sortcol, string sortdir)
{
if(sortdir=="ASC")
return DataSource(pagenumber,rows,sortcol,MyAscendingCustomSortAlgorithm);
else
return DataSource(pagenumber,rows,sortcol,MyDescendingCustomSortAlgorithm);
}
You can pass your sort functions to the data source call and use that to return json data. You can use linq queries for the line
source to share