Questions on UI for ASP.NET AJAX Forum

1 answer

178 views

Display arrow if Menu Item has sub items

My rad menu has various sub level and i want to display a arrow if the menu item has a sub menu item. I have edited the CSS but so far i am not being able to display the arrow . Please advise

.RadMenu_White .rmRootGroup,

.RadMenu_White .rmLink,

.RadMenu_White .rmText,

.RadMenu_White .rmLeftArrow,

.RadMenu_White .rmRightArrow,

.RadMenu_White .rmTopArrow

.RadMenu_White rmVertical rmRootGroup, .RadMenu_White rmHorizontalRootGroup

{}

.submenus

{

padding: 5px 30px 1px 15px;

color: white;

}

.RadMenu_White .rmBottomArrow

{

background-image: url('Menu/rmSprite.png');

background-color: transparent;

}

.RadMenu_White .rmRootGroup

{

border: 0px solid #828282;

background-repeat: repeat-x;

background-position: 0 -408px;

background-color: Transparent;}

/* <Root items> */

.RadMenu_White

{

font: normal 14px/23px Arial, sans-serif;

color: black;

text-decoration: none;

padding-right:15px !important;

padding-bottom:6px !important;

}

.RadMenu_White .rmLink

{

font: normal 14px/23px Arial, sans-serif;

color: black;

text-decoration: none;

padding-right:15px !important;

padding-bottom:6px !important;

border: solid 1px #d1d1d1;

}

.RadMenu_White .rmLink,

.RadMenu_White .rmDisabled,

.RadMenu_White .rmDisabled:hover

{

background-position: 0 -72px;

}

.RadMenu_White .rmText,

.RadMenu_White .rmDisabled .rmText,

.RadMenu_White .rmFirst .rmLink,

.RadMenu_White .rmLast .rmText, rmText,

.RadMenu_White .rmLast .rmLink:hover .rmText,

.RadMenu_White .rmVertical .rmLink,

.RadMenu_White .rmVertical .rmText

{

background-repeat: no-repeat;

background-position: 0 500px;

cursor: pointer;

}

.RadMenu_White .rmFirst .rmLink:hover, .RadMenu_White .rmLink:hover, .rmItem:hover

{

cursor: pointer;

background-color: #12630a;

color: white;

}

.RadMenu_White .rmVertical .rmLink

{

}

.RadMenu_White .rmVertical .rmLink:hover,

.RadMenu_White .rmVertical .rmFocused,

.RadMenu_White .rmVertical .rmExpanded,

.RadMenu_White .rmVertical .rmExpanded:hover

{border-style: solid;

border-color: #131b4c;

border-width: 0px 0;

}

.RadMenu_White .rmVertical .rmFirst .rmLink:hover,

.RadMenu_White .rmVertical .rmFirst .rmFocused,

.RadMenu_White .rmVertical .rmFirst .rmExpanded,

.RadMenu_White .rmVertical .rmFirst .rmExpanded:hover

{border-top-width: 0;

}

.RadMenu_White .rmVertical .rmLast .rmLink:hover,

.RadMenu_White .rmVertical .rmLast .rmFocused,

.RadMenu_White .rmVertical .rmLast .rmExpanded,

.RadMenu_White .rmVertical .rmLast .rmExpanded:hover

{border-bottom-width: 0;

}

.RadMenu_White .rmVertical .rmItem .rmDisabled:hover

{border-width: 0;

}

.RadMenu_White .rmExpanded,

.RadMenu_White .rmExpanded:hover

{

background-color:#12630a;

background-position: 0 -72px;

}

.RadMenu_White .rmExpanded .rmText,

.RadMenu_White .rmExpanded:hover .rmText

{

background-position: 100% -96px;

}

.RadMenu_White .rmLast .rmExpanded .rmText

{

background-position: 0 500px;

background-repeat: no-repeat;

}

.RadMenu_White .rmDisabled,

.RadMenu_White .rmDisabled:hover

{

color: #7d7d7d;

background-color: transparent;

}

/* </Root items> */

/* <Submenu items> */

.RadMenu_White .rmGroup,

.RadMenu_White .rmGroup .rmVertical

{

border: 0px solid #131b4c;

/*background: transparent url('Menu/rmVSprite.png') repeat-y 0 0;*/

}

.RadMenu_White .rmSlide .rmScrollWrap

{

background-image: none;

background: transparent;

}

.RadMenu_White_rtl .rmGroup,

.RadMenu_White_rtl .rmGroup .rmVertical

{

background-position: 100% 0;

background: transparent;

}

.RadMenu_White .rmRootGroup li.rmItem .rmGroup

{}

.RadMenu_White .rmRootGroup .rmHorizontal

{

background-image: none;}

.RadMenu_White .rmScrollWrap .rmVertical

{border: 0;

}

.RadMenu_White .rmGroup .rmItem .rmLink,

.RadMenu_White .rmGroup .rmItem .rmLink:hover,

.RadMenu_White .rmGroup .rmItem .rmFocused,

.RadMenu_White .rmGroup .rmItem .rmExpanded

{border: 0;

}

.RadMenu_White .rmGroup .rmLast .rmLink,

.RadMenu_White .rmGroup .rmLast .rmLink:hover,

.RadMenu_White .rmGroup .rmLast .rmFocused,

.RadMenu_White .rmGroup .rmLast .rmExpanded

{}

.RadMenu_White .rmGroup .rmLink,

.RadMenu_White .rmGroup .rmText,

.RadMenu_White .rmGroup .rmItem .rmDisabled,

.RadMenu_White .rmGroup .rmItem .rmDisabled:hover,

.RadMenu_White .rmGroup .rmItem .rmDisabled .rmText,

.RadMenu_White .rmGroup .rmItem .rmDisabled:hover .rmText

{

background-position: 0 500px;

background-repeat: no-repeat;

/* background-color: transparent;*/

}

.RadMenu_White .rmGroup .rmLink:hover,

.RadMenu_White .rmGroup .rmFocused,

.RadMenu_White .rmGroup .rmExpanded

{

background-position: 0 -168px;

}

.RadMenu_White .rmGroup .rmLink:hover .rmText,

.RadMenu_White .rmGroup .rmFocused .rmText,

.RadMenu_White .rmGroup .rmExpanded .rmText

{

background-position: 100% -192px;

}

/* <expand arrows> */

.RadMenu_White .rmGroup .rmExpandRight,

.RadMenu_White .rmGroup .rmExpandDown,

.RadMenu_White .rmGroup .rmItem .rmDisabled .rmExpandRight,

.RadMenu_White .rmGroup .rmItem .rmDisabled .rmExpandDown,

.RadMenu_White .rmGroup .rmItem .rmDisabled:hover .rmExpandRight,

.RadMenu_White .rmGroup .rmItem .rmDisabled:hover .rmExpandDown

{

background-position: 100% -216px;

}

.RadMenu_White .rmGroup .rmLink:hover .rmExpandRight

{

background-image: url(images/arrow.png) no-repeat topright !important;

}

.RadMenu_White .rmGroup .rmLink:hover .rmExpandRight,

.RadMenu_White .rmGroup .rmFocused .rmExpandRight,

.RadMenu_White .rmGroup .rmExpanded .rmExpandRight,

.RadMenu_White .rmGroup .rmLink:hover .rmExpandDown,

.RadMenu_White .rmGroup .rmFocused .rmExpandDown,

.RadMenu_White .rmGroup .rmExpanded .rmExpandDown

{

background-position: 100% -240px;

}

.RadMenu_White .rmGroup .rmDisabled:hover .rmExpandRight,

.RadMenu_White .rmGroup .rmDisabled:hover .rmExpandDown

{

background-image: url('Menu/rmSprite.png');

background-position: 100% -216px;

}

/* </expand arrows> */

/* <rtl> */

.RadMenu_White_rtl .rmLink

{

background-position: 100% -96px;

}

.RadMenu_White_rtl .rmText

{

background-position: 0 -72px;

}

.RadMenu_White_rtl .rmVertical .rmExpanded .rmText,

.RadMenu_White_rtl .rmVertical .rmExpanded:hover .rmText

{

background-position: 0 500px;

background-repeat: no-repeat;

}

.RadMenu_White_rtl .rmGroup .rmLink:hover,

.RadMenu_White_rtl .rmGroup .rmFocused,

.RadMenu_White_rtl .rmGroup .rmExpanded

{

background-position: 100% -264px;

}

.RadMenu_White_rtl .rmGroup .rmLink:hover .rmText,

.RadMenu_White_rtl .rmGroup .rmFocused .rmText,

.RadMenu_White_rtl .rmGroup .rmExpanded .rmText

{

background-position: 0 -288px;

}

.RadMenu_White_rtl .rmGroup .rmExpandLeft

{

background-position: 0 -312px;

}

.RadMenu_White_rtl .rmGroup .rmLink:hover .rmExpandLeft,

.RadMenu_White_rtl .rmGroup .rmFocused .rmExpandLeft,

.RadMenu_White_rtl .rmGroup .rmExpanded .rmExpandLeft

{

background-position: 0 -336px;

}

/* </rtl> */

/* </Submenu items> */

/* <Submenu offsets (Telerik - specific, overlapping submenus)> */

.RadMenu_White .rmSlide

{

border-style:solid;

border-color:#58b749;

background:#58b749;

border-width:0px;

/*margin: 15px 5px 5px 15px;*/

color:White;

}

.RadMenu_White .rmVertical .rmSlide,

.RadMenu_White .rmSlide .rmSlide,

.RadMenu_White_Context .rmGroup .rmSlide

{

/*margin: 0 0 0 -0x;*/

}

.RadMenu_White_rtl .rmSlide

{

/*margin: 0 0 0 0;*/

}

.RadMenu_White_rtl .rmFirst .rmSlide

{

/*margin-left: 0px;*/

}

.RadMenu_White_rtl .rmVertical .rmSlide,

.RadMenu_White_rtl .rmSlide .rmSlide,

.RadMenu_White_Context_rtl .rmGroup .rmSlide

{

/*margin: 0px 0px 0px 0px;*/

}

/* </Submenu offsets> */

/* <Scrolling arrows> */

.RadMenu_White .rmLeftArrow,

.RadMenu_White .rmRightArrow

{

background-color: #E6E6E6;

}

.RadMenu_White .rmLeftArrow { background-position: -8px -312px; border-right: 1px solid #828282; }

.RadMenu_White .rmRightArrow { background-position: -482px -216px; border-left: 1px solid #828282; }

.RadMenu_White .rmTopArrow,

.RadMenu_White .rmBottomArrow,

.RadMenu_White .rmGroup .rmLeftArrow,

.RadMenu_White .rmGroup .rmRightArrow

{

background-color: #E6E6E6;

}

.RadMenu_White .rmTopArrow { background-position: 50% -367px; border-bottom: 0px solid #828282; }

.RadMenu_White .rmBottomArrow { background-position: 50% -391px; border-top: 0px solid #828282; }

/* </Scrolling arrows> */

/* <Separators> */

.RadMenu_White .rmHorizontal .rmSeparator .rmText,

.RadMenu_White .rmVertical .rmHorizontal .rmSeparator .rmText

{

height: 22px;width: 0px;

background-color: #A8A8A8;

}

.RadMenu_White_Context .rmSeparator .rmText,

.RadMenu_White .rmHorizontal .rmGroup .rmSeparator .rmText,

.RadMenu_White .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText

{

background-color: transparent;

background-position: 0 -406px;}

.RadMenu_White .rmLeftImage, RadMenu RadMenu_White, rmItem rmFirst, rmHorizontal rmRootGroup, rmLink  rmExpanded, .rmLeftImage, .rmLink, .rmText rmExpandDown, .RadMenu .rmLink .rmText

{

margin:0px 0px 0px 0px !Important;

padding: 0px 0px 0px 0px !Important;

float: none;

}

.RadMenu_White .rmItem

{

background:transparent !important;

}

/* </Separators> */

/* </RadMenu / Telerik> */

Menu

answered on 09 Jun 2011

1 answer

87 views

prevent using down and up arrow if combo box text is less than two characters

I am binding a list of names to a combo box, and trying to limit the number of names visible to the user. I have used filter="contains" to narrow the list. I have also written a onkeyup handlers to only show names after at lease two characters are typed. My problem is that if you use the up or down arrow key, it will still show the entire list. I have attempted to write an onkeydown handler and check for e.keycode 38 and 40, but it's still not working correct. my code follows:

function OnClientDropDownOpening(Sender, args) {

//only open if there is moer than 1 characters

if (!open)

args.set_cancel(true);

}

function pageLoad() {

// set up onkeyup and onkey down event

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

var input = combo.get_inputDomElement();

input.onkeyup = onKeyUpHandler;

input.onkeydown = onKeyDownHandler;

}

function onKeyDownHandler(e) {

if (!e)

e = window.event;

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

var comboText = String(combo.get_text());

if (comboText.length < 2) {

//////////////////////////////

//

// don't do anything if the length is less than two and you press up arrow and down arrow

//

if (e.keyCode == 38 || e.keyCode == 40) {

e.returnValue = false;

if (e.preventDefault) {

e.preventDefault();

}

return false;

}

function onKeyUpHandler(e) {

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

var comboText = combo.get_text();

if (comboText.length < 2) {

open = false;

combo.hideDropDown();

}

else {

open = true;

combo.showDropDown();

}

and my server control:

<telerik:RadComboBox runat="server" ID="cboSLPName" Width="250px"

EmptyMessage="Type Name" MarkFirstMatch="true" Filter="Contains" ExpandAnimation-Type="None"

ShowMoreResultsBox="false" ShowWhileLoading="false"

AllowCustomText="true"

ShowToggleImage="false" EnableItemCaching="true" LoadingMessage="Loading..."

HighlightTemplatedItems="true" EnableLoadOnDemand="true" ShowDropDownOnTextboxClick="false"

OnClientDropDownOpening="OnClientDropDownOpening"

onselectedindexchanged="cboSLPName_SelectedIndexChanged"

AutoPostBack="true" />

any suggestions you can give to help would be appreciated. Thanks!

I know my code isn't pretty, so any suggestions you have for a more elegant design is also appreciated!!

ComboBox

answered on 09 Jun 2011

1 answer

231 views

Error: Unable to get value of the property 'GetWindowByName': object is null or undefined

Hi All,

Here is the scenerio - I have a project in VS2010, on one of the pages I open the RAD Window using the following method (which works as expected):

Dim strScript As String = "<script language='javascript' type='text/javascript'>Sys.Application.add_load(ShowWindow);</script>"

Page.ClientScript.RegisterStartupScript(Me.GetType, "ShowWindow", strScript)

<script type="text/javascript">

function ShowWindow() {

var manager = GetRadWindowManager();

var window1 = manager.GetWindowByName("QuoteWindow");

window1.show();

}

</script>

As mentioned the above code works perfect - the problem is I simply copied this code across to another project which is identical to the first one and everytime I hit the button to open the RAD Window I get this error:

'Error: Unable to get value of the property 'GetWindowByName': object is null or undefined'

I have searched and searched the forums to no avail - please provide any help asap if possible as this is pretty urgent.

Thanks in advance.

Window

answered on 09 Jun 2011

16 answers

379 views

RadMenu Float Image Right Not Working

We are using the WebBrowser control that ships with Visual Studio and have modified the CSS style with the following to get the image to appear to the right of our menu item:

.rmLeftImage

{

float: right !important;
}

This causes the menu items to stretch the width of the menu and wrap the remaining menu items below each other?
These RadMenuItems have nested RadMenuItems (for a flyout menu) but not sure if that is the culprit?
Any ideas?

Menu

answered on 09 Jun 2011

1 answer

103 views

Rad Windows reloads after Timer-Tick

Hello,
We have a RadGrid that updates data every 30 seconds with a timer object. You can select a radgrid row and then click a button from a radgrid toolbox. Then a radwindows appears associated with the selected row. The problem faces when the timer refreshes (Timer-tick). This timer refreshing makes that the rad windows also make a reload of the object (RadWindow). We tried unsucessfully to prevent the reloading of the rad window using the ajaxmanager.

Is there any option for not to reload the radwindow?.
Is there any option but not to stopping the timer?.

Kind regards.

Window

answered on 09 Jun 2011

2 answers

52 views

How to create a RadGrid with TemplateColumns programmatically?

How to create a RadGrid with TemplateColumns programmatically?

Thanks,

Grid

answered on 09 Jun 2011

1 answer

86 views

FileExporer: callback error and nothing in grid

Hi,

I'm having a hard time trying to use the RadFileExplorer. I have just put it in some aspx page and set the "ViewPath" to "~\\App_Themes". The component loads fine, I can see the directories on the left, but no files on the right... Moreover, sometimes I get some callback error when clicking on directories, saying that there is some "invalid escape sequence" (error is in french).

Do you have any idea?

Thanks,
FB

FileExplorer

answered on 09 Jun 2011

3 answers

85 views

RadPanelBar Issue after upgrade

HI, I upgrade my solution to latest update of ASP.NET Ajax, then after I fixed the "Design error" (I copy the Design.dll 531.40 version to my bin) now I'm getting an error at runtime

In my bin I've UI and Design dlls version 531.40, using RadScriptManager

.aspx code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tecnico.aspx.cs" Inherits="SIO.Tecnico" %>

<%@ 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></title>

</head>

<body>

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

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

EnableTheming="True">

</telerik:RadScriptManager>

<div>

<div style="float:left;">

<telerik:RadPanelBar ID="rpbTecnico" Runat="server" Skin="Sunset"

Height="562px" onitemclick="rpbTecnico_ItemClick">

<Items>

<telerik:RadPanelItem runat="server" Text="Gateway SPES" Expanded="true">

<Items>

<telerik:RadPanelItem runat="server" Text="Stato" Value="rpi_GW_Status">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Configurazione">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Diagnostica">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Statistiche">

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Konnex" Expanded="true">

<Items>

<telerik:RadPanelItem runat="server" Text="Stato" Value="rpi_KNX_Status">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" IsSeparator="true">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Chrono termostato">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Contabilizzatore di calore">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Relè A">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Relè B">

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="ZigBee" Expanded="true">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Controllore Centrale Termica" Expanded="true">

<Items>

<telerik:RadPanelItem runat="server" Text="Stato">

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</div>

<div style="float:left;margin-left:10px;">

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

</asp:Panel>

</div>

</form>

</body>

</html>

.cs code

protected void rpbTecnico_ItemClick(object sender, Telerik.Web.UI.RadPanelBarEventArgs e)

{

if (e.Item.Value == "rpi_GW_Status")

{

panContent.Controls.Clear();

UserControl ctrl = LoadControl("Tecnici/TecnicoGatewayStatus.ascx") as UserControl;

panContent.Controls.Add(ctrl);

}

It's blocking issue, that stop our develop, please...

regards

PanelBar

answered on 09 Jun 2011

1 answer

81 views

RadEditor Problem

Can anydbody help me to solve my problem with RadEditor control????

I am using RadEditor control to display images. But the image is not displaying in the image manager in the testing server. Please refer the attached document.

This is perfectly working in developement machine (localhost) which is pointing to the same database.

I store the images in the database as binary.

when I deploy in the testing server, the image is not displaying. Please help. This is very urgent.

Please see below the HTML code for the RadEditor control.

<

telerik:RadEditor ImageManager-MaxUploadFileSize="5048000 " Width="100%" Skin="Vista" ID="DiseaseAreaContentEditor" runat="server"

SkinID="IndiaHCPSetOfTools" BackColor="Transparent" Height="500px">

<telerik:EditorCssFile Value="~/Styles/TelerikRichEditorContentArea.css" />

</CssFiles>

<telerik:EditorModule Name="RadEditorStatistics" Visible="true" Enabled="true" />

</Modules>

</telerik:RadEditor>

Testing server and developement machine point to the same database.

Editor

answered on 09 Jun 2011

1 answer

146 views

RadEditor control does not display images in testing server

Can anydbody help me to solve my problem with RadEditor control????

I am using RadEditor control to display images. But the image is not displaying in the image manager in the testing server. Please refer the attached document.

This is perfectly working in developement machine (localhost) which is pointing to the same database.

I store the images in the database as binary.

when I deploy in the testing server, the image is not displaying. Please help. This is very urgent.

Please see below the HTML code for the RadEditor control.

<

telerik:RadEditor ImageManager-MaxUploadFileSize="5048000 " Width="100%" Skin="Vista" ID="DiseaseAreaContentEditor" runat="server"