Grid Filter styles

[Matt DiPietro]

I've noticed that for some reason when filtering is enabled, any datafields that are numeric have a span tag with 4 different input elements and the textbox is styled with the riInput class, and an inline width of 125px that I can't override (either through CSS or by setting the FilterItemStyle-Width attribute, but every other datatype is just a textbox and a button, styled as rgFilterBox. 

Can someone explain 1) why exactly does it work this way? and 2) how can go about styling the controls that are using the radInput styles without messing with how every other radInput in my application is styled?  Because that seems pretty ridiculous to me.

<!--numeric filter box -->
<TD style="WHITE-SPACE: nowrap">

    <SPAN style="WHITE-SPACE: nowrap" id=tabs_tabExportDetail_rgExportDetail_ctl00_ctl02_ctl03_RNTBF_LineNum_wrapper class="RadInput RadInput_IP">

        <INPUT style="WIDTH: 125px" id=tabs_tabExportDetail_rgExportDetail_ctl00_ctl02_ctl03_RNTBF_LineNum_text class="riTextBox riEnabled" onkeypress="if((event.keyCode == 13 || event.keyCode == 20)){event.returnValue=false; return false;}" alt="Filter LineNum column" type=text name=tabs_tabExportDetail_rgExportDetail_ctl00_ctl02_ctl03_RNTBF_LineNum_text>

        <INPUT style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: -18px 0px 0px -1px; PADDING-LEFT: 0px; WIDTH: 1px; PADDING-RIGHT: 0px; HEIGHT: 1px; VISIBILITY: hidden; OVERFLOW: hidden; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px" id=tabs_tabExportDetail_rgExportDetail_ctl00_ctl02_ctl03_RNTBF_LineNum class=rdfd_ title="" type=text>

        <INPUT style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: -18px 0px 0px -1px; PADDING-LEFT: 0px; WIDTH: 1px; PADDING-RIGHT: 0px; HEIGHT: 1px; VISIBILITY: hidden; OVERFLOW: hidden; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px" id=tabs_tabExportDetail_rgExportDetail_ctl00_ctl02_ctl03_RNTBF_LineNum_Value class=rdfd_ title="" type=text name=tabs$tabExportDetail$rgExportDetail$ctl00$ctl02$ctl03$RNTBF_LineNum>

        <INPUT id=tabs_tabExportDetail_rgExportDetail_ctl00_ctl02_ctl03_RNTBF_LineNum_ClientState type=hidden name=tabs_tabExportDetail_rgExportDetail_ctl00_ctl02_ctl03_RNTBF_LineNum_ClientState autocomplete="off">

        </LINK>

    </SPAN>

    <INPUT id=tabs_tabExportDetail_rgExportDetail_ctl00_ctl02_ctl03_Filter_LineNum class=rgFilter title=Filter onclick='$find("tabs_tabExportDetail_rgExportDetail")._showFilterMenu("tabs_tabExportDetail_rgExportDetail_ctl00", "LineNum", event); return false;' type=submit name=tabs$tabExportDetail$rgExportDetail$ctl00$ctl02$ctl03$Filter_LineNum>

</TD>

 <!--non-numeric filter box -->

<TD style="WHITE-SPACE: nowrap">

    <INPUT id=tabs_tabExportDetail_rgExportDetail_ctl00_ctl02_ctl03_FilterTextBox_ProductNum class=rgFilterBox onkeypress="if((event.keyCode == 13 || event.keyCode == 20)) return false;" alt="Filter ProductNum column" size=10 type=text name=tabs$tabExportDetail$rgExportDetail$ctl00$ctl02$ctl03$FilterTextBox_ProductNum>

    <INPUT id=tabs_tabExportDetail_rgExportDetail_ctl00_ctl02_ctl03_Filter_ProductNum class=rgFilter title=Filter onclick='$find("tabs_tabExportDetail_rgExportDetail")._showFilterMenu("tabs_tabExportDetail_rgExportDetail_ctl00", "ProductNum", event); return false;' value=" " type=submit name=tabs$tabExportDetail$rgExportDetail$ctl00$ctl02$ctl03$Filter_ProductNum>

</TD>

[Daniel]

Depending on the column type, you will get different filter control:
- RadNumericTextBox for GridNumericColumn
- RadMaskedTextBox for GridMaskedColumn
- RadDateTimePicker for GridDateTimeColumn

Our input controls are complex composite components that consist of several input elements.
You can set the width of the filter controls either declaratively or programmatically using the FilterControlWidth property:
Setting Filter Textbox Dimensions/Changing Default Filter Image

As to the last question, you can customize the look and feel of the filter controls this way:

<style type="text/css">
    .rgFilterRow .riTextBox, .rgFilterBox
    {
        background-color: Red !important;
        color: Yellow !important;
    }
</style>

Regards,
Daniel
the Telerik team