Alternating row backcolor

9 posts, 0 answers
  1. james
    james avatar
    19 posts
    Member since:
    Aug 2014

    Posted 12 Jan 2015 Link to this post

    After setting the back color of the treelist,, the alternating row selection color only covers half the row. How can I remove this behavior?
  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 13 Jan 2015 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. james
    james avatar
    19 posts
    Member since:
    Aug 2014

    Posted 13 Jan 2015 in reply to Pavlina Link to this post

    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
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 16 Jan 2015 Link to this post

    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.

     
  6. james
    james avatar
    19 posts
    Member since:
    Aug 2014

    Posted 16 Jan 2015 in reply to Pavlina Link to this post

    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
  7. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 16 Jan 2015 Link to this post

    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.

     
  8. james
    james avatar
    19 posts
    Member since:
    Aug 2014

    Posted 16 Jan 2015 in reply to Pavlina Link to this post

    I coded a WebForm file with the exact scenario and just hard coded datatable to bind to. The alternating rows shows the problem.

  9. james
    james avatar
    19 posts
    Member since:
    Aug 2014

    Posted 16 Jan 2015 in reply to james Link to this post

    <%@ 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)
            {
                

            }



        }
    }











  10. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 21 Jan 2015 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017