Grid Custom Formatting


Cell values can be evaluated on the client side using templates and js functions or on the server side using Map and setting a custom value (as shown here for the Date column). The group header value can also be set on the server side, same applies for the footer.

  • Column.ClientFormat - Client format for the column defined as a string using .ModelPropertyName for including values of the row model, if the ClientFormat starts with <td then grid rendering wont wrap the cell value with td (the ones in format will be used instead), this way additional html attributes can be added to the td tag (this attributes can contain .ModelProp)
  • Column.ClientFormatFunc - Defines the Name of a javascript function that will receive as a parameter the model (or mapped model) of the grid row and must return a string which will be used a value for the cell
  • RowClassClientFormat - used to set a css class to grid rows
GridDemo/CustomFormat.cshtml
@{
var btnFormat = Html.Awe().Button()
.Text("details")
.CssClass("o-pad")
.OnClick(Html.Awe().OpenPopup("details")
.Params(new { id = ".Id" }))
.ToString();

var linkFormat = "<a href='" + Url.Action("OpenDetails", "GridDemo", new { id = ".(Id)" }) + "'>open</a>";
}

@(Html.Awe().Grid("CustomFormatGrid")
.Url(Url.Action("GetItems", "CustomFormatGrid"))
.Mod(o => o.ColumnsSelector())
.Persistence(Persistence.Session)
.Height(350)
.RowClassClientFormat(".(RowClass)")
.Columns(
new Column { Bind = "Person", ClientFormat = ".(Person) was at .(Location)", HeaderCssClass = "boldh" },
new Column { Bind = "Food", ClientFormat = "and had .(Food)", CssClass = "bluev" },
new Column { Bind = "Price", ClientFormatFunc = "formatPrice", Width = 100 },
new Column { Bind = "Organic", ClientFormatFunc = "toggle", Width = 90 },
new Column { Bind = "Date" },
new Column { ClientFormatFunc = "useTemplate('template1')" },
new Column { ClientFormat = linkFormat, Width = 90, CssClass = "center" },
new Column { ClientFormat = btnFormat, Width = 90 }))

@Html.Awe().InitPopup().Name("details").Url(Url.Action("Details")).Mod(o => o.Dropdown()).Modal()

@{
var orgFormat = Html.Awe().CheckBox("org")
.Prefix(".(Id)")
.Otoggl(cssClass: ".(Chked)")
.Svalue(".(Organic)")
.Enabled(false)
.ToString();
}

<script type="text/javascript">
function toggle(lunch) {
var str = @Html.Raw(DemoUtils.Encode(orgFormat));
var chkd = lunch.Organic ? 'o-chked' : '';

str = str.split('.(Id)').join(lunch.Id).split('.(Organic)').join(lunch.Organic).split('.(Chked)').join(chkd);
return str;
}

function formatPrice(lunch, prop) {
var color = 'navy';
var price = lunch[prop];
if (price < 20) color = 'green';
if (price > 50) color = 'red';
return "<div style='color:" + color + ";text-width:bold;'>" + price + " &pound; </div>";
}

function useTemplate(id) {
return function (model) {
var str = $('#' + id).html();
for (var name in model) {
str = str.replace("." + name, model[name]);
}
return str;
};
}
</script>
<style>
.boldh .awe-col, .boldh {
color: navy;
}

.bluev {
color: blueviolet;
}

.pinkb {
background: pink !important;
color: black;
}

.greenb {
background: #f0f9f7 !important;
color: black;
}

.awe-grid .pinkb a, .awe-grid .greenb a {
color: blue;
}
</style>
<div id="template1" style="display: none">
.Person spent .Price &pound;
</div>
Awesome/Grid/CustomFormatGridController.cs
public class CustomFormatGridController : Controller
{
public ActionResult GetItems(GridParams g)
{
return Json(new GridModelBuilder<Lunch>(Db.Lunches.AsQueryable(), g)
{
Map = o => new
{
o.Id,
o.Person,
o.Price,
o.Food,
Date = o.Date.ToString("dd MMMM yyyy"),
o.Location,
o.Organic,
RowClass = o.Price > 90 ? "pinkb" : o.Price < 30 ? "greenb" : string.Empty
},
MakeHeader = gr =>
{
var value = AweUtil.GetColumnValue(gr.Column, gr.Items.First()).Single();
var strVal = gr.Column == "Date" ? ((DateTime)value).ToString("dd MMMM yyyy") :
gr.Column == "Price" ? value + " GBP" : value.ToString();

return new GroupHeader {Content = gr.Header + " - " + strVal};
} }.Build());
}
}
Demos/Grid/GridDemoController.cs
public ActionResult Details(int id)
{
var lunch = Db.Get<Lunch>(id);

return PartialView(lunch);
}

public ActionResult OpenDetails(int id)
{
var lunch = Db.Get<Lunch>(id);

return View(lunch);
}
GridDemo/Details.cshtml
@model AwesomeMvcDemo.Models.Lunch
<div style="padding: .5em; line-height: 1.7em;">
details:
@Model.Person had @Model.Food <br />
Date: @Model.Date.ToShortDateString() <br />
Price: @Model.Price <br />
Country: @Model.Country.Name <br />
Chef: @Model.Chef.FirstName @Model.Chef.LastName
</div>
GridDemo/OpenDetails.cshtml
@model AwesomeMvcDemo.Models.Lunch
@{
ViewBag.Title = "OpenDetails";
}

<h2>Details</h2>

Person: @Model.Person <br />
Food: @Model.Food <br/>
Date: @Model.Date.ToShortDateString() <br />
Price: @Model.Price <br />
Country: @Model.Country.Name <br />
Chef: @Model.Chef.FirstName @Model.Chef.LastName<br/>

<p>
<a href="@Url.Action("CustomFormat")">Go back to Grid Custom Format Demo</a>
</p>



Comments