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")
))
</div>


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?

BSG BSG
Answer Source

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")