Grid custom rendering

<% GridCardsView.Grid()
      .CssClass("scrlh cardsViewGrid") // scrollbar for grid header when needed
      .Reorderable()
      .Mod(o => o.PageInfo().PageSize().AutoMiniPager().ColumnsSelector().CustomRender("cardsview"))
      .Columns(
          new Column { Bind = "Id", Width = 75, Groupable = false, Resizable = false },
          new Column { Bind = "Person" }.Mod(o => o.Nohide()),
          new Column { Bind = "Dish.Name" },
          new Column { Bind = "Location" },
          new Column { Bind = "Date", Width = 120 }.Mod(o => o.Autohide()),
          new Column { Bind = "Country.Name", ClientFormat = ".(CountryName)", Header = "Country" },
          new Column { Bind = "Chef.FirstName,Chef.LastName", Prop = "ChefName", Header = "Chef" })
      .Url(Page.Url().Action("GetItems", "LunchGrid"))
      .Resizable()
      .Height(450); %>
<awe:Ocon runat="server" ID="GridCardsView" />
<script>
    function cardsview(o) {
        var api = o.api;
        
        // node content add wrap for padding
        api.ncon = function(p) {
            if (!p.lvl) return p.ren();
            return '<div style="padding-left:' + p.lvl + 'em;" >' + p.ren() + '</div>';
        };

        // group header content
        api.ghead = function(g) {
            return api.ceb() + g.c;
        };

        api.renderItem = function (opt) {
            let { attr, item, ceb, content, indent } = opt;
            const columns = o.columns;

            if (!content) {
                content = '';
                for (let col of columns) {
                    // is column hidden
                    if (api.isColHid(col)) continue;
                    const header = col.Header ? col.Header + ': ' : '';
                    content += `<div class="elabel">${header}</div>${aweUtils.gcvw(api, col, opt)}</br>`;
                }
            }

            if (ceb) {
                attr.class += ' cardhead';
                attr.style = `margin-left:${indent}em;`;
            } else {
                attr.class += ' itcard';
            }

            return `<div ${awef.objToAttrStr(attr)}>${content}</div>`;
        };

        // ignore columns width for grid content
        o.syncon = 0;

        // no alt rows
        o.alt = 0;
    }
</script>

<% TreeGridCr.Grid()
          .Url(Page.Url().Action("SimpleTree", "TreeGrid"))
          .Mod(o => o.CustomRender("crtree"))
          .Columns(
              new Column { Bind = "Name" },
              new Column { Bind = "Id", Width = 100 }
          )
          .Persistence(Persistence.View)
          .Groupable(false)
          .PageSize(3)
          .Height(400); %>
<awe:Ocon runat="server" ID="TreeGridCr" />
<script>
    function crtree(o) {
        var api = o.api;

        // node content wrap
        api.ncon = function (p) {
            // don't wrap at level 0 and nodetype = items
            if (!p.lvl || p.gv.nt == 2) return p.ren();
            return '<div style="padding-left:' + p.lvl + 'em;" >' + p.ren() + '</div>';
        };

        // node
        api.nodef = function (p) {
            var attr = p.h ? 'style="display:none;"' : '';
            if (p.lvl == 1) {
                var res = '<div class="tgroot" ' + attr + '>' + p.ren() + '</div>';
                return res;
            }

            return p.ren();
        };

        // group header content
        api.ghead = function (g) {
            return api.ceb() + g.c;
        };

        // render row
        api.renderItem = function (opt) {
            let { attr, ceb, content } = opt;

            function val(col) {
                return aweUtils.gcv(api, col, opt);
            }

            if (!content) {
                content = '';
                if (ceb) content += api.ceb();
                content += val(aweUtils.columnByBind(o, 'Name'));
            }

            if (ceb) {
                attr.class += ' tgitem awe-ceb';
            } else {
                attr.class += ' tgitem';
            }

            return `<div ${awef.objToAttrStr(attr)}>${content}</div>`;
        };
    }
</script>