Row Filter
Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, the Row Filter is also called Row-Filter Row.
Row-Filter Row
The Row-Filter Row of the DikeGrid enables a textbox for every defined column. To show the Row-Filter Row, we have to provide an input property called allowRowFiltering.
Let us bind the related property from the gridProperties object to display the Row-Filter Row.
Open the Floating Configuration Panel, go to the Filtering group, and click on the Row Filter checkbox.
The following screenshot shows how the Row-Filter Row looks:
Same as the Header, the Row-Filter Row occupies the full horizontal extension of the DikeGrid instance.
The highlighted Row-Filter Row represents only one column definition in the CSS grid layout specification. Therefore, the DikeGrid CSS grid layout will have three template columns when defining columns in all panels of the DikeGrid.
See the Panels' structure for more details.
Inside the Row-Filter Row comes the actual column filters definitions. The Row-Filter Row uses a nested CSS Grid Layout grid.
Changing the Row-Filter Row height
By default, the Row-Filter Row has a height of 55 pixels. Nevertheless, you can change this height by providing a numeric value to the input property called filterRowHeight.
You can also change the height of the Filter-Row Row by providing the Injection Token called FILTER_ROW_HEIGHT.
In the previous code snippet, we added the filterRowHeight property to the DikeGrid instance and was bound to the gridProperties object.
Open the Floating Configuration Panel, go to the Filtering group, and type 80 in the Row-Filter Row Height textbox.
Last updated
