Updating grid with value from dropdown sending empty filter in request

2 posts, 0 answers
  1. AsangaM
    AsangaM avatar
    2 posts
    Member since:
    Jan 2015

    Posted 06 Feb 2015 Link to this post

    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.

  2. AsangaM
    AsangaM avatar
    2 posts
    Member since:
    Jan 2015

    Posted 06 Feb 2015 in reply to AsangaM Link to this post

    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.

  3. UI for ASP.NET AJAX banner
Back to Top