Grid custom render | ASP.net Core Awesome

Merge grid row cells vertically

Drag a column header and drop it here to group by that column

Id

Person

Food

Location

1243	Aaron	Cheesecake	Visit
2307		Apple	Diner
2399		Pizza	Restaurant
2611		Pizza	Visit
2631		Cheesecake	Diner
2863		Cheesecake	Tavern
1823	Adam	Cheesecake	University
2047		Hot Beverage	Tavern
2783		Apple	Visit
3015		Hot Beverage	Central Perk

Grid Cards View

Drag a column header and drop it here to group by that column

Id

Person

Food

Location

Date

Country

Chef

Id:

3675

Person:

Eve

Food:

Pizza

Location:

Home

Date:

10/11/2018

Country:

Ironforge

Chef:

Chef Chef

Id:

3671

Person:

Phil

Food:

Apple

Location:

Tavern

Date:

3/9/2017

Country:

Hatton Garden

Chef:

Casse Croute

Id:

3667

Person:

Richard

Food:

Cheesecake

Location:

University

Date:

3/19/2016

Country:

Loch Modan

Chef:

Charles Duchemin

Id:

3663

Person:

Scott

Food:

Shepherd's pie

Location:

Home

Date:

10/7/2015

Country:

Winterspring

Chef:

Josh Baskin

Id:

3659

Person:

Monica

Food:

Banana

Location:

Home

Date:

7/25/2016

Country:

Jisina

Chef:

Gaia Earth

Id:

3655

Person:

Sylvain

Food:

Oat meal

Location:

Diner

Date:

4/11/2012

Country:

Westfall

Chef:

Casse Croute

Id:

3651

Person:

Trey

Food:

Big Salad

Location:

University

Date:

6/11/2018

Country:

Feralas

Chef:

Tom Smykowski

Id:

3647

Person:

Megan

Food:

Banana

Location:

Restaurant

Date:

1/19/2022

Country:

Ironforge

Chef:

Omu Man

Id:

3643

Person:

Leonard

Food:

Pizza

Location:

Visit

Date:

2/7/2018

Country:

Orgrimmar

Chef:

Chronos Timpus

Id:

3639

Person:

Gordon

Food:

French toast

Location:

Home

Date:

6/3/2018

Country:

Regent

Chef:

Demeter Harvest

show code

Grid cards view achieved by overriding api methods, columns can be reordered, hidden/shown, and the changes will be reflected in the rendered card. The column headers width is ignored for calculating grid content width, so when you shrink the browser window the grid content won't get a horizontal scrollbar. On touch you can scroll the grid header horizontally by dragging from the left an right sides of the grid header.

Shared/Demos/GridCardsView.cshtml

@(Html.Awe().Grid("GridCardsView")
      .CssClass("scrlh cardsViewGrid") // scrollbar for grid header when needed
      .Reorderable()
      .Mod(o => o.Main().CustomRender("cardsview"))
      .Columns(
          new Column { Bind = "Id", Width = 75, Groupable = false, Resizable = false },
          new Column { Bind = "Person" }.Mod(o => o.Nohide()),
          new Column { Bind = "Food.Name" },
          new Column { Bind = "Location" },
          new Column { Bind = "Date", Width = 120 }.Mod(o => o.Autohide()),
          new Column { Bind = "Country.Name", Header = "Country" },
          new Column { Bind = "Chef.FirstName,Chef.LastName", Prop = "ChefName", Header = "Chef" })
      .Url(Url.Action("GetItems", "LunchGrid"))
      .Resizable()
      .Height(450))
<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 class="gridTempAutoCont" style="padding-left:' + p.lvl + 'em;" >' + p.ren() + '</div>';
        };

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

        // render item
        api.itmf = function (opt) {
            var columns = o.columns;

            var content = '';
            if (opt.con) {
                content = opt.con;
            } else {
                for (var i = 0; i < columns.length; i++) {
                    var col = columns[i];
                    
                    // is column hidden
                    if (api.ich(col)) continue;
                    content += '<div class="elabel">'+ (col.H ? col.H +': ' : '') + '</div>' + aweUtils.gcvw(api, col, opt) + '</br>';
                }
            }

            if (opt.ceb) {
                opt.clss += ' cardhead';
                opt.style += 'margin-left:' + opt.ind + 'em;';
            } else {
                opt.clss += ' itcard';
            }

            var attr = opt.attr;
            attr += ' class="' + opt.clss + '"';
            opt.style && (attr += ' style="'+opt.style+'"');

            return '<div ' + attr + '>' + content + '</div>';
        };

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

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

