Rank 3
Iron
Iron
Iron
Please have a look at the following demo https://demos.telerik.com/aspnet-ajax/grid/examples/functionality/scrolling/scrolling/defaultcs.aspx?skin=Sunset.
I have a similar scenario of a page with a grid that also has a FormDecorator whose DecoratedControls property is set to All, yet the scrollbars in the grid on this page are not getting styled according to the Sunset theme. If I look at the FormDecorator theming demo at https://demos.telerik.com/aspnet-ajax/formdecorator/examples/overview/defaultcs.aspx then I can see that the scrollbars are being styled by the FormDecorator for the Sunset theme, but I don't see it for the grid scrollbars in my page even though the grid theme is set to Sunset.
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server"
DecoratedControls="All" EnableViewState="true"
ViewStateMode="Disabled" ControlsToSkip="None" EnableAjaxSkinRendering="true" />When I see the html tag in Chrome's DevTools > Elements, I see the rfdScrollBars class is there as in code below, yet its not getting applied to the grid.
<html xmlns="http://www.w3.org/1999/xhtml"
class="t-chrome t-chrome129 t-chrome t-chrome129 k-webkit k-webkit129
RadForm RadForm_Sunset rfdButton rfdScrollBars rfdZone rfdLabel
rfdTextbox rfdTextarea rfdFieldset rfdRadio
rfdCheckbox rfdGrids rfdRoundedCorners" style="">1 Answer, 1 is accepted
Hi Sunil,
The RadFormDecorator is designed to style standard HTML form elements such as <input>, <button>, <fieldset>, etc., but it does not control the skins for other Telerik controls. For that, Telerik provides the RadSkinManager, which applies skins to components like RadGrid, RadComboBox, and others. The RadFormDecorator will only decorate the native controls inside other Telerik controls (like checkboxes in a grid), but it won't apply styles to custom UI elements like the scrollbar in a RadGrid.
To customize the scrollbars in a RadGrid, you'll need to manually apply CSS styles, particularly for WebKit browsers (e.g., Chrome, Edge). Here's an example of how to style the RadGrid scrollbar:
<style>
/* Customize the scrollbars in RadGrid's data div */
.RadGrid_Sunset .rgDataDiv::-webkit-scrollbar {
width: 12px; /* Set the width of the scrollbar */
background-color: #f5f5f5; /* Background of the entire scrollbar track */
}
/* Style the scrollbar track */
.RadGrid_Sunset .rgDataDiv::-webkit-scrollbar-track-piece {
background-color: #272727; /* Darker track background */
border-radius: 10px; /* Rounded corners for the track */
}
/* Style the scrollbar thumb */
.RadGrid_Sunset .rgDataDiv::-webkit-scrollbar-thumb {
background-color: #393939; /* Color of the scrollbar thumb */
border-radius: 10px; /* Rounded corners for the thumb */
border: 2px solid #474747; /* Add some spacing around the thumb */
}
/* Style the scrollbar thumb on hover */
.RadGrid_Sunset .rgDataDiv::-webkit-scrollbar-thumb:hover {
background-color: #1a1a1a; /* Darker thumb on hover */
}
</style>
<telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="All" Skin="Sunset"
EnableRoundedCorners="True" />
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource" ClientSettings-Scrolling-AllowScroll="true" MasterTableView-AllowPaging="false" Skin="Sunset">
<MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
<Columns>
<telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
</telerik:GridBoundColumn>
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
SortExpression="OrderDate" UniqueName="OrderDate">
</telerik:GridDateTimeColumn>
<telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
FilterControlAltText="Filter Freight column" HeaderText="Freight"
SortExpression="Freight" UniqueName="Freight">
</telerik:GridNumericColumn>
<telerik:GridBoundColumn DataField="ShipName"
FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
SortExpression="ShipName" UniqueName="ShipName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ShipCountry"
FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
SortExpression="ShipCountry" UniqueName="ShipCountry">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>Key Points:
- .rgDataDiv is the class for the scrollable area within the RadGrid, so the scrollbars will be applied specifically to that container.
- ::-webkit-scrollbar styles the overall scrollbar.
- ::-webkit-scrollbar-track-piece styles the track (the area where the scrollbar moves).
- ::-webkit-scrollbar-thumb styles the scrollbar thumb (the draggable element).
The colors, widths, and borders can be adjusted based on your design preferences.
This approach provides precise control over how the scrollbars in the RadGrid are displayed, especially in WebKit browsers.
Regards,
Rumen
Progress Telerik
Rank 3
Iron
Iron
Iron
