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.Awex().Grid<Lunch>()
    .Url(Url.Action("CustomFormatGrid", "GridDemo"))
    .Main()
    .Height(350)
    .RowClassClientFormat(".(RowClass)") // setting row class using a value from the rowModel
    .Columns(b => 
    {
        b.Add(o => o.Id).Width(90);
        b.Add(o => o.Person, new Column { HeaderCssClass = "boldh" });
        b.Add(o => new {o.Dish.Name, o.Location}, 
            new Column { ClientFormat = "had .(DishName) at .(Location)", Header = "Description", CssClass = "bluev" });
        b.Add(new Column { Prop = "Location", Header = "Location" });
        b.Add(o => o.Price, new Column { ClientFormatFunc = "formatPrice", Width = 100 });
        b.Add(o => o.Date, new Column { CssClass = "bgdate" });
        b.Add(new Column { Width = 90, ClientFormat = notifBtnFormat });
        b.Add(new Column { Width = 100, ClientFormat = popupBtnFormat });
        b.Add(new Column { Width = 70, CssClass = "center", ClientFormat = linkFormat });
        b.Add(new Column { Width = 120, CssClass = "center", ClientFormatFunc = "linkBtn" });
        b.Add(new Column { Width = 90, CssClass = "center", ClientFormatFunc = "postBtn" });
        b.Add(new Column { Width = 110, ClientFormatFunc = "confirmBtn" });
    })
)

@*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) {
      const price = lunch[prop];
      const color = price < 20 ? 'green'
                  : price > 50 ? 'red'
                  : 'navy';

      return `<div class="o-inline-flex" style="color:${color};">
                ${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 td {
        background: #ddfff5 !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();

    var gmb = new GridModelBuilder<Lunch>(query, g);

    gmb.Prop(o => o.Dish.Name, "DishName");
    gmb.Prop(o => o.Location);
    gmb.ComputeProp(rowModel =>
    {
        decimal price = ((dynamic)rowModel).Price;
        return price > 90 ? "pinkb" : price < 30 ? "greenb" : string.Empty;
    }, "RowClass");
    

    return this.AweJson(gmb.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.Dish.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