This is a migrated thread and some comments may be shown as answers.
Clear filter does not trigger refresh
8 Answers 92 Views
This is a migrated thread and some comments may be shown as answers.
Torben
Top achievements
Rank 1
Torben asked on 06 Jul 2018, 11:12 AM

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) {
          
            }
        });
    }

 

 

8 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 10 Jul 2018, 07:29 AM
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



Regards,
Georgi
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Torben
Top achievements
Rank 1
answered on 26 Jul 2018, 11:21 AM

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 ?

0
Georgi
Telerik team
answered on 27 Jul 2018, 07:16 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Torben
Top achievements
Rank 1
answered on 27 Jul 2018, 09:15 AM

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.

 

 

 

0
Georgi
Telerik team
answered on 31 Jul 2018, 06:29 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Torben
Top achievements
Rank 1
answered on 01 Aug 2018, 08:23 AM

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.

0
Accepted
Georgi
Telerik team
answered on 02 Aug 2018, 12:45 PM
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:



Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Torben
Top achievements
Rank 1
answered on 03 Aug 2018, 06:37 AM

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

it is working now. 

Tags
Grid
Asked by
Torben
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Torben
Top achievements
Rank 1
Share this question
or