add row in webgrid

Question

I'm working with MVC 3 webgrid and i need to add a new row into webgrid to show sum of price from product table.
Any ideas are appreciated.
Here's my code

@{
WebGrid grid = new WebGrid(source: Model,
                           rowsPerPage: 3,
                           canSort: true,
                           canPage: true,
                           ajaxUpdateContainerId: "ajaxgrid");  


@grid.GetHtml(
    alternatingRowStyle: "altrow",
    mode: WebGridPagerModes.All,
    firstText: "<< ",
    previousText: "< ",
    nextText: " >",
    lastText: " >>",
    columns: grid.Columns(
            grid.Column(format: (item) => new HtmlString(Html.ActionLink("Edit", "Edit", new { id = item.ProductId }).ToString() + " | " +
                                                        Html.ActionLink("Delete", "Delete", new { id = item.ProductId }).ToString()
                                                        )
                        ),
            grid.Column("ProductId", "Product Id"),
            grid.Column("CategoryId", "Category Name", format: (item) => item.Category.CategoryName),
            grid.Column("ProductName", "Product Name"),
            grid.Column("Price", "Price", format: @<text>@String.Format("{0:c}", item.Price)</text>)
    )
)

}

score 2 · Answer 1 · answered Jul 31 '12 at 00:41

2

I had a similar problem so I created an extension of the built in MVC WebGrid. Code and example usage is at https://gist.github.com/3211605. Hopefully it's helpful.

answered Jul 31 '12 at 00:41

portlandrock

300
2
6

score 1 · Answer 2 · answered Jun 03 '13 at 22:16

If you're okay with using JQuery and having the footer content not being column-aligned, adding a footer to a WebGrid is a bit hacky, but not difficult:

@{
  var grid = new WebGrid(...);
}
@grid.GetHtml(
  ...,
  htmlAttributes: new { id = "myTable" }
)

<span id="footerContent">This will be in footer</span>

<script>
  $().ready(function () {
    $('#footerContent').appendTo('#myTable tfoot tr td:last');
  }
</script>

The basics are:

Set your table's HTML ID attribute, using the htmlAttributes parameter of WebGrid.GetHtml()
Put the footer's contents in an element on your page
Use JQuery's .appendTo() method to add the content element to the end of the footer's TD element

A more robust solution should make sure those elements exist, but you get the idea.

Assuming your model already contains the sum (or a method to get the sum), just build your footer like:

<span id="footerContent">@Model.Total</span>

score 0 · Answer 3 · edited Jul 06 '11 at 08:49

This is a terrible hack but it allowed me to get on with my day. I think the way to do this correctly is to write an Html Helper that allows you to pass in the footer row. I'm a little disappointed the WebGrid doesn't have a footer row built in.

 gridHtml = MvcHtmlString.Create(gridHtml.ToString().Replace("</table>", sbTotalsTable.ToString()));

    gridHtml is from   var gridHtml = @grid.GetHtml....blah..


    the sbTotalsTable is    var sbTotalsTable = new StringBuilder();

    sbTotalsTable.Append("<tr>");

    sbTotalsTable.Append("<td>");

    sbTotalsTable.Append(DataSource.Select(s=>s.PropToSum).Sum().ToString();//The total of that column
    sb.TotalsTable.Append("</td>");
    sb.TotalsTable.Append("</tr>");
    sb.TotalsTable.Append("</table>");//closing the table without opening it because the rest comes from the gridHtml.

Only make sure you match the number of columns in your hand built table row. Notice there is no table start tag.. The whole idea is to hijack the created html at the table close and add a row. Sorry for the hand typed code. I'm on a proprietary app and I don't dare paste anything from it...

score 0 · Answer 4 · answered Jul 21 '11 at 04:49

Add a new item to the IEnumerable that you use as the source for the WebGrid to bind to.

var lineItems = Model.LineItems;
var totalRow = new SalesLineItem
                {
                    SaleType = "Total Sales",
                    Amount = Model.TotalSales
                };
lineItems.Add(totalRow);

var grid = new WebGrid(lineItems);

I haven't found a nice way to apply formatting to this total row yet. That might have to be done client-side.

add row in webgrid

4 Answers4

Linked