Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Alternating row backcolor

8 Answers 171 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
james
Top achievements
Rank 1
james asked on 12 Jan 2015, 04:13 PM
alternatingtreelist.png
After setting the back color of the treelist,, the alternating row selection color only covers half the row. How can I remove this behavior?

8 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 13 Jan 2015, 12:37 PM
Hi,

Try changing the selected item color using the code snippet below and let me know if you still encounter this behavior:

<style type="text/css">
     div.RadTreeList_SkinName .rtlRSel td
     {
         background-image: none;
         background-color: blue;
     }
 </style>

Regards,
Pavlina
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
james
Top achievements
Rank 1
answered on 13 Jan 2015, 04:20 PM
alternatingtreelist2.png
Hi Pavlina,

It didn't have any affect. I noticed the problem only occurs when I set the  AlternatingItemStyle-BackColor="#C4C5CC" on alternating rows that have a column that spans two lines. How can I remove the alternating row color?


James
0
Pavlina
Telerik team
answered on 16 Jan 2015, 12:45 PM
Hi,

I have also added BackColor to the alternating item, however, I was not able to observe the described problem. You can see how it is working on my side in the video linked below:
http://screencast.com/t/9yuTnScuR

Regards,
Pavlina
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
james
Top achievements
Rank 1
answered on 16 Jan 2015, 03:29 PM
Hi

Your example doesn't include a column that spans two row of text like in the image I attached. In other words, I have fixed column widths and a text value is too long to fit in the col in one row so it wraps below.


James
0
Pavlina
Telerik team
answered on 16 Jan 2015, 04:30 PM
Hello,

Could you send us a live URL where the problem you encounter can be observed so we can inspect the control and provide a proper solution for your case?

Regards,
Pavlina
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
james
Top achievements
Rank 1
answered on 16 Jan 2015, 06:34 PM
I coded a WebForm file with the exact scenario and just hard coded datatable to bind to. The alternating rows shows the problem.

