Angular Swapping Filter and Clear Buttons in Grid Filter Menu

New to Kendo UI for Angular? Start a free 30-day trial

Environment

Product

Progress® Kendo UI for Angular Grid

The Grid filter menu has its Filter action button positioned on the left and the Clear button on the right. The goal is to swap the positions of these buttons by placing the Clear button on the left and the Filter button on the right, without making any other changes to the filter menu.

This Knowledge Base article also answers the following questions:

How can I change the order of the Filter and Clear action buttons in the Kendo UI for Angular Grid?
What CSS can adjust the positioning of the action buttons inside the filter menu of the Kendo UI for Angular Grid?
Is it possible to customize the layout of the filter menu action buttons in the Kendo UI for Angular Grid?

Solution

To swap the positions of the Filter and Clear buttons in the filter menu of the Kendo UI for Angular Grid, use one of the following approaches:

Setting the Direction of the Buttons
Adjusting the Order of the Buttons

Setting the Direction of the Buttons

To reverse the order of the Filter and Clear buttons, use the following selector and set the value of the CSS flex-direction property to row-reverse.

css

.k-filter-menu-container .k-actions {
    flex-direction: row-reverse;
}

The following example demonstrates how to adjust the direction of the filter menu action buttons.

Change Theme

Theme

Loading ...

Adjusting the Order of the Buttons

Alternatively, you can target the Filter button directly using the following CSS selector and modify its order property:

css

.k-filter-menu-container .k-actions .k-button.k-button-solid-primary{
    order: 1;
}

The following example showcases a possible approach for changing the order of the filter menu action buttons.