Awesome ASP.net Core and MVC Controls

Grid with custom loading animation

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.



Setting custom loading animation, css and html for the loading animation grabbed from here: http://tobiasahlin.com/spinkit/. 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" },
new Column { Bind = "Location" },
new Column { Bind = "Date", Width = 120 },
new Column { Bind = "Country.Name", ClientFormat = ".(CountryName)", Header = "Country" },
new Column { Bind = "Chef.FirstName,Chef.LastName", ClientFormat = ".(ChefName)", Header = "Chef" })
.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*@
Demos/Grid/GridNoRecordsFoundCustomLoadingDemoController.cs
public class GridNoRecordsFoundCustomLoadingDemoController : Controller
{
public ActionResult Index()
{
return View();
}

public ActionResult GridGetItems(GridParams g, string person, string food)
{
food = (food ?? "").ToLower();
person = (person ?? "").ToLower();

Task.Delay(2000).Wait();
var list = Db.Lunches
.Where(o => o.Food.ToLower().Contains(food) && o.Person.ToLower().Contains(person))
.AsQueryable();

return Json(new GridModelBuilder<Lunch>(list, g)
{
Key = "Id", // needed for Entity Framework | nesting | tree | api
Map = o => new
{
o.Id,
o.Person,
o.Food,
o.Location,
o.Price,
Date = o.Date.ToShortDateString(),
CountryName = o.Country.Name,
ChefName = o.Chef.FirstName + " " + o.Chef.LastName
}
}.Build());
}
}


GridNoRecordsFoundCustomLoadingDemo/Index.cshtml
@(Html.Awe().Grid("CustomLoadingGrid2")
.Mod(o => o.Custom("gridLoading1").ColumnsSelector())
.Height(300)
.Resizable()
.Reorderable()
.Columns(
new Column { Bind = "Id", Width = 75, Groupable = false, Resizable = false },
new Column { Bind = "Person" },
new Column { Bind = "Food" },
new Column { Bind = "Location" },
new Column { Bind = "Date", Width = 120 },
new Column { Bind = "Country.Name", ClientFormat = ".(CountryName)", Header = "Country" },
new Column { Bind = "Chef.FirstName,Chef.LastName", ClientFormat = ".(ChefName)", Header = "Chef" })
.Url(Url.Action("GridGetItems")))

<script>
function gridLoading1(o) {
return awem.gridLoading(o, { lhtm: '<div class="myspinner"><div class="mybounce1"></div><div class="mybounce2"></div><div class="mybounce3"></div></div>', ctm:15 });
}
// 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

We use cookies to improve your online experience. By accessing this site, you agree to the use of cookies and other technologies to process your personal data (e.g. IP address) to enhance and personalise your experience across our websites. Additionally, third-party companies, may store cookies on your device and use similar technologies to collect and use certain information. For more information, refer to our privacy policy and cookie policy.