Grid filtering save filter values

Filter row, save filters to session storage

Saving the filter row editors values to session storage, after page refresh the filters will remain the same.
Using Persistence(Persistence.Session) will save the filter row editors values to session storage.

GridSaveFilters/Index.cshtml

@(Html.Awex().Grid<Lunch>("GridFrow2")
    .Main()        
    .Mod(o => o.FilterRow())
    .Url(Url.Action("LunchFilterGrid", "GridFilterRowServerSideData"))        
    .Persistence(Persistence.Session)
    .Height(390)
    .Columns(b => {
        b.Add(o => o.Id, new Column { Width = 100 }
            .FltFormat("search:"));

        b.Add(o => o.Person);            

        b.Add(o => o.Dish.Name, new Column { ClientFormatFunc = "site.imgDish", MinWidth = 200 }
            .Flt(type: FilterType.DropdownList));

        b.Add(o => o.Date, new Column { Width = 200 });

        b.Add(o => o.Country.Name, new Column { Header = "Country" });

        b.Add(o => o.Meals.Select(m => m.Name), new Column { MinWidth = 200, Grow = 1.7 })
            .Flt(type: FilterType.Multiselect);

        b.Add(o => new { o.Chef.FirstName, o.Chef.LastName }, new Column { Header = "Chef" });
    })
)

Filter grid using parent controls, save filters to session storage

Saving grid filters to the sessionStorage, you can change the filters and refresh the page, the filters will remain the same.
Instead of sessionStorage you could use localStorage or use ajax to save the filters on the server in a database.

GridSaveFilters/Index.cshtml

<div class="bar" id="bar1">
    @Html.Awe().TextBox("txtPerson").Placeholder("search for person ...").Value("Le").CssClass("searchtxt")
    @Html.Awe().TextBox("txtDish").Placeholder("search for dish ...").CssClass("searchtxt")
    @Html.Awe().DropdownList(new DropdownListOpt{ Name = "selCountry", Url = Url.Action("GetCountries", "Data")})
    <button type="button" class="awe-btn" id="btnClearFlt"> Clear filters </button>
</div>

<script>
    $(function () {
        var key = "Grid1-Flt";
        var cont = $('#bar1');

        // load filters
        var strval = sessionStorage[key];
        var fltData = strval ? JSON.parse(strval) : {};

        cont.find('input[name]').each(function () {
            var el = $(this);
            var name = el.attr('name');
            el.val(fltData[name]).trigger('change');
        });

        // save filter
        cont.on('change', function (e) {
            var el = $(e.target);
            var name = el.attr('name');
            if (!name) return;
            fltData[name] = el.val();
            sessionStorage[key] = JSON.stringify(fltData);
        });

        // clear filters
        $('#btnClearFlt').click(function () {
            var go = $('#Grid1').data('o');
            go.load = 0; // pause grid loading
            cont.find('input[name]').each(function () {
                $(this).val('').trigger('change');
            });
            go.load = 1;
            go.api.load();
        });
    });
</script>

@(Html.Awex().Grid<Lunch>("Grid1")
    .Main()
    .Url(Url.Action("GetItems", "LunchGrid"))
    .Columns(b => {
        b.Add(o => o.Id, new Column { Width = 75 });
        b.Add(o => o.Person);
        b.Add(o => o.Dish.Name, new Column { ClientFormatFunc = "site.imgDish", MinWidth = 200 });
        b.Add(o => o.Country.Name, new Column { Header = "Country" });
        b.Add(o => o.Date, new Column { Width = 120 }.Mod(o => o.Autohide()));
        b.Add(o => o.Location).Mod(o => o.Autohide());
        b.Add(o => new { o.Chef.FirstName, o.Chef.LastName }, new Column { Header = "Chef" });
    })
    .Persistence(Persistence.Session)
    .Height(350)
    .Parent("txtPerson", "person")
    .Parent("txtDish", "dish")
    .Parent("selCountry", "country"))

Comments