I have tried endlessly to get my ASP page to open a RadWindow. I have tried all the examples that came with my controls, tried most (if not all) articles found on Google relating to my problem (but it's not quite the same problem), I tried hundreds of examples, walkthroughs, tutorials. Here's the source:
Master Page:
The RadWindow is not opened in either Internet Explorer 9 nor Google Chrome. Any help would be greatly appreciated.
Master Page:
<%@ Master Language="VB" CodeFile="MasterPageAdministration.master.vb" Inherits="MasterPageAdministration" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Site Administration</title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> <link href="CSS/styleAppearance.css" rel="Stylesheet" type="text/css" /> <link href="CSS/styleDefault.css" rel="Stylesheet" type="text/css" /> <link href="CSS/styleAppearanceHelper.css" rel="Stylesheet" type="text/css" /> <script type="text/javascript" language="JavaScript" src="js/jquery-1.2.6-vsdoc.js"></script> <script type="text/javascript" language="JavaScript" src="js/jquery.corners.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('.ua1_bm1').corners("6px"); $('.ua1_bm1Inner').corners("5px"); $('.mainct') .corners("5px top-left 5px top-right"); $('.changePass').click(function () { var msg = $('#Pass_content'); var height = $(window).height() - 150; var width = $(document).width(); msg.css({ 'z-index': '9000', 'left': width / 2 - (msg.width() / 2), 'top': height / 2 - (msg.height() / 2) }); msg.slideToggle("slow"); $('#modal').css({ opacity: 0.5, 'z-index': '8000' }).slideToggle("fast"); }); }); function pageLoad() { $('.cmdCancel').click(function () { $('#Pass_content').slideToggle("fast"); $('#modal').slideToggle("fast"); return false; }); } </script></head><body style="background-image: url(Img/imgBackground.png); background-repeat: repeat-x; background-color: #dbffd5"><form id="form1" runat="server"><div> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <%--<telerik:RadScriptManager ID="ScriptManager1" runat="server"></telerik:RadScriptManager>--%> <table style="margin-left: auto; margin-right: auto; background-color: #dbffd5; width: 100%;"> <tr style="border: solid 1px #166600; background-color: #166600"> <td> <div> <div align="center" style="padding-bottom: 15px"> <span style="float: left"> <img src="Img/imgAdminLogonHeader.png" alt="Text" /> </span> <span style="float: right; padding-top: 5px; padding-right: 10px;"> <asp:Label ID="lblDomainName" runat="server" Text="" Font-Italic="false" Font-Bold="false" ForeColor="#dbffd5"></asp:Label> </span> </div> </div> </td> </tr> </table> <div id="topFrameNav" class="back_Nav" style="padding-left: 1px; width: 100%"> <telerik:RadMenu ID="RadMenu1" runat="server" Style="z-index: 1000;" Skin="Hay" EnableShadows="True"> <Items> <telerik:RadMenuItem runat="server" Text="Home" NavigateUrl="SiteControlPanel.aspx"></telerik:RadMenuItem> </Items> <ExpandAnimation Type="OutElastic" /> <CollapseAnimation Type="InElastic" /> </telerik:RadMenu> </div> <asp:ContentPlaceHolder ID="ContentPlaceHolderMain" runat="server"></asp:ContentPlaceHolder> <div id="contentFrame" class="back_Content"> </div> <div id="rightFrame"></div></div></form></body></html>The Content Page containing the Button and RadWindow I need to use:
No errors are produced when viewing the webpage in Internet Explorer or Chrome, however, when the button is clicked, it seems like a postback and then nothing happens. When setting the 'AutoPostBack' to 'False', nothing is happening. I'm using Telerik Q2 2011 (developing in .NET 4.0).<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPageAdministration.master" AutoEventWireup="true" CodeFile="Events-Management.aspx.vb" Inherits="Events_Management" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <link href="CSS/styleAppearanceHelper.css" rel="Stylesheet" type="text/css" /> <script type="text/javascript"> function OpenNewEventWindow() {// var oWnd = $find("radWindowNewEvent"); // oWnd.show(); var oWnd = radopen("Create-New-Event.aspx", "radWindowNewEvent"); } </script></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderMain" Runat="Server"> <telerik:RadWindowManager ID="RadWindowManager1" runat="server"> <Windows> <%--<telerik:RadWindow ID="radWindowNewEvent" runat="server" Height="400px" Width="600px" ReloadOnShow="true" Modal="true" Style="z-index: 9000;" Skin="Hay" NavigateUrl="Create-New-Event.aspx"></telerik:RadWindow>--%> <telerik:RadWindow ID="radWindowNewEvent" runat="server" OpenerElementID="btnNewEvent"></telerik:RadWindow> </Windows> </telerik:RadWindowManager> <div id="maincontenttitle" class="mainCTTitle"> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="cboEventsView"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadGridEvents" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <asp:Label ID="lblPageTitle" runat="server" Text="Events Management" Font-Size="Large"></asp:Label><br /> <asp:Label ID="lblPageSubtitle" runat="server" Text="[stage]" Visible="false"></asp:Label><br /><br /> <div id="mainCB" class="maincb"> <div style="width: 100%"> <table cellpadding="0" cellspacing="0" style="table-layout: fixed; width: 100%"> <tr> <td style="width: 110px">Events View:</td> <td><telerik:RadComboBox ID="cboEventsView" runat="server" OnSelectedIndexChanged="cboEventsView_SelectedIndexChanged" AllowCustomText="false" AutoPostBack="true" ExpandAnimation-Type="OutElastic" CollapseAnimation-Type="InElastic" Skin="Hay"> <Items> <telerik:RadComboBoxItem Text="Current Events" Value="Current" Selected="true" /> <telerik:RadComboBoxItem Text="Past Events" Value="Past" /> </Items> </telerik:RadComboBox></td> <td style="text-align: right"><telerik:RadButton ID="btnNewEvent" runat="server" Text="Create New Event" OnClientClicked="OpenNewEventWindow();return false;" Skin="Hay"></telerik:RadButton> <asp:Button ID="btnASPNewEvent" runat="server" Text="Create New Event" OnClientClick="OpenNewEventWindow();return false;" /></td> </tr> </table> </div> <div style="width: 100%; padding-top: 15px; padding-left: 5px; padding-right: 5px;"> <telerik:RadGrid ID="RadGridEvents" runat="server" DataSourceID="sqlEvents" GridLines="None" OnItemDataBound="RadGridEvents_ItemDataBound" Skin="Hay" OnItemCommand="RadGridEvents_ItemCommand"> <ClientSettings EnableRowHoverStyle="true"></ClientSettings> <MasterTableView AutoGenerateColumns="false" CellSpacing="-1" DataKeyNames="dbid, eventname, eventtagline, eventshortdesc, eventfulldesc, eventfeestructure, eventmemo, eventdatetime, eventlocation, contactperson, contactnumber, contactemail" DataSourceID="sqlEvents"> <Columns> <telerik:GridBoundColumn DataField="dbid" DataType="System.Int32" HeaderText="dbid" SortExpression="dbid" UniqueName="dbid" Visible="false"></telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="eventname" HeaderText="Event Name" SortExpression="eventname" UniqueName="eventname"></telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="eventdatetime" DataType="System.DateTime" HeaderText="Event Date" SortExpression="eventdatetime" UniqueName="eventdatetime"> <HeaderStyle Width="90px" /> <ItemStyle Width="90px" /> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="eventlocation" HeaderText="Event Location" SortExpression="eventlocation" UniqueName="eventlocation"> <HeaderStyle Width="180px" /> <ItemStyle Width="180px" /> </telerik:GridBoundColumn> <telerik:GridTemplateColumn HeaderText="Edit"> <HeaderStyle Width="20px" /> <ItemStyle Width="20px" /> <ItemTemplate> <asp:ImageButton ID="btnEditEvent" runat="server" ImageUrl="~/Img/imgEditIcon.png" /> </ItemTemplate> </telerik:GridTemplateColumn> <telerik:GridTemplateColumn HeaderText="Archive"> <HeaderStyle Width="20px" /> <ItemStyle Width="20px" /> <ItemTemplate> <asp:ImageButton ID="btnArchiveEvent" runat="server" ImageUrl="~/Img/imgArchiveIcon.png" /> </ItemTemplate> </telerik:GridTemplateColumn> <telerik:GridTemplateColumn HeaderText="Purge"> <HeaderStyle Width="20px" /> <ItemStyle Width="20px" /> <ItemTemplate> <asp:ImageButton ID="btnPurgeEvent" runat="server" ImageUrl="~/Img/imgDeleteIcon.png" /> </ItemTemplate> </telerik:GridTemplateColumn> </Columns> </MasterTableView> </telerik:RadGrid> <asp:SqlDataSource ID="sqlEvents" runat="server" ConnectionString="<%$ ConnectionStrings:fluxConnString %>" SelectCommand="SELECT * FROM EventManagement WHERE ([isarchived] = 'False')"></asp:SqlDataSource> </div> </div> </div></asp:Content>The RadWindow is not opened in either Internet Explorer 9 nor Google Chrome. Any help would be greatly appreciated.
1 Answer, 1 is accepted
0
Hello Juan,
The way to attach client-side event handlers to the RadButton is a bit different than the standard button's - you only need to pass the function's name, no parentheses, nor return false; are needed (actually they should not be present). You need to set the AutoPostBack property to false, provide the name of the JS function to the server property, e.g.:
Then you need to get a reference to the RadWindow properly - in order to access a client-side component you need to use $find() and provide its ClientID, which is subject to change when the control is inside an INaming container (of which the master page is a prime example).
I also advise that you make sure that the scripts you run in the beginning of the master page do not throw a JavaScript error, as it would most certainly prevent the RadWIndow from showing. Once I stripped down your scripts (which I, expectedly, cannot run) and the databound controls things start working fine with me (thanks to using radopen(), which would work from inside an inaming container as well): http://screencast.com/t/xnsjJ3OuL. The OpenerElementID is a rather simple property and it requires the ClientID of the control as well, this is explained here. Generally, using a client-side event handler is easier, but if you prefer you can set the OpenerElementID from the code-behind where you can easily access the client id of the targeted button.
I would also suggest that you remove the AjaxControlToolkit assembly from your project just for test, as we are aware of scenarios where the MS AJAX scripts get references from this assembly instead, and the versions that come are modified and do not work properly, most often with event handlers. Our controls, being built on top of MS AJAX rely heavily in the correct functioning of its scripts.
Greetings,
Marin
the Telerik team
The way to attach client-side event handlers to the RadButton is a bit different than the standard button's - you only need to pass the function's name, no parentheses, nor return false; are needed (actually they should not be present). You need to set the AutoPostBack property to false, provide the name of the JS function to the server property, e.g.:
<telerik:RadButton ID="btnNewEvent" runat="server" Text="Create New Event" OnClientClicked="OpenNewEventWindow" AutoPostBack="false" Skin="Hay"></telerik:RadButton>Then you need to get a reference to the RadWindow properly - in order to access a client-side component you need to use $find() and provide its ClientID, which is subject to change when the control is inside an INaming container (of which the master page is a prime example).
I also advise that you make sure that the scripts you run in the beginning of the master page do not throw a JavaScript error, as it would most certainly prevent the RadWIndow from showing. Once I stripped down your scripts (which I, expectedly, cannot run) and the databound controls things start working fine with me (thanks to using radopen(), which would work from inside an inaming container as well): http://screencast.com/t/xnsjJ3OuL. The OpenerElementID is a rather simple property and it requires the ClientID of the control as well, this is explained here. Generally, using a client-side event handler is easier, but if you prefer you can set the OpenerElementID from the code-behind where you can easily access the client id of the targeted button.
I would also suggest that you remove the AjaxControlToolkit assembly from your project just for test, as we are aware of scenarios where the MS AJAX scripts get references from this assembly instead, and the versions that come are modified and do not work properly, most often with event handlers. Our controls, being built on top of MS AJAX rely heavily in the correct functioning of its scripts.
Greetings,
Marin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.