New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Load On Demand

Event log
  • Demo Configurator
Choose Rotator type:
AutomaticAdvance

The RadRotator now supports Load On Demand functionality through a WebService. There is now a property, which determines the number of items that the request will return. This functionality is entirely controlled by the WebMethod and you can also return different number of items on each request.

Important: Load On Demand is not supported, when RadRotator is set in carousel or coverflow mode.


Via the OnClientItemsRequesting client event you can send argument to the WebService that loads the items, as shown in the following sample:

function OnClientItemsRequesting(sender, args) {
    args.set_argument( "Item" )
}

The passed argument can be accessed through the argument parameter of the WebService method.

The web service should have the following signature:

[ScriptService]
public class WebServiceName : WebService
{
    [WebMethod]
    public RadRotatorItemData[] GetRotatorData( int itemIndex, string argument)
    {
        List<RadRotatorItemData> result = new List<RadRotatorItemData>();
        //.......
        RadRotatorItemData item = new RadRotatorItemData();
        item.Html = myCustomHtml;
        result.Add(item);
        //.......
        return result.ToArray();
    }
}


where the HTML, which should be rendered in the item, is assigned to the Html property of the RadRotatorItemData object.
There are three client events that are related to the Load On Demand functionlity:
  • OnClientItemsRequested - fired when the items are successfully loaded
  • OnClientItemsRequestFailed - fired when the request for loading items on demand fails. The arguments provide information about the error message and allow the developer to cancel the error alert and process the error otherwise.
  • OnClientItemsRequesting - fired before the items of the control are loaded, i.e. request to the server is still not sent.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • ToolTipWebService.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.LoadOnDemand.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-thin">
        <telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" runat="server" Width="220px" Height="135px"
                            ItemHeight="135" ItemWidth="110" CssClass="positionCenter" ScrollDuration="500"
                            OnClientItemsRequesting="OnClientItemsRequesting" OnClientItemsRequested="OnClientItemsRequested">
            <WebServiceSettings Path="RotatorWebService.asmx" Method="GetRotatorData"></WebServiceSettings>
        </telerik:RadRotator>
    </div>
    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true" />
    <script src="scripts.js" type="text/javascript"></script>
    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
        <Views>
            <qsf:View runat="server">
                <span class="label">Choose Rotator type:</span>
                <qsf:DropDownList ID="RotatorTypesList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ConfigureRotator">
                </qsf:DropDownList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance