Clear filter does not trigger refresh

[Torben]

Hi,

I have a grid with a remote datasource.

When i click filter it applies the filter to the grid and shows the correct data.

When i click "clear" nothing happens, it does not trigger a refresh ?

serverfiltering is set to false on the datasource if that means anything.

 

code:

datasource:

function setDatasource() {
        _dataSource = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: _crudServiceBaseUrl + "/api/grid/",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    headers: {
                        "RequestVerificationToken": _tokenHeaderValue
                    }
                },
                destroy: {
                    url: function (dataItem) { return _crudServiceBaseUrl + "/api/grid/" },
                    type: "DELETE",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    headers: {
                        "RequestVerificationToken": _tokenHeaderValue
                    }
                },
                parameterMap: function (data, operation) {

                    if (operation !== "read") {
                        return JSON.stringify(data);
                    }
                    else {

                        var itemId = (data.ItemId ? data.ItemId : null);

                        return {
                            ContactId: _contactId,
                            ProjectId: _projectId,
                            SaleId: _saleId,
                            ItemId: (itemId === parseInt(_rootFolderId) ? null : itemId)
                        };
                    }
                }
            },
            schema: {
                model: {
                    id: "ItemId",
                    fields: {
                        ItemId: { type: "number", nullable: false, editable: false },
                        ParentId: { type: "number", nullable: true, editable: true },
                        IsGroup: { type: "boolean", nullable: false, editable: true },
                        AppointmentId: { type: "number", nullable: true, editable: false },
                        DocumentId: { type: "number", nullable: true, editable: false },
                        Company: { type: "string", nullable: true, editable: false },
                        Contact: { type: "string", nullable: true, editable: false },
                        Associate: { type: "string", nullable: true, editable: false },
                        Registered: { type: "date", editable: false },
                        Type: { type: "string", nullable: true, editable: false },
                        Text: { type: "string", validation: { required: true } },
                        IsCompleted: { type: "boolean", editable: false },
                        ContactId: { type: "number", nullable: true, editable: true },
                        ProjectId: { type: "number", nullable: true, editable: true },
                        SaleId: { type: "number", nullable: true, editable: true }
                    }
                }
            },
            serverPaging: false,
            serverFiltering: false,
            serverSorting: false,
            sort: [
                { field: "Registered", dir: "desc" },
                { field: "Text", dir: "asc" }
            ],
            filter: {
                logic: "and",
                filters: getGridFilters()
            }
        });
    }

 

grid:

function initGrid() {
        $grid.kendoGrid({
            dataSource: _dataSource,
            filterable: true,
            sortable: true,
            pageable: false,
            resizable: true,
            height: getWindowHeight(),
            editable: {
                mode: "popup",
                confirmation: false
            },
            noRecords: {
                template: $Resources$.GridNoData
            },
            columns: [
                {
                    title: "Folder",
                    headerTemplate: "<span class=\"far fa-folder\" style=\"padding-right: 7px;\"></span><span id=\"breadcrumbText\"></span><span class=\"float-right\"><label class=\"checkboxHeader\" style=\"padding-right: 7px;\"><input type=\"checkbox\" id=\"toggleDocuments\" name=\"toggleDocuments\"" + getToggleDocuments() + "> " + $Resources$.CheckboxDocuments + "</label><label class=\"checkboxHeader\"><input type=\"checkbox\" id=\"toggleAppointments\" name=\"toggleAppointments\"" + getToggleAppointments() + "> " + $Resources$.CheckboxAppointments + "</label></span>",
                    columns:
                    [{
                        field: "IsCompleted",
                        headerTemplate: "<span class=\"fas fa-check\" aria-hidden=\"true\"></span>",
                        template: $("#checkboxtemplate").html(),
                        width: 34,
                        filterable: false,
                        sortable: false
                    },
                    {
                        field: "Type",
                        template: $("#categorytemplate").html(),
                        headerTemplate: "",
                        width: 34,
                        filterable: false,
                        sortable: false,
                    },
                    { field: "Registered", template: $("#registeredtemplate").html(), headerTemplate: "Date", width: 110 },
                    { field: "Type", headerTemplate: "Type", width: 150 },
                    { field: "Text", template: $("#texttemplate").html() },
                    { field: "Contact" },
                    { field: "Associate", headerTemplate: "Associate", width: 150 }]
                }
            ],
            dataBound: function (e) {

            }
        });
    }

 

 

[Georgi]

Hi Torben,

I have created a small sample with a grid bound to remote data with client operations. I have tested the described behavior - to filter and then to clear the filter, but it works as expected.

Below you will find the sample I used for testing. Please examine it and let me know what I am missing

• https://dojo.telerik.com/eLOCiMoC

Regards,
Georgi
Progress Telerik

[Torben]

Thanks for the example, it looks very much like my code.

I can't get it to work, is there any way to see if the Clear event is triggered ?

[Georgi]

Hello Torben,

The filter is cleared within the reset event handler of the form.

that.form
    .on("reset" + NS, proxy(that._reset, that));

Therefore a possible solution to check whether the clear is called is to attach a handler to the reset event of the form in the filter menu and verify that the handler is called.


Regards,
Georgi
Progress Telerik

[Torben]

Hello again,

i tried adding the following to the grid options:

            filter: function (e) {
                if (e.filter == null) {
                    console.log("filter has been cleared");
                }
            }

when i click clear "filter has been cleared" is written to the console, but the grid does not reload.

I don't get any errors or anything.

 

 

 

[Georgi]

Hello Torben,

Thanks for the update.

It will be hard to pinpoint the cause of the issue with the current information.

Having said that, sharing a demo that clearly replicates the issue would definitely help us fully understand the case and we will be able to provide further assistance to the best of our knowledge.

Thanks in advance for your cooperation.


Regards,
Georgi
Progress Telerik

[Torben]

Hello again,

I have made an example here:

https://dojo.telerik.com/OVeseMiQ

where you can see the behavior, and maybe pinpoint the problem.

thanks.

[Georgi]

Hi Torben,

Thanks for the sample.

I have investigated it and noticed that HierarchicalDataSource data source is used. However, the HierarchicalDataSource is designed for hierarchical structures as the Kendo TreeList.

Once standard data source is used the filtering works as expected:

• https://dojo.telerik.com/OVeseMiQ/2

Regards,
Georgi
Progress Telerik

[Torben]

thanks, i changed it to a grid control earlier on, and didn't think about changing the datasource.

it is working now.