Setting item index is not setting item correctly.

7 posts, 1 answers
  1. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 25 Feb 2013 Link to this post

    Hi,
    I have aspx page it has usercontrol, radwindow,  and inside radwindow it has radrotator.
    User control  has gridview when user click linkbutton inside gridview, I am showing radwindow as a popup.
    When loading aspx page I am binding data to radrotator.
    
    When user clicks link current item is not setting properly. 
    But when the window is closed and reopened it works fine.
    
    //aspx
    <
    telerik:RadWindowManager ID="RWM" Height="640px" Width="870px" ShowContentDuringLoad="false" ReloadOnShow="true" runat="server">
           <Windows>
             <telerik:RadWindow ID="RW_Detail" Localization-Restore="none" runat="server" Modal="True"
                        VisibleStatusbar="False" Behaviors="Close" Title="Deck Images" IconUrl="~/images/SmallLogo.jpg">
                        <ContentTemplate>
                            <div style="background-repeat: no-repeat; box-sizing: border-box; -moz-box-sizing: border-box;">
                                <div style="margin: 0 auto;">
                                    <telerik:RadRotator ID="RadRotatorDetail" Height="525px" Width="850px" BorderColor="Transparent"
                                        ItemWidth="836px" BorderWidth="0" WrapFrames="false" RotatorType="Buttons" runat="server"
                                        ControlButtons-LeftButtonID="img_left" ControlButtons-RightButtonID="img_right" Skin="MetroTouch">
                                        <ItemTemplate>
                                            <div style="overflow-y: auto; height: 510px; width: 836px">
                                                <asp:Image ID="imgDetails" ImageUrl='<%# Eval("ID")+"\\"+Eval("ImageName")%>'
                                                    SlideID='<%#Eval("ID") %>' runat="server" ImageAlign="Middle" />
                                                <br />
                                            </div>
                                        </ItemTemplate>
                                    </telerik:RadRotator>
                                </div>
                                <div>
                                    <div style="float: right;">
                                        <asp:Image ImageUrl="~/images/ticks/arrow_right.png" ID="img_right" AlternateText="right" runat="server"
                                            Style="margin: -10px 0px; cursor: pointer;" />
                                    </div>
                                    <div style="float: left">
                                        <asp:Image ImageUrl="~/images/ticks/arrow_left.png" ID="img_left" AlternateText="left" runat="server"
                                            Style="margin: -10px 0px; cursor: pointer;" />
                                    </div>
                                </div>
                            </div>
                            <br />
                        </ContentTemplate>
                    </telerik:RadWindow>
                </Windows>
            </telerik:RadWindowManager>
    //Inside Aspx.cs
    MainDetails mDetails = new MainDetails();
    DataSet ds = mDetails.Get_Details(m_ID, false) as DataSet;
    RWM.Shortcuts.Add("Close", "Esc");
    RadRotatorDetail.DataSource = ds;
    RadRotatorDetail.DataBind();
    <asp:TemplateField HeaderText="More Detail">
    <ItemTemplate>
    <asp:LinkButton ID="LB" runat="server" OnClientClick=<%# "Show_Window('" + Eval("ID") +"'); return false;" %>
                         Text='<%# Eval("Pro_Name") %>'></asp:LinkButton>
    </ItemTemplate>
    <ControlStyle Font-Bold="False" ForeColor="#003399" />
         <ItemStyle HorizontalAlign="Justify" />
    </asp:TemplateField>
    //javascript inside usercontrol.
    <
    script type="text/javascript">
        function Show_Window(ID) {
            var oManager = GetRadWindowManager();
            var oWnd = oManager.GetWindowByName("RW_S");
            var radRotator = GetRadRotator();
            var RadImgItems = radRotator.get_items();
       
    ID = firstItem(ID);
            for (var name in RadImgItems) {
                if (ID == GetAttributeValue(RadImgItems[name], "SlideID")) {
                    radRotator.set_currentItemIndex(RadImgItems[name].get_index(), false);
                    radRotator.repaint();
                }
            }         
            oWnd.Show();
        }
        function firstItem(ID) {
            if (ID.indexOf(",") !== -1) {
                var firstItemName = ID.substring(0, ID.indexOf(","));
            }
            else
                firstItemName = ID;
            return firstItemName.trim();
        }
        function GetAttributeValue(item, name) {
            return $telerik.$(item.get_element()).find("img").attr(name);
        }
    Am I missing something? How to force it to load correct index? In first popup it does goes through
     radRotator.set_currentItemIndex(RadImgItems[name].get_index(), false);

    Best Regards,
    Damdoar
  2. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 28 Feb 2013 Link to this post

    Hello Damodar,

    The displayed RadRotator item should be set correctly when you add some timeout before configuring the current item index:
    setTimeout(function () {
        radRotator.set_currentItemIndex(index, false);
    }, 10);

    I would also recommend checking if the correct index is specified as a parameter of the function set_currentItemIndex.

    Regards,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 28 Feb 2013 Link to this post

    Hi Slav,

    for (var name in RadImgItems) {
    if (ID == GetAttributeValue(RadImgItems[name], "SlideID")) {
        var index = RadImgItems[name].get_index();
             setTimeout(function (){
                  radRotator.set_currentItemIndex(index, false);
             },10);
             radRotator.repaint();
         }
      }        
         oWnd.Show();

    When I do this it is showing only last item.
    Am I missing any thing?
    Checked the index in set_currentItemIndex and it is correct. 

    Best Regards,
    Damodar
  5. Answer
    Slav
    Admin
    Slav avatar
    1356 posts

    Posted 05 Mar 2013 Link to this post

    Hello Damodar,

    I have attached a sample page that implements a similar approach for setting the current index of a RadRotator. Please use it as a reference for achieving the desired effect on your end.

    Greetings,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 05 Mar 2013 Link to this post

    Hi Slav,

    Thank you very much. It has done the trick.
    Modified the script and it's working fine.

    Best Regards,
    Damodar
  7. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 06 Mar 2013 Link to this post

    Hi Slav,

    One more question!
    If I want to remove horizontal scroll bar. How do we do that?

    My image size is roughly width: 836px height: 3950px.



    Best Regards,
    Damodar
  8. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 11 Mar 2013 Link to this post

    Hello Damodar,

    If you set more width to the RadWindow so that there is enough space to display all of its content, the horizontal scroll bar will not appears. You can do this via the Width property of the control or by setting AutoSize to true so that the window size is automatically adjusted according to its content.

    Regards,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017