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

How to apply Glow skin ONLY in RadListView?

1 Answer 13 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Yan Moura
Top achievements
Rank 1
Veteran
Iron
Yan Moura asked on 03 Mar 2021, 06:31 PM

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

Sort by
0
Peter Milchev
Telerik team
answered on 08 Mar 2021, 01:06 PM

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.

 

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/.

Tags
ListView
Asked by
Yan Moura
Top achievements
Rank 1
Veteran
Iron
Answers by
Peter Milchev
Telerik team
Share this question
or