I would like to set my FilterControlWidth on all columns so that it equals [Column Width] - [Filter Icon Width. The goal is to fill up the whole space above the column using the textbox and the filter icon.
Presently I am using FilterControlWidth="80%", but it's inconsistent spacing left over.
All filters are textboxes except for one which is a radCombBox
Presently I am using FilterControlWidth="80%", but it's inconsistent spacing left over.
All filters are textboxes except for one which is a radCombBox
2 Answers, 1 is accepted
0
Rick
Top achievements
Rank 1
answered on 19 Dec 2014, 02:52 PM
More info:
I do not set columns widths in code. They are auto-resized to fit.
I do not set columns widths in code. They are auto-resized to fit.
<telerik:RadGrid ID="grdMain" runat="server" AllowPaging="True" EnableHeaderContextMenu="True" EnableHeaderContextFilterMenu="True" ClientSettings-AllowColumnsReorder="true" AllowFilteringByColumn="True" AllowSorting="True" PageSize="25" Skin="Web20" EnableLinqExpressions = "False" DataSourceID="sqlGenBrowNames" AutoGenerateColumns="False" GroupPanelPosition="Top" Width="100%"> <MasterTableView OverrideDataSourceControlSorting="True" DataSourceID="sqlGenBrowNames" AllowMultiColumnSorting="false" DataKeyNames="Table_Id" ClientDataKeyNames="Table_Id" Width="100%"> <RowIndicatorColumn Visible="False"> </RowIndicatorColumn> <ExpandCollapseColumn Created="True"> </ExpandCollapseColumn> <CommandItemSettings ExportToCsvImageUrl="mvwres://Telerik.Web.UI, Version=2014.3.1024.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.Grid.ExportToCsv.gif" ExportToExcelImageUrl="mvwres://Telerik.Web.UI, Version=2014.3.1024.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.Grid.ExportToExcel.gif" ExportToPdfImageUrl="mvwres://Telerik.Web.UI, Version=2014.3.1024.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.Grid.ExportToPdf.gif" ExportToWordImageUrl="mvwres://Telerik.Web.UI, Version=2014.3.1024.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.Grid.ExportToWord.gif" /> <PagerStyle Mode="NextPrevNumericAndAdvanced" PageButtonCount="10" PageSizes="25;50;100" /> <Columns> <telerik:GridBoundColumn DataField="FullName_L1" AutoPostBackOnFilter="True" CurrentFilterFunction="Contains" FilterControlAltText="Filter FullName_L1 column" HeaderText="Full Name Line 1" SortExpression="FullName_L1" UniqueName="FullName_L1"/> <telerik:GridBoundColumn DataField="FullName_L2" AutoPostBackOnFilter="True" CurrentFilterFunction="Contains" FilterControlWidth="80%" FilterControlAltText="Filter FullName_L2 column" HeaderText="Full Name Line 2" SortExpression="FullName_L2" UniqueName="FullName_L2"/> <telerik:GridBoundColumn DataField="ID" AutoPostBackOnFilter="True" CurrentFilterFunction="Contains" FilterControlWidth="80%" FilterControlAltText="Filter ID column" HeaderText="ID" SortExpression="ID" UniqueName="ID"/> <telerik:GridBoundColumn DataField="City" AutoPostBackOnFilter="True" CurrentFilterFunction="Contains" FilterControlWidth="80%" FilterControlAltText="Filter City column" HeaderText="City" SortExpression="City" UniqueName="City"/> <telerik:GridBoundColumn DataField="Status" AutoPostBackOnFilter="True" CurrentFilterFunction="Contains" FilterControlWidth="80%" FilterControlAltText="Filter Status column" HeaderText="Status" SortExpression="Status" UniqueName="Status"/> <telerik:GridBoundColumn DataField="Table" FilterControlAltText="Filter Table column" HeaderText="Type" SortExpression="Table" UniqueName="Table"> <FilterTemplate> <telerik:RadComboBox ID="RadComboBoxRequestType" Width="75px" runat="server" OnClientSelectedIndexChanged="RequestTypeIndexChanged" SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("Table").CurrentFilterValue%>'> <Items> <telerik:RadComboBoxItem Text="All" /> <telerik:RadComboBoxItem Text="Clients" Value="Clients"/> <telerik:RadComboBoxItem Text="Contacts" Value="Contacts"/> <telerik:RadComboBoxItem Text="Employees" Value="Employees" /> <telerik:RadComboBoxItem Text="Projects" Value="Projects"/> <telerik:RadComboBoxItem Text="Proposals" Value="Proposals"/> <telerik:RadComboBoxItem Text="Vendors" Value="Vendors"/> </Items> </telerik:RadComboBox> <telerik:RadScriptBlock ID="RadScriptBlock_Request" runat="server"> <script type="text/javascript"> function RequestTypeIndexChanged(sender, args) { var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>"); tableView.filter("Table", args.get_item().get_value(), "EqualTo"); } </script> </telerik:RadScriptBlock> </FilterTemplate> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="State" AutoPostBackOnFilter="True" CurrentFilterFunction="Contains" Display="False" FilterControlWidth="80%" FilterControlAltText="Filter State column" HeaderText="State" SortExpression="State" UniqueName="State"/> <telerik:GridBoundColumn DataField="Zip" AutoPostBackOnFilter="True" CurrentFilterFunction="Contains" Display="False" FilterControlWidth="80%" FilterControlAltText="Filter Zip column" HeaderText="Zip" SortExpression="Zip" UniqueName="Zip"/> <telerik:GridBoundColumn DataField="Contact" AutoPostBackOnFilter="True" CurrentFilterFunction="Contains" Display="False" FilterControlWidth="80%" FilterControlAltText="Filter Contact column" HeaderText="Contact" SortExpression="Contact" UniqueName="Contact"/> <telerik:GridBoundColumn DataField="Client" AutoPostBackOnFilter="True" CurrentFilterFunction="Contains" Display="False" FilterControlWidth="80%" FilterControlAltText="Filter Client column" HeaderText="Client" SortExpression="Client" UniqueName="Client"/> <telerik:GridBoundColumn DataField="StartDate" AutoPostBackOnFilter="True" CurrentFilterFunction="Contains" DataFormatString="{0:MM/dd/yyyy}" Display="False" DataType="System.DateTime" FilterControlWidth="80%" FilterControlAltText="Filter StartDate column" HeaderText="Start Date" SortExpression="StartDate" UniqueName="StartDate"/> </Columns> <PagerStyle Mode="NextPrevNumericAndAdvanced" PageButtonCount="10"></PagerStyle> </MasterTableView> <ClientSettings AllowColumnsReorder="True"> <Selecting AllowRowSelect="True" EnableDragToSelectRows="False" /> <ClientEvents OnRowMouseOver="RowMouseOver" OnRowContextMenu="RowContextMenu" OnRowDblClick="RowDblClick"/> <Resizing ResizeGridOnColumnResize="True" AllowResizeToFit="true" AllowColumnResize="true" /> </ClientSettings> <FilterMenu EnableImageSprites="False"> </FilterMenu> <HeaderStyle Height="22px" ></HeaderStyle> <PagerStyle PageSizes="25;50;100" /> <SelectedItemStyle ForeColor="Black" /></telerik:RadGrid>0
Rick
Top achievements
Rank 1
answered on 19 Dec 2014, 03:46 PM
Issued resolved. I added some styles to set the filter control to 100%, but added padding to the right to allow for the filter icon.
div.RadGrid .rgFilterRow .rgFilterBox{ width: 100%;}div.RadGrid .rgFilterRow td{ padding-right: 30px;}