Telerik RadRotator in asp.net

-


 Telerik RadRotator in asp.net


Telerik Radrotator   provide various type of rotator…
1)      AutomaticAdvance
2)      ButtonsOver
3)      Buttons
4)      SlideShow
5)      SlideShowButtons
6)      FromCode
7)      Carousel
8)      CarouselButtons
9)      CoverFlow
10)   CoverFlowButtons
11)    

Step 1 : Design on web form .aspx page


    <div>
    <asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager>
  
     <telerik:RadAjaxPanel ID="AjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1">
          <div class="mainDiv">
               <div class="rotatorBackground">
                    <%-- ItemWidth and ItemHeight include 2x5(pixels) margin and 1x2(pixels) border --%>
                    <telerik:RadRotator ID="RadRotator1" runat="server" Width="424px" Height="150px"
                         CssClass="rotatorStyle"  ItemHeight="112" ItemWidth="112" ScrollDuration="500"  RotatorType="CarouselButtons">
                         <Items>
                              <telerik:RadRotatorItem>
                                   <ItemTemplate>
                                        <asp:Image runat="server" ID="Image" ImageUrl="~/Images/DSCN2936.JPG"
                                             CssClass="RotatorItem" AlternateText="Customer Image"></asp:Image>
                                   </ItemTemplate>
                              </telerik:RadRotatorItem>
                              <telerik:RadRotatorItem>
                                   <ItemTemplate>
                                        <asp:Image runat="server" ID="Image1" ImageUrl="~/Images/197107_502794843079084_271583126_n.jpg"
                                             CssClass="RotatorItem" AlternateText="Customer Image"></asp:Image>
                                   </ItemTemplate>
                              </telerik:RadRotatorItem>
                              <telerik:RadRotatorItem>
                                   <ItemTemplate>
                                        <asp:Image runat="server" ID="Image2" ImageUrl="~/Images/526225_169667016510697_388234992_n.jpg"
                                             CssClass="RotatorItem" AlternateText="Customer Image"></asp:Image>
                                   </ItemTemplate>
                              </telerik:RadRotatorItem>
                              <telerik:RadRotatorItem>
                                   <ItemTemplate>
                                        <asp:Image runat="server" ID="Image3"  ImageUrl="~/Images/60709_356473044446213_1497590479_n.jpg"
                                             CssClass="RotatorItem" AlternateText="Customer Image"></asp:Image>
                                   </ItemTemplate>
                              </telerik:RadRotatorItem>
                              <telerik:RadRotatorItem>
                                   <ItemTemplate>
                                        <asp:Image runat="server" ID="Image4" ImageUrl="~/Images/t.jpg"
                                             CssClass="RotatorItem" AlternateText="Customer Image"></asp:Image>
                                   </ItemTemplate>
                              </telerik:RadRotatorItem>
                            
                         </Items>
                    </telerik:RadRotator>
             
          </div>
              </div>
     </telerik:RadAjaxPanel>
       
    </div>


Step 2 :Css /Style sheet

.rotatorBackground {
     float: left;
     margin-top: 10px;
     width: 500px;
     height: 240px;
     border: solid 2px #dedede;
     -moz-border-radius: 15px;
     -webkit-border-radius: 15px;
}
.rotatorStyle {
     margin: 40px auto 0px;
}
.rotatorStyle .RotatorItem {
     margin: 5px;
     height: 100px;
     width: 100px;
}
.rotatorCarouselStyle {
     margin: 0px auto;
}
.RotatorItem {
     border: solid 1px #dff3ff !important;
}
.mainDiv {
     margin-bottom: 20px;
}
.configurationPanel {
     width: 290px;
     border: 0px;
}
.qsfConfig ul.rlbList
{
     display: block;
}

It will look like :-





Comments

Post a Comment

Popular posts from this blog

Create and save QR code in asp.net with C#

-
Image
Create and save QR code in asp.net with C# Download Dll from given link https://drive.google.com/drive/folders/0B2VobjpburSGdFBaZzBZSEJic0E?usp=sharing .Aspx Page < form id ="form1" runat ="server">         < asp : TextBox ID ="txtInput" runat ="server"></ asp : TextBox >         < asp : Button ID ="btnGenerate" runat ="server" Text ="Generate" OnClick ="btnGenerate_Click" />         < hr />         < asp : PlaceHolder ID ="plQRCode" runat ="server" />     </ form > .Cs Page using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using QRCoder; using System.IO; using System.Drawing; public partial class CS : System.Web.UI. Page { ...
Read more

Change text of RadGrid Header Dynamically

-
Image
Change text of RadGrid Header Dynamically Step 1 :-Design web form .aspx page < div >             < asp : ScriptManager ID ="sm" runat ="server"></ asp : ScriptManager >             < telerik : RadGrid ID ="RadGrid1" runat ="server" CellSpacing ="0" AllowPaging ="true" PageSize ="8" Width ="50%" PagerStyle-AlwaysVisible ="true"                 GridLines ="None" AutoGenerateColumns ="false" OnPreRender ="RadGrid1_PreRender"  OnItemDataBound="RadGrid1_ItemDataBound1"                 OnNeedDataSource ="RadGrid1_NeedDataSource">                 < PagerStyle Mode ="NextPrevAndNumeric"></ PagerStyle...
Read more

Telerik Radwindow Open on Button Click

-
Image
Telerik Radwindow Open on Button Click Step 1: Design web form .aspx page < div >             < asp : ScriptManager ID ="ss" runat ="server"></ asp : ScriptManager >             < telerik : RadWindow ID ="modalPopup" runat ="server" Width ="250px" Height ="100px"   VisibleTitlebar ="false"   Modal ="true" VisibleStatusbar ="false"   EnableShadow ="true"   >                 < ContentTemplate >                                        < p style =" text-align : center ; ">             ...
Read more