Formatting and Skins for ListView

3 posts, 1 answers
  1. Lynn
    Lynn avatar
    186 posts
    Member since:
    Sep 2006

    Posted 06 Oct 2010 Link to this post

    I am having some difficulties formatting a listview.  I have attached screen shots and included source code.

    The source code for the .aspx page is immediately below.

    <div >
    <telerik:RadListView ID="RadListView1" runat="server" Width="100%" EnableEmbeddedSkins="true" Height="150px" Visible="true" Enabled="true" ItemPlaceholderID="ListViewContainer">
            <LayoutTemplate>
                <asp:PlaceHolder runat="server" id="ListViewContainer" />
            </LayoutTemplate>
            <ItemTemplate>
                <fieldset style="float: left; width: 300px; height: 150px; color: black; ">
                    <div >
                        <div>
                            <ul>
                                <li>
                                    <%# Eval("ListingHeadline")%>
                                </li>
                                <li>
                                    <label>Beds:</label><%# Eval("BedroomsDisplay")%>
                                </li>
                                <li>
                                    <label>Baths:</label><%# Eval("BathroomsDisplay")%>
                                </li>
                                <li>
                                    <label>Address:</label><%# Eval("ListingStreetAddress")%>
                                </li>
                            </ul>
                        </div>
                    </div>
                </fieldset>
            </ItemTemplate>
    </telerik:RadListView>
    </div>

    In the web.config file, I also have the following code:

    configuration>
        <appSettings>
            <add key="Telerik.Skin" value="Hay"/>
            <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled"/>
            <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled"/>
        </appSettings>

    As you look through this, please ignore the ugly combinations.  I am simply using settings that I can immediately recognize, so yes, the page is ugly right now.  I'll worry about the look/feel after I get the general formatting correct.

    As I said, I have two (2) issues with the ListView.  The first is that I can't seem to apply Telerik skins.  The second is that I can't seem to control the color of the "line" around each item presented in my ListView.  Please refer to the attached file ListView_Format_1.gif for a capture of the screen.  As you can see above in the config.web file, I have a setting for the "Hay" skin for the site.  This skin is applied to all of the other controls on the screen, but not to the listview.  Why doesn't this work for the listview as well?

    Also, as you can see in the listview_format_1.gif screen capture, there is a line around each item in the listview.  This line is a kind of silver blue (#617683).  Where is this color coming from? I cannot seem to get rid of it or change it to another color no matter what I do.  In the attached file named listview_format_2.gif, you can see the screen capture of the "developer toolbar" output from the page that is in listview_format_1.gif.  This color (#617683) is eliminated in the style information for the page, so I cannot find anything to change or remove to either remove or change the color of this "border line",  How do I do this (either remove the line or change its color)?

    Lastly, I have read the documentation and seen the example where it says to include a "div" in the source code for the listview to set the skin there.  So I inserted the code as shown below.

    <telerik:RadListView ID="RadListView1" runat="server" Width="100%" EnableEmbeddedSkins="true" Height="150px" Visible="true" Enabled="true" ItemPlaceholderID="ListViewContainer">
            <LayoutTemplate>
                <asp:PlaceHolder runat="server" id="ListViewContainer" />
                  
                 <div class="RadListView RadListView_Black">
                 </div>
            </LayoutTemplate>
            <ItemTemplate>
                <fieldset style="float: left; width: 300px; height: 150px; color: black; ">

    This code shown above where the "black" skin is specified, had no effect whatsoever on the output of the listview.  The screen still looked exactly the same as that shown in the attached screen capture listview_format_1.gif.

    How do I alter the appearrance of the listview per my questions above?

    Thanks very much in advance!

    Lynn
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 07 Oct 2010 Link to this post

    Hi Lynn,

    Here are some guidelines on your two questions:

    1.

    >> The first is that I can't seem to apply Telerik skins.

    You need a <div> as the topmost element inside the <LayoutTemplate> and everything else in the LayoutTemplate should be INSIDE this <div>. The <div> should have the "RadListVIew RadListView_SkinName" CSS classes set. There is no need to hard-code the SkinName - you can use a binding expression as in this online demo:

    http://demos.telerik.com/aspnet-ajax/listview/examples/appearancestyling/predefinedlayouts/defaultcs.aspx

    The bottom line is that the SkinName inside the CSS class should match the value of the RadListView's Skin property, which in this case is set in the web.config, but this doesn't matter. So if you set RadListView_Black as a CSS class, but the RadListView has a Hay Skin applied, you will not get any styling either.


    2.

    >> The second is that I can't seem to control the color of the "line" around each item presented in my ListView.

    This is the default border, which browsers apply to <fieldset> elements. It looks different in all browsers and usually people remove it and define a border to something else, so that they get identical look in all browsers.


    Kind regards,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lynn
    Lynn avatar
    186 posts
    Member since:
    Sep 2006

    Posted 20 Oct 2010 Link to this post

    Thank you!  Your suggestion got me started on the proper path and I did this all resolved.  I apologize for accidentally leaving this open for so long.  I got involved in a crisis project and forgot to close this out.

    Thanks again!

    Lynn
Back to Top