How to contorl to display or not a textbox and selectbox on toolbar

[Hidehiro Ishii]

Hi team,

I want to change between local filter and local head filter with [Toggle filter row] button.
So I want to control to display or not a button which are textbox(Filter:) and selectbox(filterColumn,filterCondition) on toolbar.
If I can do,please let me show sample code.

Regards,
Koichi

[paramvir]

It would be more clear if you share a screenshot.

This example https://paramquery.com/pro/demos/filter_header_local

has toggle filter row button and it let you change the Shipping Region condition via a custom UI ( checkbox in the example ).

[Hidehiro Ishii]

Hi Team,

I will show a screenshot image what i want.
Please check attached file.
If you have any question,please let me know.

Regards,
Koichi

[paramvir]

Please check this. It's created with help of jquery toggle API.

https://plnkr.co/edit/70lj3ewAHoawVTV7ySbQ?p=preview

[Hidehiro Ishii]

Hi Team,

Thank you for your reply.
According to your sample code, I can control to display or not display these contents.
But I have a new question.
I want to clear a content of textbox with local filter mode when a mode of filter will change local header filter to local filter.
Because a content of textox with local filter remain after a filter mode changed.
I will show my sample code as follows.
Please let me know how to solve this problem.

Regards,
Koichi

[Sample code]

{
    type:'button',
    label: 'Toggle filter row',
    listener: function() {
        if (this.option('filterModel.header')) {
            this.reset({filter: true});
            this.option('filterModel.header', false);
            this.option('filterModel.mode', 'OR');
            this.refresh();
        }
        else {
            this.reset({filter: true});
            this.option('filterModel.header', true);
            this.option('filterModel.mode', 'AND');
            this.refresh();
        }
        this.toolbar().find(".toggle").toggle();
    }
},
               
{
    type: 'textbox',   <-- I want to clear a content of this textbox when a filter mode will change from local header filter mode to local filter mode.
    label: 'Filter: ',
    attr: 'placeholder="Enter your keyword"',
     cls: "filterValue toggle",
     listener: { keyup: filterhandler }
},

[paramvir]

Textbox value can be cleared with val()

Code: [Select]

  this.toolbar().find(".filterValue").val("")

Hope it helps.

[Hidehiro Ishii]

Hi Team,

Thank you for your very quick response!
Your answer is so good !
So my question is clear.
Please close this case.

Regards,
Koichi