Questions on UI for ASP.NET AJAX Forum

1 answer

111 views

Appeared in Editor 2012 Q2.
No background image on toolbar (only gray color) when Toolbar Mode=ShowOnFocus
Skin: Windows 7
Test here: http://demos.telerik.com/aspnet-ajax/editor/examples/default/defaultcs.aspx
Can I fix this myself?

Editor

answered on 19 Jun 2012

3 answers

106 views

Automatic scroll rotator needs pager to follow along

Hello,

I have created a rotator/pager following this example on the page.

http://demos.telerik.com/aspnet-ajax/rotator/examples/pagerintegration/defaultcs.aspx

I'm not sure what client side code I need to make the pager follow the item index that the rotator is on.

Here is my current code.

public partial class _Default : JJPro.Web.Page

{

string virtualPath = "~/Images/Headers";

private void Page_Load(object sender, System.EventArgs e)

{

if (!IsPostBack)

{

RadRotator1.DataSource = GetFilesInFolder(virtualPath);// Set datasource

RadRotator1.DataBind();

}

// Returns all virtual paths to files located in the given virtual directory

protected List<string> GetFilesInFolder(string folderVirtualPath)

{

string physicalPathToFolder = Server.MapPath(folderVirtualPath);// Get the physical path

string[] physicalPathsCollection = System.IO.Directory.GetFiles(physicalPathToFolder);// Get all child files of the given folder

List<string> virtualPathsCollection = new List<string>();// Contains the result

foreach (String path in physicalPathsCollection)

{

// The value of virtualPath will be similar to '~/PathToFolder/Image1.jpg

string virtualPath = VirtualPathUtility.AppendTrailingSlash(folderVirtualPath) + System.IO.Path.GetFileName(path);

virtualPathsCollection.Add(virtualPath);

}

return virtualPathsCollection;

}

protected void RadRotator1_DataBound(object sender, EventArgs e)

{

AddNavigationButtons();

}

private void AddNavigationButtons()

{

foreach (RadRotatorItem item in RadRotator1.Items)

{

LinkButton linkButton = CreateLinkButton(item.Index);

ButtonsContainer.Controls.Add(linkButton);

}

private LinkButton CreateLinkButton(int itemIndex)

{

// Create the LinkButton

LinkButton button = new LinkButton();

button.Text = (itemIndex + 1).ToString();// The test of the button

button.ID = string.Format("Button{0}", itemIndex);// Assign an unique ID

// Attach a JavaScript handler to the click event

button.OnClientClick = string.Format("showItemByIndex({0}); return false;", itemIndex);

button.Attributes.Add("onclick", "<script>testHello();</script>");

// Class which is applied to the newly added button

button.CssClass = "buttonClass";

return button;

}

function OnClientLoad(rotator, args) {

startRotator(rotator);

}

function startRotator(rotator) {

if (!rotator.autoIntervalID) {

rotator.autoIntervalID = window.setInterval(function () {

rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);

}, rotator.get_frameDuration());

}

function stopRotator(rotator) {

if (rotator.autoIntervalID) {

window.clearInterval(rotator.autoIntervalID);

rotator.autoIntervalID = null;

}

function OnClientMouseOver(rotator) {

stopRotator(rotator);

}

function OnClientMouseOut(rotator) {

startRotator(rotator);

}

// Panel Buttons

var lastShownButton;

function showItemByIndex(index) {

// gets reference to the rotator object

var oRotator = $find("<%= RadRotator1.ClientID %>");

// Sets currently shown item by its index

oRotator.set_currentItemIndex(index);

if (lastShownButton)

lastShownButton.removeClass("btnHighlight");

var currentButton = getButtonByIndex(index);

currentButton.addClass("btnHighlight");

lastShownButton = currentButton;

}

function OnClientItemShown(oRotator, args) {

var currentIndex = args.get_item().get_index();

if (lastShownButton)

lastShownButton.removeClass("btnHighlight");

var currentButton = getButtonByIndex(currentIndex);

currentButton.addClass("btnHighlight");

lastShownButton = currentButton;

}

function getButtonByIndex(index) {

var buttonIdSelector = String.format("Button{0}:first", index);

var currentButton = $telerik.$(buttonIdSelector)

return currentButton;

}

function showItemByIndex(index) {

// get reference to the rotator object

var oRotator = $find("<%= RadRotator1.ClientID %>");

// Set currently shown item by its index

oRotator.set_currentItemIndex(index);

}

function testHello()

{

alert ("Works");

}

</script>

<div class="rotatorCont">

<div class="rotator">

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

<telerik:RadRotator RotatorType="Buttons" ID="RadRotator1" runat="server"

Width="1012" ItemWidth="1012" ScrollDirection="Left, Right"

SlideShowAnimation-Type="Fade"

Height="300" ItemHeight="275" FrameDuration="4000" OnClientMouseOver="OnClientMouseOver" OnClientMouseOut="OnClientMouseOut"

ScrollDuration="10" SkinID="WebBlue" OnClientItemShown="OnClientItemShown"

BorderStyle="None" OnClientLoad="OnClientLoad" PauseOnMouseOver="False" SlideShowAnimation-Duration="500" BorderColor="Black" OnDataBound="RadRotator1_DataBound">

<ItemTemplate>

<div class="itemTemplate">

<asp:Image ID="Image1" Width="1012" Height="275" runat="server"

ImageUrl='<%# Container.DataItem  %>' AlternateText="<%# VirtualPathUtility.GetFileName(Container.DataItem.ToString()) %>" />

</div>

</ItemTemplate>

<ControlButtons LeftButtonID="leftArrow" RightButtonID="rightArrow" />

</telerik:RadRotator>

<div class="links" onclick="stopRotator(rotator)">

<asp:Panel CssClass="ScrollerButtonsContainer" OnMouseOver="OnClientMouseOver" ID="ButtonsContainer" runat="server">

</asp:Panel>

<a href="#" id="leftArrow" title="Rotate Left" class="leftButton"></a><a href="#"

id="rightArrow" title="Rotate Right" class="rightButton"></a>

</div>

/*Rotator Buttons Css*/

.rotatorCont

{

width: 800px;

height: 400px;

margin: 10px 135px;

}

.rotator

{

margin: 0 auto;

width: 500px;

height: 220px;

}

.links

{

margin: 0px auto auto 780px;

width: 381px;

position:absolute;

z-index: 5;

}

.ScrollerButtonsContainer

{

height: 22px;

line-height: 22px;

padding: 0 5px 0 2px;

}

.ScrollerButtonsContainer .buttonClass

{

display: inline-block;

float: left;

width: 22px;

text-align: center;

text-decoration: none;

color: #eee;

}

.ScrollerButtonsContainer .buttonClass, .leftButton, .leftButton:hover, .rightButton, .rightButton:hover

{

background: url(/Images/ArrowSprite.gif) no-repeat;

}

.btnHighlight

{

background-position: 0 -110px !important;

color: #9EDA29 !important;

}

.ScrollerButtonsContainer .buttonClass

{

background-position: 0 0;

}

.ScrollerButtonsContainer .buttonClass:hover

{

background-position: 0 -110px;

color: #9EDA29;

}

.ScrollerButtonsContainer, .leftButton, .rightButton

{

float: left;

}

.leftButton, .rightButton

{

display: block;

width: 22px;

height: 22px;

}

.leftButton

{

background-position: 0 -22px;

}

.leftButton:hover

{

background-position: 0 -44px;

}

.rightButton

{

background-position: 0 -66px;

}

.rightButton:hover

{

background-position: 0 -88px;

}

.conf

{

clear: both;

height: 100px;

}

.itemTemplate

{

width: 570px;

height: 230px;

}

.info, .title

{

font-size: 14px;

}

Rotator

answered on 19 Jun 2012

1 answer

72 views

RTL support in HTML code

Hi,

Just want to check, is it normal for this behaviour? URL: http://www.ximnet.com.my/upload/rtleditor.swf
The + sign is in front of the number in Design mode, but when switch to HTML mode, it is at the back.

Thanks.

Editor

answered on 19 Jun 2012

1 answer

77 views

Minimize RadRibbonBar

Hey
Anyone got idea on how to minimize RadRibbonBar?
thanx
Ryan

General Discussions

answered on 19 Jun 2012

3 answers

98 views

RAD Scheduler in Sharepoint 2010

Hi,
I have one simple question only: is it possible and sensefull to use RAD Scheduler in SharePoint 2010 visual webparts?
Thank you very much for your effort!
Ulrich

Sharepoint Integration

answered on 19 Jun 2012

1 answer

210 views

Set height dynamically

This is my scenario:

I have a Div = CenterBody, with set height dynamically depending on windows Heigth.
I need create radsplitter programmatically and set height = ccenterBody Heigth.

this is my aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="WebSearch.UI.Test" %>
<!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 id="Head1" runat="server">
<telerik:RadCodeBlock ID="CodeBlock" runat="server">
<script type="text/javascript">

//here set center body Height
function pageLoad() {
var windowHeight;
if (typeof window.innerWidth != 'undefined') {
windowHeight = window.innerHeight;
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first
// line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth != 'undefined'
&& document.documentElement.clientWidth != 0) {
windowHeight = document.documentElement.clientHeight;
}
// older versions of IE
else {
windowHeight = document.getElementsByTagName('body')[0].clientHeight;
}
document.getElementById("centerBody").style.height = (windowHeight - document.getElementById("centerBody").offsetTop) + "px";

// here i need set RadSplitter .height = = (windowHeight - document.getElementById("centerBody").offsetTop) + "px";

}


</script>
</telerik:RadCodeBlock>
</head>
<body>
<form id="Form2" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />


<div id="centerBody" runat="server" style="border-color:Green; border-width:2px; border-style:solid; width:100%">
</div>


</form>
</body>
</html>

my aspx.cs where I create RadSplitter programmatically

public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
RadSplitter splitter = new RadSplitter();
splitter.ID = "RadSplitter1";
splitter.Width = Unit.Percentage(100);
splitter.Height = Unit.Percentage(100);
splitter.Orientation = Orientation.Vertical;
RadPane topPane = new RadPane();
topPane.ID = "TopPane";
Label topLabel = new Label();
topLabel.ID = "TopLabel";
topLabel.Text = "Top pane";
topPane.Controls.Add(topLabel);
splitter.Items.Add(topPane);
RadSplitBar splitBar1 = new RadSplitBar();
splitBar1.ID = "SplitBar1";
splitter.Items.Add(splitBar1);
RadPane middlePane = new RadPane();
middlePane.ID = "MiddlePane";
middlePane.Controls.Add(new LiteralControl("Middle pane"));
splitter.Items.Add(middlePane);
RadSplitBar splitBar2 = new RadSplitBar();
splitBar2.ID = "SplitBar2";
splitter.Items.Add(splitBar2);
RadPane bottomPane = new RadPane();
bottomPane.ID = "BottomPane";
bottomPane.Controls.Add(new LiteralControl("Bottom pane"));

splitter.Items.Add(bottomPane);
centerBody.Controls.Add(splitter);
}

}

the result is captura1.

I need show as captura2

How I can do this???

regards

Splitter

answered on 19 Jun 2012

1 answer

135 views

Close the edit form template in button click

Hi everyone,
I want to close the edit form template in button click from server side. How can I achieve that?
Hopes and thanks
Ryan

TreeList

answered on 19 Jun 2012

2 answers

87 views

Automatically Redirecting with Data addition

Hi there,
I have paging enabled in my grid. I have encountered this problem while adding new data while in the first page. After adding the data the control is redirected to the last page. Where might I have went wrong. Can anybody help me out with this. Please do come up with something helpful
thanks
Savyo

Grid

answered on 19 Jun 2012

1 answer

120 views

'Sys' is undefined when LinkManager URL too long

Hello =)

I'm having the problem stated in the thread's title: Whenever I'm editing with the RadEditor if I click for example the hyperlink manager, I can't see the OK button. The problem that the webpages gives me is most of the time 'Sys' is undefined (but it throws sometimes other stuff too). This doesn't happen with every user, it just happens with users that have tons of roles and therefore the linkmanager URL gets too long.

Is there any solution for this?

Thanks a ton!!!

Damian =)

Editor

answered on 19 Jun 2012

2 answers

325 views

How to Show a Div in JavaScript or JQuery

Good Evening All

I have a small issue here. I have a Div inside a TD that is defined like this

<td >

<div id="divGoogleEarthMap" runat="server" [B]style="display:none" [/B]

>

<asp:HiddenField ID="HiddenField1" runat="server" />

<asp:ImageButton ID="GoogleEarthMap" runat="server" Height="100px"

OnClientClick="javascript:showimage('GoogleEarthMap'); return false;"

Width="100px" />

</div>

</td>

now the display style of this div is hidden. so i have a Javascript that runs when i close my popup. the first thing that javascript does is to populate two textboxes and show this div. It populate the textboxes nicely , but it fails to show or unhide the div. i have tried to set of code example using the normal javascript and also JQuery as depicted below

$('#divGoogleEarthMap').css('display', "block;");

and

var div = document.getElementById("divGoogleEarthMap");<br> div.style.display = "block";

or

document.getElementById('divGoogleEarthMap').style.display = 'block';

but still my Element cant be displayed.

Please note that i have a Sample Project that i can be supplied on request

Thanks

Ajax