Clear filter does not trigger refresh

9 posts, 1 answers
  1. Torben
    Torben avatar
    6 posts
    Member since:
    Nov 2017

    Posted 06 Jul 2018 Link to this post

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

     

     

  2. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 10 Jul 2018 Link to this post

    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.
  3. Torben
    Torben avatar
    6 posts
    Member since:
    Nov 2017

    Posted 26 Jul 2018 in reply to Georgi Link to this post

    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 ?

  4. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 27 Jul 2018 Link to this post

    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.
  5. Torben
    Torben avatar
    6 posts
    Member since:
    Nov 2017

    Posted 27 Jul 2018 in reply to Georgi Link to this post

    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.

     

     

     

  6. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 31 Jul 2018 Link to this post

    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.
  7. Torben
    Torben avatar
    6 posts
    Member since:
    Nov 2017

    Posted 01 Aug 2018 in reply to Georgi Link to this post

    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.

  8. Answer
    Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 02 Aug 2018 Link to this post

    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.
  9. Torben
    Torben avatar
    6 posts
    Member since:
    Nov 2017

    Posted 03 Aug 2018 in reply to Georgi Link to this post

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

    it is working now. 

Back to Top