More in this section

Forums / General Discussions / Row style in Download List

Row style in Download List

4 posts, 0 answered
  1. Ilaria
    Ilaria avatar
    25 posts
    Registered:
    20 Jan 2011
    21 Mar 2011
    Link to this post
    Hello!
    I've got a download list with some documents. i need to display the alternate rows in two different colors.
    Is it possible?

    Thanks a lot
    Ilaria
  2. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    24 Mar 2011
    Link to this post
    Hi Ilaria,

    I can offer you a CSS solution which will work in all modern browser except IE lower than 8 inclusive.
    tr:nth-child(even) {background-color: #ccc}
    tr:nth-child(odd) {background-color: #fff}


    Greetings,
    Katia
    the Telerik team
  3. Ilaria
    Ilaria avatar
    25 posts
    Registered:
    20 Jan 2011
    11 Apr 2011
    Link to this post
    Thanks for your reply.
    Since we use IE8, can we have the same result using javascript?
  4. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    13 Apr 2011
    Link to this post
    Hi Ilaria,

    Sure, you can use javascript to set class to the odd items of Download list. If you have chosen Table mode of Download list widget (like shown in the screenshot) click "Edit Thumbnail list template". At the end of the template add the javscript like shown below.

    <%@ Control Language="C#" %>
    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>
    <%@ Register TagPrefix="sitefinity" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>
    <sitefinity:ResourceLinks id="resourcesLinks2" runat="server" UseEmbeddedThemes="true" Theme="Default">
      <sitefinity:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.icons.css" Static="true" />
    </sitefinity:ResourceLinks>
    <sf:BrowseAndEditToolbar ID="browseAndEditToolbar" runat="server" Mode="Edit"></sf:BrowseAndEditToolbar>
    <telerik:RadGrid id="documentsGrid" runat="server"
        CssClass="sfdownloadTable sfTableMode"
        skin="Sitefinity">
        <ClientSettings EnableRowHoverStyle="false" EnableAlternatingItems="false" />
        <PagerStyle Mode="NumericPages" />
        <MasterTableView PageSize="50" EnableNoRecordsTemplate="true">
            <Columns>
                <telerik:GridBoundColumn UniqueName="title" HeaderText="<%$ Resources:Labels, File %>" DataField="Title" ItemStyle-CssClass="sfdownloadTitle" HeaderStyle-CssClass="sfdownloadTitle" />
                <telerik:GridBoundColumn UniqueName="documentType" HeaderText="<%$ Resources:Labels, Type %>" DataField="Extension" ItemStyle-CssClass="sfdownloadType" HeaderStyle-CssClass="sfdownloadType" />
                <telerik:GridBoundColumn UniqueName="totalSize" HeaderText="<%$ Resources:Labels, Size %>" DataField="TotalSize" ItemStyle-CssClass="sfdownloadSize" HeaderStyle-CssClass="sfdownloadSize" />
                <telerik:GridBoundColumn UniqueName="uploadedOn" HeaderText="<%$ Resources:Labels, UploadedOn %>" DataField="DateCreated" DataFormatString="{0:dd MMM, yyyy}" ItemStyle-CssClass="sfdownloadDate" HeaderStyle-CssClass="sfdownloadDate" />
                <telerik:GridTemplateColumn 
                    UniqueName="templateColumn" 
                    HeaderText="<%$ Resources:Labels, Download %>"
                    ItemStyle-CssClass="sfdownloadCell" HeaderStyle-CssClass="sfdownloadCell">
                    <ItemTemplate>
                        <sitefinity:SitefinityHyperLink ID="documentLink" Text="<%$ Resources:Labels, Download %>"  runat="server" CssClass="sfdownloadLink" target="_blank" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
            <NoRecordsTemplate>No documents found!</NoRecordsTemplate>  
        </MasterTableView>
    </telerik:RadGrid>
    <sitefinity:Pager id="pager" runat="server"></sitefinity:Pager>
      
    <script type="text/javascript">
        $("#<%= documentsGrid.ClientID %> tr:odd").addClass("sfodd");
    </script>

    Let us know if you need further help.

    Best wishes,
    Katia
    the Telerik team

4 posts, 0 answered