Clever Geek Handbook

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

+3


source to share


3 answers


Have you tried to disable the autoSortAndPage parameter in the Bind () method?

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


I know you want to keep your existing paging, but I'm not sure if there is a way to have both. You may need to manually swap in your action method.

+2


source


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.

+1


source


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

+1


source






More articles:


All Articles