This is a migrated thread and some comments may be shown as answers.

Kendo UI Grid filter does not work

7 Answers 645 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Alex asked on 30 Aug 2012, 03:15 PM

I have an issue with 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)

...

<div >

</div>

</fieldset>

@{ 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.

It happens at this knockout function

// The following function is only used internally by this default provider.

        // It's not part of the interface definition for a general binding provider.

        'parseBindingsString': function(bindingsString, bindingContext) {

            try {

                var viewModel = bindingContext['$data'];

                var rewrittenBindings = " { " + ko.jsonExpressionRewriting.insertPropertyAccessorsIntoJson(bindingsString) + " } ";

                return ko.utils.evalWithinScope(rewrittenBindings, viewModel === null ? window : viewModel, bindingContext);

            } catch (ex) {

                throw new Error("Unable to parse bindings.\nMessage: " + ex + ";\nBindings value: " + bindingsString);

}

}

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

7 Answers, 1 is accepted

answered on 01 Oct 2012, 02:29 AM

I am getting the same error. Just using a basic Web Grid with remote JSON data. If I use the filter with the non-minified kendo.all and attempt to do a filter on a column than I get the following error.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; Media Center PC 6.0)
Timestamp: Mon, 1 Oct 2012 02:21:54 UTC

Message: Object doesn't support this property or method
Line: 4906
Char: 17
Code: 0
URI: .../Assets/Scripts/libraries/kendo.all.js

Code version is:
kendoui.aspnetmvc.2012.2.913.commercial

jQuery version is

//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Code:

$(document).ready(function () {
var orderDataSource = new kendo.data.DataSource({
pageSize: 10,
transport: {
read: {
url: MyOrdersUrl,
dataType: "json"
}
},
schema: {
data: "d"
}
});
orderDataSource.read();
$("#grid").kendoGrid({
dataSource: orderDataSource,
filterable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [
{ field: "Id" },
{ field: "OrderDate" },
{ field: "DueDate" },
{ field: "Phone" },
{ field: "Type" }
]
});
});

answered on 21 Nov 2012, 09:36 PM

After some additional testing I have come to the conclusion that this issue only occurs when both the 'filterable' and 'columns' properties are declared on the 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

});

answered on 26 Nov 2012, 06:21 PM

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Kendo UI Grid filter does not work

7 Answers, 1 is accepted