0
james
Top achievements
Rank 1
answered on 16 Jan 2015, 06:37 PM
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ShippingPlan.WebForm1" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <style>

       div.RadtreeList_WebBlue .rtlRSel td
       {
           background-image: none;
           background-color: none;
       }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
          <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
                </asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
        <telerik:RadTreeList  ID="RadTreeList1" runat="server" skin="WebBlue"   AllowPaging="True" AlternatingItemStyle-BackColor="#C4C5CC"    BackColor="#C4C5CC" selectionmode="Multiple" DataKeyNames="ShippingPlanItemId" ParentDataKeyNames="ParentId" AutoGenerateColumns="False" OnItemCommand="RadTreeList1_ItemCommand" OnItemCreated="RadTreeList1_ItemCreated" OnUpdateCommand="RadTreeList1_UpdateCommand" OnInsertCommand="RadTreeList1_InsertCommand" OnDeleteCommand="RadTreeList1_DeleteCommand" AllowRecursiveDelete="True" EditMode="PopUp" OnNeedDataSource="RadTreeList1_NeedDataSource" AllowMultiItemSelection="True" Height="620px" >
              <SelectedItemStyle CssClass="selectedRow" />
               <ClientSettings>
                   <%-- <ClientEvents OnItemContextMenu="onItemContextMenu" ></ClientEvents>--%>
                    <Selecting AllowItemSelection="True"></Selecting>
                  
                    <Scrolling AllowScroll="True" ScrollHeight="700px" />
                  <%-- <Selecting UseSelectColumnOnly="true" />--%>
                   <Resizing AllowColumnResize="false" />
               </ClientSettings>

               <ExportSettings>
                   <Excel PageLeftMargin="0.7in" PageRightMargin="0.7in">
                   </Excel>
                   <Pdf PageHeight="11in" PageWidth="8.5in">
                   </Pdf>   
               </ExportSettings>

               <EditFormSettings EditFormType="AutoGenerated">
               </EditFormSettings>
               <ValidationSettings CommandsToValidate="PerformInsert,Update" />

               <Columns>
                   <telerik:TreeListSelectColumn HeaderStyle-Width="40px">
                       <HeaderStyle Width="40px" />
                   </telerik:TreeListSelectColumn>

                   <telerik:TreeListBoundColumn DataField="ShippingPlanItemId" HeaderText="ShippingPlanItemId" ReadOnly="true" UniqueName="ShippingPlanItemId">
                          <HeaderStyle Width="60px"></HeaderStyle>
                   </telerik:TreeListBoundColumn>
                                 

                    <telerik:TreeListBoundColumn DataField="SOLine" HeaderText="SOLine" UniqueName="SOLine">
                             <HeaderStyle Width="80px"></HeaderStyle>
                   </telerik:TreeListBoundColumn>

                   <telerik:TreeListBoundColumn DataField="ItemNumber" HeaderText="ItemNumber" UniqueName="ItemNumber" >
                             <HeaderStyle Width="100px"></HeaderStyle>
                   </telerik:TreeListBoundColumn>

                   <telerik:TreeListBoundColumn DataField="Description" HeaderText="Description" UniqueName="Description">
                             <HeaderStyle Width="400px"></HeaderStyle>
                   </telerik:TreeListBoundColumn>
                                     
                   <telerik:TreeListBoundColumn DataField="Quantity" HeaderText="Qty" UniqueName="Qty" HeaderStyle-Width="60px">
                       
                   </telerik:TreeListBoundColumn>
                                       
                   <telerik:TreeListBoundColumn DataField="QuantityShipped" HeaderText="Qty Shipped" UniqueName="QtyShipped" HeaderStyle-Width="60px">
                        
                   </telerik:TreeListBoundColumn>
                                        
                   <telerik:TreeListBoundColumn DataField="EstimatedShippedDate" HeaderText="Est Shipped Date" UniqueName="EstimatedShippedDate" HeaderStyle-Width="100px">
                        
                   </telerik:TreeListBoundColumn>                   

                     <telerik:TreeListBoundColumn DataField="JobNumber" HeaderText="JobNumber" UniqueName="JobNumber" HeaderStyle-Width="100px">
                       
                   </telerik:TreeListBoundColumn>

                    <telerik:TreeListBoundColumn DataField="JobStatus" HeaderText="JobStatus" UniqueName="JobStatus" HeaderStyle-Width="100px">
                     
                   </telerik:TreeListBoundColumn>

                   <telerik:TreeListCheckBoxColumn DataField="Traceable" HeaderText="Traceable" UniqueName="Traceable" HeaderStyle-Width="60px">
                      
                   </telerik:TreeListCheckBoxColumn>

                   <telerik:TreeListCheckBoxColumn DataField="BackOrder" HeaderText="BackOrder" UniqueName="BackOrder" HeaderStyle-Width="60px">
                      
                   </telerik:TreeListCheckBoxColumn>
                                     
                   <telerik:TreeListBoundColumn DataField="BackOrderComments" HeaderText="BO Comments" UniqueName="BackOrderComments" HeaderStyle-Width="300px">
                      
                   </telerik:TreeListBoundColumn>

                   <telerik:TreeListBoundColumn DataField="ItemType" HeaderText="ItemType" UniqueName="ItemType"  HeaderStyle-Width="80px">
                        
                   </telerik:TreeListBoundColumn>                  

                   <telerik:TreeListBoundColumn DataField="ParentId" HeaderText="ParentId" UniqueName="ParentId" HeaderStyle-Width="60px">
                      
                   </telerik:TreeListBoundColumn>
                                    
                    <telerik:TreeListCheckBoxColumn DataField="Selected" HeaderText="Select" UniqueName="Select" HeaderStyle-Width="60px">
                       <HeaderStyle Width="100px" />
                   </telerik:TreeListCheckBoxColumn>

               </Columns>
               <PagerStyle PageSizeControlType="RadComboBox" />

          </telerik:RadTreeList>

    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;

using System.Web.UI.WebControls;
using Telerik.Web.UI;
using System.Collections;
using System.Data;
using System.Data.Sql;
using System.Data.SqlClient;

