Adding item to the rotator using javascript

[suraj]

I have used radrotator in which i have bounded images from the database. The rotator works fine. But I need a functionality to change the rotator item from javascript. The control works fine. The problem is suppose i load four images from the database in the javascript it only shows the first image. The code i had used is:


The function ChangeRotatorItem is called on button click.

 function ChangeRotatorItem(id)
        {
           
         
         
    
         
          var rotator = window["<%= RadRotator1.ClientID %>"];
           
           
            rotator.StopRotator();
         
            var result=ClickHandler.GetImageInfoForPage(TemplateId,id);
            var myDataTable=result.value;
                      

            RemoveAllRotatorItem();
           
            if(typeof(rotator) != "undefined")
             {
           
                var tbl = document.getElementById(rotator.FrameContainer.id);
               
               
                if(typeof(myDataTable)=="object")
                {
                   //Populate it..
                  
                  for(var i=0; i< myDataTable.Rows.length; i++)
                    {
                       
                        //var oCell = tbl.tBodies[0].rows[0].insertCell();
                        var oCell = document.createElement("td");
                       
                       
                        oCell.id = "PortfolioMenu1_RadRotator1_frame" + i;
                        var result = ClickHandler.GetIsAdmin();
                         if(!result.value)
                            oCell.innerHTML = "<a href=\"#\" title='Hello" + i + "' onclick='ChangeClassName(this.title);'><img src='" + myDataTable.Rows[i].Path  + "' alt='" + myDataTable.Rows[i].Rel  + "'  onclick='Hello(this.alt);' /></a>"
                         else
                            oCell.innerHTML = "<a href=\"#\" title='Hello" + i + "' onclick='ChangeClassName(this.title);'><img src='" + myDataTable.Rows[i].Path  + "' alt='" + myDataTable.Rows[i].Rel  + "'/></a>"
                        tbl.tBodies[0].rows[0].appendChild(oCell);
                       
                       
                       
                    }
                   
                   
                
                  
                }
            }
           

function RemoveAllRotatorItem()
        {
             var rotator = window["<%= RadRotator1.ClientID %>"];
            
             if(typeof(rotator) != "undefined")
             {
                 var tbl = document.getElementById(rotator.FrameContainer.id);
                
                 if(tbl.tBodies[0].rows.length>0)
                 {
                    var k = tbl.tBodies[0].rows[0].cells.length;
                   for( var i=0; i< k ; i++)
                        tbl.tBodies[0].rows[0].deleteCell(0);
                   
                 }
             }
            
           
        }
         

        }
please reply as soon as possible

[Lini]

Hi,

Looking at your code, it seems you are using the old RadRotator control and not the ASP.NET AJAX version.

If you change the RadRotator frames (HTML elements) then you will also need to reset the rotator object itself. I am not sure if this can happen without reloading the whole rotator control. However, you can try setting the following properties in the ChangeRotatorItems() function:

window["RadRotator1"].NumberOfFrames = myDataTable.Rows.length; //new frames
window["RadRotator1"].FrameIdArray = new Array("PortfolioMenu1_RadRotator1_frame0", "PortfolioMenu1_RadRotator1_frame0",...); //this array should hold all rotator frame IDs
window["RadRotator1"].Start();



All the best,
Lini
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[maha]

were u able to do that?