<% 
    var btnFormat = Page.Awe().Button()
                    .Text("details")
                    .OnClick(Page.Awe().OpenPopup("details")
                    .Params(new { id = ".(Id)" }))
                    .ToString();

    var linkFormat = "<a href='" + ResolveUrl("~/LunchDetails.aspx") + "?id=.(Id)'>open</a>";
 %>

<% CustomFormatGrid.Grid()
        .Url(Page.Url().Action("CustomFormatGrid", "GridDemo"))
        .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 = "Dish.Name", ClientFormat = "and had .(DishName)", 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 = 100 }); %>
<awe:Ocon runat="server" ID="CustomFormatGrid" />

<% InitPopup1.InitPopup().Name("details").Url(Page.Url().Action("Details", "GridDemo")).Mod(o => o.Dropdown()).Modal(); %>
<awe:Ocon runat="server" ID="InitPopup1" />

<% 
    var orgFormat = Page.Awe().CheckBox("org")
                .Prefix(".(Id)")
                .Otoggl(cssClass: ".(Chked)")
                .Svalue(".(Organic)")
                .Enabled(false)
                .ToString();
 %>

<script type="text/javascript">
    function toggle(lunch) {
        var str = <%=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>

public ActionResult CustomFormatGrid(GridParams g)
{
    return Json(new GridModelBuilder<Lunch>(Db.Lunches.AsQueryable(), g)
    {
        Map = o => new
        {
            o.Id,
            o.Person,
            o.Price,
            DishName = o.Dish.Name,
            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());
}

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

    return PartialView(lunch);
}

@model AwesomeWebFormsDemo.Models.Lunch
<div style="padding: .5em; line-height: 1.7em;">
    details:
    @Model.Person <br />
    Date: @Model.Date.ToShortDateString() <br />
    Price: @Model.Price <br />
    Country: @Model.Country.Name <br />
    Chef: @Model.Chef.FirstName @Model.Chef.LastName
</div>

<%@ Page Title="Home" MasterPageFile="~/Site.Master" Language="C#" AutoEventWireup="true" CodeBehind="LunchDetails.aspx.cs" Inherits="AwesomeWebFormsDemo.LunchDetails" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h2> Lunch Details</h2>
    
    <%
        var strid = Request.QueryString["id"];
        int id;
        if (!int.TryParse(strid, out id))
        {
            throw new HttpException(404, "Not found");
        }

        //var id = Convert.ToInt32(strid);
        var lunch = Db.Get<Lunch>(id);
    %>

    Person: <%=lunch.Person %> <br />
    Dish: <%=lunch.Dish %> <br/>
    Date: <%=lunch.Date.ToShortDateString() %> <br />
    Price: <%=lunch.Price %> <br />
    Country: <%=lunch.Country.Name %> <br />
    Chef: <%=lunch.Chef.FirstName + " " +lunch.Chef.LastName %> <br/>

    <p>
        <a href="<%=ResolveUrl("~/GridCustomFormat.aspx") %>">Go back to Grid Custom Format Demo</a>
    </p>  
</asp:Content>