
Kevin Price
Top achievements
Rank 1
Kevin Price
asked on 19 Mar 2010, 06:19 PM
I have a page with a RadGrid that works PERFECT! Only problem is the CSS for the grid seems to hide the filter buttons unless the window is maximized - anyway around this?
5 Answers, 1 is accepted
0
Accepted
Hello Kevin,
It seems that you are using a 100% wide RadGrid, which resizes together with the browser window. In this case the filtering icons may be clipped if the column widths become too small. In such cases you have two options:
1. Enable RadGrid scrolling and set pixel column widths, so that the RadGrid control resizes, but the columns do not.
2. Allow the filtering controls to resize in real time
http://www.telerik.com/community/code-library/aspnet-ajax/grid/how-to-make-radgrid-filtering-controls-resize-together-with-the-columns.aspx
Greetings,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
It seems that you are using a 100% wide RadGrid, which resizes together with the browser window. In this case the filtering icons may be clipped if the column widths become too small. In such cases you have two options:
1. Enable RadGrid scrolling and set pixel column widths, so that the RadGrid control resizes, but the columns do not.
2. Allow the filtering controls to resize in real time
http://www.telerik.com/community/code-library/aspnet-ajax/grid/how-to-make-radgrid-filtering-controls-resize-together-with-the-columns.aspx
Greetings,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0

Marcel
Top achievements
Rank 1
answered on 30 Apr 2014, 10:45 AM
Hello,
I am struggling with the same problem.
The code in the sample has some drawbacks. The filter button still gets clipped when the width of the column is smaller then 115 pixels. There is an large whitespace for columns that are extra wide. I would be nice to see that the filter button is always visible and the filter control takes up the rest of the space.
Perhaps this could be done with negative margins, but I have not figured this out yet.
Any thoughts on how to achieve this?
Regards,
Marcel
I am struggling with the same problem.
The code in the sample has some drawbacks. The filter button still gets clipped when the width of the column is smaller then 115 pixels. There is an large whitespace for columns that are extra wide. I would be nice to see that the filter button is always visible and the filter control takes up the rest of the space.
Perhaps this could be done with negative margins, but I have not figured this out yet.
Any thoughts on how to achieve this?
Regards,
Marcel
0
Hello Marcel,
To resolve the problem with the filter button you can try setting FilterControlWidth property of the grid columns to some pixel value, as in the following demo:
http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/filtering/basic-filtering/defaultcs.aspx
Regards,
Pavlina
Telerik
To resolve the problem with the filter button you can try setting FilterControlWidth property of the grid columns to some pixel value, as in the following demo:
http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/filtering/basic-filtering/defaultcs.aspx
Regards,
Pavlina
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0

Marcel
Top achievements
Rank 1
answered on 30 Apr 2014, 04:48 PM
Hello Pavlina,
Thanks for your reply. As I understand it, FilterControlWidth can only be used if you have fixed column width. I have a grid with resizable columns. The width is stored in a database and can be customized by the user.
I have applied the following settings to make resizing possbile:
grid.ClientSettings.Resizing.AllowColumnResize = true;
grid.ClientSettings.Resizing.ResizeGridOnColumnResize = false;
grid.ClientSettings.Resizing.ClipCellContentOnResize = true;
grid.ClientSettings.Resizing.AllowResizeToFit = true;
Resizing works great, but the filter button acts funny. It not alway visible and the filter textbox could be a lot wider when the width of the column is big.
I have been fooling around and created the following fiddle: http://jsfiddle.net/3EeF8/7/
I would like something similar for the filter row. No matter the size of the browser, the button is always visible and the texbox gets all available space.
Regards,
Marcel
Thanks for your reply. As I understand it, FilterControlWidth can only be used if you have fixed column width. I have a grid with resizable columns. The width is stored in a database and can be customized by the user.
I have applied the following settings to make resizing possbile:
grid.ClientSettings.Resizing.AllowColumnResize = true;
grid.ClientSettings.Resizing.ResizeGridOnColumnResize = false;
grid.ClientSettings.Resizing.ClipCellContentOnResize = true;
grid.ClientSettings.Resizing.AllowResizeToFit = true;
Resizing works great, but the filter button acts funny. It not alway visible and the filter textbox could be a lot wider when the width of the column is big.
I have been fooling around and created the following fiddle: http://jsfiddle.net/3EeF8/7/
I would like something similar for the filter row. No matter the size of the browser, the button is always visible and the texbox gets all available space.
Regards,
Marcel
0
Hi Marcel,
The Fiddle example seems to be working as expected. In order to incorporate this HTML you can use Filter Templates. You can check the following demo for more information how to achieve this - http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/filtering/filter-templates/defaultcs.aspx
Another option is to set the FilterControlWidth="90%". This will not cover the whole content width, but will surely work with small sizes as well as with large.
Hope this helps.
Regards,
Niko
Telerik
The Fiddle example seems to be working as expected. In order to incorporate this HTML you can use Filter Templates. You can check the following demo for more information how to achieve this - http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/filtering/filter-templates/defaultcs.aspx
Another option is to set the FilterControlWidth="90%". This will not cover the whole content width, but will surely work with small sizes as well as with large.
Hope this helps.
Regards,
Niko
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.