Unable to properly clear FilterPanel using clear button


#1

I’ve got a filter panel that connects to a KendoGrid. The panel has several components which have actions built in: the first SelectField (once a selection is made) triggers an UpdateDataSourceFromSelect on the second select field which (once a second selection is made) triggers an UpdateDataSource on a hierarchy component.

The issue is that upon trying to clear the panel of all data using the clear button, the second and third components (the ones triggered by the actions) refetch data. The other components are properly cleared out.

Is there a way to ensure that these fields get cleared out? I’ve tried using the resetConfig field on the filter panel, but am unable to properly clear the values out.

Any input is much appreciated


#2

Hi Jonathan,
I think it’s a bug in the select field component. It seems like the clear button will not clear any select field at all.
Please file a bug and the UI team will look into it.

For the time being, you can create your own custom clear action to clear every field manually

                query: "$ [data-action='clear']:not('.disabled')",
                trigger: "click",
                action: "[your_custom_action]"

The dispatch function in your custom action:

dispatch: function(component) { // component should be your filterpanel. If it's not, you can do component.findComponent*[your_filterpanel_component_id]"}
    _.each(component.selfAndChildren("Field"), function(c) {
        if (c instanceof C3.view.field.SelectField) {
            c.set('selectedOpt', null);
        } else {
            c.set('value', null);
        }
    }
}
 

Please let me know if it works


#3

Tony,

Thanks for the response. I have two questions on implementing a custom action: is the dispatch function defined in its own file (i.e. within the customCode folder) and do you call it by its pathway (i.e. action: [“customCode.ClearAction”]?

I implemented a fix in the meantime like this and it successfully clears the SelectField, but the Hierarchy component remains populated.

 {
            "query": "$ [data-action='clear']:not('.disabled')",
            "trigger": "click",
            "action": {
                "type": "ClearForm",
                "target": ["SelectFieldName", "HierarchyName"]
            }
        }

Thanks again for your help


#4

So you want to remove all options from the hierarchy dropdown?
You can use follow up actions.

{
    "query": "$ [data-action='clear']:not('.disabled')",
    "trigger": "click",
    "action": {
        "type": "ClearForm",
        "target": ["SelectFieldName"],
        "followUpActions": [
            {
                "action": {
                    "type": "MyPackage.UpdateHierarchy",
                    "componentId": "[your_hierarchy_select_field_component_id]" // e.x. YourFilterPanelComponentId.HierarchyName
                }
            }
        ]
    }
}

in your action file defined within the customCode folder

C3.define("C3.action.MyPackage.UpdateHierarchy", {
    extend: "C3.action.Action",

    config: {
        componentId: null
    },

    dispatch: function(page) { 
        var selectComponentId = this.get("componentId"); 
        var selectField = page.findComponent(selectComponentId);
        var collection = selectField.getData("collection");

        // this one will get all options and remove them from its collection
        collection.remove(collection.get("items"));
    }
}