This is a migrated thread and some comments may be shown as answers.

Intentionally break/wrap filter after textbox?

1 Answer 48 Views
Grid
This is a migrated thread and some comments may be shown as answers.
TonyG
Top achievements
Rank 1
TonyG asked on 24 May 2012, 10:37 PM
I have a very wide grid with many columns. For many of them the header and data are small but the filter is wide enough to include a textbox, plus the filter icon, plus an extra icon like for a date field.

I'd like to intentionally break these wide filter fields after the textbox so that the entire column width isn't burdened because of the filter.

So:

[textbox] <br/>
{date/time icon + &nbsp; + } [filter icon]

I know there is info available on creating custom filters. I'd like to avoid creating a completely new custom filter (template). I'd rather just get a better handle on styling the default filter for this "simple" purpose.

The TD for filters has an explicit "white-space: nowrap", specifically doing the opposite of what I want. Would a change to CSS class rgFilterRow help here? RadPicker controls are different, more complex.

Is there a better approach to this? Custom FilterTemplate really the way to go when fine tuning like this?

Thanks!

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 29 May 2012, 09:11 AM
Hello Tony,

Thank you for contacting us.

There are two approaches that you could try:
1) Overwrite the white-space: nowrap setting:
.RadGrid .rgFilterRow td
{
    white-space: normal !important;
}

2) Make the filter items auto-resize based on the available space:
<style type="text/css">
    div.RadGrid .rgFilterRow .rgFilterBox
    {
        width: 100%;
    }
      
    div.RadGrid .rgFilterRow td
    {
        padding-right: 30px;
    }
</style>

Let me know if any of the two suggestions helps.

Kind regards,
Tsvetina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
TonyG
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or