Grid Filtering

@{
    var pref = "frowOut";
    var gridId = "GridFrowOut";
}
<div id="outfrow" class="frowpnl awe-il" style="margin-right: 1em">
    @*context will add a prefix to all awesome editors html ids*@
    @using (Html.Awe().BeginContext(pref))
    {
        @*html input name matches filter rule name*@
        <label>
            Name:<br />
            @Html.Awe().TextBox("Name").ClearButton().Placeholder("name")
        </label>
        <label>
            Chef:<br />
            @Html.Awe().DropdownList(new DropdownListOpt { Name = "Chef", ClearBtn = true, DataFunc = "filterData('Chef')"})
        </label>
        <label>
            Year:<br />
            @Html.Awe().DropdownList(new DropdownListOpt { Name = "Date", ClearBtn = true, DataFunc = "filterData('Date')"})
        </label>
        <label>
            Meals:<br />
            @(Html.Awe().Multicheck(new MulticheckOpt { Name = "Meals", ClearBtn = true, DataFunc = "filterData('Meals')" }))
        </label>
        <label>
            Organic:<br />
            @Html.Awe().DropdownList(new DropdownListOpt { Name = "Organic", ClearBtn = true, DataFunc = "filterData('Organic')"})
        </label>
        <label style="margin-right: 1em;">
            <span> </span><br />
            <button type="button" id="btnClearFilter" class="awe-btn">Clear filters</button>
        </label>
    }

    <label class="nonflt">
        <span>Show items as:</span> <br />
        @Html.Awe().Toggle(new ToggleOpt{ Name = "itemsType", No = "Rows", Yes = "Custom", Width = "7em" })
    </label>
</div>

@(Html.Awe().Grid(gridId)
    .Url(Url.Action("DinnersFilterGrid", "GridFilterRowServerSideData"))    
    .Height(350)
    .Reorderable()
    .Mod(o => o.Main().Custom("outsideFilter"))
    .Columns(
        new Column { Bind = "Id", Width = 75, Groupable = false },
        new Column { Bind = "Name" },
        new Column { Bind = "Chef.FirstName,Chef.LastName", Prop = "ChefName", Header = "Chef" },
        new Column { Bind = "Date" },
        new Column { Prop = "Meals", Header = "Meals", Grow = 2 },
        new Column { Bind = "Organic" }))
<script>

    // get data for filter editor from grid model
    function filterData(name) {
        return function () {
            var o = $('#@gridId').data('o');
            return awem.frowData(o, name);
        }
    }

    // outside filter row custom mod
    function outsideFilter(o) {
        var g = o.v;
        var fcont = $('#outfrow');
        var opt = { model: {} };
        o.fltopt = opt;

        // reload each filter control when grid loads
        g.on('aweload', function () {
            $('#outfrow .awe-val').each(function () {
                var api = $(this).data('api');
                if (api && api.load) {
                    api.load()
                }
            });
        });

        // apply filters on control change
        fcont.on('change', function (e) {
            opt.inp = fcont.find('input').not('.nonflt input');
            // instead of opt.inp we could set opt.cont = fcont; but this will also include the itemsType input
            // and the grid would reload when we change the items type also

            awem.loadgflt(o);
        });

        $('#btnClearFilter').on('click', function () {
            fcont.find('.awe-val').not('.nonflt input').each(function () {
                var it = $(this).val('');
                var api = it.data('api');
                api && api.render && api.render();
                // call api.render instead of change to load the grid only once
            });

            opt.inp = fcont.find('input').not('.nonflt input');

            awem.loadgflt(o);
        });

        // keep same filter editors values after page refresh

        var fkey = 'persFout' + o.id;
        var storage = sessionStorage;
        var pref = '@pref';

        g.on('awefinit', function () {
            var fopt = storage[fkey];
            if (fopt) {
                fopt = JSON.parse(fopt, function (key, val) {
                    if (val && val.length > 0 && val[0] === '[') {
                        return JSON.parse(val);
                    }

                    return val;
                });

                if (fopt.model) {
                    o.fltopt.model = fopt.model;
                    o.fltopt.order = fopt.order;

                    // set persisted model filter params
                    var res = awef.serlObj(fopt.model);
                    res = res.concat(awef.serlArr(fopt.order, 'forder'));
                    o.fparams = res;
                    var model = fopt.model;

                    g.one('aweload', function () {
                        for (var prop in model) {
                            var editor = $('#' + pref + prop);
                            if (editor.length) {
                                editor.val(awef.sval(model[prop]));
                                if (editor.closest('.awe-txt-field')) {
                                    editor.data('api').render();
                                }
                            }
                        }
                    });
                }
            }

            g.on('aweload', function (e) {
                if ($(e.target).is(g)) {
                    fopt = o.fltopt;
                    storage[fkey] = JSON.stringify({ model: fopt.model, order: fopt.order });
                }
            });
        });
    }
