Hi,
In the code below I would like to know how can I apply the skin "Glow" but ONLY in the RadListView1 (and obviously everything within it).
I am not managing how to do that. Any idea?
This is my ASPX code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="iPMP.aspx.vb" Inherits="custom_scripts_iPMP_iPMP" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Telerik ASP.NET Example</title>
<link rel="stylesheet" href="ipmpstyle.css?26" class="Telerik_stylesheet" />
<link rel="stylesheet" href="ListView.css" class="Telerik_stylesheet" />
<link rel="stylesheet" href="ListViewExtra.css" class="Telerik_stylesheet" />
<style type="text/css">
.RadAutoCompleteBox_Default .racTokenList
{
border-radius: 5px;
border-color: dimgrey;
}
</style>
<style type="text/css">
[style*="--aspect-ratio"] > :first-child {
width: 100%;
}
[style*="--aspect-ratio"] > img {
height: 100%;
}
@supports (--custom:property) {
[style*="--aspect-ratio"] {
position: relative;
}
[style*="--aspect-ratio"]::before {
content: "";
display: block;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
[style*="--aspect-ratio"] > :first-child {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
</style>
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script type="text/javascript">
function requesting(sender, eventArgs) {
var acbox = $find('<%= RadAutoCompleteBox1.ClientID %>');
var acboxcontents = acbox.get_inputElement();
typed = acboxcontents.value;
}
</script>
<form id="form1" runat="server" style="border-radius:15px; background:rgba(146,167,160,.5); border-style:solid; border-width:1px; border-color:white; padding:20px;height:120px;">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadAjaxManager ID="ajaxmanager1" runat="server" EnableAJAX="true">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadAutoCompleteBox1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadAutoCompleteBox1" LoadingPanelID="radloadingpanel1" />
<telerik:AjaxUpdatedControl ControlID="divLoading" LoadingPanelID="radloadingpanel1" />
<telerik:AjaxUpdatedControl ControlID="lblNoOEMParts" LoadingPanelID="radloadingpanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="radloadingpanel1" runat="server" AnimationDuration="0" InitialDelayTime="1000"></telerik:RadAjaxLoadingPanel>
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false" />
<telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="All" DecorationZoneID="demo-container" EnableRoundedCorners="false" />
<telerik:RadAjaxPanel ID="rap1" runat="server" EnableAJAX="true">
<div style="font-family:'robotoregular';font-style:italic;color:#ffffff;margin-bottom:7px;">Type in year, model and part name (eg. 2010 Accord Alternator)</div>
<telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox1" ClientID="RadAutoCompleteBox1"
autopostback="true"
InputType="Token" Width="100%" Visible="true"
AllowCustomEntry = "false"
DropDownWidth="300px"
onclientrequesting="requesting"
Filter="StartsWith"
>
<WebServiceSettings Path="iPMP.asmx" Method="GetItems" />
</telerik:RadAutoCompleteBox>
<div ID="divLoading" style="width:20px;position:relative;visibility:hidden;display:none;text-align:right;margin-top:-32px;float:right;margin-right:15px;z-index:1000" runat="server" autopostbcak="true"><img alt="" src="loading.gif" /></div>
<br />
<asp:label id="lblNoOEMParts" ClientID="lblNoOEMParts" runat="server" visible="false" style="margin-top:-50px;position:absolute;">No OEM parts available found!</asp:label>
<asp:Panel ID="pnlListView" runat="server" Visible="false" style="margin-top:-100px">
<div class="demo-container size-wide" id="demo-container">
<table>
<tr>
<td>
<telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight"
ItemPlaceholderID="CustomersContainer" AllowPaging="true" OnPageIndexChanged="RadListView1_PageIndexChanged">
<LayoutTemplate>
<legend>Alternate Parts</legend>
<table>
<tr>
<td>
<telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
PageSize="2" CssClass="pagerStyle">
<Fields>
<telerik:RadDataPagerButtonField FieldType="FirstPrev"></telerik:RadDataPagerButtonField>
<telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="4"></telerik:RadDataPagerButtonField>
<telerik:RadDataPagerButtonField FieldType="NextLast"></telerik:RadDataPagerButtonField>
<telerik:RadDataPagerPageSizeField PageSizeComboWidth="60" PageSizeText="Page size: "></telerik:RadDataPagerPageSizeField>
<telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"
></telerik:RadDataPagerGoToPageField>
</Fields>
</telerik:RadDataPager>
</td>
</tr>
</table>
<fieldset id="FiledSet1" class="mainFieldset">
<div class="RadListView RadListView_<%# Container.Skin %>">
<asp:PlaceHolder ID="CustomersContainer" runat="server"></asp:PlaceHolder>
</div>
<div class="clearFix">
</div>
</fieldset>
</LayoutTemplate>
<ItemTemplate>
<fieldset class="fieldset itemFieldset">
<legend>Part: <%#Eval("Description")%></legend>
<table class="dataTable">
<tr class="rlvI">
<td>
<table class="itemTable">
<tr>
<td>
<table class="innerItemTable">
<tr>
<td>
Stock: <%#Eval("StockTicketNumber")%>
</td>
</tr>
<tr>
<td>
Mileage: <%#Eval("Mileage")%>
</td>
</tr>
<tr>
<td>
Cond.: <%#Eval("ConditionsAndOptions")%>
</td>
</tr>
<tr>
<td>
Price: $<%# Eval("RetailPrice")%>
</td>
</tr>
</table>
</td>
<td>
<img src=<%#Eval("PartPic")%> style="height:90px;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</fieldset>
</ItemTemplate>
</telerik:RadListView>
</td>
</tr>
</table>
</div>
</asp:Panel>
</telerik:RadAjaxPanel>
</form>
</body>
</html>
Any idea on how do that?
Thanks!
1 Answer, 1 is accepted
Hello Yan,
By default, the SkinManager will apply the skin to all controls on the page. You can configure it to apply the skin only to specific controls as explained here:
If you want to configure the skin without the SkinManager, then you can set the Skin property of the desired control. Apart from the markup and code-behind, you can configure the skin for a type of control (e.g. all ListViews, all ComboBoxes) via the web.config.
- https://docs.telerik.com/devtools/aspnet-ajax/general-information/controlling-visual-appearance/skin-registration#global-skin-settings-for-the-entire-websiteapplication
<appSettings> <!-- Sets the skin for every instance of RadMenu to Glow" --> <add key="Telerik.Menu.Skin" value="Glow" /> </appSettings>
Additionally, in ItemTemplates, you can configure the controls to get the skin from its naming container.
Regards,
Peter Milchev
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.