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

2 posts, 0 answers
  1. Martin Vesely
    Martin Vesely avatar
    10 posts
    Member since:
    May 2009

    Posted 09 Sep Link to this post

    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 !

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 13 Sep Link to this post

    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

    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. Kendo UI is VS 2017 Ready
Back to Top