</script>
<script>
    $(function () {
        // rows/custom render switch
        $('#itemsType').on('change', function () {
            changeItms($('#@gridId').data('o'), $(this).val() === 'true');
        });
    });

    // switch between rows and custom items render
    function changeItms(o, custom) {
        var gridMinHeight = 350;
        var api = o.api;

        if (!o.initRen) {
            o.initRen = {
                ncon: api.ncon,
                ghead: api.ghead,
                renderItem: api.renderItem                
            };
        }

        var custview = {
            // node content add wrap for padding
            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
            ghead: function (g) {
                return api.ceb() + g.c;
            },

            renderItem: function (opt) {
                let { attr, item, ceb, content, indent } = opt;
                const columns = o.columns;
                                
                if (!content) {
                    content = '';
                    for (let col of columns) {                        
                        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>`;
            },
        };

        var tableCon = '<table class="awe-table"><colgroup></colgroup><tbody class="awe-tbody awe-itc"></tbody></table>';
        var itmCon = '<div class="awe-itc cardsViewGrid"></div>';

        if (custom) {
            o.v.find('.awe-tablw').html(itmCon);
            api = $.extend(api, custview);
            // ignore columns width for grid content
            o.syncon = 0;

            // no alt rows
            o.alt = 0;

            // min height
            o.h = 0;
            o.mh = gridMinHeight;
        } else {
            o.v.find('.awe-tablw').html(tableCon);
            api = $.extend(api, o.initRen);
            o.syncon = 1;
            o.alt = 1;
            o.h = gridMinHeight;
        }

        o.api.initLayout();
        o.api.render();
    }
</script>

<style>
    .frowpnl {
        padding: 1em 0;
    }

        .frowpnl label {
            vertical-align: middle;
            max-width: 20em;
        }
</style>

public IActionResult DinnersFilterGrid(GridParams g, DinnerFilterPrm filter)
{
    var query = Db.Dinners.AsQueryable();

    var filterBuilder = new FilterBuilder<Dinner>();
    filterBuilder.Query = query;
    filterBuilder.Filter = filter;


    filterBuilder
        .StringFilter("Name")
        .Add("Date", new FilterRule<Dinner>
        {
            Query = o => o.Date.Year == filter.Date,

            GetData = async q =>
            {
                var list = new List<KeyContent>
                {
                    new KeyContent("", "all years")
                };

                var years = (q.Select(o => o.Date.Year).Distinct().ToArray()).OrderBy(o => o);

                list.AddRange(AweUtil.ToKeyContent(years));

                return list.ToArray();
            }
        })
        .Add("Chef", new FilterRule<Dinner>()
        {
            Query = o => o.Chef.Id == filter.Chef,
            GetData = async q =>
            {
                return (q.Select(o => o.Chef).Distinct().ToArray())
                    .Select(o => new KeyContent(o.Id, o.FullName));
            }
        })
        .Add("Meals", new FilterRule<Dinner>
        {
            QueryFunc = () =>
            {
                var ids = filter.Meals;
                var count = ids.Count();
                return itm => itm.Meals.Count(m => ids.Contains(m.Id)) == count;
            },

            GetData = async q =>
            {
                return (q.SelectMany(o => o.Meals).Distinct().ToArray())
                    .OrderBy(o => o.Id)
                    .Select(o => new KeyContent(o.Id, o.Name));
            },

            // get data after querying this time, to filter the meals items as well
            SelfQuery = true
        })
        .Add("Organic", new FilterRule<Dinner>
        {
            Query = o => o.Organic == filter.Organic,

            GetData = async q =>
            {
                var list = new List<KeyContent> { new KeyContent("", "all") };
                list.AddRange(q.Select(o => o.Organic).Distinct()
                    .Select(o => new KeyContent(o, o ? "Yes" : "No")));

                return list.ToArray();
            }
        });

    // apply rules present in forder (touched by the user)
    query = filterBuilder.ApplyAsync().Result;

    var gmb = new GridModelBuilder<Dinner>(query, g)
    {
        KeyProp = o => o.Id,
        Map = DinnerMapToGridModel,
        Tag = filterBuilder.GetGridData()
    };

    return Json(gmb.Build());
}