Mathias Siig Nørregaard Mathias Siig Nørregaard - 6 months ago 34
C# Question

How do I manipulate WebGrids?

I'm using ASP.NET and the MVC pattern.
I have the following code which I use to style the columns:

<div id="grid">
@grid.GetHtml(columns: grid.Columns(
grid.Column("Amount", "Amount", canSort: true, style: "column"),
grid.Column("ShelfLife", "ShelfLife", canSort: true, style: "column"),
grid.Column("Size", "Size", canSort: true, style: "column"),
grid.Column("Type", "Type", canSort: true, style: "column"),
grid.Column("Unit", "Unit", canSort: true, style: "column")

I use the following code to load the data for the grid:

ViewBag.Title = "ListView";
Layout = "~/Views/Shared/_Layout.cshtml";
var grid = new WebGrid(Model, defaultSort: "null");

It's probably a long and trivial way of doing this... but I'd like to know how I can manipulate what's in the grid? For example, I'd like to add a button for every row. I'd also like to recolour every second row. How would I do this?


You can use styles for changing the color of rows in grid and check this link for manipulating the grid.

You can define custom css class in a separate css file

.comments {
    width: 500px;

and then assign this class to the corresponding elements:

webGrid.Column(columnName: "TRP_Comments", header: "Comments", style: "comments")