Grid filtering save filter values

Grid 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 persistFilter custom grid mod.

GridSaveFilters/Index.cshtml

@(Html.Awe().Grid("GridFrow2")
    .Height(390)
    .Reorderable()
    .Resizable()
    .Url(Url.Action("LunchFilterGrid", "GridFilterRowServerSideData"))
    .Mod(o => o.Main().FilterRow().Custom("persistFilter"))
    .Columns(
    new Column { Bind = "Id", Width = 100 }
    .FltFormat("search:"),

    new Column { Bind = "Person" }
    .FltString(),

    new Column { Bind = "Food.Name", ClientFormatFunc = "site.imgFood", MinWidth = 200 }
    .FltDropdownList(new DropdownListOpt { Name = "Food" }.FoodImgItem()),

    new Column { Bind = "Date", Prop = "DateStr", Width = 200 }
    .FltDateOp(),

    new Column { Bind = "Country.Name", Header = "Country" }
    .Flt(valProp: "Country"),                                  

    new Column { Prop = "MealsStr", MinWidth = 200, Header = "Meals", Grow = 1.7 }
    .Flt(valProp: "Meals", type: FilterType.Multiselect), // take filter editor data from frow.Meals

    new Column { Bind = "Chef.FirstName,Chef.LastName", Prop = "ChefName", Header = "Chef" }
    .Flt(valProp: "Chef")))    

<script src="~/lib/awe/js/util/persistFrow.js"></script>

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("txtFood").Placeholder("search for food ...").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.Awe().Grid("Grid1")
    .Mod(o => o.Main())
    .Url(Url.Action("GetItems", "LunchGrid"))
    .Columns(
    new Column { Bind = "Id", Width = 75, Groupable = false, Resizable = false },
    new Column { Bind = "Person" },
    new Column { Bind = "Food.Name", ClientFormatFunc = "site.imgFood", MinWidth = 200 },
    new Column { Bind = "Country.Name", Header = "Country" },
    new Column { Bind = "Date", Width = 120 }.Mod(o => o.Autohide()),
    new Column { Bind = "Location" }.Mod(o => o.Autohide()),
    new Column { Bind = "Chef.FirstName,Chef.LastName", Prop = "ChefName", Header = "Chef" })
    .Reorderable()
    .Resizable()
    .Height(350)
    .Parent("txtPerson", "person")
    .Parent("txtFood", "food")
    .Parent("selCountry", "country"))

Comments