Slider Images not displayed

2 posts, 0 answers
  1. kiran
    kiran avatar
    33 posts
    Member since:
    Aug 2008

    Posted 09 Nov 2009 Link to this post

    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>



  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 12 Nov 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top