Same background color in RadListview

5 posts, 0 answers
  1. Tran Huy
    Tran Huy avatar
    3 posts
    Member since:
    Nov 2012

    Posted 04 Feb 2014 Link to this post

    How can I repaire background color in RadListviewFloated ?
    I change color back ground in rlvI and rlvA, it's same but I use change class="rlvI <%# Eval("ID") %>" with class rlvI"ID"
    it's running only half of it?

    I try to get ID by ListView_ItemDataBound but it's only change half of it too?

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Feb 2014 in reply to Tran Huy Link to this post

    Hi Tran Huy,

    Please have a look into the sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadListView ID="RadListView1" Width="25px" runat="server" Height="10px"
        DataSourceID="SqlDataSource1" ItemPlaceholderID="ProductsHolder" DataKeyNames="ProductID">
        <LayoutTemplate>
            <fieldset style="max-width: 250px;" id="FieldSet1">
                <legend>Products</legend>
                <asp:Panel ID="ProductsHolder" runat="server" />
            </fieldset>
        </LayoutTemplate>
        <ItemTemplate>
            <fieldset>
                <legend>ProductID:
                    <%#Eval("ProductID")%>
                </legend>
                <table>
                    <tr>
                        <td>
                            ProductID:
                        <td>
                            <%#Eval("ProductID")%>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </ItemTemplate>
        <AlternatingItemTemplate>
            <fieldset>
                <legend>ProductID:
                    <%#Eval("ProductID")%>
                </legend>
                <table>
                    <tr>
                        <td>
                            ProductID:
                        <td>
                            <%#Eval("ProductID")%>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <div style="clear: both">
            </div>
        </AlternatingItemTemplate>
    </telerik:RadListView>

    CSS:
    <style type="text/css">
        #FieldSet1
        {
            background-color: Gray !important;
        }
    </style>

    Please provide your code if it doesn't help.
    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tran Huy
    Tran Huy avatar
    3 posts
    Member since:
    Nov 2012

    Posted 05 Feb 2014 in reply to Shinu Link to this post

    Fill color like you is the same, but if you fill color by condition or following data, it's difference. if you try to access data in list view, it's difference, only effect half.
    This sample I fill it's by condition.

    you can test it.

    this my code

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test7.aspx.cs" Inherits="Frontendtest.Test7" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href='CSS/TSListView.css' type="text/css" rel="stylesheet" />
        <link href='Layout/Layoutfr.css' type="text/css" rel="stylesheet" />
        <link href='Layout/site.css' type="text/css" rel="stylesheet" />
        <script runat="server">
         protected void ListView_ItemDataBound(object sender, RadListViewItemEventArgs e)
            {
                if (e.Item.ItemType == RadListViewItemType.DataItem)
                {

                    foreach (var control in e.Item.Controls)
                    {

                        if (control is Label)
                        {

                            var lbl = (Label)control;
                            if (lbl.Text == "Ready")
                                lbl.CssClass = "bold";
                            else
                                lbl.CssClass = "Style2";
                        }
                    }
                }

            }
            </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        THIS IS TEST AUTO ARRANGE ROOM
        </div>
         <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
          <asp:Panel runat="server" ID="ListViewPanel" Style="margin: 10px 0 0 0;">
        <telerik:RadListView ID="RadListView2" runat="server" DataKeyNames="RoomID" 
        OnItemDataBound="ListView_ItemDataBound" ItemPlaceholderID="itemsContainer">
        <LayoutTemplate>
                    <div class="RadListView RadListViewFloated">
                        <div class="rlvFloated">
                       
                            <asp:Literal id="itemsContainer" runat="server"> </asp:Literal>
                            
                        </div>
                    </div>
        </LayoutTemplate>
      
         
       <AlternatingItemTemplate>
                <div class="rlvA" 
                        style="height:60px; width:60px; margin-top:3px; margin-left:3px; margin-right:3px; margin-bottom:3px" >
                        <br />
                         <asp:Label ID="RoomIDLabel" runat="server" Text='<%# Eval("RoomID") %>' />
                        <br />
                        <asp:Label ID="RoomNameLabel" runat="server" Text='<%# Eval("RoomName") %>' />
                        <br />
                         <asp:Label ID="StatusLabel" runat="server" Text='<%# Eval("RoomStatus") %>' />
                        <br />
                       
                    </div>
            
       </AlternatingItemTemplate>
       
       <ItemTemplate>
               <div class="rlvI" 
                        style="height:60px; width:60px;  background-color:Azure; margin-top:3px; margin-left:3px; margin-right:3px; margin-bottom:3px">
                        <br />
                        <asp:Label ID="RoomIDLabel" runat="server" Text='<%# Eval("RoomID") %>' />
                        <br />
                        <asp:Label ID="RoomNameLabel" runat="server" Text='<%# Eval("RoomName") %>' />
                        <br />
                        <asp:Label ID="StatusLabel" runat="server" Text='<%# Eval("RoomStatus") %>' />
                        <br />
                       
                    </div>
       </ItemTemplate>

        </telerik:RadListView>
        </asp:Panel>

        </form>
    </body>
    </html>
    ASPX.CS
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data.SqlClient;
    using System.Data;
    using System.Configuration;
    using Telerik.Web.UI;


    namespace Frontendtest
    {
        public partial class Test7 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (Page.IsPostBack) return;
                LoadDataForSimpleDatabind();
            }
           
            private void LoadDataForSimpleDatabind()
            {
                RadListView2.DataSource = GetDataTable();
                RadListView2.DataBind();
            }
            private DataTable GetDataTable()
            {
                string ConnString = ConfigurationManager.ConnectionStrings["mygiacattuong2014ConnectionString"].ConnectionString;
                string query = "SELECT [RoomID], [RoomName], [RoomStatus]";
                query += " FROM [Room]";
                DataTable myDataTable = new DataTable();
                using (SqlConnection conn = new SqlConnection(ConnString))
                {
                    using (SqlDataAdapter adapter = new SqlDataAdapter())
                    {
                        adapter.SelectCommand = new SqlCommand(query, conn);
                        
                        try
                        {
                            conn.Open();
                            adapter.Fill(myDataTable);
                        }
                        catch (Exception ex)
                        {
                        }
                        finally
                        {
                            conn.Close();
                        }
                    }
                }
                return myDataTable;
            }
           
        }
    }

  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 07 Feb 2014 Link to this post

    Hi,

    The items in RadListView are of type DataItem and AlternatingItem. In your code the CssClass is applied only to Label controls that are placed in a DataItem. This is why every second Label does not have the "bold" CssClass.

    In order to apply styles to all items you could modify the condition in your ItemDataBound handler like shown below:

    protected void ListView_ItemDataBound(object sender, RadListViewItemEventArgs e)
    {
        if (e.Item.ItemType == RadListViewItemType.DataItem || e.Item.ItemType == RadListViewItemType.AlternatingItem)
        {
            foreach (var control in e.Item.Controls)
            {
                if (control is Label)
                {
                    var lbl = (Label)control;
     
                    if (lbl.Text == "Ready")
                    {
                        lbl.CssClass = "bold";
                    }
                    else
                    {
                        lbl.CssClass = "Style2";
                    }
                }
            }
        }
    }


    Regards,
    Viktor Tachev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  6. Tran Huy
    Tran Huy avatar
    3 posts
    Member since:
    Nov 2012

    Posted 07 Feb 2014 Link to this post

    thank you Viktor, it's running
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017