GIJGO
Examples
Documentation
Report a Bug
Download
Ajax Sourced Data
Local Data Source
HTML Sourced Data
Bootstrap 3
Bootstrap 4
Material Design
Angular 6
Formatting Sample
Template
Iniline Editing
Nested Grids
Connected Grids
Grid Localization
Grouping
Responsive Design 1
Responsive Design 2
Gijgo.com
Grid
Examples
Grouping
Grid Grouping
This example for jquery grid shows how to group records based on column values
Preview
Front-End Code
Back-End Code
Edit
Download ASP.NET Examples
<!DOCTYPE html> <html> <head> <title>Connected jQuery Grids</title> <meta charset="utf-8" /> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script> <link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" /> </head> <body> <table id="grid"></table> <script type="text/javascript"> $(document).ready(function () { var grid = $('#grid').grid({ primaryKey: 'ID', dataSource: '/PlayersGrouping/Get', grouping: { groupBy: 'CountryName' }, columns: [{ field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth' }] }); }); </script> </body> </html>
using Gijgo.Asp.NET.Examples.Models.Entities; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace Gijgo.Asp.NET.Examples.Controllers { public class PlayersGroupingController : Controller { public JsonResult Get(string groupBy, string groupByDirection, int? page, int? limit) { List<Models.DTO.Player> records; int total; using (ApplicationDbContext context = new ApplicationDbContext()) { var query = context.Players.Select(p => new Models.DTO.Player { ID = p.ID, Name = p.Name, PlaceOfBirth = p.PlaceOfBirth, DateOfBirth = p.DateOfBirth, CountryID = p.CountryID, CountryName = p.Country.Name, OrderNumber = p.OrderNumber }); if (groupBy == "CountryName") { if (groupByDirection.Trim().ToLower() == "asc") { query = query.OrderBy(q => q.CountryName).ThenBy(q => q.OrderNumber); } else { query = query.OrderByDescending(q => q.CountryName).ThenBy(q => q.OrderNumber); } } else { query = query.OrderBy(q => q.OrderNumber); } total = query.Count(); if (page.HasValue && limit.HasValue) { int start = (page.Value - 1) * limit.Value; records = query.Skip(start).Take(limit.Value).ToList(); } else { records = query.ToList(); } } return this.Json(new { records, total }, JsonRequestBehavior.AllowGet); } } }