Items Counter incorrect Index values

13 posts, 1 answers
  1. Glenn
    Glenn avatar
    47 posts
    Member since:
    Nov 2011

    Posted 22 Sep 2014 Link to this post

    Have a RadRotator loading Images. Above the rotator is a ASP Image ctrl displaying a larger preview of the image selected in the rotator.
    If a user clicks on the ASP Image Ctrl it opens a RadLightBox with full size images of those displayed in the RadRotator.

    <asp:HiddenField runat="server" ID="HiddenImgIndex" Value="0"></asp:HiddenField>
         <asp:Image ID="imagePreview" runat="server" Height="300px"
             Width="400px" AlternateText="preview" BorderWidth="0" onclick="mainImageClick()" ToolTip="Press to view larger image" CssClass="imgMainCSS"></asp:Image>
         <div id="rotatorWrapper" runat="server" class="rotateWrapper">
             <div id="rotatorCell" runat="server" style="background-color: aliceblue; padding: 15px 2px">
                 <telerik:RadRotator ID="RadRotator1" runat="server" RotatorType="Buttons" Height="86px" Width="394px" Skin="MetroTouch" OnClientLoad="OnClientLoad" FrameDuration="6000" ScrollDuration="1000" ItemHeight="86px">
                     <ItemTemplate>
                         <div onclick="displayImgBorder(this)" class="imgNoBorder">
                             <asp:ImageButton ID="ImageButtonPreview" runat="server" ImageUrl='<%# Eval("ImageURL")%>' Height="82px" Width="110px" CommandName="ShowImage" CommandArgument='<%# Eval("ImageName")%>'
                                 ImageAlign="Middle" />
                         </div>
                     </ItemTemplate>
                 </telerik:RadRotator>
    <telerik:RadLightBox ID="RadLightBox1" runat="server" DataImageUrlField="ImageURL"></telerik:RadLightBox>

    I am using the following javascript to open the lightbox and navigate to the selected image:
    function mainImageClick() {
           var lightBox1 = $find('<%= RadLightBox1.ClientID %>');
           var ind = document.getElementById('<%= HiddenImgIndex.ClientID%>').value;
           var currentInd = lightBox1.get_currentItemIndex();
           lightBox1.show();
           if (ind != currentInd) {
               lightBox1.navigateTo(ind);
           }
       }

    All works as expected with the right image displayed accept that the item counter when opening displays an incorrect index number, appears to prefix a digit.  See screenshots to see result.

    Any suggestions to fix? OR Is there a better way to do this?






  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 25 Sep 2014 Link to this post

    Hi,

    This was a problem in the older version of the controls but is now fixed. If you upgrade to the latest internal build you should not experience such behavior. That said I recommend upgrading and testing the application again.

    Additionally I want to bring your attention to something which I noticed in the code. The light box show method is called prior to navigateTo. Note that this is not recommended as when navigateTo is invoked the RadLightBox will display automatically. Considering the aforementioned you can remove the below line from the code.
    lightBox1.show();


    Regards,
    Angel Petrov
    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. Glenn
    Glenn avatar
    47 posts
    Member since:
    Nov 2011

    Posted 26 Sep 2014 in reply to Angel Petrov Link to this post

    Thanks I presume the upgrade you speak of requires a current license. My licence has expired and I'm not in a position to renew it at the moment. (wishing Telerik would move to a monthly payment option, to lighten the load) 
    Is there any work around in the mean time?
    And thanks for the heads up on the code issue you found.
  5. Answer
    Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 01 Oct 2014 Link to this post

    Hi Glenn,

    I am afraid that there isn't a work around as the counter is automatically generated. A possible solution is to hide it at all by using the following CSS rule.
    .rltbPager {
        display: none;
    }


    Regards,
    Kostadin
    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. Glenn
    Glenn avatar
    47 posts
    Member since:
    Nov 2011

    Posted 15 Oct 2014 in reply to Kostadin Link to this post

    Thanks I have hidden the counter as per your suggestion and further to used the description field  (could have used the Title field)  to show a counter using the onLoad client event of the Lightbox :

    function imagesLoad() {
             var lightBox1 = $find('<%= RadLightBox1.ClientID %>');
             var items = lightBox1.get_items();
             var cnt = items.get_count();
             var ind = 1
             items.forEach(function (item) {
                 item.set_description('Image ' + ind + ' of ' + cnt);
                 ind += 1;
             });
             }

  7. SR
    SR avatar
    33 posts
    Member since:
    Dec 2013

    Posted 06 Mar Link to this post

    Hi Glenn and Kostadin

    Here i am facing same issue but i  overcome that as per Glenn said , now i have another problem when i am set index position using navigate(index) fine , but when i press next button again index start from zero.

    for example i set image index position as 5  it show 5 of 10 fine when i press next button shows 1 of 10 shows the first image but expected output as 6 of 10 how i can break this any ideas......

  8. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 10 Mar Link to this post

    Hi Sumar,

    Could you please provide your LightBox declaration and the related code behind in order to investigate the cause for this issue locally?

    Regards,
    Kostadin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. SR
    SR avatar
    33 posts
    Member since:
    Dec 2013

    Posted 12 Mar in reply to Kostadin Link to this post

    Hi Kostadin ,

    Find the below sample code .... for your reference..

    /////ASPX///

    <head runat="server">
        <title></title>
        <style type="text/css">
         .rltbPager {
        display: none;
    }
    </style>
         <telerik:RadCodeBlock ID="ucCodeblock" runat="server">
        <script type="text/javascript">

            function OpenRadLigthBox(img) {           
                var index = img.alt;
                var lightBox = $find('<%= RadLightBox1.ClientID %>');          
                lightBox.navigateTo(index);
                //var currentInd = lightBox.get_currentItemIndex();
                //alert(currentInd);
                var items = lightBox.get_items();
                var cnt = items.get_count();
                var ind = 1
                items.forEach(function (item) {
                    item.set_description('Image ' + ind + ' of ' + cnt);
                    ind += 1;
                });
                lightBox.show();
            }       
        </script>       

          </telerik:RadCodeBlock>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
            <table style="table-layout: fixed" align="center">
                <tr>
                    <td align="center">
                        <asp:HiddenField runat="server" ID="HiddenImgIndex" Value="0"></asp:HiddenField>
                        <asp:DataList ID="imgList" RepeatColumns="6" runat="server" RepeatDirection="Horizontal" CellSpacing="5" CellPadding="5" DataKeyField="id" RepeatLayout="Table">
                            <ItemTemplate>
                                <asp:Image ID="img" runat="server"  alt="<%#Container.ItemIndex%>" ImageUrl='<%# Eval("Imageurl") %>' Height="130" Width="195" onclick="OpenRadLigthBox(this)" />
                            </ItemTemplate>
                        </asp:DataList>
                        <telerik:RadLightBox ID="RadLightBox1" runat="server" Height="300"  Width="300" LoopItems="true" 
                            DataImageUrlField="Imageurl" DataTitleField="ImageName" Modal="true">
                            
                            <ClientSettings AllowKeyboardNavigation="true" NavigationMode="Zone">
                                <AnimationSettings HideAnimation="Fade" NextAnimation="Fade" PrevAnimation="Fade" ShowAnimation="Fade" />
                            </ClientSettings>
                        </telerik:RadLightBox>
                    </td>
                </tr>
            </table>
        </form>
    </body>
    </html>

    //code behind///

      private void LoadDataset()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("ID");
            dt.Columns.Add("Imageurl");
            dt.Columns.Add("ImageName");
            ViewState["dataset"] = dt;
        }

      private void LoadImages()
        {

        // here i am assigning the images from folder to dataset//

      ViewState["dataset"] = dt;

    RadLightBox1.DataSource = dt;
    RadLightBox1.DataBind();

    }

    Regards,
    SR.

  10. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 16 Mar Link to this post

    Hello Sumar,

    I prepared a small sample based on the provided code and on my side seems to work correctly. Could you please give it a try and let me know how it differs from your real setup?

    Regards,
    Kostadin
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  11. SR
    SR avatar
    33 posts
    Member since:
    Dec 2013

    Posted 17 Mar in reply to Kostadin Link to this post

    Hi Kostadin ,

    Thanks for your reply still i am facing same issue at my end i can show you clearly what the problem is take a look at attached screen shots .

    when i select image its works fine as per expected ,  but the actual problem when i click next button always shows 1st image that was wrong check once this scenario at your end let me know ..

    Thanks .

    SR

  12. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 21 Mar Link to this post

    Hello,

    Could you please verify that you can experience the issue in the sample provided in my previous reply since on my side works correctly? Additionally I prepared a small video where you can see how it works on my side. I would appreciate if you can replicate the issue either in my sample or in a small runnable one in order to investigate it further.

    Regards,
    Kostadin
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  13. SR
    SR avatar
    33 posts
    Member since:
    Dec 2013

    Posted 22 Mar in reply to Kostadin Link to this post

    Hi Kostadian-

    Thanks for  reply , here you can find the problem what i  am facing at my end check the video clip.

    Problem is when i click on next button always shows 1st image which is wrong.

    Thks,

    SR.
  14. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 25 Mar Link to this post

    Hello,

    Could you please let me know the version of the controls that you are using on your end? In case you are not using the latest one I would suggest you to update to it and check whether the issue remains.

    Regards,
    Kostadin
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017