Grid sorting

GridDemo/SortingContent.cshtml

@model AweCoreDemo.ViewModels.Input.GridDemoSortingCfgInput

@(Html.Awe().Grid("SortingGrid")
    .Columns(
        new Column{Bind = "Id", Width = 75}, 
        new Column{Bind = "Person", Sortable = Model.PersonSortable, SortRank = Model.PersonRank, Sort = Model.PersonSort}, 
        new Column{Bind = "Food.Name", Sortable = Model.FoodSortable, SortRank = Model.FoodRank, Sort = Model.FoodSort}, 
        new Column{Bind = "Date", Width = 150}, new Column{Bind = "Price", Width = 80, ClientFormat = ".(Price)&pound;"}, 
        new Column{Bind = "Location"})
    .Height(350)
    .SingleColumnSort(Model.SingleColumnSort)
    .Sortable(Model.Sortable)
    .Url(Url.Action("GetItems","LunchGrid")))

Awesome/Grid/LunchGridController.cs

public class LunchGridController : Controller
{
    public IActionResult GetItems(GridParams g, int? country, string person, string food)
    {            
        var query = Db.Lunches.AsQueryable();                        
        
        if (person != null) query = query.Where(o => o.Person.ToLower().Contains(person.ToLower()));
        if (food != null) query = query.Where(o => o.Food.Name.ToLower().Contains(food.ToLower()));
        if (country.HasValue) query = query.Where(o => o.Country.Id == country);
                    
        var gmb = new GridModelBuilder<Lunch>(query.AsQueryable(), g);
                    
        gmb.KeyProp = o => o.Id;

        // grid row model
        // columns bound to Food.Name by default will display rowModel.FoodName
        // or specify in the view Column.Prop ="FooName", or ClientFormat = ".(FoodName)"
        gmb.Map = o => new
        {
            o.Id,
            o.Person,
            FoodName = o.Food.Name,
            FoodPic = o.Food.Pic,
            o.Location,
            o.Price,
            Date = o.Date.ToShortDateString(),
            CountryName = o.Country.Name,
            ChefName = o.Chef.FullName
        };

        return Json(gmb.Build());
    }

    public IActionResult GetItemsEFExample(GridParams g, int? country, string person, string food)
    {
        var query = Db.Lunches.AsQueryable();

        // Filter - custom extension in demo code
        // equivalent to .Where(o => o.Food.Name.Contains(food) || ...)

        query = query
            .Filter(food, o => o.Food.Name)
            .Filter(person, o => o.Person);

        if (country.HasValue) query = query.Where(o => o.Country.Id == country);

        var gmb = new GridModelBuilder<Lunch>(query, g);
        gmb.KeyProp = o => o.Id;
        gmb.Map = o => new
        {
            o.Id,
            o.Person,
            FoodName = o.Food.Name,
            FoodPic = o.Food.Pic,
            o.Location,
            o.Price,
            Date = o.Date.ToShortDateString(),
            CountryName = o.Country.Name,
            ChefName = o.Chef.FullName
        };

        return Json(gmb.Build());
    }
}

Sorting can be enabled or disabled for the whole grid by using the .Sortable(bool) and can be set for each column by setting the Column.Sortable

SingleColumnSort - enables sorting by one column at a time
Column.Sort - initial sorting for this column (None | Asc | Desc)
Column.SortRank - initial sort rank for this column

Comments