Custom filter not persisting

4 posts, 1 answers
  1. Steve
    Steve avatar
    7 posts
    Member since:
    Jun 2013

    Posted 08 Apr Link to this post

    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>

  2. Answer
    Helen
    Admin
    Helen avatar
    1052 posts

    Posted 12 Apr Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Steve
    Steve avatar
    7 posts
    Member since:
    Jun 2013

    Posted 12 Apr in reply to Helen Link to this post

    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.

  5. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 13 Apr Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready