AUTHOR: Attila Antal
DATE POSTED: October 25, 2018
Change the skin of built-in filter controls of RadGrid, so that they will look different from the grid.
Generally, this can be easily achieved by using templates. For example, defining a FilterTemplate:
<
telerik:GridDateTimeColumn
UniqueName
=
"OrderDate"
HeaderText
DataField
>
FilterTemplate
telerik:RadDateTimePicker
ID
"RadDateTimePicker1"
runat
"server"
Skin
"Black"
></
</
In some cases, however, one would like to apply different skins to the built-in controls instead. It is no straight forward, since controls inside RadGrid inherit the grid's Skin and they will be styled in accordance to that. Here is how it's done: RadGrid defines the skin/styling to controls in the PreRender event, therefore, we will be overriding that using the Page_PreRenderComplete event. C# - Page_PreRenderComplete event handler
protected
void
Page_PreRenderComplete(
object
sender, EventArgs e)
{
////Execute logic only if Filtering is enabled and Filter type is Classic or Combined. These two options have FilterItem.
if
(RadGrid1.AllowFilteringByColumn && RadGrid1.FilterType == GridFilterType.Classic || RadGrid1.FilterType == GridFilterType.Combined)
// Access the Filtermenu and apply the skin on it
RadGrid1.FilterMenu.Skin =
;
// Reference to the filterItem
GridFilteringItem filterItem = RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)[0]
as
GridFilteringItem;
// Loop through all the columns (that are to be rendered) of RadGrid
foreach
(GridColumn col
in
RadGrid1.MasterTableView.RenderColumns)
(col
is
GridNumericColumn)
// checking if the column is of type GridNumericColumn
RadNumericTextBox numericTextBox = filterItem[col.UniqueName].Controls[0]
RadNumericTextBox;
numericTextBox.Skin =
}
else
GridDateTimeColumn)
// checking if the column is of type GridDateTimeColumn
// DateTime columns might have different controls depending on the column's PickerType property
// if its DatePicker
RadDatePicker datePicker = filterItem[col.UniqueName].Controls[0]
RadDatePicker;
(datePicker !=
null
)
datePicker.Skin =
// sets the Picker button's skin to Black
datePicker.DateInput.Skin =
// sets the Input/Textbox's skin to Black
datePicker.SharedCalendar.Skin =
// sets the Calendar's skin to Black
// if its DateTimePicker
RadDateTimePicker dateTimePicker = filterItem[col.UniqueName].Controls[0]
RadDateTimePicker;
(dateTimePicker !=
dateTimePicker.Skin =
dateTimePicker.DateInput.Skin =
dateTimePicker.SharedCalendar.Skin =
/*
TimeView is a little different, we will replace the built-in with an custom one
*/
// Create a TimeView
RadTimeView newTimeView =
new
RadTimeView()
TimeFormat =
"HH:mm:ss"
,
StartTime =
TimeSpan(0, 0, 0),
EndTime =
TimeSpan(24, 0, 0),
Interval =
TimeSpan(1, 0, 0),
Skin =
};
// Add the TimeView control to the Cell's controls collection
dateTimePicker.Parent.Controls.Add(newTimeView);
// Set the shared TimeViewID to the new one
dateTimePicker.SharedTimeViewID = newTimeView.ID;
// set the SharedTimeView of the picker to be the new one
dateTimePicker.SharedTimeView = newTimeView;
// if its TimePicker
RadTimePicker timePicker = filterItem[col.UniqueName].Controls[0]
RadTimePicker;
(timePicker !=
timePicker.Skin =
timePicker.DateInput.Skin =
timePicker.Parent.Controls.Add(newTimeView);
timePicker.SharedTimeViewID = newTimeView.ID;
timePicker.SharedTimeView = newTimeView;
Protected
Sub
ByVal
sender
As
Object
e
EventArgs)
Handles
Me
.PreRenderComplete
'Execute logic only if Filtering is enabled and Filter type is Classic or Combined. These two options have FilterItem.
If
RadGrid1.AllowFilteringByColumn
AndAlso
RadGrid1.FilterType = GridFilterType.Classic
OrElse
RadGrid1.FilterType = GridFilterType.Combined
Then
'Access the Filtermenu and apply the skin on it
'Reference to the filterItem
Dim
filterItem
GridFilteringItem = TryCast(RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)(0), GridFilteringItem)
'Loop through all the columns (that are to be rendered) of RadGrid
For
Each
col
GridColumn
In
RadGrid1.MasterTableView.RenderColumns
TypeOf
Is
GridNumericColumn
'checking if the column is of type GridNumericColumn
numericTextBox
RadNumericTextBox = TryCast(filterItem(col.UniqueName).Controls(0), RadNumericTextBox)
ElseIf
GridDateTimeColumn
'checking if the column is of type GridDateTimeColumn
'DateTime columns might have different controls depending on the column's PickerType property
'if its DatePicker
datePicker
RadDatePicker = TryCast(filterItem(col.UniqueName).Controls(0), RadDatePicker)
datePicker IsNot
Nothing
'sets the Picker button's skin to Black
'sets the Input/Textbox's skin to Black
'sets the Calendar's skin to Black
End
'if its DateTimePicker
dateTimePicker
RadDateTimePicker = TryCast(filterItem(col.UniqueName).Controls(0), RadDateTimePicker)
dateTimePicker IsNot
'TimeView is a little different, we will replace the built-in with an custom one
'Create a TimeView
newTimeView
RadTimeView =
New
With
.TimeFormat =
.StartTime =
.EndTime =
.Interval =
.Skin =
'Add the TimeView control to the Cell's controls collection
dateTimePicker.Parent.Controls.Add(newTimeView)
'Set the shared TimeViewID to the new one
dateTimePicker.SharedTimeViewID = newTimeView.ID
'set the SharedTimeView of the picker to be the new one
dateTimePicker.SharedTimeView = newTimeView
'if its TimePicker
timePicker
RadTimePicker = TryCast(filterItem(col.UniqueName).Controls(0), RadTimePicker)
timePicker IsNot
timePicker.Parent.Controls.Add(newTimeView)
timePicker.SharedTimeViewID = newTimeView.ID
'Set the SharedTimeView of the picker to be the new one
timePicker.SharedTimeView = newTimeView
Next
It is not done yet, though! Assuming that, RadGrid will request the CSS Stylesheets for the Default Skin.Our controls will not have black unless we register them individually. For that purpose, we will request the necessary styles using RadStyleSheetManager.
telerik:RadStyleSheetManager
EnableStyleSheetCombine
"false"
StyleSheets
<%--Black Skin for the Input controls (RadInput)--%>
telerik:StyleSheetReference
Assembly
"Telerik.Web.UI.Skins"
Name
"Telerik.Web.UI.Skins.BlackLite.Input.Black.css"
/>
<%--Black Skin for the RadGrid FilterMenu (RadMenu) control--%>
"Telerik.Web.UI.Skins.BlackLite.Menu.Black.css"
Well done! The RadTimePicker, RadDatePicker and RadDateTimePickers controls now have the Black Skin. There is one last thing we need to style. That is the Filter button residing next to the FilterControl. This button is a Web Control of type ElasticButton has no Skin property to assign one. RadGrid will style that by default, but, if you want to change the Style, you will need to override some of the CSS classes. To complete our scenario, we will be styling them same as in the Black skin. We've used some of the CSS rules that come with the RadGrid_Black stylesheet when the Grid's Skin is set to Black.
<style type=
"text/css"
style the buttons near the filter controls
The rules from below have been taken from the "RadGrid_Black" CSS file
.RadGrid .rgFilterRow .rgFilter:hover,
.RadGrid .rgFilterRow .rgFilter:focus {
border-color
:
black
color
#fff
background-color
#020202
background-image
: linear-gradient(
#5c5c5c
#2a2a2c
50%
#060606
);
box-shadow:
none
.RadGrid .rgFilterRow .rgFilter {
border
1px
solid
#080808
#1b1b1b
#7b7b7b
#4a4a4a
#313131
.RadGrid .rgFilterRow button.rgActionButton {
white
.RadGrid .rgFilterRow .rgFilterActive,
.RadGrid .rgFilterRow .rgFilterActive:hover,
.RadGrid .rgFilterRow .rgFilterActive:focus {
#070707
#9eda29
#202020
#6e6e6e
#2b2b2d
#050505
inset
0
6px
rgba(
165
0.5
</style>
You've successfully changed the skins of the Built-in FilterControls in RadGrid. It wasn't that difficult after all, was it?
Resources Buy Try