Questions on UI for ASP.NET AJAX Forum

14 answers

728 views

Step-by-step Tutorial – RadControls for ASP.NET AJAX

Hi there, can it be that the version you provide for download is a bit out of date?

I am trying to follow the Radgrid example which says that for header tooltips you need to code this behaviour.
But as I was able to see this is now an optionof the header item in property builder.

Also it states that you have to import "Telerik.WebControls", I don't have that namespace ...

So is this a good idea if I use that "old" tutorial?

Thanks in advance for your help

Best regards

Thomas

Documentation and Tutorials

answered on 10 Oct 2011

2 answers

131 views

RadComboBox - Client object model problem

In the Telerik documentation for the RadComboBox client object model it gives this information for clearing the selection.

ClearSelection

<script>

function ClearSelection()

{

var combo = <%=RadComboBox1.ClientID %>;

combo.ClearSelection();

}

</script>

You can see this code on this page

http://www.telerik.com/help/aspnet/combobox/combo_client_model.html

This code does not work. The first line 'var combo....' fails to execute. Even having this code on the page gives me this error that appears as a little green line under the < character.

Expected Expression

I was able to fix this code with some jQuery (note my combo box has a different name.)

var combo = $find("<%#radCustomSearchDropdown.ClientID %>");

This line works as you can see in the attached image. combo now points to the RadComboBox.

But my problem did not stop there.

Once this line is executed Firebug report the following error.

combo.ClearSelection is not a function

For reference my Combo Box looks like this

<telerik:RadComboBox

ID="radCustomSearchDropdown" runat="server" Height="200px" Width="200px" DropDownWidth="350px"

EmptyMessage="Custom Search"

HighlightTemplatedItems="true"

EnableLoadOnDemand="true"

Filter="StartsWith"

OnSelectedIndexChanged="radCustomSearchDropdown_SelectedIndexChanged"

AutoPostBack="true">

<ItemTemplate>

<table style="width: 275px" cellspacing="0" cellpadding="0">

<tr>

<td style="width: 260px;">

<strong><%# DataBinder.Eval(Container, "Attributes['Title']")%></strong>

</td>

</tr>

<tr>

<td style="width: 260px;">

<i><%# DataBinder.Eval(Container, "Attributes['Description']")%></i>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:RadComboBox>

Note that I do have the RadComboBoxScripts.js file included in my page.

Where is combo.ClearSelection?

I just want a client side method to reset the combo box. Any help would be much appreciated.

General Discussions

answered on 09 Oct 2011

0 answers

110 views

Sample project: custom simple stylesheet manager

Hi,

for some simple use cases you might would like to take a look at link below.

Basically it's a custom css manager that can:
1) group styles and you can reference them by group name
2) cache on server and client
3) handle PerformSubstitution property.
4) minify stylesheet using AjaxMin

Currently it's the way I see to work with current Telerik controls, if you have turned off skins and embedded styles in web.config and would like to preload (if you are dynamically loading Telerik controls you will want to do that, otherwise some styles or resources might be loaded) everything (with server and client caching), also load styled RadEditor dialogs (if you have turned off skins and base stylesheets load in web.config for Telerik controls, e.g.: RadEditor's dialogs will not be styled when loaded).

Note that my goal was to preload customized LinkManager with styles, for other dialogs you will need to add proper references.
Note: my WebApp doesn't use skins

Article is here: http://weblogs.asp.net/evovision/archive/2011/10/09/implementing-a-custom-css-stylesheet-manager-and-taking-advantage-of-caching.aspx

Thank you!

P.S.: copyrighted by all .NET developers :)
P.S.S.: it was developed using coffee with milk and desire to go to bed earlier, so don't question code quality :)

ScriptManager and StyleSheetManager

asked on 09 Oct 2011

1 answer

112 views

How to style customized native dialogs when embdded skins and stylesheets are turned off in web.config

Hi,

In web.config I've disabled skins and base stylesheets. Next I copied LinkManager.acxs from samples dir, customized it a bit (set ExternalDialogsPath for editor). When it's loaded it is totally not styled. Most likely control figures out itself about web.config setting and does nothing. I my main master page I use RadStyleSheetManager to manually combine all in one file all the css of controls I use in WebApp.

So question is how to style it?
I've tried using RadStyleSheetManager in LinkManager.ascx, but it failed saying that there is one already used on the page. I know about DialogsCssFile with import feature, but this reverts me back from what I'm trying to escape, I dont want to pull all css files separately for all controls inside LinkManager (plus they will get cached on client, which is another hassle). Would be great it I could use RadStyleSheetManager somehow to get this "all in one" url.
Now I'm trying to embed css directly into control using:

<link class="Telerik_stylesheet" rel="stylesheet" type="text/css" href="<%= Page.ClientScript.GetWebResourceUrl(typeof(Telerik.Web.UI.RadEditor), "Telerik.Web.UI.Skins.Default.Editor.Default.css") %>"/>

approach which is also errorprone cause styles added are not in head of that iframe (maybe, but i dont want to use jQuery to move DOM elements from here to head of iframe for that purpose (if it will even work)).

Another approach would be to take all external resources (from Telerik installation folder) and use them on website, but again, those will get cached (which is a good thing) and when I will update Telerik due new release I will have hard times with the old version cached on clients (which will lead to misc problems unless browser cache is cleared).

Ideally would be if RadStyleSheetManager could provide a mechanism to access this URL (all in one) which I would like to be able to set as DialogCssHandler (opposite to current DialogCssFile, which will do almost the same), would be great if you could have dictionary based caching (like SquishIt library). That might have solved a lot of problems when it comes to use case where most embedded things are turned off for a certain reason and caching of resources for performance needs is taken into account.
Thanks!

Editor

answered on 09 Oct 2011

1 answer

92 views

[Solved] Ajax on pageView from code behind

Hello,

How can i force ajax to update a RadPageView from code behind?

Thanks a lot

Ajax

answered on 09 Oct 2011

1 answer

111 views

RADAjaxPanel and Custom Text

I am using a RadAjaxPanel that utilizes a LoadingPanel. The RadAjaxPanel is wrapped around the ContentPLaceHolder in the Masterpage to run whenever a user postbacks. However, I would like to put a custom message next to the spinning gif. I'm not sure how to do this and I looked all over.

Ajax

answered on 09 Oct 2011

5 answers

76 views

Radgrid pagesize display Issue

Hi Telerik Team

I have been facing issue with pagesize UI display.I have not used any foooter.There are two pages but UI differs though used same properties.

Please revert as soon as possible.For understanding i have attached files.I want that all grid should have Fig.1 (uniform).

Awating for your reply
vajiha

Grid

answered on 09 Oct 2011

6 answers

91 views

fireCommand and AjaxLoadingPanel

Hello,
I have an ajaxified grid and RadAjaxManager set up properly on page. When I use default grid edit/update/delete buttons, loadingpanel shows ok. But when I use clientside fireCommand("", ""), page still fires postback event but loadingpanel won't ever show. What can I do about this?
Thank you.

Ajax

answered on 09 Oct 2011

1 answer

264 views

Ajax Loading panel not showing over Rad Window

Hi,

I have changed the display of ajax loading panel at the center of the page instead showing over the updated control as described in this help link
http://www.telerik.com/help/aspnet-ajax/ajax-center-loadingpanel.html

It works fine for all the pages except the Rad Window.
Below is the sample code i tried for your reference,

Markup of the Rad Window Popup page:

<asp:Content ID="content" ContentPlaceHolderID="PopupContent" Runat="Server">

<script src="../Scripts/Common.js" type="text/javascript" language="javascript"></script>

<h1>TestPage</h1>

<asp:Panel ID="pnlTest" runat="server">

<asp:TextBox ID="txtTest" runat="server"></asp:TextBox>

<asp:Button ID="btnTest" runat="server" OnClick="btnTest_Click" />

</asp:Panel>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="btnTest">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="txtTest" />

</UpdatedControls>

</telerik:AjaxSetting>

<%-- <telerik:AjaxSetting AjaxControlID="btnTest">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlTest" />

</UpdatedControls>

</telerik:AjaxSetting> --%>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

</asp:Content>

Im having the script to center the loading panel and the ajax loading panel at the master page,

Master Page:

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock">

<script language="javascript" type="text/javascript">

function OnRequestStart(sender, args)

{

args.set_enableAjax(true);

centerAjaxLoadingPanel();

}

// Invoke the centerElementOnScreen method to center the ajax loading panel in the screen

function centerAjaxLoadingPanel() {

centerElementOnScreen($get("<%= PopupAjaxLoadingPanel.ClientID %>"));

}

// Center the ajax loading panel in the screen

function centerElementOnScreen(element) {

var scrollTop = document.body.scrollTop;

var scrollLeft = document.body.scrollLeft;

var viewPortHeight = document.body.clientHeight;

var viewPortWidth = document.body.clientWidth;

// Check for BackCompat or CSS1Compat ( to display correctly in the older versions of Internet explorer)

if (document.compatMode == "CSS1Compat") {

viewPortHeight = document.documentElement.clientHeight;

viewPortWidth = document.documentElement.clientWidth;

}

var topOffset = Math.ceil(viewPortHeight / 2 - element.offsetHeight / 2);

var leftOffset = Math.ceil(viewPortWidth / 2 - element.offsetWidth / 2);

var top = scrollTop + topOffset - 40;

var left = scrollLeft + leftOffset - 70;

element.style.position = "absolute";

element.style.top = top + "px";

element.style.left = left + "px";

}

</script>

</telerik:RadScriptBlock>

<telerik:RadScriptManager ID="PopupMasterScriptManager" runat="server" AsyncPostBackTimeout="300" />

<telerik:RadAjaxManager ID="RadAjaxManagerPopup" runat="server" DefaultLoadingPanelID="AjaxLoadingPanel">

<ClientEvents OnRequestStart="OnRequestStart" OnResponseEnd="OnResponseEnd" />

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="PopupAjaxLoadingPanel" runat="server" Height="60px" Width="130px" IsSticky="true" Transparency="1">

<asp:Image ID="imgPopupLoadingPanel" runat="server" AlternateText="Loading..." ImageUrl="~/Images/loading.gif" />

</telerik:RadAjaxLoadingPanel>

The control is getting updated but im not getting the ajax loading image.
I got that default z-index for Ajax loading panel is 90000 and for Rad Window is 3000.
Even i tried to set the the z-index explicitly for Ajax loading panel and Rad Window.

Please help me on this.

Thanks,
Meenakshi.

Ajax

answered on 09 Oct 2011

4 answers

97 views

Filter combobox on Grid missing style when using custom skin

I have a basic RadGrid that is configured to use a Custom Skin that I created (it is basically a copy of the Office2010Silver skin.) Everything looks great, except the combox boxes that open when you click the Filter button at the top of a column.

I added the Combobox CSS to my custom skin css and added the comboxbox images folder, but it still does not style (see attached screenshot).

I assume I need to configure the combobox inside the RadGrid to use a custom skin, but I cannot figure out how.

Has anyone dealt with this?

Thanks,
Deano

Grid

answered on 09 Oct 2011