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.
Column.ClientFormatFunc - Defines the Name of a javascript function that will receive as a parameter the rowModel of the grid row and must return a string which will be used a value for the cell. The result of the javascript function will not be encoded.
RowClassClientFormat - used to set the class attribute for grid rows

GridDemo/CustomFormat.cshtml

@(Html.Awe().InitPopup(new PopupOpt
{
    Name = "details1",
    Url = Url.Action("Details", "GridDemo"),
    Dropdown = true,
    Modal = true
}))

@{
    var notifBtnFormat =
        Html.Awe().Button().Text("Notif")
        .OnClick("awe.flash(awem.notif('hi .(Id) .(Person)'))")
        .ToString();

    var popupBtnFormat =
        Html.Awe().Button()
        .Text("Popup")
        .OnClick(Html.Awe().OpenPopup("details1").Params(new { id = ".(Id)" }))
        .ToString();

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

@(Html.Awe().Grid("CustomFormatGrid")
    .Url(Url.Action("CustomFormatGrid", "GridDemo"))
    .Mod(o => o.Main())
    .Resizable()
    .Reorderable()
    .Height(350)
    .RowClassClientFormat(".(RowClass)") // setting row class using a value from the rowModel
    .Columns(
        new Column { Bind = "Id", Width = 90 },
        new Column { Bind = "Person", HeaderCssClass = "boldh" }, // default format rowModel.Bind
        new Column { ClientFormat = "had .(Food) at .(Location)", Header = "Description", CssClass = "bluev" }, // custom format using .(Prop)
        new Column { Prop = "Location", Header = "Location" }, // Prop = "Location" equivalent to ClientFormat = ".(Location)"
        new Column { Bind = "Price", ClientFormatFunc = "formatPrice", Width = 100 }, // using js function(rowModel, col.Bind) to get the cell content
        new Column { Bind = "Date", CssClass = "bgdate" },

        new Column { ClientFormat = notifBtnFormat, Width = 90 },
        new Column { ClientFormat = popupBtnFormat, Width = 100 },
        new Column { ClientFormat = linkFormat, Width = 70, CssClass = "center" },
        new Column { ClientFormatFunc = "linkBtn", Width = 120, CssClass = "center" }, 
        new Column { ClientFormatFunc = "postBtn", Width = 90, CssClass = "center" }, 
        new Column { ClientFormatFunc = "confirmBtn", Width = 110 } 
        ))

@*note Column.Bind is not required, but without it you can't Sort/Group by that column*@

<script type="text/javascript">
    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 linkBtn(model) {
        return "<button type='button' class='awe-btn' onclick='goToDetails(" + model.Id + ")'>Link btn</button>";
    }

    function goToDetails(id) {
        location.href = '@Url.Action("OpenDetails", "GridDemo")?id=' + id;
    }

    function postBtn(model) {
        return "<button type='button' class='awe-btn' onclick='post(" + model.Id + ")'>Post</button>";
    }

    function post(id) {
        $.post('@Url.Action("TestPost")', { id: id }, function (res) {
            awe.open('postMsg',
                {
                    title: 'Message from server',
                    content: res,
                    modal: true,
                    outClickClose: true,
                    popupClass: 'postPopup'
                });
        });
    }

    function confirmBtn(model) {
        return "<button type='button' class='awe-btn' onclick='confirm(" + model.Id + ")'>Confirm</button>";
    }

    function confirm(id) {
        awe.open("confirm",
            {
                content: '<div style="padding: 0 3em;">Confirm action on row id = ' + id + ' ?</div>',
                btns: [
                    {
                        text: 'Yes',
                        ok: 1, // add okbtn class
                        action: function () {
                            $(this).data('api').close();
                            awe.flash(awem.notif('Confirmed action for id = ' + id));
                            
                            //$('#CustomFormatGrid').data('api').load(); // to reload grid if needed
                        }
                    },
                    {
                        text: 'No',
                        action: function () {
                            $(this).data('api').close();
                        }
                    }],
                height: 200,
                width: 500,
                modal: true,
                title: 'Please Confirm'
            });
    }
</script>
<style>
    .date1 .bgdate {
        background: #efd2e8;
    }

    .boldh .awe-col, .awe-header td.boldh {
        color: #cc00ff;
    }

    .bluev {
        color: blueviolet;
    }

    .pinkb td, .awe-alt.pinkb td {
        background: pink;
        color: black;
    }

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

    .awe-grid .pinkb a, .awe-grid .greenb a {
        color: blue;
    }

    .postPopup .awe-popup {
        padding: 1em;
    }
</style>

Demos/Grid/GridDemoController.cs

public IActionResult CustomFormatGrid(GridParams g)
{
    var query = Db.Lunches.AsQueryable();

    return Json(new GridModelBuilder<Lunch>(query, g)
    {
        Map = o =>
        {
            var rowcls = o.Price > 90 ? "pinkb" : o.Price < 30 ? "greenb" : string.Empty;

            if (o.Date.Year > 2013) rowcls += " date1";

            // this will be our row model
            return new
            {
                o.Id,
                o.Person,
                o.Price,
                FoodName = o.Food.Name,
                Date = o.Date.ToString("dd MMMM yyyy"),
                o.Location,
                o.Organic,
                RowClass = rowcls
            };
        },
        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());            
}

public IActionResult Details(int id)
{
    var lunch = Db.Lunches.Single(o => o.Id == id);

    return PartialView(lunch);
}

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

    return View(lunch);
}

[HttpPost]
public IActionResult TestPost(int? id)
{
    return Content($"You posted id: {id} at {DateTime.UtcNow.ToLongDateString()} {DateTime.UtcNow.ToLongTimeString()} UTC");
}

GridDemo/Details.cshtml

@model AweCoreDemo.Models.Lunch
<div style="padding: .5em; line-height: 1.7em;">
    details:
    @Model.Person had @Model.Food.Name <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 AweCoreDemo.Models.Lunch
@{
    ViewData["Title"] = "OpenDetails";
}

<h2>Details</h2>

Person: @Model.Person <br />
Date: @Model.Date.ToShortDateString() <br />
Price: @Model.Price <br />
<p>
    <a href="@Url.Action("CustomFormat")">Go back to Grid Custom Format Demo</a>
</p>

Comments