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

Transparency problem

7 Answers 127 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Nataraj
Top achievements
Rank 1
Nataraj asked on 07 Jul 2008, 05:16 AM
Hi,

I have divided my web window into three rad panes left, middle and right respectively. Left pane contains a Rad sliding pane with a Rad panel containing in itself. Middle pane has a Rad grid. Right sliding pane have some asp.net controls.

My application flow will be like this:
When user selects the report name from Rad panel in Left pane the user has to apply the appropriate filters from right pane and has to generate the report. Once report is generated the Rad grid will be loaded with report data.

My problem:
I have implemented all this perfectly.But, once Rad grid is loaded and if i slide my left pane with Rad panel, the Rad panel items and Rad grid details are getting overlapped. Seems like a transparancy problem. I am not knowing exactly why this is happening. When i slide my right pane there is no overlapping occured.
 Is it the problem with Rad panel in the left pane? Can any one help me out in this.
Thanks in advance.

Nataraj

7 Answers, 1 is accepted

Sort by
0
Nataraj
Top achievements
Rank 1
answered on 07 Jul 2008, 05:51 AM
Hi,

I have tried to figure out this problem. What i have observed is that Rad Panel items in Left pane are not getting overlapped with the rad grid details iff there is no grouping in Rad grid details. Once i drag any column into "drag and drop" are of Rad grid, the Rad grid is getting loaded with grouping. At this point if i slide my Left pane the Rad panel items in that are getting overlapped with the Rad grid items.

So the problem is with Rad grid. But what could be the solution for this?
Can any one please help me?

Thanks,
Nataraj
0
Dimo
Telerik team
answered on 08 Jul 2008, 01:25 PM
Hi Nataraj,

I tried reproducing the described issue with RadControls for ASP.NET AJAX (versions Q1 2008 and Q1 2008 SP2), but everything worked as expected. Here is the code snippet. Let me know if I am missing something:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
 
<!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"> 
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<title>RadControls for ASP.NET AJAX</title> 
</head> 
<body style="margin:0"> 
<form id="form1" runat="server"> 
<asp:ScriptManager ID="ScriptManager1" runat="server" /> 
<div> 
 
<telerik:RadSplitter ID="RadSplitter1" runat="server"> 
    <telerik:RadPane ID="RadPane1" runat="server" Width="20"> 
        <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server"> 
            <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Left Pane"> 
                Left Pane 
            </telerik:RadSlidingPane> 
        </telerik:RadSlidingZone> 
    </telerik:RadPane> 
 
    <telerik:RadPane ID="RadPane2" runat="server" Width="800px"> 
        <telerik:RadGrid 
            ID="RadGrid1" 
            runat="server" 
            DataSourceID="XmlDataSource1" 
            AllowPaging="true" 
            AllowSorting="true" 
            GroupingEnabled="true" 
            ShowGroupPanel="true" 
            > 
            <ClientSettings EnableRowHoverStyle="True" AllowDragToGroup="true"> 
                <Selecting AllowRowSelect="True" /> 
                <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
            </ClientSettings> 
        </telerik:RadGrid> 
    </telerik:RadPane> 
 
    <telerik:RadPane ID="RadPane3" runat="server" Width="20"> 
        <telerik:RadSlidingZone ID="RadSlidingZone2" runat="server" SlideDirection="Left"> 
            <telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Title="Right Pane"> 
                Right Pane 
            </telerik:RadSlidingPane> 
        </telerik:RadSlidingZone> 
    </telerik:RadPane> 
 
</telerik:RadSplitter> 
 
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/datasource.xml" /> 
 
</div> 
</form> 
</body> 
</html> 
 


Greetings,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Nataraj
Top achievements
Rank 1
answered on 08 Jul 2008, 02:21 PM

Hi Dimo,

Thanks for your reply. In the code snippet, please add a Rad panel in "RadSlidingPane1" with defined set of items.

<telerik:RadPanelBar runat="server" ID="RadPanelBar1" ExpandMode="SingleExpandedItem" 
 
 AllowCollapseAllItems="True" Width="100%" 
 
Height="80%" Skin="Vista" Font-Names="Calibri" Font-Size="Smaller" Font-Bold="True">  
 
<Items>  
 
<telerik:RadPanelItem runat="server" Text="AAA" Expanded="True">  
 
<Items>  
 
<telerik:RadPanelItem runat="server" Text="AA">  
 
</telerik:RadPanelItem>  
 
<telerik:RadPanelItem runat="server" Text="BB">  
 
</telerik:RadPanelItem>  
 
<telerik:RadPanelItem runat="server" Text="CC">  
 
</telerik:RadPanelItem>  
 
<telerik:RadPanelItem runat="server" Text="DD">  
 
</telerik:RadPanelItem>  
 
 
 
</Items>   
 
</telerik:RadPanelItem>  
 
<telerik:RadPanelItem runat="server" Text="BBB">  
 
<Items>  
 
<telerik:RadPanelItem runat="server" Text="AA">  
 
</telerik:RadPanelItem>  
 
<telerik:RadPanelItem runat="server" Text="BB">  
 
</telerik:RadPanelItem>  
 
</Items>  
 
</telerik:RadPanelItem>  
 
<telerik:RadPanelItem runat="server" Text="CCC">  
 
<Items>  
 
<telerik:RadPanelItem runat="server" Text="AA">  
 
</telerik:RadPanelItem>  
 
<telerik:RadPanelItem runat="server" Text="BB">  
 
<Items>  
 
<telerik:RadPanelItem runat="server" Text="A">  
 
</telerik:RadPanelItem>  
 
<telerik:RadPanelItem runat="server" Text="B">  
 
</telerik:RadPanelItem>  
 
<telerik:RadPanelItem runat="server" Text="C">  
 
</telerik:RadPanelItem>  
 
</Items>  
 
</telerik:RadPanelItem>  
 
<telerik:RadPanelItem runat="server" Text="DDD">  
 
</telerik:RadPanelItem>  
 
</Items>  
 
</telerik:RadPanelItem>  
 
<telerik:RadPanelItem runat="server" Text="AA">  
 
 
 
</telerik:RadPanelItem>   
 
<telerik:RadPanelItem runat="server" Text="BB">  
 
<Items>  
 
<telerik:RadPanelItem runat="server" Text="CC">  
 
</telerik:RadPanelItem>  
 
</Items>  
 
</telerik:RadPanelItem>  
 
</Items>  
 
<CollapseAnimation Duration="100" Type="None" />  
 
<ExpandAnimation Duration="100" Type="None" />  
 
</telerik:RadPanelBar>  
 
 

Once rad grid is binded with grouped data , please slide the "RadSlidingPane1" which has Rad panel in it as declared above.

"At this point i am getting this problem".

I tried to find out the reason for this. What my observation is:

This is some how linked to CSS style property. Most propably "Background-color" CSS style property is causing this problem.

I came to this conclusion when i have performed the following steps:

1) For the right pane(pane with ASP .net controls) i have defined a CSS class as following:

.FilterStyle  
 
{  
 
background-color:Transparent;  
 
font-family: Calibri;  
 
font-size: 10pt;  
 
color:Black;  
 
font-weight:normal;   
 
}  
 
 

2) After defining this css class for the (sliding) right pane , i could observe the overlapping of Rad grid detail items with right pane contents.
But when i changed the CSS definition to :

 
.FilterStyle  
 
{  
 
background-color:White;  
 
font-family: Calibri;  
 
font-size: 10pt;  
 
color:Black;  
 
font-weight:normal;   
 
}  
 
 

I couldn't see the overlapping happening after changing the backgound-color CSS property to "white".

3) I could solve the Right pane problem because the css class is written by me. But coming to the case of Left pane and RAD grid i am not clear which Rad control's CSS property is causing this problem. I din't define any CSS class for any of the controls in Left pane(including Rad panel) or Rad grid. Does Rad grid defines a CSS class internally when grouping is performed?

Thanks,
Nataraj.






0
Nataraj
Top achievements
Rank 1
answered on 08 Jul 2008, 03:03 PM
Hi Dimo,

My problem is solved. Thing is The RadPanes that i have declared belongs to "Telerik.Web.UI" namespace. But the Rad splitter,Rad sliding zone and Rad sliding pane that i have declared belongs to "Telerik.Webcontrols". I have dragged these from "RAD controls for ASP.Net Q1 2008".

<%@ Register Assembly="RadSplitter.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>   
 

All these three controls start with the tag "rad".


But the Rad pane sarts with tag "telerik" which i have defined as a tag prefix for assembly "Telerik.Web.UI".

So i changed the tag prefix of all those to "telerik". Then i din't face this problem.

I could solve in Trail and Error method. But if u have understood the concept behind this can u please share with me?

Thanks,
Nataraj

0
Konstantin Petkov
Telerik team
answered on 09 Jul 2008, 07:16 AM
Hi Nataraj,

We're glad you were able to solve the problem. Please, answer our questions in Ticket ID: 148754.

Kind regards,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Ricardo
Top achievements
Rank 1
answered on 26 Nov 2008, 03:18 PM
 Hi Dimo

I have the same problem reported by Nataraj, but I have Q32007 SP2 version, and it throws overlapping problems when activating Scrolling in the radgrid.

<ClientSettings AllowExpandCollapse = "True">
<Scrolling
AllowScroll="true"
ScrollHeight="500px"
/>
</ClientSettings>

Only in this case I get the problem

Can you help me?

Thanks,
pardo
0
Sebastian
Telerik team
answered on 26 Nov 2008, 03:42 PM
Hello Ricardo,

Please migrate to the latest version Q3 2008 SP1 of RadControls for ASP.NET AJAX (2008.3.1125) to see whether this alleviates the abnormality. Upgrade instructions can be found here:

http://www.telerik.com/support/kb/aspnet-ajax/general/updating-radcontrols-for-asp-net-to-another-version-or-license.aspx

Best regards,
Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
General Discussions
Asked by
Nataraj
Top achievements
Rank 1
Answers by
Nataraj
Top achievements
Rank 1
Dimo
Telerik team
Konstantin Petkov
Telerik team
Ricardo
Top achievements
Rank 1
Sebastian
Telerik team
Share this question
or