Grid Custom Render with Inline Editing

Drag a column header and drop it here to group by that column

Name

Date

Chef

Meals

Bonus Meal

Organic

Name:

asdasd

Date:

1/9/2013

Chef:

Phoebe Phoebes

Bonus Meal:

Carrot

Organic:

Yes

Meals:

Carrot, Oats

Name:

asdasdasd

Date:

5/11/2020

Chef:

Josh Baskin

Bonus Meal:

Oats

Organic:

No

Meals:

Mango, Banana, Walnuts

Name:

qqqewq

Date:

3/27/2018

Chef:

Gaia Earth

Bonus Meal:

Onion

Organic:

No

Meals:

Cherry

Name:

qweqeqw

Date:

10/21/2022

Chef:

Phoebe Phoebes

Bonus Meal:

Tomato

Organic:

No

Meals:

Rice

Name:

qweqweq

Date:

7/21/2016

Chef:

Fromage Sandwich

Bonus Meal:

Wheat

Organic:

No

Meals:

Potato, Lettuce, Oats

Name:

Snacks and movie

Date:

11/7/2010

Chef:

Charles Duchemin

Bonus Meal:

Cucumber

Organic:

No

Meals:

Onion

Name:

Apero

Date:

5/21/2018

Chef:

Chronos Timpus

Bonus Meal:

Chestnuts

Organic:

Yes

Meals:

Cauliflower, Buckwheat

Name:

petit dej

Date:

11/19/2016

Chef:

Charles Duchemin

Bonus Meal:

Tomato

Organic:

No

Meals:

Lettuce, Celery

Name:

Breakfast

Date:

5/25/2022

Chef:

Chef Chef

Bonus Meal:

Walnuts

Organic:

No

Meals:

Carrot

Name:

Dejeuner

Date:

9/17/2017

Chef:

Cheyenne Goldblum

Bonus Meal:

Wheat

Organic:

Yes

Meals:

Carrot

show code

Grid with custom rendering and inline editing mod applied. Edit on row click can also be used.

Shared/Demos/GridInlineCrudCustomRender.cshtml

@{
    var gridId = "InlineCustomRender";
    var initObj = new
    {
        Name = DemoUtils.RndName(),
        Date = DateTime.Now.ToShortDateString(),
        ChefId = Db.Chefs.First().Id,
        MealsIds = Db.Meals.Take(2).Select(o => o.Id).ToArray()
    };

}
<div class="bar">
    <div style="float: right;">
        @Html.Awe().TextBox("txtSearchInlCr").Placeholder("search...").CssClass("searchtxt")
    </div>
    <button type="button" onclick="$('#@gridId').data('api').inlineCreate()" class="awe-btn">Create</button>

    @Html.InlineCreateButtonForGrid(gridId, initObj, "Create with predefined values")
</div>

@Html.InitDeletePopupForGrid(gridId, "GridInlineEditDemo")

@(Html.Awe().Grid(gridId)
    .CssClass("scrlh inlEditCards")
    .Attr("data-syncg", "dinner") // crud sync using signalr in site.js
    .Url(Url.Action("GridGetItems", "GridInlineEditDemo"))
    .InlEdit(new InlEditOpt { SaveUrl = Url.Action("Save", "GridInlineEditDemo") })
    .Parent("txtSearchInlCr", "search")
    .Height(620)
    .Mod(o => o.PageInfo().CustomRender("inlDinner"))
    .Columns(
          new Column { Bind = "Id", Width = 75, Hidden = true }
              .InlId(),

          new Column { Bind = "Name" }
              .InlString(),

          new Column { Bind = "Date" }
              .InlDate(),

          new Column { Id = "chef", Bind = "Chef.FirstName,Chef.LastName", Prop = "ChefName", Header = "Chef" }
              .Inl(Html.Awe().Lookup("ChefId").Controller("ChefLookup")),

          new Column { Id = "meals", Prop = "Meals", Header = "Meals" }
              .InlMultiselect(new MultiselectOpt { Name = "MealsIds", Url = Url.Action("GetMealsImg", "Data") }.ImgItem()),

          new Column { Bind = "BonusMeal.Name", Prop = "BonusMeal", Header = "Bonus Meal", Width = 140 }
              .InlDropdownList(new DropdownListOpt
              {
                  Name = "BonusMealId",
                  Url = Url.Action("GetMealsImg", "Data")
              }
              .ImgItem()),

          new Column { Bind = "Organic", Prop = "DispOrganic" }
              .Inl(Html.Awe().Toggle(new ToggleOpt { Name = "Organic" })),

          new Column { Id = "edit", ClientFormat = GridUtils.InlineEditFormat() },
          new Column { Id = "del", ClientFormat = Html.InlineDeleteFormatForGrid(gridId) }))
