Updating grid with value from dropdown sending empty filter in request

[AsangaM]

Hi all,

I'm evaluating Kendo UI/JSP and currently focusing on grids. I'm trying to replicate the functionality of this example:
Grid / Toolbar template. Server side paging and sorting works. The drop down list loads correctly with the expected values. However, when I select a value from the drop down the request does not contain any values for the filter.

This is the code from my JSP:

<c:url value="/grid/instance/sort" var="transportReadUrl" />
    <c:url value="/grid/status/read" var="statusReadUrl" />
    <kendo:grid name="grid" pageable="true" sortable="true" height="440px">
        <kendo:grid-toolbarTemplate>
            <div class="toolbar">
                <label class="category-label" for="statuses">Show forms by status:</label>
                <kendo:dropDownList name="statuses" optionLabel="All" dataTextField="statusDisplay"
                                    dataValueField="statusId" autoBind="false" change="statusChange">
                    <kendo:dataSource>
                        <kendo:dataSource-transport>
                            <kendo:dataSource-transport-read url="${statusReadUrl}" />
                        </kendo:dataSource-transport>
                    </kendo:dataSource>
                </kendo:dropDownList>
            </div>
        </kendo:grid-toolbarTemplate>
        <kendo:grid-pageable pageSizes="true" refresh="true" buttonCount="3"></kendo:grid-pageable>
        <kendo:grid-sortable allowUnsort="true" mode="multiple" />
        <kendo:dataSource pageSize="10" serverPaging="true" serverSorting="true">
            <kendo:dataSource-transport>
                <kendo:dataSource-transport-read url="${transportReadUrl}" type="POST" contentType="application/json"/>
                <kendo:dataSource-transport-parameterMap>
                    function(options){return JSON.stringify(options);}
                </kendo:dataSource-transport-parameterMap>
            </kendo:dataSource-transport>
            <kendo:dataSource-schema data="data" total="total" groups="data"></kendo:dataSource-schema>
        </kendo:dataSource>
        <kendo:grid-columns>
            <kendo:grid-column title="REF#" field="instanceId" width="100px" filterable="false" />
            <kendo:grid-column title="Submitter" field="owner" width="200px" />
            <kendo:grid-column title="Status" field="status" width="200px"/>
            <kendo:grid-column title="Form" field="shortName" />
        </kendo:grid-columns>
    </kendo:grid>

This is the code from my JavaScript:

function statusChange() {
            var value = this.value(), grid = $("#grid").data("kendoGrid");
            if (value) {
                grid.dataSource.filter({ field: "statusId", operator: "eq", value: parseInt(value) });
            } else {
                grid.dataSource.filter({});
            }
        }

When I inspect the request in Chrome this is all I see:

{"take":10,"skip":0,"page":1,"pageSize":10}

When I inspect the DataSourceRequest object being sent to the controller I can confirm that the filters array inside the filter field is empty.

This thread seems to be related to my issue but I'm not sure how to fix my code accordingly: http://www.telerik.com/forums/kendo-ui-web-grid-search-with-sorting

I've also tried the following based on a different post, but still no luck

function statusChange() {
            var value = this.value(), grid = $("#grid").data("kendoGrid");
            if (value) {
                var filter = {
                    logic  : "and",
                    filters: [
                        {
                            field     : 'statusId',
                            value     : parseInt(value),
                            operator  : 'eq'
                        }
                    ]
                };
            } else {
                var filter = {};
            }
            grid.dataSource.filter(filter);

Any help would be greatly appreciated.

Regards,

Asanga M.

[AsangaM]

I figured out the problem, I hadn't set the serverFiltering property in my dataSource:

ie.

<kendo:dataSource pageSize="10" serverPaging="true" serverSorting="true" serverFiltering="true">

I should have paid more attention to the documentation:

serverFiltering: Boolean (default: false). If set to true the data source will leave the filtering implementation to the remote service. By default the data source performs filtering client-side.