Row style in Download List

Posted by Community Admin on 21-Mar-2011 00:00

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

Posted by Community Admin on 24-Mar-2011 00:00

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

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

Posted by Community Admin on 11-Apr-2011 00:00

Thanks for your reply.
Since we use IE8, can we have the same result using javascript?

Posted by Community Admin on 13-Apr-2011 00:00

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

This thread is closed

All Replies