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