@*column.Id edit/del used in inlDinner func*@
<script>
    function inlDinner(o) {
        var api = o.api;

        // node (group) content add wrap for padding
        api.ncon = function (p) {
            if (!p.lvl) return p.ren();
            return '<div class="gridTempAutoCont" style="padding-left:' + p.lvl + 'em;" >' + p.ren() + '</div>';
        };

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

        // render item (row)
        api.itmf = function (opt) {
            var content = '';

            // content already set (group header)
            if (opt.con) {
                content = opt.con;
            } else {
                var colByBind = function (bind) {
                    return aweUtils.columnByBind(o, bind);
                };

                var colById = function (id) {
                    return aweUtils.columnById(o, id);
                };

                // get column value
                function val(col, cls) {
                    return aweUtils.gcvw(api, col, opt, cls);
                }

                function field(col, nolabel) {
                    var label = '';
                    if (col.H && !nolabel) {
                        label = '<div class="elabel">' + col.H + ':</div> ';
                    }
                    return '<div class="efield">' + label + '<div class="einput">' + val(col) + '</div></div>';
                }

                function hid(col) {
                    return '<div style="display:none;">' + val(col) + '</div>';
                }

                content += hid(colByBind('Id')) +
                    '<div class="earea">' +
                    field(colByBind('Name')) +
                    field(colByBind('Date')) +
                    field(colById('chef')) +
                    '</div><div class="earea">' +
                    field(colByBind('BonusMeal.Name')) +
                    field(colByBind('Organic')) +
                    '</div>' +
                    field(colById('meals')) +
                    '<div class="inlbtns">' +
                    val(colById('edit'), 'awe-il') +
                    val(colById('del'), 'awe-il') +
                    '</div>';
            }

            // has collapse button
            if (opt.ceb) {
                opt.clss += ' cardhead';
                opt.style += 'margin-left:' + opt.ind + 'em;';
            } else {
                opt.clss += ' edcard';
            }

            var attr = opt.attr;
            attr += ' class="' + opt.clss + '"';
            opt.style && (attr += ' style="' + opt.style + '"');

            return '<div ' + attr + '>' + content + '</div>';
        };

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

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

Tree grid with custom rendering

Name

Id

main node 3893

node 3893 -> 3903

node 3903 -> 3905

node 3905 -> 3907

Apple 3907 -> 3909

node 3893 -> 3895

Mango 3895 -> 3901

node 3895 -> 3897

leaf 3897 -> 3899

main node 3871

Artichoke 3871 -> 3891

node 3871 -> 3875

node 3875 -> 3885

Carrot 3885 -> 3889

Barley 3885 -> 3887

node 3875 -> 3877

Artichoke 3877 -> 3883

node 3877 -> 3879

Hazelnuts 3879 -> 3881

Banana 3871 -> 3873

main node 3865

Tomato 3865 -> 3869

Artichoke 3865 -> 3867

show code

Using custom render mod to override api methods and render the grid using divs with padding instead of the default table.

Tree grid nested cards

Drag a column header and drop it here to group by that column

Name

Id

main node 3893

node 3893 -> 3903

node 3893 -> 3895

main node 3871

Artichoke 3871 -> 3891

node 3871 -> 3875

Banana 3871 -> 3873

main node 3865

Tomato 3865 -> 3869

Artichoke 3865 -> 3867

show code