Hi,
I'm trying to style the Filter TextBox of the RadGrid to ensure that it is sized dynamically based on the column size, as the user can resize the columns at run time. For this purpose, i'm overriding the .rgFilterBox class.
But, this override is only working on the Columns that are of 'String' datatype and not on the columns that are of Int32 or DateTime datatype. Here is the HTML generated.
I noticed that the Filter TextBoxes of Numeric and Date Columns do not use the .rgFilterBox style class. I tried overriding .riTextBox class, but that does not work.
Please suggest, how can I apply Width:60% style on Numeric and DateTime column FilterTextBoxes.
Thanks,
Nishant
I'm trying to style the Filter TextBox of the RadGrid to ensure that it is sized dynamically based on the column size, as the user can resize the columns at run time. For this purpose, i'm overriding the .rgFilterBox class.
.RadGrid_Office2010Silver .rgFilterBox{ width: 60%;}But, this override is only working on the Columns that are of 'String' datatype and not on the columns that are of Int32 or DateTime datatype. Here is the HTML generated.
<td style="white-space: nowrap;"> <span style="width: 160px;" id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RNTBF_ExecutionID_wrapper" class="riSingle RadInput RadInput_Office2010Silver"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RNTBF_ExecutionID" class="riTextBox riEnabled" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$RNTBF_ExecutionID" alt="Filter ExecutionID column" type="text"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RNTBF_ExecutionID_ClientState" name="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RNTBF_ExecutionID_ClientState" value='{"enabled":true,"emptyMessage":"","validationText":"","valueAsString":"","minValue":-70368744177664,"maxValue":70368744177664,"lastSetTextBoxValue":""}' type="hidden" autocomplete="off"> <link class="Telerik_stylesheet" rel="stylesheet" type="text/css" href="/WebResource.axd?d=TXcIPBwelNNJhd9osKEgZ1rgDNwSIT7J2Ywq_SZFmBjIREnAgV5VheKkhOCs164FjgLFqPNP6aBvaYiiUZzm0BGwQKQ1XtI3Dm8uoriG4YmIXRanCztklNPa9nwg92ZHd_DLUedlKO-L5z_rFNC11w2&t=635115496953713232"> <link class="Telerik_stylesheet" rel="stylesheet" type="text/css" href="/WebResource.axd?d=jetM8ByDnMWx_zwPTqqCl79yyZ7gcmoXn8h0lFYvJHGNeEk4kCfx7VdkPW_TVdpSyLhbpArTtkVE_E99Xejj6hI4bR7BDPBYcv7mQNFSj21lZA3EsuAQcyYz_GZzehcJNOdtbfBtakXnOhdagt8MAAFcS3ZAlYsKjaN4uru9gps8OQNz2sHvHXKc2rAhMnoE0&t=635115496249932861"> </span> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_Filter_ExecutionID" class="rgFilter" title="Filter" onclick="$find("ctl00_MainContent_ContentGrid")._showFilterMenu("ctl00_MainContent_ContentGrid_ctl00", "ExecutionID", event); return false;__doPostBack('ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_ExecutionID','')" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_ExecutionID" value="" type="button"></td><td style="white-space: nowrap;"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_FilterTextBox_ExecutionCode" class="rgFilterBox" onkeypress="if((event.keyCode == 13)) return false;" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$FilterTextBox_ExecutionCode" alt="Filter ExecutionCode column" size="10" type="text"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_Filter_ExecutionCode" class="rgFilter" title="Filter" onclick="$find("ctl00_MainContent_ContentGrid")._showFilterMenu("ctl00_MainContent_ContentGrid_ctl00", "ExecutionCode", event); return false;__doPostBack('ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_ExecutionCode','')" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_ExecutionCode" value=" " type="button"></td><td style="white-space: nowrap;"> <span style="width: 160px;" id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RNTBF_CampaignID_wrapper" class="riSingle RadInput RadInput_Office2010Silver"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RNTBF_CampaignID" class="riTextBox riEnabled" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$RNTBF_CampaignID" alt="Filter CampaignID column" type="text"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RNTBF_CampaignID_ClientState" name="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RNTBF_CampaignID_ClientState" value='{"enabled":true,"emptyMessage":"","validationText":"","valueAsString":"","minValue":-70368744177664,"maxValue":70368744177664,"lastSetTextBoxValue":""}' type="hidden" autocomplete="off"> </span> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_Filter_CampaignID" class="rgFilter" title="Filter" onclick="$find("ctl00_MainContent_ContentGrid")._showFilterMenu("ctl00_MainContent_ContentGrid_ctl00", "CampaignID", event); return false;__doPostBack('ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_CampaignID','')" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_CampaignID" value="" type="button"></td><td style="white-space: nowrap;"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_FilterTextBox_CampaignName" class="rgFilterBox" onkeypress="if((event.keyCode == 13)) return false;" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$FilterTextBox_CampaignName" alt="Filter CampaignName column" size="10" type="text"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_Filter_CampaignName" class="rgFilter" title="Filter" onclick="$find("ctl00_MainContent_ContentGrid")._showFilterMenu("ctl00_MainContent_ContentGrid_ctl00", "CampaignName", event); return false;__doPostBack('ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_CampaignName','')" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_CampaignName" value=" " type="button"></td><td style="white-space: nowrap;"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_FilterTextBox_MarketName" class="rgFilterBox" onkeypress="if((event.keyCode == 13)) return false;" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$FilterTextBox_MarketName" alt="Filter MarketName column" size="10" type="text"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_Filter_MarketName" class="rgFilter" title="Filter" onclick="$find("ctl00_MainContent_ContentGrid")._showFilterMenu("ctl00_MainContent_ContentGrid_ctl00", "MarketName", event); return false;__doPostBack('ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_MarketName','')" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_MarketName" value=" " type="button"></td><td style="white-space: nowrap;"> <div style="width: 85%; display: inline-block;" id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFScheduledStartDate_wrapper" class="RadPicker RadPicker_Office2010Silver"> <input style="margin: 0px 0px -1px -1px; padding: 0px; border: 0px currentColor; width: 1px; height: 1px; overflow: hidden; float: right; display: block; visibility: hidden;" id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFScheduledStartDate" class="rdfd_ radPreventDecorate" title="Visually hidden input created for functionality purposes." name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$RDIPFScheduledStartDate" value="" type="text"> <table style="width: 100%;" class="rcTable rcSingle" cellSpacing="0" summary="Table holding date picker control for selection of dates."> <caption style="display: none;"> RadDatePicker </caption> <thead style="display: none;"> <tr> <th scope="col"></th> </tr> </thead> <tbody> <tr> <td style="width: 100%;" class="rcInputCell"> <span style="width: 100%; display: block;" id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFScheduledStartDate_dateInput_wrapper" class="riSingle RadInput RadInput_Office2010Silver"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFScheduledStartDate_dateInput" class="riTextBox riEnabled" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$RDIPFScheduledStartDate$dateInput" alt="Filter ScheduledStartDate column" type="text"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFScheduledStartDate_dateInput_ClientState" name="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFScheduledStartDate_dateInput_ClientState" value='{"enabled":true,"emptyMessage":"","validationText":"","valueAsString":"","minDateStr":"1900-01-01-00-00-00","maxDateStr":"2099-12-31-00-00-00","lastSetTextBoxValue":""}' type="hidden" autocomplete="off"> </span> </td> <td> <a id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFScheduledStartDate_popupButton" class="rcCalPopup" title="Open the calendar popup." href="#">Open the calendar popup.</a> </td> </tr> </tbody> </table> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFScheduledStartDate_ClientState" name="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFScheduledStartDate_ClientState" value='{"minDateStr":"1900-01-01-00-00-00","maxDateStr":"2099-12-31-00-00-00"}' type="hidden" autocomplete="off"> </div> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_Filter_ScheduledStartDate" class="rgFilter" title="Filter" onclick="$find("ctl00_MainContent_ContentGrid")._showFilterMenu("ctl00_MainContent_ContentGrid_ctl00", "ScheduledStartDate", event); return false;__doPostBack('ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_ScheduledStartDate','')" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_ScheduledStartDate" value="" type="button"></td><td style="white-space: nowrap;"> <div style="width: 85%; display: inline-block;" id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedDeliveryDate_wrapper" class="RadPicker RadPicker_Office2010Silver"> <input style="margin: 0px 0px -1px -1px; padding: 0px; border: 0px currentColor; width: 1px; height: 1px; overflow: hidden; float: right; display: block; visibility: hidden;" id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedDeliveryDate" class="rdfd_ radPreventDecorate" title="Visually hidden input created for functionality purposes." name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$RDIPFExpectedDeliveryDate" value="" type="text"> <table style="width: 100%;" class="rcTable rcSingle" cellSpacing="0" summary="Table holding date picker control for selection of dates."> <caption style="display: none;"> RadDatePicker </caption> <thead style="display: none;"> <tr> <th scope="col"></th> </tr> </thead> <tbody> <tr> <td style="width: 100%;" class="rcInputCell"> <span style="width: 100%; display: block;" id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedDeliveryDate_dateInput_wrapper" class="riSingle RadInput RadInput_Office2010Silver"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedDeliveryDate_dateInput" class="riTextBox riEnabled" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$RDIPFExpectedDeliveryDate$dateInput" alt="Filter ExpectedDeliveryDate column" type="text"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedDeliveryDate_dateInput_ClientState" name="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedDeliveryDate_dateInput_ClientState" value='{"enabled":true,"emptyMessage":"","validationText":"","valueAsString":"","minDateStr":"1900-01-01-00-00-00","maxDateStr":"2099-12-31-00-00-00","lastSetTextBoxValue":""}' type="hidden" autocomplete="off"> </span> </td> <td> <a id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedDeliveryDate_popupButton" class="rcCalPopup" title="Open the calendar popup." href="#">Open the calendar popup.</a> </td> </tr> </tbody> </table> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedDeliveryDate_ClientState" name="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedDeliveryDate_ClientState" value='{"minDateStr":"1900-01-01-00-00-00","maxDateStr":"2099-12-31-00-00-00"}' type="hidden" autocomplete="off"> </div> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_Filter_ExpectedDeliveryDate" class="rgFilter" title="Filter" onclick="$find("ctl00_MainContent_ContentGrid")._showFilterMenu("ctl00_MainContent_ContentGrid_ctl00", "ExpectedDeliveryDate", event); return false;__doPostBack('ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_ExpectedDeliveryDate','')" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_ExpectedDeliveryDate" value="" type="button"></td><td style="white-space: nowrap;"> <div style="width: 85%; display: inline-block;" id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFPromiseDate_wrapper" class="RadPicker RadPicker_Office2010Silver"> <input style="margin: 0px 0px -1px -1px; padding: 0px; border: 0px currentColor; width: 1px; height: 1px; overflow: hidden; float: right; display: block; visibility: hidden;" id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFPromiseDate" class="rdfd_ radPreventDecorate" title="Visually hidden input created for functionality purposes." name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$RDIPFPromiseDate" value="" type="text"> <table style="width: 100%;" class="rcTable rcSingle" cellSpacing="0" summary="Table holding date picker control for selection of dates."> <caption style="display: none;"> RadDatePicker </caption> <thead style="display: none;"> <tr> <th scope="col"></th> </tr> </thead> <tbody> <tr> <td style="width: 100%;" class="rcInputCell"> <span style="width: 100%; display: block;" id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFPromiseDate_dateInput_wrapper" class="riSingle RadInput RadInput_Office2010Silver"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFPromiseDate_dateInput" class="riTextBox riEnabled" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$RDIPFPromiseDate$dateInput" alt="Filter PromiseDate column" type="text"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFPromiseDate_dateInput_ClientState" name="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFPromiseDate_dateInput_ClientState" value='{"enabled":true,"emptyMessage":"","validationText":"","valueAsString":"","minDateStr":"1900-01-01-00-00-00","maxDateStr":"2099-12-31-00-00-00","lastSetTextBoxValue":""}' type="hidden" autocomplete="off"> </span> </td> <td> <a id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFPromiseDate_popupButton" class="rcCalPopup" title="Open the calendar popup." href="#">Open the calendar popup.</a> </td> </tr> </tbody> </table> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFPromiseDate_ClientState" name="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFPromiseDate_ClientState" value='{"minDateStr":"1900-01-01-00-00-00","maxDateStr":"2099-12-31-00-00-00"}' type="hidden" autocomplete="off"> </div> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_Filter_PromiseDate" class="rgFilter" title="Filter" onclick="$find("ctl00_MainContent_ContentGrid")._showFilterMenu("ctl00_MainContent_ContentGrid_ctl00", "PromiseDate", event); return false;__doPostBack('ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_PromiseDate','')" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_PromiseDate" value="" type="button"></td><td style="white-space: nowrap;"> <div style="width: 85%; display: inline-block;" id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedContactDate_wrapper" class="RadPicker RadPicker_Office2010Silver"> <input style="margin: 0px 0px -1px -1px; padding: 0px; border: 0px currentColor; width: 1px; height: 1px; overflow: hidden; float: right; display: block; visibility: hidden;" id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedContactDate" class="rdfd_ radPreventDecorate" title="Visually hidden input created for functionality purposes." name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$RDIPFExpectedContactDate" value="" type="text"> <table style="width: 100%;" class="rcTable rcSingle" cellSpacing="0" summary="Table holding date picker control for selection of dates."> <caption style="display: none;"> RadDatePicker </caption> <thead style="display: none;"> <tr> <th scope="col"></th> </tr> </thead> <tbody> <tr> <td style="width: 100%;" class="rcInputCell"> <span style="width: 100%; display: block;" id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedContactDate_dateInput_wrapper" class="riSingle RadInput RadInput_Office2010Silver"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedContactDate_dateInput" class="riTextBox riEnabled" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$RDIPFExpectedContactDate$dateInput" alt="Filter ExpectedContactDate column" type="text"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedContactDate_dateInput_ClientState" name="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedContactDate_dateInput_ClientState" value='{"enabled":true,"emptyMessage":"","validationText":"","valueAsString":"","minDateStr":"1900-01-01-00-00-00","maxDateStr":"2099-12-31-00-00-00","lastSetTextBoxValue":""}' type="hidden" autocomplete="off"> </span> </td> <td> <a id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedContactDate_popupButton" class="rcCalPopup" title="Open the calendar popup." href="#">Open the calendar popup.</a> </td> </tr> </tbody> </table> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedContactDate_ClientState" name="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_RDIPFExpectedContactDate_ClientState" value='{"minDateStr":"1900-01-01-00-00-00","maxDateStr":"2099-12-31-00-00-00"}' type="hidden" autocomplete="off"> </div> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_Filter_ExpectedContactDate" class="rgFilter" title="Filter" onclick="$find("ctl00_MainContent_ContentGrid")._showFilterMenu("ctl00_MainContent_ContentGrid_ctl00", "ExpectedContactDate", event); return false;__doPostBack('ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_ExpectedContactDate','')" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_ExpectedContactDate" value="" type="button"></td><td style="white-space: nowrap;"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_FilterTextBox_Programmer" class="rgFilterBox" onkeypress="if((event.keyCode == 13)) return false;" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$FilterTextBox_Programmer" alt="Filter Programmer column" size="10" type="text"> <input id="ctl00_MainContent_ContentGrid_ctl00_ctl02_ctl02_Filter_Programmer" class="rgFilter" title="Filter" onclick="$find("ctl00_MainContent_ContentGrid")._showFilterMenu("ctl00_MainContent_ContentGrid_ctl00", "Programmer", event); return false;__doPostBack('ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_Programmer','')" name="ctl00$MainContent$ContentGrid$ctl00$ctl02$ctl02$Filter_Programmer" value=" " type="button"></td>I noticed that the Filter TextBoxes of Numeric and Date Columns do not use the .rgFilterBox style class. I tried overriding .riTextBox class, but that does not work.
Please suggest, how can I apply Width:60% style on Numeric and DateTime column FilterTextBoxes.
Thanks,
Nishant
2 Answers, 1 is accepted
0
Nishant
Top achievements
Rank 1
Rank 1
answered on 14 Aug 2013, 06:46 AM
Any update on this ?
0
Hi Nishant,
These text boxes due to their different rendering have different classes. You can inspect them using the web developer tool in the browser (F12 for IE, Firebug for Firefox etc). In this manner you'll be able to determine which selectors to use to target the desired elements and to determine their specificity in order to overwrite predefined styles.
In your concrete example to overwrite the width of the mentioned text boxes you can do the following
CSS:
Note that using !important clause in general is not recommended but in this case we need it to overwrite an inline style.
Consider the first CSS rule. The first line targets the filter of the DateTimeColumn, the second targets the filter of the NumericColumn and the last - the BoundColumn's filter text box. The second rule is used to stretch back to 100% the text box in the picker. Otherwise there would appear a gap between the picker's text box and popup button (the reason is the second selector of the first rule).
You can use another approach as well.
C#:
ASPX:
Here OnItemCreated server-side event we attach an event handler named RadGrid1_ItemCreated used to set the widths of the desired controls.
You can also refer to these help topics:
1. Setting Filter Textbox Dimensions
2. Using the CSS class to set the width
3. CSS selector specificity
Please find attached a sample project that illustrates both approaches.
I hope this helps.
Regards,
Venelin
Telerik
These text boxes due to their different rendering have different classes. You can inspect them using the web developer tool in the browser (F12 for IE, Firebug for Firefox etc). In this manner you'll be able to determine which selectors to use to target the desired elements and to determine their specificity in order to overwrite predefined styles.
In your concrete example to overwrite the width of the mentioned text boxes you can do the following
CSS:
.RadGrid .rgFilterRow .RadPicker,.RadGrid .rgFilterRow .RadInput, .RadGrid .rgFilterRow .rgFilterBox{ width: 60% !important;} .RadGrid .rgFilterRow .RadPicker .RadInput { width: 100% !important; }Note that using !important clause in general is not recommended but in this case we need it to overwrite an inline style.
Consider the first CSS rule. The first line targets the filter of the DateTimeColumn, the second targets the filter of the NumericColumn and the last - the BoundColumn's filter text box. The second rule is used to stretch back to 100% the text box in the picker. Otherwise there would appear a gap between the picker's text box and popup button (the reason is the second selector of the first rule).
You can use another approach as well.
C#:
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e){ if (e.Item is GridFilteringItem) { GridFilteringItem filteringItem = e.Item as GridFilteringItem; //set dimensions for the filter textbox RadNumericTextBox unitsInStockBox; unitsInStockBox = filteringItem["UnitsInStock"].Controls[0] as RadNumericTextBox; unitsInStockBox.Width = Unit.Percentage(60); RadDatePicker orderDate; orderDate = filteringItem["OrderDate"].Controls[0] as RadDatePicker; orderDate.Width = Unit.Percentage(60); }}ASPX:
<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid_NeedDataSource" AllowFilteringByColumn="true" OnItemCreated="RadGrid1_ItemCreated" AutoGenerateColumns="false">...</telerik:RadGrid>Here OnItemCreated server-side event we attach an event handler named RadGrid1_ItemCreated used to set the widths of the desired controls.
You can also refer to these help topics:
1. Setting Filter Textbox Dimensions
2. Using the CSS class to set the width
3. CSS selector specificity
Please find attached a sample project that illustrates both approaches.
I hope this helps.
Regards,
Venelin
Telerik
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 the blog feed now.