namespace ShippingPlan
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
             

                 //<telerik:TreeListBoundColumn DataField="ShippingPlanItemId" HeaderText="ShippingPlanItemId" ReadOnly="true" UniqueName="ShippingPlanItemId">
                 //         <HeaderStyle Width="60px"></HeaderStyle>
                 //  </telerik:TreeListBoundColumn>
                                 

                 //   <telerik:TreeListBoundColumn DataField="SOLine" HeaderText="SOLine" UniqueName="SOLine">
                 //            <HeaderStyle Width="80px"></HeaderStyle>
                 //  </telerik:TreeListBoundColumn>

                 //  <telerik:TreeListBoundColumn DataField="ItemNumber" HeaderText="ItemNumber" UniqueName="ItemNumber" >
                 //            <HeaderStyle Width="100px"></HeaderStyle>
                 //  </telerik:TreeListBoundColumn>

                 //  <telerik:TreeListBoundColumn DataField="Description" HeaderText="Description" UniqueName="Description">
                 //            <HeaderStyle Width="400px"></HeaderStyle>
                 //  </telerik:TreeListBoundColumn>
                                     
                 //  <telerik:TreeListBoundColumn DataField="Quantity" HeaderText="Qty" UniqueName="Qty" HeaderStyle-Width="60px">
                       
                 //  </telerik:TreeListBoundColumn>
                                       
                 //  <telerik:TreeListBoundColumn DataField="QuantityShipped" HeaderText="Qty Shipped" UniqueName="QtyShipped" HeaderStyle-Width="60px">
                        
                 //  </telerik:TreeListBoundColumn>
                                        





                 //  <telerik:TreeListBoundColumn DataField="EstimatedShippedDate" HeaderText="Est Shipped Date" UniqueName="EstimatedShippedDate" HeaderStyle-Width="100px">
                        
                 //  </telerik:TreeListBoundColumn>                   

                 //    <telerik:TreeListBoundColumn DataField="JobNumber" HeaderText="JobNumber" UniqueName="JobNumber" HeaderStyle-Width="100px">
                       
                 //  </telerik:TreeListBoundColumn>

                 //   <telerik:TreeListBoundColumn DataField="JobStatus" HeaderText="JobStatus" UniqueName="JobStatus" HeaderStyle-Width="100px">
                     
                 //  </telerik:TreeListBoundColumn>

                 //  <telerik:TreeListCheckBoxColumn DataField="Traceable" HeaderText="Traceable" UniqueName="Traceable" HeaderStyle-Width="60px">
                      
                 //  </telerik:TreeListCheckBoxColumn>

                 //  <telerik:TreeListCheckBoxColumn DataField="BackOrder" HeaderText="BackOrder" UniqueName="BackOrder" HeaderStyle-Width="60px">
                      
                 //  </telerik:TreeListCheckBoxColumn>
                                     
                 //  <telerik:TreeListBoundColumn DataField="BackOrderComments" HeaderText="BO Comments" UniqueName="BackOrderComments" HeaderStyle-Width="300px">
                      
                 //  </telerik:TreeListBoundColumn>

                 //  <telerik:TreeListBoundColumn DataField="ItemType" HeaderText="ItemType" UniqueName="ItemType"  HeaderStyle-Width="80px">
                        
                 //  </telerik:TreeListBoundColumn>                  

                 //  <telerik:TreeListBoundColumn DataField="ParentId" HeaderText="ParentId" UniqueName="ParentId" HeaderStyle-Width="60px">
                      
                 //  </telerik:TreeListBoundColumn>
                                    
                 //   <telerik:TreeListCheckBoxColumn DataField="Selected" HeaderText="Select" UniqueName="Select" HeaderStyle-Width="60px">
                 //      <HeaderStyle Width="100px" />
                 //  </telerik:TreeListCheckBoxColumn>



                DataTable dt = new DataTable();
                  //string sql = "SELECT [ShippingPlanItemId], [ShippingPlanId], [Description], [ItemType],  [Quantity], [ParentId], [JobNumber], [Traceable] FROM [ShippingPlanItem]";

                DataColumn col = new DataColumn("ShippingPlanItemId", System.Type.GetType("System.Int32"));

                DataColumn col1 = new DataColumn("SOLine", System.Type.GetType("System.String"));
                DataColumn col2 = new DataColumn("ItemNumber", System.Type.GetType("System.String"));
                DataColumn col3 = new DataColumn("Description", System.Type.GetType("System.String"));
                DataColumn col4 = new DataColumn("Quantity", System.Type.GetType("System.String"));
                DataColumn col5 = new DataColumn("QuantityShipped", System.Type.GetType("System.String"));

                DataColumn col6 = new DataColumn("EstimatedShippedDate", System.Type.GetType("System.String"));
                DataColumn col7 = new DataColumn("JobNumber", System.Type.GetType("System.String"));
                DataColumn col8 = new DataColumn("JobStatus", System.Type.GetType("System.String"));
                DataColumn col9 = new DataColumn("Traceable", System.Type.GetType("System.Boolean"));
                DataColumn col10 = new DataColumn("BackOrder", System.Type.GetType("System.Boolean"));

                DataColumn col11 = new DataColumn("BackOrderComments", System.Type.GetType("System.String"));
                DataColumn col12 = new DataColumn("ItemType", System.Type.GetType("System.String"));
                DataColumn col13 = new DataColumn("ParentId", System.Type.GetType("System.Int32"));           
                DataColumn col14 = new DataColumn("Selected", System.Type.GetType("System.Boolean"));

                dt.Columns.Add(col); 
                dt.Columns.Add(col1);
                dt.Columns.Add(col2);
                dt.Columns.Add(col3);
                dt.Columns.Add(col4);
                dt.Columns.Add(col5);
                dt.Columns.Add(col6);
                dt.Columns.Add(col7); 
                dt.Columns.Add(col8);
                dt.Columns.Add(col9); 
                dt.Columns.Add(col10); 
                dt.Columns.Add(col11);
                dt.Columns.Add(col12);
                dt.Columns.Add(col13);
                dt.Columns.Add(col14);
                
                for (int x = 0; x < 10; x++)
                {
                    DataRow dr = dt.NewRow();


                    dr["ShippingPlanItemId"] = x;
                    dr["SOLine"] = "1.1";

                    dr["ItemNumber"] = "111110000-11";
                    dr["Description"] = "Item Descriiption inclusing demensions, specs, color model number, product line, wharehouse location and othe pertinent information";

                    dr["Quantity"] = "10";
                    dr["QuantityShipped"] = "10";

                    dr["EstimatedShippedDate"] = "02/15/2015";
                    dr["JobNumber"] = "123456";

                    dr["JobStatus"] = "Active";
                    dr["Traceable"] = false;
                    dr["BackOrder"] = true;

                    dr["BackOrderComments"] = "Some comments";
                    dr["ItemType"] = "Kit";
                    dr["ParentID"] = 0;
                    dr["Selected"] = false;

                    dt.Rows.Add(dr);
                }


                RadTreeList1.DataSource = dt;
                RadTreeList1.DataBind();

             
            }
            catch(Exception ex)
            {


            }

        }


        protected void RadTreeList1_ItemCommand(object sender, TreeListCommandEventArgs e)
        {
            if (e.CommandName == "CancelAll")
            {
                e.Item.OwnerTreeList.EditIndexes.Clear();
                e.Item.OwnerTreeList.InsertIndexes.Clear();
                e.Item.OwnerTreeList.Rebind();
            }
        }


        protected void RadTreeList1_DeleteCommand(object sender, TreeListCommandEventArgs e)
        {
           

        }

        protected void RadTreeList1_NeedDataSource(object source, TreeListNeedDataSourceEventArgs e)
        {
          
                         
        }

        protected void RadTreeList1_InsertCommand(object sender, TreeListCommandEventArgs e)
        {

           

        }

        protected void RadTreeList1_ItemCreated(object sender, TreeListItemCreatedEventArgs e)
        {


        }

        protected void RadTreeList1_UpdateCommand(object sender, TreeListCommandEventArgs e)
        {
            

        }



    }
}











0
Pavlina
Telerik team
answered on 21 Jan 2015, 02:01 PM
Hello,

By setting AlternatingItemStyle-BackColor Treelist render an inline style in the HTML output, which takes precedence over skin styles. As a result, the declared alternating item style will override row selected styles from the skin. To find out the original RadGrid selected row background and enforce it back you can use the code snippet below:
div.RadTreeList .rtlRSel
{
    background-color: #7bbbcf !important;
}

Regards,
Pavlina
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
TreeList
Asked by
james
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
james
Top achievements
Rank 1
Share this question
or