Layout changes during ItemDataBound

3 posts, 0 answers
  1. Matteo Pellizzoni
    Matteo Pellizzoni avatar
    3 posts
    Member since:
    Mar 2010

    Posted 16 Apr 2010 Link to this post

    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> 
     


  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 19 Apr 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. prat
    prat avatar
    10 posts
    Member since:
    Jul 2011

    Posted 11 Oct 2011 Link to this post

    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>
Back to Top