Questions on UI for ASP.NET AJAX Forum

4 answers

646 views

[Solved] Waiting for an Ajax Request in progress to end.

Hello,

I am working on a project with a RadGrid and a RadTreeView.
Each time the user clicks on a node it fills a RadGrid with data.
The controls work in an Ajax environment.
Pressing on a RadTreeView node influences the RadGrid.
Sometimes it takes time to load data into the RadGrid.

The project requirement is that when user clicks on a node in the RadTreeView during an AJAX request/postback, show a JS alert to the user to wait for the reply and only then make another request.

How to perform this?

Thank,
Daniel.

Ajax

answered on 03 Sep 2014

1 answer

105 views

Updating a RadGrid from a PanelBar template

I have a HeaderTemplate for a RadPanelItem that contains a LinkButton. In the template constructor I pass an ID value that I need the LinkButton to use. The idea is that the PanelBar grows dynamically based on a query. That works fine using the template.

My issue comes in when I try to click the LinkButton to update the RadGrid. Since the template is a class of its own, it cannot directly reference the RadGrid for passing it a new DateTable based on the ID value, stored within the template.

I've tried passing a callback function to the template constructor using System.Action<string>. I then try to attach the callback as an EventHandler to the LinkButton's Click event. So far this hasn't done anything for me.

Template:

public class TelerikTemplates

