Items Counter incorrect Index values

[Glenn]

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?

[Angel Petrov]

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

 

 

[Glenn]

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.

[Kostadin]

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

 

 

[Glenn]

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;
         });
         }

​

[SR]

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......

[Kostadin]

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

[SR]

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.

[Kostadin]

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

[SR]

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

[Kostadin]

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

[SR]

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.

[Kostadin]

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