Kendo UI grid filter does not work

[Alex]

I have an issue with knockout binding in my web page that contains Kendo UI grid. In this web page, I have a top portion that uses Knockout. The bottom part of the page is a Kendo UI Grid which is from another partial page (RenderPartial)

...

<fieldset >

<div >

<span id="MyId" class="uneditable-input koeditable" data-bind="text: Name"></span>

</div>

</fieldset>

<section>

@{ Html.RenderPartial("DetailEntries", new ViewDataDictionary {{ "Id", @ViewBag.Id } });}

</section>

DetailEntries is the partial page which is a Kendo ui grid with Filterable() option.

I got an error when rendering this page.

Error: 

Uncaught Error: Unable to parse bindings. 

Message: ReferenceError: filters is not defined; 

Bindings value: value: filters[0].operator  

bindingsString : "value: filters[0].operator"

bindingContext: ko.bindingContext which contains the ViewModel for my top portion.

If I remove the filterable option from the Kendo UI grid, the page renders without error.

Please help.

Alex

[rpn]

Are you using KO bindings for the Kendo Grid or you just have one on the page?  Can you put something in jsFiddle or maybe show what your final HTML looks like?

[Alex Hien Nguyen]

I just have the knockout binding for my top part (i.e Name)

<fieldset >

<div >

<span id="MyId" class="uneditable-input koeditable" data-bind="text: Name"></span>

</div>

</fieldset>

I do not use Knockout binding for the grid. 

Thanks,

Alex

[rpn]

Can you possibly demonstrate your issue in a jsFiddle?  Here is one that already references the scripts that you should need: http://jsfiddle.net/rniemeyer/S9SFm/. 

[lmorg...@gmail.com]

I have this exact same problem, in a very similar scenario.

Knockout Bindings setup on a jQuery dialog I launch from the page, and a Kendo UI grid configured on the page. I am receiving the exact same error.

Works great with 'filterable: false' on the Kendo UI grid....but when turning on, I get the error.

Anyone ever figure this out?

[alex.h...@gmail.com]

After covert the grid to javascript binding, I do not have any issues with filter.

Alex

Sent from my iPad

[lmorg...@gmail.com]

Alex,

I really appreciate your help!

My grid is already declared in javascript (not the HTML table declaration).

I just did some more testing and have found the issue to only exist when both 'filterable: true' and the columns are defined....I will have no issue if I omit the column declaration from the grid....Do you declare columns in your grid declaration?

Could you please post your grid declaration?

Here is my working declaration:

$('#grid').kendoGrid({

                filterable: true

            });

Here is my non-working declaration:

$('#grid').kendoGrid({

                columns: [

                    {

                        field: "Id"

                    },

                    {

                        field: "Name"

                    }

                ],

                filterable: true

            });

Thanks again!

(RPN....If I still am unable to resolve this soon, I will be throwing it in a fiddle for you to take a look at, Thanks!...)

[lmorg...@gmail.com]

Actually found to be only having this issue when both declaring 'filterable: true' and having columns defined who's 'Field' properties are set......

Here is my working declaration:

$('#grid').kendoGrid({

                columns: [

                    {

                        //field: "Id",

                        title: "Id_Title"

                    },

                    {

                        //field: "Name",

                        title: "Name_Title"

                    }

                ],

                filterable: true

            });

Here is my non-working declaration:

$('#grid').kendoGrid({

                columns: [

                    {

                        field: "Id",

                        title: "Id_Title"

                    },

                    {

                        field: "Name",

                        title: "Name_Title"

                    }

                ],

                filterable: true

            });

I think if you could post your grid declaration, Alex, it would really help me.

Again, I appreciate all of your help with this!

Thanks!

[lmorg...@gmail.com]

My issue was that I was applying the knockout bindings after the kendo grid was rendered. And then on top of that, I was applying the knockout bindings to the entire page not just the HTML for my dialog....so knockout was scanning (and finding) my grid for 'data-bind' attributes, choking when trying to evaluate the binding expressions as there was no appropriate context. As these 'data-bind' attributes were being generated with the HTML by kendo to show the filter menus of the kendo grid...

To resolve, I simply only apply the knockout bindings to the HTML for my dialog (which does not include any kendo widgets)...

In future I plan on reading up on the kendo-knockout.js plug-in and using this plugin in any place where I plan to have kendo UI controls in an area where knockout binding is applied.