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
Bootstrap 4
Bootstrap 4 Table
This example shows CRUD operations, sorting, paging and filtering with Bootstrap 4
Preview
Front-End Code
Back-End Code
Edit
Download ASP.NET Examples
<!DOCTYPE html> <html> <head> <title>Bootstrap 4 Table</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" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-9"> <form class="form-inline"> <input id="txtName" type="text" placeholder="Name..." class="form-control mb-2 mr-sm-2 mb-sm-0" /> <input id="txtPlaceOfBirth" type="text" placeholder="Place Of Birth..." class="form-control mb-2 mr-sm-2 mb-sm-0" /> <button id="btnSearch" type="button" class="btn btn-default">Search</button> <button id="btnClear" type="button" class="btn btn-default">Clear</button> </form> </div> <div class="col-3"> <button id="btnAdd" type="button" class="btn btn-default pull-right">Add New Record</button> </div> </div> <div class="row" style="margin-top: 10px"> <div class="col-12"> <table id="grid"></table> </div> </div> </div> <div id="dialog" style="display: none"> <input type="hidden" id="ID" /> <form> <div class="form-group"> <label for="Name">Name</label> <input type="text" class="form-control" id="Name"> </div> <div class="form-group"> <label for="PlaceOfBirth">Place Of Birth</label> <input type="text" class="form-control" id="PlaceOfBirth" /> </div> <button type="button" id="btnSave" class="btn btn-default">Save</button> <button type="button" id="btnCancel" class="btn btn-default">Cancel</button> </form> </div> <script type="text/javascript"> var grid, dialog; function Edit(e) { $('#ID').val(e.data.id); $('#Name').val(e.data.record.Name); $('#PlaceOfBirth').val(e.data.record.PlaceOfBirth); dialog.open('Edit Player'); } function Save() { var record = { ID: $('#ID').val(), Name: $('#Name').val(), PlaceOfBirth: $('#PlaceOfBirth').val() }; $.ajax({ url: '/Players/Save', data: { record: record }, method: 'POST' }) .done(function () { dialog.close(); grid.reload(); }) .fail(function () { alert('Failed to save.'); dialog.close(); }); } function Delete(e) { if (confirm('Are you sure?')) { $.ajax({ url: '/Players/Delete', data: { id: e.data.id }, method: 'POST' }) .done(function () { grid.reload(); }) .fail(function () { alert('Failed to delete.'); }); } } $(document).ready(function () { grid = $('#grid').grid({ primaryKey: 'ID', dataSource: '/Players/Get', uiLibrary: 'bootstrap4', columns: [ { field: 'ID', width: 48 }, { field: 'Name', sortable: true }, { field: 'PlaceOfBirth', title: 'Place Of Birth', sortable: true }, { title: '', field: 'Edit', width: 42, type: 'icon', icon: 'fa fa-pencil', tooltip: 'Edit', events: { 'click': Edit } }, { title: '', field: 'Delete', width: 42, type: 'icon', icon: 'fa fa-remove', tooltip: 'Delete', events: { 'click': Delete } } ], pager: { limit: 5, sizes: [2, 5, 10, 20] } }); dialog = $('#dialog').dialog({ uiLibrary: 'bootstrap4', iconsLibrary: 'fontawesome', autoOpen: false, resizable: false, modal: true }); $('#btnAdd').on('click', function () { $('#ID').val(''); $('#Name').val(''); $('#PlaceOfBirth').val(''); dialog.open('Add Player'); }); $('#btnSave').on('click', Save); $('#btnCancel').on('click', function () { dialog.close(); }); $('#btnSearch').on('click', function () { grid.reload({ name: $('#txtName').val(), placeOfBirth: $('#txtPlaceOfBirth').val() }); }); $('#btnClear').on('click', function () { $('#txtName').val(''); $('#txtPlaceOfBirth').val(''); grid.reload({ name: '', placeOfBirth: '' }); }); }); </script> </body> </html>
using Gijgo.Asp.NET.Examples.Models.Entities; using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace Gijgo.Asp.NET.Examples.Controllers { public class PlayersController : Controller { public JsonResult Get(int? page, int? limit, string sortBy, string direction, string name, string nationality, string placeOfBirth) { 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 != null ? p.Country.Name : "", IsActive = p.IsActive, OrderNumber = p.OrderNumber }); if (!string.IsNullOrWhiteSpace(name)) { query = query.Where(q => q.Name.Contains(name)); } if (!string.IsNullOrWhiteSpace(nationality)) { query = query.Where(q => q.CountryName != null && q.CountryName.Contains(nationality)); } if (!string.IsNullOrWhiteSpace(placeOfBirth)) { query = query.Where(q => q.PlaceOfBirth != null && q.PlaceOfBirth.Contains(placeOfBirth)); } if (!string.IsNullOrEmpty(sortBy) && !string.IsNullOrEmpty(direction)) { if (direction.Trim().ToLower() == "asc") { switch (sortBy.Trim().ToLower()) { case "name": query = query.OrderBy(q => q.Name); break; case "countryname": query = query.OrderBy(q => q.CountryName); break; case "placeOfBirth": query = query.OrderBy(q => q.PlaceOfBirth); break; case "dateofbirth": query = query.OrderBy(q => q.DateOfBirth); break; } } else { switch (sortBy.Trim().ToLower()) { case "name": query = query.OrderByDescending(q => q.Name); break; case "countryname": query = query.OrderByDescending(q => q.CountryName); break; case "placeOfBirth": query = query.OrderByDescending(q => q.PlaceOfBirth); break; case "dateofbirth": query = query.OrderByDescending(q => q.DateOfBirth); break; } } } 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); } [HttpPost] public JsonResult Save(Models.DTO.Player record) { Player entity; using (ApplicationDbContext context = new ApplicationDbContext()) { if (record.ID > 0) { entity = context.Players.First(p => p.ID == record.ID); entity.Name = record.Name; entity.PlaceOfBirth = record.PlaceOfBirth; entity.DateOfBirth = record.DateOfBirth; entity.CountryID = record.CountryID; entity.Country = context.Locations.FirstOrDefault(l => l.ID == record.CountryID); entity.IsActive = record.IsActive; } else { context.Players.Add(new Player { Name = record.Name, PlaceOfBirth = record.PlaceOfBirth, DateOfBirth = record.DateOfBirth, CountryID = record.CountryID, Country = context.Locations.FirstOrDefault(l => l.ID == record.CountryID), IsActive = record.IsActive }); } context.SaveChanges(); } return Json(new { result = true }); } [HttpPost] public JsonResult Delete(int id) { using (ApplicationDbContext context = new ApplicationDbContext()) { Player entity = context.Players.First(p => p.ID == id); context.Players.Remove(entity); context.SaveChanges(); } return Json(new { result = true }); } public JsonResult GetTeams(int playerId, int? page, int? limit) { List<Models.DTO.PlayerTeam> records; int total; using (ApplicationDbContext context = new ApplicationDbContext()) { var query = context.PlayerTeams.Where(pt => pt.PlayerID == playerId).Select(pt => new Models.DTO.PlayerTeam { ID = pt.ID, PlayerID = pt.PlayerID, FromYear = pt.FromYear, ToYear = pt.ToYear, Team = pt.Team, Apps = pt.Apps, Goals = pt.Goals }); total = query.Count(); if (page.HasValue && limit.HasValue) { int start = (page.Value - 1) * limit.Value; records = query.OrderBy(pt => pt.FromYear).Skip(start).Take(limit.Value).ToList(); } else { records = query.ToList(); } } return this.Json(new { records, total }, JsonRequestBehavior.AllowGet); } } }