MVC WebGrid Sort only the elements present on the page

Question

I am trying to make a MVC WebGrid, I am able to get the grid working, but facing an issue with the sorting. I have my rowsPerPage set to 5 and there are total 7 records. When I am on first page, it displays first 5 records; and when I sort on the Id column, it sorts the whole bunch of data and puts 7th record at top.

My Question :

How to make it sort only the elements present in 1st page and put the 5th record on top.
How to add styles to the data rows it creates?

Code is something like this: CSHTML -

@model IEnumerable<Product>

@{
    ViewBag.Title = "grid";
    WebGrid grid = new WebGrid(Model, rowsPerPage: 5 );
}

@grid.GetHtml(

    tableStyle: "table",
    fillEmptyRows: true,        
    headerStyle: "main-box-header clearfix",
    footerStyle: "pagination pull-right",

    mode: WebGridPagerModes.All, //paging to grid 
    firstText: "<< First",
    previousText: "< Prev",
    nextText: "Next >",
    lastText: "Last >>",

    columns: new[]  // colums in grid
    {
        grid.Column("Id"), //the model fields to display
        grid.Column("Name"  ),
        grid.Column("Description"),
        grid.Column("Quantity"),

   })

CONTROLLER -

public ActionResult WebgridSample()
        {
            List<Product> inventoryList = new List<Product>();  

            inventoryList.Add(new Product
            {
                Id = "P101",
                Name = "Computer",
                Description = "All type of computers",
                Quantity = 800
            });
            inventoryList.Add(new Product
            {
                Id = "P102",
                Name = "Laptop",
                Description = "All models of Laptops",
                Quantity = 500
            });
            inventoryList.Add(new Product
            {
                Id = "P103",
                Name = "Camera",
                Description = "Hd  cameras",
                Quantity = 300
            });
            inventoryList.Add(new Product
            {
                Id = "P104",
                Name = "Mobile",
                Description = "All Smartphones",
                Quantity = 450
            });
            inventoryList.Add(new Product
            {
                Id = "P105",
                Name = "Notepad",
                Description = "All branded of notepads",
                Quantity = 670
            });
            inventoryList.Add(new Product
            {
                Id = "P106",
                Name = "Harddisk",
                Description = "All type of Harddisk",
                Quantity = 1200
            });
            inventoryList.Add(new Product
            {
                Id = "P107",
                Name = "PenDrive",
                Description = "All type of Pendrive",
                Quantity = 370
            });

            return View(inventoryList);

        }

score 0 · Answer 1 · answered Oct 19 '15 at 00:02

Maybe it's not actual topic, but I'll answer Most effective way to achieve this thing is to make server-side sorting:

1) in controller you will have 4 new parameters

public ActionResult WebgridSample(int pageNum = 1, int pageSize = 5, string sortColumnName = "",   string sortOrder = "desc")

2) after you'll make SQL SELECT request you can point from which position you need entries to be retrieved and make sort things (sortOrder = "" to take a list "as is")

3) make Bind() method to be executed with disabling autoSortAndPaging parameter, total entries should be pointed (constructor before should have rowsPerPage to be known)

4) and don't forget to point page number after loading required data to webgrid

Congratulations :)

MVC WebGrid Sort only the elements present on the page

1 Answers1