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

FilterControlWidth

2 Answers 227 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rick
Top achievements
Rank 1
Rick asked on 18 Dec 2014, 10:02 PM
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

2 Answers, 1 is accepted

Sort by
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.

<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;
}


Tags
Grid
Asked by
Rick
Top achievements
Rank 1
Answers by
Rick
Top achievements
Rank 1
Share this question
or