Layout changes during ItemDataBound

[Matteo Pellizzoni]

Hi,

I want to change the layout of the fieldset of a Listview during the ItemDataBound event.

In particular, my need is to have different back colours for each item i have, based on the text of a specific label in the fieldset.

I.e. If the text of the label is "Red" i will setthe backcolor of the Fieldset red.

Here my ListView.

Thanks in advance

Matteo

            <telerik:RadListView ID="RADLIST_Calendario" runat="server"
                DataSourceID="SDS_DettaglioCalendario" AllowPaging="True"
                DataKeyNames="ChampionshipMatchID">
                <LayoutTemplate>
                    <div>
                        <div ID="itemPlaceholder" runat="server"></div>
                        <telerik:RadDataPager ID="RadDataPager1" runat="server">
                            <Fields>
                                <telerik:RadDataPagerSliderField />
                            </Fields>
                        </telerik:RadDataPager>
                    </div>
                </LayoutTemplate>
                <ItemTemplate>
                    <fieldset style="margin: 0px; padding: 0px;">
                        <legend><%# Eval("Name")%></legend>
                            <table cellpadding="0" cellspacing="0" width="800" border="0">

                            ...

                            </table>
                    </fieldset>
                </ItemTemplate>
                <EmptyDataTemplate>
                    <div class="RadListView RadListView_Default">
                        <div class="rlvEmpty">
                            There are no items to be displayed.</div>
                    </div>
                </EmptyDataTemplate>
                <SelectedItemTemplate>
                    <div class="rlvISel">
                    </div>
                </SelectedItemTemplate>
            </telerik:RadListView>

[Nikolay Rusev]

Hello Matteo,

You can write binding expression that fit your needs. For example the following binding expression sets background color depending of OrderID(from Northwind data base) is odd or even number:

1.<ItemTemplate>
2.                <div
3.style='background-color:<%# (int)Eval("OrderID") % 2 == 0 ? "Red" : "Black" %>'>
4.                <%#Eval("OrderID") %>
5.                </div>
6.            </ItemTemplate>

Regards,
Nikolay
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.

[prat]

hi,
Im trying to replicate something like the same
http://www.telerik.com/help/aspnet-ajax/listview-data-with-images-from-database.html

but i could not get any space between the fieldsets as it is in the above link.
i have also used the same stylesheet.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CSCatalogue.aspx.cs" Inherits="PathwaysOnlineWebApplication.Secure.CSCatalogue"  MasterPageFile="~/Secure/Secure.Master" %>


<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <link href="../Styles/stylesheet.css" rel="stylesheet" type="text/css" />
   <asp:Label ID="ComplaintsLabel" runat="server" Text="Custom Stationery Catalogue" Font-Size="X-Large" 
        ForeColor="#990000" Font-Bold="False"></asp:Label><br />
<br />
<hr />        
<br />
   
  
   <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"
        IsSticky="true" Style="position: absolute; top: 0; left: 0; height: 100%; width: 100%">
    </telerik:RadAjaxLoadingPanel>
   
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" runat="server">


     <telerik:RadFormDecorator runat="server" ID="radFormDecorator" 
            DecoratedControls="None" />
   <table id="List" runat="server" cellspacing="0" cellpadding="0">
    <tr>
   <td> <asp:label ID="ChooseTemp" runat="server" Text=" Choose Template Group: " Width="150"></asp:label>   <telerik:RadComboBox ID="Dropdown_TemplateGroup" AutoPostBack="true" runat="server" Width="250" 
           DataTextField="OnlineDisplayName" DataValueField="ProductGroupID" 
           onselectedindexchanged="RadComboBox1_SelectedIndexChanged" AppendDataBoundItems="true">
           
           <Items><telerik:RadComboBoxItem Text="--- Choose template ---" /></Items>
           
       </telerik:RadComboBox>
       <br /><br /> </td>
   <td>
    
   </td>
   </tr>
   <tr>
   
   <td>
       <telerik:RadListView ID="TemplateList" runat="server" 
           ItemPlaceholderID="ListViewContainer" AllowPaging="True" 
           onneeddatasource="TemplateList_NeedDataSource" BorderStyle="None" 
           BorderWidth="0px">
         <LayoutTemplate>
     
  
   
    <asp:PlaceHolder runat="server" ID="ListViewContainer" />
   
   <telerik:RadDataPager ID="RadDataPager1" BorderStyle="Solid" BorderColor="Black"  BorderWidth="1" BackColor="White"  runat="server" PagedControlID="TemplateList"
                            PageSize="6" Width="742">
                            <Fields>
                                <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                                <telerik:RadDataPagerButtonField FieldType="Numeric" />
                                <telerik:RadDataPagerButtonField FieldType="NextLast" />
                                <telerik:RadDataPagerPageSizeField />
                            </Fields>
                        </telerik:RadDataPager>


    </LayoutTemplate>
    <ItemTemplate>
     <fieldset  style="border: thin solid #000000; float: left; width: 350px; height: 150px;">
 
 <legend style="font-family: 'Times New Roman', Times, serif; font-size: medium; font-weight: normal; font-style: normal; font-variant: normal; text-transform: capitalize; color: #000000"> <%#Eval("Name")%></legend>
 <div class="details">
  <div class="photo-container">
  <asp:Image ID="Image1" Height="120" ImageUrl="http://www.fastart.com.au/p2/jpegs/target_previews/5704.jpg" runat="server" />   </div>
                            
                  
 <div class="data-container">
 <table  cellspacing="10" cellpadding="10">




 <tr>
 <td><%#Eval("TemplateCode")%> </td>
 </tr>
 <tr>
 <td><%#Eval("Name")%></td>
 </tr>
 <tr>
 <td><%#Eval("UOM")%></td>
 </tr>
 </table>
 
 </div>


 </div>
 
 </fieldset>
    </ItemTemplate>
      
   
       </telerik:RadListView>
        <div style="clear: both;">
        </div>




   </td>
   </tr>
   
   </table>
   
    </telerik:RadAjaxPanel>
  
</asp:Content>