Custom filter not persisting

[Steve]

Using the MVC KendoGrid I've created a grid with custom filtering on some columns. Following the demo at http://demos.telerik.com/aspnet-mvc/grid/persist-state, I added code to save and load the state. I find that after saving then loading, I've lost the custom filters. Comparing the options object when saving and then when loading confirms this:

Column 0 when saving:

columns:Array[41]
  0:Object
    encoded:true
    field:"ShippingUnit"
    filterable:Object
      ui:shippingUnitFilter(element)
      __proto__:Object

Column 0 when loading:

columns:Array[41]
  0:Object
    encoded:true
    field:"ShippingUnit"
    filterable:Object
      __proto__:Object

Notice the ui element is missing on the load. Upon further research, I found it's the stringify function during save that drops the ui: element Any workarounds? Any examples of where this works? 

Here's the code:

@model Panther.Portal.Areas.Inventory.Models.InventoryVM
@{ViewBag.Title = "Inventory";}
@using Kendo.Mvc.UI

<link href="~/Content/kendo/2016.1.226/kendo.default.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2016.1.226/kendo.common.min.css" rel="stylesheet" />



@section Scripts {
    <script src="~/Scripts/kendo/2016.1.226/kendo.all.min.js"></script>
    <script src="~/Scripts/kendo/2016.1.226/kendo.aspnetmvc.min.js"></script>
    <script src="~/Scripts/kendo/2016.1.226/kendo.grid.min.js"></script>
    <script src="~/Scripts/kendo/2016.1.226/kendo.all.min.js"></script>
}


<div class="box wide">
    <a href="#" class="k-button" id="save">Save State</a>
    <a href="#" class="k-button" id="load">Load State</a>
</div>

<div id="KendoGrid">
    @(Html.Kendo().Grid(Model.InventoryList)
        .Name("grid")
        //.ColumnMenu()
        .Columns(columns =>
        {
            columns.Bound(c => c.ShippingUnit).Title("Shipping Unit").Filterable(filterable => filterable.UI("shippingUnitFilter"));
            columns.Bound(c => c.InventoryStatus).Title("Inventory Status").Filterable(filterable => filterable.UI("inventoryStatusFilter"));
            columns.Bound(c => c.ProductId).Title("Product ID").Filterable(filterable => filterable.UI("productIDFilter"));
            //More Columns...
        })
        .Resizable(resize => resize.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
        .Sortable()
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple))
        .Filterable(filterable => filterable
            .Extra(false)
            .Operators(operators => operators.ForString(str => str.Clear()))
            )
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("FilterMenuCustomization_Read", "Inventory"))
            .PageSize(15)
        )
    )
</div>



<script type="text/javascript">
    $(function () {
        var grid = $("#grid").data("kendoGrid");

        $("#save").click(function (e) {
            e.preventDefault();
            var opt = grid.getOptions();
            var foo = kendo.stringify(grid.getOptions(), ['week', 'month']);
            var bar = JSON.parse(foo);
            localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
        });

        $("#load").click(function (e) {
            e.preventDefault();
            var options = localStorage["kendo-grid-options"];
            if (options) {
                var foo = JSON.parse(options);
                grid.setOptions(JSON.parse(options));
            }
        });
    });

    function shippingUnitFilter(element) {
        element.kendoAutoComplete({
            dataSource: {
                transport: {
                    read: "@Url.Action("FilterMenuCustomization_ShippingUnits")"
                }
            },
            optionLabel: "--Select Value--"
        });
    }

    function inventoryStatusFilter(element) {
        element.kendoDropDownList({
            dataSource: {
                transport: {
                    read: "@Url.Action("FilterMenuCustomization_InventoryStatus")"
                }
            }
        });
    }



</script>

[Helen]

Hello Steve,

Probably you may find helpful the forum thread, ,which discusses a similar topic:

http://www.telerik.com/forums/remember-kendo-grid-state-%28current-page-current-sort-filter-selected-record-etc%29-while-loading-back-grid

If it doesn't help could you please open a support ticket and send us a runnable sample, which demonstrates the issue to examine it locally?

Regards,
Helen
Telerik

[Steve]

Thank you Helen. I found that same posting earlier. It went a long ways towards helping me save only certain elements of the options. I found a workaround for the stringify issue by levering the JSONfn plugin. 

Regards,
Steve.

[Helen]

Hi Steve,

We are happy to hear that you manage to workaround the problem. Don't hesitate to contact us if other issues pop up.

Regards,
Helen
Telerik