Kendo MVC grid + presist state + column Filterable type MultiCheckbox problem

[Jana Vichtova]

Hello,

i have problem with kendo MVC Grid with presist state. After I load grid setting from localStorage (Grid is grouped by Subject column) and click on filter icon in column which has enabled MultiCheckbox filtering (DP or ZS) , I got this error in js console:

VM643:3 Uncaught ReferenceError: DruhPrijmu_Code is not defined(anonymous function)@ VM643:3render @ kendo.all.js:175proxy @ jquery-1.10.2.js:841createCheckBoxes @ kendo.all.js:34934refresh @ kendo.all.js:34901proxy @ jquery-1.10.2.js:841trigger @ kendo.all.js:124_process @ kendo.all.js:6882success @ kendo.all.js:6627success @ kendo.all.js:6555n.success @ kendo.all.js:5547fire @ jquery-1.10.2.js:3062fireWith @ jquery-1.10.2.js:3174done @ jquery-1.10.2.js:8249callback @ jquery-1.10.2.js:8792XMLHttpRequest.send (async)send @ jquery-1.10.2.js:8720ajax @ jquery-1.10.2.js:8150read @ kendo.all.js:5549read @ kendo.aspnetmvc.js:250(anonymous function) @ kendo.all.js:6552_queueRequest @ kendo.all.js:6742read @ kendo.all.js:6545query @ kendo.all.js:6925_query @ kendo.all.js:6956sort @ kendo.all.js:7013_click @ kendo.all.js:36725proxy @ jquery-1.10.2.js:841dispatch @ jquery-1.10.2.js:5109elemData.handle @ jquery-1.10.2.js:4780

After this error grid stop work...

This is problem occurs only with multicheckob filtering column.

This is a my sample code:

 

@(Html.Kendo().Grid<Playground.Models.ODU.ODUZaznamViewModel>()
                                .Name("GridODU")
                                .Columns(columns =>
                                {
                                    columns.Bound(item => item.Subjekt_Id).Width(120).Title("ID subjektu");
                                    columns.Bound(item => item.Subjekt_ObchodniNazev).Width(220).Title("Subjekt");
                                    columns.Bound(item => item.DruhPrijmu_Code).Width(120).Title("DP").Filterable(ftb => ftb.Multi(true).Search(true));
                                    columns.Bound(item => item.ZuctovaciSymbol_Code).Width(120).Title("ZS").Filterable(ftb => ftb.Multi(true).Search(true));

                                })
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    // .Batch(false)
                                    .ServerOperation(true)
                                    .Events(events => events.Error("error_handler"))
                                    .PageSize(20)
                                    .Model(model =>
                                    {
                                        model.Id(p => p.ID);
                                    })
                                    .Read(read => read.Action("ODURead", "Home"))
                                   )
                                .Scrollable()
                                .ColumnMenu()
                                .Events(x => x.DataBound("saveState"))
                                .Groupable()
                                .Filterable() // ftb => ftb.Mode(GridFilterMode.Row)
                                              // .Events(e => e.ColumnMenuInit("columnMenuInit"))
                                .Reorderable(x => x.Columns(true))
                                .Pageable() // Enable paging
                                .Sortable() // Enable sorting
                                .Resizable(resize => resize.Columns(true))
)


<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    function saveState(e) {
        e.preventDefault();
        localStorage["kendo-grid-options"] = kendo.stringify($("#GridODU").data("kendoGrid").getOptions());
    };

    $(function (e) {
        var options = localStorage["kendo-grid-options"];
        if (options) {
            $("#GridODU").data("kendoGrid").setOptions(JSON.parse(options));
        } else {
            $("#GridODU").data("kendoGrid").dataSource.read();
        }
    });
</script>

 

Model:

namespace Playground.Models.ODU
{
    public class ODUZaznamViewModel
    {
        public long ID { get; set; }
        public virtual int Subjekt_Id { get; set; }
        public string Subjekt_ObchodniNazev { get; set; }
        public virtual string DruhPrijmu_Code { get; set; }
        public virtual string ZuctovaciSymbol_Code { get; set; }
    }
}

 

It is a bug ?

The problem detected in this versions of KENDO

Kendo UI version: "2016.1.412"

Kendo UI version: "2016.2.714"

.

Thanks for help !

[Ianko]

Hello Martin,

 

The described behavior is due to the enabled ServerOperation. You can fix that by disabling it. 

 

...

.ServerOperation(true)

...

 

 

The reason for this behavior is that by enabling the server operation the filtering widgets expects server-side binding to be applied. However, when loading the state from the client, Kendo Grid operates on the client and it is client-side binding that takes effect. Due to that, the JS error is raised. 

 

In such a scenario it is suggested to use client-side operation, i.e., disable the ServerOperation feature.

 

Regards,

Ianko

Telerik by Progress