{

public class PanelTemplate : ITemplate

{

private readonly Label title;

private readonly LinkButton totalButton;

public PanelTemplate(string pTitle, int pTotal, string pId, System.Action<string> callback)

{

title = new Label();

title.CssClass = "panelTitle";

title.Text = pTitle;

totalButton = new LinkButton();

totalButton.CssClass = "totalButton";

totalButton.Text = pTotal.ToString();

totalButton.Click += delegate(object sender, System.EventArgs e) { callback(pId); };

}

public void InstantiateIn(Control pContainer)

{

pContainer.Controls.Add(title);

pContainer.Controls.Add(totalButton);

}

WebForm Code Behind

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

}

using (DataTable data = GetData())

{

foreach (DataRow dr in data.Rows)

{

RadPanelItem titlePanel = new RadPanelItem();

titlePanel.HeaderTemplate = new TelerikTemplates.PanelTemplate((string)dr["RuleName"], (int)dr["AccountTotal"], (string)dr["RuleId"], populateGrid);

RadPanelItem subPanel = new RadPanelItem();

subPanel.ContentTemplate = new TelerikTemplates.ChartAndTableTemplate(dr);

titlePanel.Items.Add(subPanel);

panelBar.Items.Add(titlePanel);

}

public void populateGrid(string pId)

{

grid.DataSource = GetGridData(pId);

grid.Rebind();

}

WebForm Markup

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="author" content="">

<meta name="description" content="Demo site for home page.">

<title>Demo: Home (PanelBar)</title>

<link href="~/Content/less/css/styles.css" rel="stylesheet" />

</head>

<body>

<form id="form1" runat="server">

<asp:Label ID="lblTest" runat="server" Text="Test"></asp:Label>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grid" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="grid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<section>

<div>

<telerik:RadPanelBar Runat="server" Width="100%" ExpandMode="SingleExpandedItem" ID="panelBar">

<Items>

</Items>

</telerik:RadPanelBar>

</div>

<div>

<telerik:RadGrid ID="grid" runat="server" AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" />

</div>

</section>

</form>

</body>

</html>

Thanks for any possible help!

Ajax

answered on 03 Sep 2014

1 answer

130 views

Problem styling menu

I have a RadMenu on my page that I am having problem styling.
The attached snapshot shows how it looks currently. The Quick Links is a menu, The child item keeps wrapping and looks wierd.

I have custom css and I am not using any Telerik base styling. When the width is 100px, the rSlide div is set to 0px width (the container that creates the sliding animation). when the slider is set to 100%, the rSlide is like 14px wide, which is way smaller then the full size of the RadMenu and we are unable to figure this out.

.upper_nav .RadMenu li {

border: none;

padding: 0;

position: relative;

}

.upper_nav .RadMenu .rmHorizontal,

.upper_nav .RadMenu .rmVertical {

padding: 0;

}

.upper_nav .RadMenu .rmRootLink {

font-size: 12px;

}

.upper_nav .RadMenu .rmRootLink:link,

.upper_nav .RadMenu .rmRootLink:visited {

color: #536ba2;

}

.upper_nav .RadMenu .rmRootLink:hover,

.upper_nav .RadMenu .rmRootLink:active,

.upper_nav .RadMenu .rmRootLink:focus {

color: #3c3d5e;

background: none;

border: none;

}

.upper_nav .RadMenu .rmSlide {

position: absolute;

display: none;

}

.upper_nav .RadMenu .rmVertical .rmItem {

display: block;

}

.upper_nav .RadMenu .rmVertical .rmItem span {

width: 100% !important;

}

Menu

answered on 03 Sep 2014

2 answers

281 views

The type initializer for 'Telerik.Web.RenderModesCache' threw an exception

Hi everyone,

When I deployment asp.net 4.0 web site on IIS 6.0 server I have error:

[TypeInitializationException: The type initializer for 'Telerik.Web.RenderModesCache' threw an exception.]
Telerik.Web.RenderModesCache.GetViewDescriptors() +0
Telerik.Web.UI.RadDataBoundControl.GetViewScriptReference() +81
Telerik.Web.UI.RadDataBoundControl.GetScriptReferences() +80
Telerik.Web.UI.RadDataBoundControl.System.Web.UI.IScriptControl.GetScriptReferences() +13
System.Web.UI.ScriptControlManager.AddScriptReferenceForScriptControl(List`1 scriptReferences, IScriptControl scriptControl) +41
System.Web.UI.ScriptControlManager.AddScriptReferencesForScriptControls(List`1 scriptReferences) +92
System.Web.UI.ScriptManager.RegisterScripts() +129
System.Web.UI.ScriptManager.OnPagePreRenderComplete(Object sender, EventArgs e) +122
System.Web.UI.Page.OnPreRenderComplete(EventArgs e) +8897866
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2716

web.config has next configuration:

    <compilation debug="true" targetFramework="4.0">
      <assemblies>
        <add assembly="Telerik.Web.UI"/>
      </assemblies>
    </compilation>

     <pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">
      <controls>
        <add tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI"/>
      </controls>
    </pages>

With IIS Express 7.0 the web site working correctly.

What may be cause of the problem?

General Discussions

answered on 03 Sep 2014

8 answers

260 views

Not Implemented JavaScript error under IE9 with Q3 2013 SP1

With Q3 2013 SP1(2013.3.1114) you may experience JavaScript errors thrown in Internet Explorer 9. This problem may be observed on a machine that does not have audio services started and no audio drivers installed (e.g., MS Windows 2008 Server with no audio device).

The problem lies within the HtmlAudioElement implementation in Internet Explorer – since the OS is unable to play any sound the canPlayType method of the HtmlAudioElement throws Not Implemented exception that breaks further executions of RadControls’ scripts.

We have already handled this problem and the fix will be available in the upcoming internal builds (since 2013.3.1210) and official release (Q1 2014). In case this issue is a showstopper for your current project and you cannot wait for the next official release and / or cannot use an internal build, you can use the following temporary workaround:

Place the following script in the <head> section of the page:

if(typeof(HTMLAudioElement) !== 'undefined' && HTMLAudioElement.prototype && HTMLAudioElement.prototype.canPlayType) {

var org = HTMLAudioElement.prototype.canPlayType;

HTMLAudioElement.prototype.canPlayType = function(typeString) {

var result = "";

try{

result = org(typeString);

}

catch(e) { }

return result;

}

General Discussions

answered on 03 Sep 2014

1 answer

97 views

Forum Error

When trying to Login on this Forum coming from a "Reply" button, it gives me an error on the returnUrl Eg.

https://www.telerik.com/login/v2/telerik?ReturnUrl=http%3a%2f%2fwww.telerik.com%2fforums%2fradgrid-inside-radtooltip%3factionMode%3dreplyPost%26postId%3d28fe5a89-c1d4-4b17-b581-8813071c6e99

Marc

General Discussions

answered on 03 Sep 2014

3 answers

168 views

RadDatePicker button showing over error messages.

I have a field above my RadDatePicker that has validation requirements and when there is an error the DatePicker button is showing up over the error message. There is no z-index settings setup for any of the items on the page.

How would I go about fixing this issue for just the DatePicker button?

Thanks,

Calendar

answered on 03 Sep 2014

3 answers

149 views

radeditor adds blank lines

In a vb.net 2010 web form application the user loads 'template letters' to a web interface, that they can modify letters sent out to various customers to generate various late pay notifications. The user basically selects the 'template letter' they want to generate for a specific customer, and hits the 'save' button. The web interface has the tabs for 'preview', 'html', and 'design' as the bottom of editor. These tabs are not part of any custom code, they must be part of a web interface that is inherited.The values for the editor are stored in a sql server 2012 database in a field called 'strTemplate' and the value is actually html. The problem is once the html value for 'strTemplate' is loaded for the user to edit, extra blank lines are loaded between different parts of the 'templates. Basically extra <br></br> tags are generated.When the user hits the save button, more <br></br> tags are generated between the various parts of the letter.I do not want these extra blank lines to be generated.I have gone into the html tab, removed the <br></br> tags and hit the save button. The extra tags are still generated. I have stepped through the code to find where the tags are generated and can not find it.Thus can you tell me what I can do to not have the extra <br></br> tags generated?The following is some of the code that is used when accessing the part of that gets to the web interface:
Imports System.Data
Imports System.Reflection
Imports System.Windows.Forms
Imports Telerik.Web.UI
Imports System.Web.Script.Services
Imports System.Web.Script.Serialization
Imports System.Web.Services
Partial Class edittemplates_default
    Inherits System.Web.UI.PageProtected _master As MasterPage#Region "Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load"    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load        _master = CType(Page.Master, MasterPage)
        _master.PageTitle = "Edit Templates"
        If Not Page.IsPostBack Then
            If (edittemplates_default.SiteUserManager.SessionUser IsNot Nothing) Then
                LoadTemplates()
                LoadVariables()
            Else
                'pnlEditor.Enabled = False
                'pnlEditor.Visible = False
            End If
        End If
        Master.Page.Title = "Login"
    End Sub
#End Region#Region "Protected Sub LoadTemplates()"

Editor

answered on 03 Sep 2014

3 answers

153 views

RadScheduler - RadToolTipManager

Hi there,

I am implementing a Radtooltipmanager in my scheduler page which is working with the web service. And I want to use the tooltipmanager on the client side, no need to do server side. However, I cannot fire the tooltipmanager javascript in my aspx page. Could anyone give me an idea ?
thank you

001.<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

002. <link href="Styles/Tooltip.css" rel="stylesheet" type="text/css" />

003.</asp:Content>

004.<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

005. <div id="content">

006. <asp:HiddenField ID="hdfSelectedTab" runat="server" Value="0" EnableViewState="true" />

007. <telerik:RadScriptManager ID="RadScriptManager1" runat="server">

008. <Scripts>

009. <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

010. <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

011. </Scripts>

012. </telerik:RadScriptManager>

013. <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

014. <AjaxSettings>

015. <telerik:AjaxSetting AjaxControlID="RadScheduler1">

016. <UpdatedControls>

017. <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>

018. </UpdatedControls>

019. </telerik:AjaxSetting>

020. </AjaxSettings>

021. </telerik:RadAjaxManager>

022. <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">

023. </telerik:RadAjaxLoadingPanel>

024. <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

025. <script type="text/javascript">

026. var hdfSelectedTab = $('#<%=hdfSelectedTab.ClientID%>');

027. </script>

028.

029. <script type="text/javascript">

030. //<![CDATA[

031. var categoryNames = new Array();

032.

033. function OnClientAppointmentsPopulating(sender, eventArgs) {

034. addSelectedCategoriesToArray(categoryNames);

035. eventArgs.get_schedulerInfo().CategoryNames = categoryNames;

036. categoryNames = new Array(); //clear the array

037. }

038.

039. function OnClientAppointmentWebServiceInserting(sender, args) {

040. //set a default Calendar resource

041. if (args.get_appointment().get_resources().get_count() == 0) {

042. var defaultCalendarResource = sender.get_resources().getResourceByTypeAndKey("Calendar", 1);

043. args.get_appointment().get_resources().add(defaultCalendarResource);

044. }

045. }

046.

047. function rebindScheduler() {

048. var scheduler = $find('<%=RadScheduler1.ClientID %>');

049. scheduler.rebind();

050. }

051.

052. //function onSchedulerDataBound(scheduler) {

053. // var $ = jQuery;

054. // $(".rsAptDelete").each(function () {

055. // var apt = scheduler.getAppointmentFromDomElement(this);

056. // // creating an object containing the data that should be applied on the template

057. // var tmplValue = { Description: apt.get_description() };

058. // // instantiate the template, populate it and insert before the delete handler (".rsAptDelete")

059. // $("#tmplAppDescription").tmpl(tmplValue).insertBefore(this);

060. // });

061. //}

062.

063. function OnClientAppointmentDataBound(sender, eventArgs) {

064. var app = eventArgs.get_appointment();

065. var jobTitle = app.get_attributes().getAttribute("JobTitle");

066. //app.Description = jobTitle;

067.

068. //if (backColor)

069. // app.set_backColor(backColor);

070. app.set_borderColor("black");

071. app.set_borderWidth("1");

072.

073. }

074. //]]>

075.

076. //<![CDATA[

077. function hideActiveToolTip() {

078. var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();

079. if (tooltip) {

080. tooltip.hide();

081. }

082. }

083.

084. Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);

085. function beginRequestHandler(sender, args) {

086. if (args.get_postBackElement().id.indexOf('RadScheduler1') != -1) {

087. hideActiveToolTip();

088. }

089. }

090.

091. function OnClientRequestStart(sender, args) {

092. alert('aa');

093. args.set_cancel(true);

094. var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();

095. if (tooltip) {

096. var element = tooltip.get_targetControl();

097. var apt = $find("<%=RadScheduler1.ClientID %>").getAppointmentFromDomElement(element);

098. $get("startTime").innerHTML = apt.get_start().format("MM/dd/yyyy HH:mm");

099. $get("endTime").innerHTML = apt.get_end().format("MM/dd/yyyy HH:mm");

100. $get("descriptionDiv").innerHTML = apt.get_subject();

101. tooltip.set_text($get("contentContainer").innerHTML);

102.

103. }

104. }

105.

106. function OnClientAppointmentContextMenu(sender, args) {

107. hideActiveToolTip();

108. }

109. //]]>

110. </script>

111. </telerik:RadCodeBlock>

112. <div class="tab_content" id="defaultSchedule">

113. <telerik:RadButton ID="btnExportSchedulePdf" runat="server" Text="Export to PDF" CssClass="pdfButton"

114. ValidationGroup="ValidatePageSize">

115. <Icon PrimaryIconUrl="images/pdf.gif"></Icon>

116. </telerik:RadButton>

117. <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1"

118. CssClass="exampleContainer">

119. <div style="padding: 10px;">

120. <telerik:RadComboBox runat="Server" ID="cmbStaff" Width="200px"

121. AutoPostBack="True">

122. </telerik:RadComboBox>

123. </div>

124. <telerik:RadScheduler runat="server" ID="RadScheduler1" SelectedView="MonthView" Height="100%" OnClientAppointmentContextMenu="OnClientAppointmentContextMenu"

125. TimeZoneOffset="03:00:00" FirstDayOfWeek="Monday" LastDayOfWeek="Friday" StartEditingInAdvancedForm="true" Skin="Office2010Silver"

126. EnableDescriptionField="true" OverflowBehavior="Auto" AppointmentStyleMode="Default" OnClientAppointmentDataBound="OnClientAppointmentDataBound" CustomAttributeNames="StaffID,JobStatusID,ClientID,Address,ContactNumber,Suburb,State,Postcode,StaffName,JobStatusName,ClientName,JobTitle"

127. ShowAllDayRow="False">

128. <AdvancedForm Modal="true"></AdvancedForm>

129. <TimelineView GroupBy="Calendar" GroupingDirection="Vertical"></TimelineView>

130. <WebServiceSettings Path="Schedule/SchedulerWebService.asmx" ResourcePopulationMode="ServerSide">

131. </WebServiceSettings>

132. <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>

133. <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>

134. </telerik:RadScheduler>

135. <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Width="320" Height="170"

136. Animation="None" HideEvent="Default" Text="Loading..." OnClientRequestStart="OnClientRequestStart">

137. </telerik:RadToolTipManager>

138. <div style="display: none;">

139. <div id="contentContainer">

140. <div class="appointment-tooltip">

141. <p>

142. Starts on: <span id="startTime">

143. 

144. </span>

145. <br />

146. Ends on: <span id="endTime">

147. 

148. </span>

149. </p>

150. <hr />

151. Description:

152. <div id="descriptionDiv">

153. </div>

154. </div>

155. </div>

156. </div>

157. </telerik:RadAjaxPanel>

158. </div>

159. </div>

160.</asp:Content>

Scheduler

answered on 03 Sep 2014

3 answers

199 views

ServerSide ExpandMode

Hi,
I want to populate huge(Parent/Childs) data in RadDropDownTree from the database. But it's taking long time to load.
What i want to do..
I want populate first Parent Data then when user click on + then populate the child data

DataTable dtData = GetList();

RadTreeNode rootTreeNode = new RadTreeNode();

foreach (DataRow row in dtData.Rows)

{

rootTreeNode = new RadTreeNode(row["name"].ToString(), row["ID"].ToString());

if (Convert.ToBoolean(row["HasChilds"]))

{

// HERE I WANT TO ADD SERVERSIDE EXPAND MODE

}

RadddTreeSubFile.EmbeddedTree.Nodes.Add(rootTreeNode );

}

DropDownTree