Summary above the grid, Adding values in columns and counting rows

Title:

BI{code} ?

I have a grid of information that contains numbers in some of the columns. I'm looking to place a summary table above the grid which would show the count of rows currently in the grid as well as sums of numbers in 2 of the columns. I'm not good at all with JavaScript and am having troubles understanding how to do this client-side. I also have some drop downs on my page that would force the grid to reload, so I need to make the summary data update when these are changed.

Save Changes Cancel

Sean Davidson

asked at 14 Jan 2021

Answers

• BI{code} ?

  You could use the `GridModelBuilder` `Tag` property to send additional information, here's a demo (you could copy this code in our main demo to test): public ActionResult GetItems(GridParams g, string person) { person = (person ?? "").ToLower(); var data = Db.Lunches.Where(o => o.Person.ToLower().Contains(person)); var count = data.Count(); // Page = custom extension in our main demo var avgPrice = count > 0 ? data.Average(o => o.Price).ToString("N") : ""; return Json(new GridModelBuilder<Lunch>(data.AsQueryable(), g) { Map = o => new { o.Id, o.Person, o.Price, o.Food }, Tag = new { avgPrice, count } }.Build()); } and in the view: <div> avg price: <span id="avgPrice"></span><br/> count: <span id="rowCount"></span> </div> <script> $(function() { var g = $('#AddInfo'); g.on('aweload', function(e, res) { if (!$(e.target).is(g)) return; console.log(res); $('#avgPrice').html(res.tg.avgPrice); $('#rowCount').html(res.tg.count); }); }) </script> <div class="bar"> @Html.Awe().TextBox("txtPerson").Placeholder("person") </div> @(Html.Awe().Grid("AddInfo") .Url(Url.Action("GetItems")) .Mod(o => o.Main()) .Height(350) .Parent("txtPerson", "person") .Columns( new Column{ Bind = "Person"}, new Column{ Bind = "Price"}, new Column{ Bind = "Food"}))

  Save Changes Cancel

  

  Omu

  answered at 14 Jan 2021

please Sign In to leave an answer