This is a migrated thread and some comments may be shown as answers.

Slider Images not displayed

1 Answer 47 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
kiran
Top achievements
Rank 1
kiran asked on 09 Nov 2009, 11:14 AM
Hi Telerik Team,

i have a problem in radtooltip...

i have a radgrid inside a radtooltip, the radgrid hase the pagestyle mode as slider.
when the tooltip is displayed the slider images is not displayed,
but if u do a postback by clicking in the sort column in the radgrid the second time the slider works fine.

ex:-

    <form id="form1" runat="server">
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="Server">
        
            <script language="javascript" type="text/javascript">
              
                function ShowImageTooltip(obj)
                {
                    var tooltip = $find("<%=RTTImageView.ClientID %>");
                    if(obj.id != tooltip.get_targetControlID)tooltip.set_targetControl(obj)
                    window.setTimeout(function(){ var tooltip = $find("<%=RTTImageView.ClientID %>"); tooltip.show(); }, 10);
                 }
               
            </script>
        </telerik:RadScriptBlock>
    <telerik:RadScriptManager id="ScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="30" style="background:url('../Images/LoadingTitle.gif') center center no-repeat #f3f3e2;"></telerik:RadAjaxLoadingPanel>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" EnableRoundedCorners="true" DecoratedControls="Buttons,CheckBoxes,Label,RadioButtons,Scrollbars,Textarea,Textbox" />
        <telerik:RadDockLayout  ID="radLocationDocLayout" runat="server" Skin="Forest" EnableEmbeddedSkins="true"  >
            <telerik:RadDockZone ID="radLocationDocZone"  Height="400" runat="server" EnableEmbeddedSkins="true" Skin="Forest" Width="400">
                    <telerik:RadDock ID="radLocationDoc" runat="server" EnableEmbeddedSkins="true" EnableTheming="true"
                        Skin="Forest" Width="400" Height="400">
                        <ContentTemplate>
                        <div id="div1" runat="server" onmouseover="ShowImageTooltip(this)">
                            <telerik:RadGrid ID="radGridTest"   EnableTheming="True"  Skin="Forest" EnableEmbeddedSkins="true" EnableEmbeddedBaseStylesheet="False" AllowSorting="True"
                                AllowMultiRowSelection="true" AllowMultiRowEdit="true" EnableAJAX="true" Width="800"
                                runat="server" AllowPaging="True" AutoGenerateColumns="True" ShowStatusBar="true" ClientSettings-AllowColumnsReorder="true" >
                                <PagerStyle HorizontalAlign="Left" Mode="Slider" alwaysvisible="True" EnableSEOPaging="True"></PagerStyle>
                                <MasterTableView  Width="800"  NoDetailRecordsText="No records to display" NoMasterRecordsText="No records to display" EnableAJAX="true">
                                    <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle"></HeaderStyle>
                                    <ItemStyle HorizontalAlign="Left"></ItemStyle><AlternatingItemStyle HorizontalAlign="Left"></AlternatingItemStyle>
                                </MasterTableView>
                                <HeaderStyle  CssClass="RadGridHeader" ></HeaderStyle>
                                <ClientSettings  Resizing-AllowColumnResize="true" >
                                    <%--<ClientEvents OnColumnMouseOver="ShowImageTooltip(this)" />--%><Selecting AllowRowSelect="True" ></Selecting>
                                </ClientSettings>
                                <FilterMenu  EnableTheming="True" Skin="WebBlue" enableembeddedbasestylesheet="False">
                                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                                </FilterMenu>
                                <SortingSettings   SortToolTip="Click here to sort"></SortingSettings>
                            </telerik:RadGrid>
                        </div>
                        </ContentTemplate>
                    </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
        
        <telerik:RadToolTip RenderInPageRoot="true" runat="server" ID="RTTImageView" Skin="Forest" RelativeTo="Element" EnableEmbeddedSkins="true" Position="Center"    HideEvent="ManualClose" ShowEvent="FromCode" >
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"  Height="100%"  LoadingPanelID="RadAjaxLoadingPanel1" Width="100%">
                <div style="padding:15px;" runat="server" id="div">
                   <telerik:RadGrid ID="radGridTooltip"  EnableTheming="True"  Skin="Forest" EnableEmbeddedSkins="true" EnableEmbeddedBaseStylesheet="False" AllowSorting="True"
                    AllowMultiRowSelection="true" AllowMultiRowEdit="true"  EnableAJAX="true" Width="1000"
                            runat="server" AllowPaging="True" AutoGenerateColumns="True" ShowStatusBar="true" ClientSettings-AllowColumnsReorder="true" >
                        <PagerStyle HorizontalAlign="Left" Mode="slider" alwaysvisible="True" EnableSEOPaging="True"></PagerStyle>
                        <MasterTableView  Width="1000"  NoDetailRecordsText="No records to display" NoMasterRecordsText="No records to display" EnableAJAX="true">
                            <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle"></HeaderStyle>
                            <ItemStyle HorizontalAlign="Left"></ItemStyle><AlternatingItemStyle HorizontalAlign="Left"></AlternatingItemStyle>
                        </MasterTableView>
                        <HeaderStyle CssClass="RadGridHeader" ></HeaderStyle>
                        <ClientSettings  Resizing-AllowColumnResize="true">
                        <Scrolling   AllowScroll="true" UseStaticHeaders="true"  ScrollHeight="400" />
                        <Selecting AllowRowSelect="True" ></Selecting></ClientSettings>
                        <FilterMenu  EnableTheming="True" Skin="WebBlue" enableembeddedbasestylesheet="False">
                            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                        </FilterMenu>
                        <SortingSettings SortToolTip="Click here to sort"></SortingSettings>
                    </telerik:RadGrid>
                </div>
            </telerik:RadAjaxPanel>
        </telerik:RadToolTip>
    </form>



