Using grid mods to add custom loading animation, try to change page or filter the grid to get the loading animation, there's a Task.Delay used on the server side.
Search for something inexistent to get the "no records found" message.
Drag a column header and drop it here to group by that column
Id
Person
Food
Location
Date
Setting custom loading animation, you can see more examples here:
http://tobiasahlin.com/spinkit/
(though the css may require a few modifications to adjust to the grid)
You can use a different loading animation by editing the html in awem.js (gridLoading func)
and replacing css from AwesomeMvc.css or you can add another function that calls awem.gridLoading as done for the next grid.
GridNoRecordsFoundCustomLoadingDemo/Index.cshtml
<div style="padding-bottom: .5em"> <div class="awe-il">@Html.Awe().TextBox("txtperson").Placeholder("search for person ...").CssClass("searchtxt")</div> <div class="awe-il">@Html.Awe().TextBox("txtfood").Placeholder("search for food ...").CssClass("searchtxt")</div> </div> @(Html.Awe().Grid("CustomLoadingGrid") .Mod(o => o.Loading().ColumnsSelector()) .Columns( new Column { Bind = "Id", Width = 75, Groupable = false, Resizable = false }, new Column { Bind = "Person" }, new Column { Bind = "Food.Name" }, new Column { Bind = "Location" }, new Column { Bind = "Date", Width = 120 }) .Url(Url.Action("GridGetItems")) .Height(300) .Resizable() .Reorderable() .Parent("txtperson", "person") .Parent("txtfood", "food")) @*there's also css for the loading animation in common.css*@
using AweCoreDemo.Data; using AweCoreDemo.Models; using Microsoft.AspNetCore.Mvc; using Omu.AwesomeMvc;
namespace AweCoreDemo.Controllers.Demos.Grid { public class GridNoRecordsFoundCustomLoadingDemoController : Controller { public IActionResult Index() { return View(); }
public async Task<IActionResult> GridGetItems(GridParams g, string person = "", string food = "") { await Task.Delay(2000);
var query = Db.Lunches .Where(o => o.Food.Name.Contains(food) && o.Person.Contains(person)) .AsQueryable();
var gmb = new GridModelBuilder<Lunch>(query, g) { KeyProp = o => o.Id, Map = o => new { o.Id, o.Person, FoodName = o.Food.Name, o.Location, o.Price, Date = o.Date.ToShortDateString() } };
return Json(gmb.Build()); } } }
Drag a column header and drop it here to group by that column
<script> function gridLoading1(o) { return awem.gridLoading(o, { lhtm: '<div class="myspinner2"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>'}); } // css for this grid loading (found in site.css file) has been prefixed with 'my' so it would not interfere with the css from the previous example </script>
Comments
By accessing this site, you agree to store cookies on your device and disclose information in accordance with our cookie policy and privacy policy.