CODEWITHSUNDEEP
c#asp.net-mvc-3sortingwebgrid
Y2theZ
Y2theZ

Reputation: 10412

ASP.NET MVC 3 Custom sorting a WebGrid with ascending, descending options

Helo, I am working on an 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 customized sorting algorithm to sort the data. I have both a Customized Ascending sort and customized descending sort.

I want when the user click on the column header to sort the rows following my customized sorting algorithm and not the build in one.

For that I tried the following (I take the "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 function that return the list sorted by my custom algorithm.

When the page load the list is sorted correctly, but when I click on the header the sorting is messed up.I debugged and everything was working correctly.

My question is how can I make that work, and still keep the correct Paging

I also tried to set canSort: false but then I cannot click on the header anymore.

Thank you very much for any help

Upvotes: 3

Views: 6796

Answers (3)

Jeff Bobish
Jeff Bobish

Reputation: 606

Have you tried turning off the autoSortAndPage parameter in the Bind() method?

grid.Bind(source: Model, autoSortAndPage : false);

I know you wanted to keep the existing paging but I'm not sure there's a way to have both. You may need to do the paging manually in your action method.

Upvotes: 2

Omer Cansizoglu
Omer Cansizoglu

Reputation: 1281

I would add page number, number of rows, sort column, and sort direction to your method's parameters. It should also just return json data. You should handle that data in javascript to update your view.

You can add your own sorting css class to headers and link to ajax action. It may be possible to address your grid in javascript and just change the data rows. 

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

}

Your can pass your sort functions into datasource call and use that to return json data. You can use linq queries to row

Upvotes: 1

Fabske
Fabske

Reputation: 2126

You should search this way:

  1. Disable sort
  2. Add a custom style to the column header ("headerStyle: customStyle" in the .GetHtml html attributes). Check the chapter Styling your grid
  3. Use jquery to add a live click handler to all elements with this style, and when user click then check which column it is and post accordingly to your controller which will refresh the page

Also, you can add in the css some style linked to your customStype, i.e. "cursor: hand" so that the user see that the header is clickable.

Upvotes: 1

Related Questions