or
function abc() { $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest('DoSomething');}window.onfocus = function onFocus() { $find("<%=RadAjaxPanel1.ClientID%>").ajaxRequest('DoSomething');};<DetailTables> <telerik:GridTableView runat="server" DataSourceID="sqlDSDetails" Name="Details" Width="100%" CommandItemDisplay="Top" DataKeyNames="Details_ID, QTRInserted"> <ParentTableRelation><Telerik:RadGrid ID="RGWebsites" runat="server" OnNeedDataSource="RGWebsites_NeedDataSource" AllowMultiRowSelection="true" ClientSettings-DataBinding-EnableCaching="false"> <MasterTableView AutoGenerateColumns="False" DataKeyNames="WebsiteID" ClientDataKeyNames="WebsiteID"> <Columns> <telerik:GridBoundColumn DataField="WebsiteID" HeaderText="Website ID" HeaderStyle-Width="20%" ItemStyle-Width="20%" /> <telerik:GridBoundColumn DataField="ContractType" HeaderText="Contract type" HeaderStyle-Width="20%" ItemStyle-Width="20%" /> <telerik:GridBoundColumn DataField="WebsiteName" HeaderText="Website name" HeaderStyle-Width="20%" ItemStyle-Width="20%" /> <telerik:GridBoundColumn DataField="StartDate" HeaderText="Start date" HeaderStyle-Width="20%" ItemStyle-Width="20%" DataType="System.DateTime" DataFormatString="{0:MM/dd/yyyy}" /> <telerik:GridBoundColumn DataField="EndDate" HeaderText="End date" HeaderStyle-Width="20%" ItemStyle-Width="20%" DataType="System.DateTime" DataFormatString="{0:MM/dd/yyyy}" /> </Columns> </MasterTableView> <ClientSettings> <Selecting AllowRowSelect="true" /> </ClientSettings></Telerik:RadGrid>function onSuccessGetWebsites(result) { if (result && result.Data !== undefined) { var tableView = RGWebsites.get_masterTableView(); tableView.set_dataSource(result.Data); tableView.dataBind(); // By defaut all rows are selected tableView.selectAllItems(); resizeHeight(); } else { if (result.Message) { showError(result.Message, 0); } else { showError('onSuccessGetWebsites() result param is empty !', -1); } } $('#' + RGWebsites.get_element().id).unblock();};
How can I create a a rotator with "FormCode" mode while being able to start that rotator automatically when the page loads? I need a complete sample code for the call.
I've used the following JavaScript/JQuery code for FormCode management:
<script type ="text/javascript"> //<![CDATA[ function startRotator(clickedButton, rotator, direction) { if (!rotator.autoIntervalID) { refreshButtonsState(clickedButton, rotator); rotator.autoIntervalID = window.setInterval( function () { rotator.showNext(direction); }, rotator.get_frameDuration()); } } function stopRotator(clickedButton, rotator) { if (rotator.autoIntervalID) { refreshButtonsState(clickedButton, rotator) window.clearInterval(rotator.autoIntervalID); rotator.autoIntervalID = null } } function showNextItem(clickedButton, rotator, direction) { rotator.showNext(direction); refreshButtonsState(clickedButton, rotator); } // Refreshes the Stop and Start buttons function refreshButtonsState(clickedButton, rotator) { var jQueryObject = $telerik.$; var className = jQueryObject(clickedButton).attr("class" ); switch (className) { case "start" : { // Start button is clicked jQueryObject(clickedButton).removeClass(); jQueryObject(clickedButton).addClass( "startSelected" ); // Find the stop button. stopButton is a jQuery object var stopButton = findSiblingButtonByClassName(clickedButton, "stopSelected" ); if (stopButton) { // Changes the image of the stop button stopButton.removeClass(); stopButton.addClass( "stop" ); } } break ; case "stop" : { // Stop button is clicked jQueryObject(clickedButton).removeClass(); jQueryObject(clickedButton).addClass( "stopSelected" ); // Find the start button. startButton is a jQuery object var startButton = findSiblingButtonByClassName(clickedButton, "startSelected" ); if (startButton) { // Changes the image of the start button startButton.removeClass(); startButton.addClass( "start" ); } } break ; } } // Finds a button by its className. Returns a jQuery object function findSiblingButtonByClassName(buttonInstance, className) { var jQuery = $telerik.$; var ulElement = jQuery(buttonInstance).parent().parent(); // get the UL element var allLiElements = jQuery("li", ulElement); // jQuery selector to find all LI elements for (var i = 0; i < allLiElements.length; i++) { var currentLi = allLiElements[i]; var currentAnchor = jQuery("A:first", currentLi); // Find the Anchor tag if (currentAnchor.hasClass(className)) { return currentAnchor; } } } //]]> </script > And the following code for the calls:
< a href="#" onclick="stopRotator(this, $find('<%= MyRotator.ClientID %> ')); return false;" class="stopSelected" title="Stop"><span>Stop</span></a> <a href="#" onclick="startRotator(this, $find('<%= MyRotator.ClientID %> '), Telerik.Web.UI.RotatorScrollDirection.Left); return false;" class="start" title="Start"><span>Start</span></a> <a href="#" onclick="showNextItem(this, $find('<%= MyRotator.ClientID %> '), Telerik.Web.UI.RotatorScrollDirection.Left); return false;" class="left" title="Left"><span>Up</span></a> <a href="#" onclick="showNextItem(this, $find('<%= MyRotator.ClientID %> '), Telerik.Web.UI.RotatorScrollDirection.Right); return false;" class="right" title="Right"><span>Down</span></a >
However, I cannot start the rotator on the page load. Tried to use this code in the in the MyRotator_DataBoud event, but did not work either:
protected void rrMyRotator_DataBound(object sender, EventArgs e) { Page.RegisterClientScriptBlock( "MyScript", "<SCRIPT Language='JavaScript'> startRotator(this, $find('<%= MyRotator.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left);</SCRIPT>"); }
Please show me the code that I need to write to start the rotator right after loading the page, and the location where I should place that code. Thank you.
ASP
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="RadAjaxManager1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" /> </UpdatedControls> </telerik:AjaxSetting> <telerik:AjaxSetting AjaxControlID="RadAjaxPanel1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="lstProducts" LoadingPanelID="RadAjaxLoadingPanel1" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Windows7" /> <qsf:InformationBox runat="server" Title="Please note you can't obsolete a product if it is still in use by another team.<br>You can add or edit products by right-clicking on the 'Products' box." Width="97%"> </qsf:InformationBox> <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="300px" OnAjaxRequest="RadAjaxPanel1_AjaxRequest"> <telerik:RadListBox ID="lstProducts" runat="server" AllowTransfer="True" AutoPostBackOnTransfer="True" DataSortField="PRODUCT" DataSourceID="SqlDataSource1" DataTextField="PRODUCT" DataValueField="PRODUCT_ID" EnableDragAndDrop="True" Height="250px" OnTransferred="lstProducts_Transferred" SelectionMode="Multiple" Skin="Windows7" OnClientContextMenu="showContextMenu" Style="top: 0px; left: 0px; width: 215px" TransferToID="lstObsolete" AllowAutomaticUpdates="True"> </telerik:RadListBox> </telerik:RadAjaxPanel>
Javascript
function OnClientClose() { $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind"); }
C#
protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e) { if (e.Argument == "Rebind") { lstProducts.DataBind(); //i do make it here } }