1 Answer, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 12 Nov 2009, 08:56 AM
Hello kiran,

I build up a test demo based on your explanations and I was able to reproduce the problem. The issue comes from teh fact that the slider was initially rendered in an invisible element (the tooltip) and thus it cannot correctly render. What you should do is to reference it when it is being shown (in the tooltip's OnClientShow event with a small timeout, even 0ms will do the trick) and force it to repaint by using its repaint method. You can find more about this in the KB article below:

http://www.telerik.com/support/kb/aspnet-ajax/slider/radslider-inside-initially-hidden-elements-e-g-radtooltip.aspx

(In this specififc case, when the slider is in the grid, you can reference it by hard - coding its ID or better - evaluate it at runtime as shown below:


<form id="form1" runat="server">
       <div id="test">
           <asp:ScriptManager ID="ScriptManager1" runat="server" />
           <script type="text/javascript">
             
           function OnClientShow()
           {
               
              setTimeout(function(){
              var sliderID = '<%=(RadGrid1.MasterTableView.GetItems(GridItemType.Pager)[1] as GridPagerItem).FindControl("GridSliderPager").ClientID %>';
              $find(sliderID).repaint(); 
               },0);
           }
             
           </script>
           <asp:HyperLink ID="target" runat="server">Target Control</asp:HyperLink>
     <telerik:RadToolTip ID="tooltip" runat="server" TargetControlID="target" RelativeTo="Element"
               HideEvent="ManualClose" OnClientShow="OnClientShow">
           <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb"
               SelectCommand="SELECT * FROM [Products]"></asp:AccessDataSource>
           <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="AccessDataSource1" GridLines="None" >
               <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst"
                   DataKeyNames="ProductID" DataSourceID="AccessDataSource1" AllowPaging="true"
                   PageSize="5" Frame="Border" TableLayout="Auto">
                   <PagerStyle HorizontalAlign="Left" Mode="slider" AlwaysVisible="True" EnableSEOPaging="True">
                   </PagerStyle>
                   <Columns>
                       <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="ProductID" DataType="System.Int32"
                           FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="ProductID"
                           ReadOnly="True" SortExpression="ProductID" UniqueName="ProductID">
                       </telerik:GridBoundColumn>
                       <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="ProductName"
                           FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="ProductName"
                           SortExpression="ProductName" UniqueName="Productame">
                       </telerik:GridBoundColumn>
                   </Columns>
               </MasterTableView>
           </telerik:RadGrid>
      </telerik:RadToolTip>
       </div>
   </form>

I hope that my explanations, the provided resource and the sample code I prepared for you are helpful, let me know how it goes.

Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Tags
ToolTip
Asked by
kiran
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Share this question
or