Jsgrid: [question] How do I initially hide the filter row?

[velis74]

When I use filtering: true, the grid automatically shows the filtering row.

I would like it to be hidden by default and only shown when I click the filtering icon (same behaviour as is implemented for insert row).

Is this supported? What option do I have to set?

[tabalinas]

Indeed this behavior is defined in the control field (for filtering row to be visible by default and for inserting row to be hidden).

The easiest way is to add this function into the control field config:

_createFilterSwitchButton: function() {
    return this._createOnOffSwitchButton("filtering", this.searchModeButtonClass, false);
},

Or you can simulate click on the filtering switch button right after grid creation.

[velis74]

I have determined that this approach does not work. In fact, this is not even supported in jsGrid. There can only be one button in the header row, either 'insert' or 'filter', but never both. Also, _createModeSwitchButton function makes sure that exactly one of them is active at any one time.

Just FYI, I will solve this another way.

[tabalinas]

Not really, if you turn off inserting, everything should work (you were not saying that you need both - inserting and filtering).
Moreover it's not right, saying that it's not supported by jsgrid, because grid supports any custom fields, so you can define one working for you. It's just not out-of-box behavior of the control field.

[sunlin7]

Actually, I found follow code can do create a filter button on head and didn't show the filter row until user click on the filter button:

{ type: "control",
    headerTemplate: function() {
        return this._createOnOffSwitchButton("filtering", this.searchModeButtonClass, false);
    }
}

[KarloX2]

Hello!
I read thru this thread but the proposed solutions do not work for me.

After adding these lines to the control field config

_createFilterSwitchButton: function() {
    return this._createOnOffSwitchButton("filtering", this.searchModeButtonClass, false);
},

The filter row is still visible by default. The only difference is that I now must click twice on the filter icon in the header to make the filter row disappear.

How can I really make the filter row invisible after loading?

Update: I managed to hide the filter row by simulating a click on its filter button, but I'm still wondering if there's a better way.

Thanks!

[tabalinas]

Indeed, one line is missing:

// turn off filtering right after grid initialization
$("#jsGrid").jsGrid("option", "filtering", false); 

Here is the working fiddle:
https://jsfiddle.net/tabalinas/23j4pgp9/

[KarloX2]

Works perfectly! Thank you!!

[tabalinas]

@KarloX2: you are welcome!

[ragerory]

@tabalinas - looking at your above fiddle, if you add inserting, it shows inserting and negates the filtering button at the top.

How do you get both?

[ragerory]

I found out how to make it have both, however, the filtering isn't working out of the box like the way it does on our other screens. On one screen, we have just filtering (no insert), so, filtering: true works fine as expected.

With the new screen, we have a need to have both insert and filter. When I click on the filter icon, it simply removes the data set. Clear filter button doesn't work either on this - not sure why. Could you look to see where the issue might be?

           name: "control",
            type: "control",
            editButton: true,
            deleteButton: false,
            headerTemplate: function () {
                var grid = this._grid;
                var isInserting = grid.inserting;

                if (window.isMgr) {
                    var $insertButton = $("<input>").attr("type", "button").prop("title", "Add Record")
                        .addClass([this.buttonClass, this.modeButtonClass, this.insertModeButtonClass].join(" "))
                        .on("click",
                            function () {
                                    $('#mrcGrid').jsGrid('fieldOption', 'Comments', 'visible', isInserting);
                            });

                    var $filterButton = $("<input>").attr("type", "button").prop("title", "Filter Records")
                        .addClass([this.buttonClass, this.modeButtonClass, this.searchModeButtonClass].join(" "))
                        .on("click", function () {
                                $('#mrcGrid').jsGrid('clearInsert');
                                grid.option("filtering", true);
                            });

                    var result = [$insertButton, $filterButton];
                    return result;
                }
            }

[jeremylanger]

In my case, I didn't want to show the "control" column, so I needed a way to toggle the filtering from an external button. Here's the onclick function to toggle this filter:

function toggleFilter() {
    $("#jsGrid").jsGrid("option", "filtering", !$("#jsGrid").jsGrid("option", "filtering"));
}