Questions on UI for ASP.NET AJAX Forum

1 answer

124 views

I am having a hard time figuring out how to turn SQL results into a RadChart. I've tried numerous examples and code snippets in the "Getting Started" sections and others, but I still can't get it to do something simple.

Attached is a visual of what I am trying to accomplish. All evidence is that RadChart should be able to handle this easily! But I can't make sense of HOW.

On the left are the results from SQL.

On the right is the simple chart as rendered in Excel.

Can someone point me to some good step-by-step instructions on how to make this happen? (I know how to set up the SQL data source and bind the chart to the SQL Data Source, but once I get into the RadChart wizard or attempting to setup the series and items is where there's a mental disconnect.)

Suggestions are greatly appreciated!

Chart (Obsolete)

answered on 07 Mar 2012

2 answers

61 views

possible bug with firefox 10.2 ???

Dear friends,

I need help about radwindows. The code in attahed files worked for months until firefox 10.2 update. It is still working with ms internet explorer.

Issue is about web page -> open modal radwindow -> open another modal radwindow

I isolated the problem and added necessary information on pages. As I cannot attach rar files to message, I gave a link. Sorry for that. Also this problem is about multiple web pages, so I did not write code here in this message. Sorry about that.

I tried 2011q4 and 2012q1 telerik versions. aslo I tried 2012q1 hotfix228

Can you confirm this as a bug ? If so, is it about telerik or about firefox ? Can I do something to make this code work ?

www.karina-mira.org/test.rar

Window

answered on 07 Mar 2012

10 answers

339 views

$telerik cancelRawEvent doesn't cancel event for carriage return

as shown by many posts before, here's how i attach the key up events

function OnClientLoad(editor, args)
{
editor.attachEventHandler("onkeyup", handler);
}

function handler(eventArgs)
{
if (eventArgs.keyCode == "13")
{
$telerik.cancelRawEvent(eventArgs);
return;
}
... other stuff
}

I have tried it with other keystrokes and the cancelRawevent call can prevents those keystrokes, but not carriage return. Any ideas?

Editor

answered on 07 Mar 2012

1 answer

75 views

FileExplorer onRowSelect resetsToolbar/GridContextMenu after 2012 Q1 update

Hello,

Based on each high level directory in FileExplorer I have a set of permissions specific to the path that I set. Based on these permissions I either show or hide the related toolbar icons or gridContextMenu option. After the 2012 Q1 update, if I select any item other than a directory in the grid section, the open and copy options are the only options enabled, all others are disabled. Could this be related to the new cell/column selection feature?

Here is a portion of the code I use for the onClientFolderChange:

function OnClientFolderChange(fileExplorer, args) {

//var loadingPanel = fileExplorer.get_ajaxLoadingPanel();

var treeview = fileExplorer.get_tree();

var selectedNode = treeview.get_selectedNode();

var dirCurrent = fileExplorer.get_currentDirectory();

var toolbar = fileExplorer.get_toolbar();

//toolbar.get_element().style.display = "none";

var GridContextMenu = fileExplorer.get_gridContextMenu();

var grid = fileExplorer.get_grid();

var windowManager = fileExplorer.get_windowManager();

var dir = selectedNode.get_text();

var nodeParent = selectedNode.get_parent();

if (nodeParent != null) {

var getNodeLevel = selectedNode.get_level();

var thisNode = selectedNode;

while (getNodeLevel != 0) {

if (getNodeLevel != 0) {

var parentDir = thisNode.get_parent();

dir = parentDir.get_text();

getNodeLevel = parentDir.get_level();

thisNode = parentDir;

}

// set permissions

// createDir

PageMethods.getPermission(dir, "createDir", function(response) {

//alert("dir: " + dir + " createDir response: " + response);

toolbar.trackChanges();

GridContextMenu.trackChanges();

var tbCreateDir = toolbar.findItemByValue("NewFolder");

var gcmCreateDir = GridContextMenu.findItemByValue("NewFolder");

if (response == "False") {

if (tbCreateDir != null) {

tbCreateDir.hide(0);

}

if (gcmCreateDir != null) {

gcmCreateDir.hide(0);

}

else if (response == "True") {

if (tbCreateDir != null) {

tbCreateDir.show();

}

if (gcmCreateDir != null) {

gcmCreateDir.show();

}

toolbar.commitChanges();

GridContextMenu.commitChanges();

});

// delete

PageMethods.getPermission(dir, "delete", function(response) {

toolbar.trackChanges();

GridContextMenu.trackChanges();

var tbDelete = toolbar.findItemByValue("Delete");

var gcmDelete = GridContextMenu.findItemByValue("Delete");

if (response == "False") {

if (tbDelete != null) {

tbDelete.hide(0);

}

if (gcmDelete != null) {

gcmDelete.hide(0);

}

else if (response == "True") {

if (tbDelete != null) {

tbDelete.show();

}

if (gcmDelete != null) {

gcmDelete.show();

}

toolbar.commitChanges();

GridContextMenu.commitChanges();

});

Thanks!

Jed

FileExplorer

answered on 07 Mar 2012

1 answer

140 views

Radgrid static header problem

Hi,
I am using radgrid with static header,but it gives me problem when web page resizing.
Radgrid width has not adjusted according to page size.When page has refreshed then only width has adjusted

Below are the code,

<%

@ Page Language="C#" AutoEventWireup="true" CodeFile="frmIRPage.aspx.cs" Inherits="Dummy"%>

<%

@ Register TagPrefix="Acme" Namespace="Acme" Assembly="App_Web_mytestuc.ascx.cdcab7d2" %>

<%

@ Register Assembly="ContainerControl" Namespace="Tittle.Controls" TagPrefix="Tittle" %>

<%

@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!

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">

<%

-- <script src="Javascript/TableHeightWidth.js" type="text/javascript"></script>--%>

$(

function () {

$(

"#accordion").accordion({

collapsible:

true

});

</script>

.style1

{

width: 47%;

}

.RadPanelBar .rpImage

{

height: 19px;

}

.RadPanelBar .rpLevel1 .rpImage

{

height: 16px;

}

</style>

function funSetWidthHeight(id, id2, id3, idV,Img4, iWidth, iHeight) {

// debugger;

var myWidth = 0;

var myHeight = 0;

if (typeof (window.innerWidth) == 'number') {

//Non-IE

myWidth = window.innerWidth;

myHeight = window.innerHeight;

}

if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {

//IE 6+ in 'standards compliant mode'

myWidth = document.documentElement.clientWidth;

myHeight = document.documentElement.clientHeight;

}

else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {

//IE 4 compatible

myWidth = document.body.clientWidth;

myHeight = document.body.clientHeight;

}

if (myWidth != 0) {

myWidth = document.documentElement.clientWidth;

myHeight = document.documentElement.clientHeight;

}

if (myWidth != 0) {

var vWidth = myWidth - iWidth;

var vHeight = myHeight - iHeight;

if (vWidth < 150)

vWidth = 150;

if (vHeight < 165)

vHeight = 165;

document.getElementById(id).style.width = vWidth +

'px';

document.getElementById(id2).style.width = vWidth +

'px';

document.getElementById(id3).style.width = vWidth +

'px';

document.getElementById(idV).style.width = vWidth +

'px';

document.getElementById(Img4).style.width = vWidth +

'px';

}

</script>

</

head>

<

body onload="funSetWidthHeight('div1', 'tb1', 'tb2', 'tb3','Img4', 20, 20);">

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

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

<!--

function HandleScrolling(e) {

var grid = $find("<%=RadGrid2.ClientID %>");

var scrollArea = document.getElementById("<%= RadGrid2.ClientID %>" + "_GridData");

if (IsScrolledToBottom(scrollArea)) {

var currentlyDisplayedRecords = grid.get_masterTableView().get_pageSize() * (grid.get_masterTableView().get_currentPageIndex() + 1);

//if the presently visible items are less than the entire source records count

//trigger an ajax request to increase them

if (currentlyDisplayedRecords < 100) {

$find(

"<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadMoreRecords");

}

//this method calculates whether you have reached the bottom when dragging the vertical grid scroll

function IsScrolledToBottom(scrollArea) {

var currentPosition = scrollArea.scrollTop + scrollArea.clientHeight;

return currentPosition == scrollArea.scrollHeight;

}

-->

</script>

</

telerik:RadCodeBlock>

<

telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel2" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</

telerik:RadAjaxManager>

<tr>

<td align="left" style="width:100%; height: 8%; background-image: url('images/DM-bar.jpg');

background-repeat: repeat-x;vertical-align:top">

</td>

</tr>

</table>

<tr>

<td id="sbCont" style="width: 15%; height: 100%; font-size: 7pt;background-color:White;

color: #000000; vertical-align: top">

<a href="#">Services</a></h3>

<div>

<p>

<asp:HyperLink ID="lnkDocumentManager" runat="server" Font-Underline="false" Text="File Manager" Target="_blank"/>

</p>

</div>

<a href="#">My Reports</a></h3>

<div>

<p>

Reports

</p>

</div>

<a href="#">Historic Models</a></h3>

<div>

<p>

Section 33

</p>

</div>

<a href="#">Manaege Data</a></h3>

<div>

<p>

Section 44

</p>

</div>

<a href="#">View Historic Data</a></h3>

<div>

<p>

Section 44

</p>

</div>

<a href="#">Analyst capture</a></h3>

<div>

<p>

Section 44

</p>

</div>

<a href="#">Feedback</a></h3>

<div>

<p>

Section 44

</p>

</div>

</td>

</tr>

<tbody>

<img alt="" id="Img1" width="30" height="8" onclick="leftRoeHide(this);" src="Images/vertical1_arrow.jpg"

style="cursor: pointer; height: 8px;" />

</td>

</tr>

<tr id="leftRoeHide" style="vertical-align: bottom; background-color: white; font-size: 7pt;

color: #000000;" valign="bottom">

<tbody>

<tr>

<asp:LinkButton ID="lnkUtilities" runat="server" Font-Size="Small" ForeColor="#668fa3" Font-Names="Verdana" Text="Utilities"></asp:LinkButton>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</table>

</td>

</td>

<asp:Label ID="Label1" runat="server" Text="Login as " Font-Names="Calibri" Font-Size="Small"></asp:Label> | 

<asp:LinkButton ID="LinkButton1" runat="server" Font-Names="Calibri" Font-Size="Small" CausesValidation="False"

ForeColor="#668fa3">Sign Out</asp:LinkButton>

</td>

</tr>

<td>

<tbody>

<tbody>

<Tittle:PanelCurveControl ID='tblCrvPnl' runat="server" Expandable="true" Margin="10" Title="Approve Historical Details" TabBackColor="#668fa3" HasPrint="false">

<telerik:RadGrid ID="RadGrid2" AllowSorting="True" runat="server" AllowPaging="true"

Width="40%" PageSize="15" GridLines="Both" Skin="MyCustomSkin" EnableEmbeddedSkins="false" >

</ClientSettings>

</telerik:RadGrid>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server">

</telerik:RadAjaxLoadingPanel>

</Tittle:PanelCurveControl>

</td>

</tr>

</td>

</tr>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

<td style="width: 100%; background-repeat: repeat-x; background-position: center;

background-color: #e7ebf0;" align="center">

<img alt="" id="Img2" width="60" height="10" onclick="MiddleRowHide(this);" src="Images/vertical1_arrow.jpg"

style="cursor: pointer" />

</td>

</tr>

<td style="width: 100%; background-image: url(Images/DM-bar.jpg); background-repeat: repeat-x;

background-position: center; background-color: #e7ebf0;" align="center">

</td>

</tr>

<tr id="MiddleRowHide" style="background-color: white; font-size: 7pt; color: #000000;

vertical-align: bottom; height: 100%" valign="bottom">

<br />

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

<td style="background-image: url('Images/extra bar1.jpg'); background-repeat: repeat;

clip: rect(auto, 25px, auto, auto); height: 15px;">

<tr>

<asp:LinkButton ID="lnkDesclaimer" runat="server" ForeColor="White">Desclaimer</asp:LinkButton>  

</td>

<asp:Label runat="server" ID="lbl1" Text="(Reserved)" ForeColor="White"></asp:Label>

</td>

</td>

<img alt="" src="Images/phone.png" width="10" height="10" /> <asp:Label ID="lblContactUs"

runat="server" ForeColor="White">Contact Us   |</asp:Label>

</td>

<td style="font-family: Calibri; font-size: 15px; padding: 5px; width: 25%" align="left"

class="style1">

<img alt="" src="Images/print.gif" width="10" height="10" /> <asp:Label runat="server"

ID="lblPrint" ForeColor="White" Text="Print"></asp:Label>

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

</form>

</

body>

</

html>

　

Thanks for any help.
Satyajit Kadam

Grid

answered on 07 Mar 2012

2 answers

209 views

Customize Paging - Page Sizes

I have seen solutions for this issue in the RadGrid forum but they don't work for TreeList. Basically I want to replace the page size option with my own set, but when I do that using the following code it breaks paging (changing the page size basically does nothing). Evidently there is some event-handling that needs to be hooked up. How do I get this to work?? Thanks in advance!

Dim ddPageSizes As Telerik.Web.UI.RadComboBox = CType(e.Item.FindControl("PageSizeComboBox"), Telerik.Web.UI.RadComboBox)

                    ddPageSizes.Items.Clear()

                    ddPageSizes.Items.Add(New Telerik.Web.UI.RadComboBoxItem("10"))
                    ddPageSizes.Items(0).Attributes.Add("ownerTableViewId", Me.EditResults.ClientID)
                    ddPageSizes.Items.Add(New Telerik.Web.UI.RadComboBoxItem("250"))
                    ddPageSizes.Items(1).Attributes.Add("ownerTableViewId", Me.EditResults.ClientID)
                    ddPageSizes.Items.Add(New Telerik.Web.UI.RadComboBoxItem("500"))
                    ddPageSizes.Items(2).Attributes.Add("ownerTableViewId", Me.EditResults.ClientID)

                    ddPageSizes.FindItemByText(Me.EditResults.PageSize.ToString()).Selected = True

TreeList

answered on 07 Mar 2012

2 answers

166 views

[Solved] CSS Sprites background-position

I am just starting to build my own custom skin based on the "Hay" skin. I have figured out how to create an assembly and recolor the sprites using Photoshop. The part I don't understand relates to the controls corresponding CSS file. In the CSS code below, the background-postion is: 100% -216px. What does the -216px represent? You can't have a negative pixel coordinate on the actual sprite image so where is this pointing to on the sprite to get the background? I am guessing you go down 216 pixels on the sprite and the image just above it is the image used for the background. Is this correct

.RadMenu_Hew .rmRootGroup a.rmDisabled:hover .rmExpandRight,

.RadMenu_Hew_Context .rmGroup a.rmDisabled:hover .rmExpandRight,

.RadMenu_Hew_Context .rmGroup a.rmDisabled:hover .rmExpandLeft,

.RadMenu_Hew .rmGroup a.rmDisabled:hover .rmExpandDown

{

background-image: url('<%=WebResource("Hew.Web.UI.Skins.Hew.Menu.rmSprite.png")%>');

background-position: 100% -216px;

}

Visual Style Builder

answered on 07 Mar 2012

1 answer

104 views

Grid-mode from DialogOpener

Is there a way to set viewmode to grid when opening an ImageManager from a DialogOpener?

We are using a custom provider for filehandling, so the thumbnail view is slowing down the filemanagers (db queries, getting files, resizing thumbs etc)

<telerik:RadDialogOpener runat="server" id="DialogOpener1"></telerik:RadDialogOpener>

<button

onclick="$find('<%= DialogOpener1.ClientID %>').open('ImageManager', {CssClasses: []});SetCurrentUserControl('<%= DialogOpener1.ClientID %>');return false;">

Find picture...

</button>

protected new void Page_Load(object sender, EventArgs e)

{

FileManagerDialogParameters dialogParameters = new FileManagerDialogParameters();

dialogParameters.ViewPaths = new[] { "root" };

dialogParameters.UploadPaths = new[] { "root" };

dialogParameters.DeletePaths = new[] { "root" };

dialogParameters.MaxUploadFileSize = 5000000;

dialogParameters.FileBrowserContentProviderTypeName = typeof(DBContentProvider).AssemblyQualifiedName;

DialogDefinition imageManager = new DialogDefinition(typeof(ImageManagerDialog), dialogParameters);

imageManager.ClientCallbackFunction = "ImageManagerFunctionPrj";

imageManager.Width = Unit.Pixel(694);

imageManager.Height = Unit.Pixel(440);

DialogOpener1.DialogDefinitions.Add("ImageManager", imageManager);

}

Editor

answered on 07 Mar 2012

2 answers

132 views

[Solved] RadNumericTextbox and UpdatePanel

Hello all,

I am having an issue using the RadNumericTextbox with UpdatePanel. On every other postback, it would display the below message in the UpdatePanel. I am using the RadNumericTextbox in a RadGrid.

The Message: 9274|updatePanel|ctl00_ctl26_g_ba5d72b6_620b_453e_a4a2_8e74af493901_ctl00_ctl00_ctl26_g_ba5d72b6_620b_453e_a4a2_8e74af493901_ctl00_grdItemsPanel|

RadNumbericTextbox Settings:

<telerik:RadNumericTextBox

ShowSpinButtons="true"

IncrementSettings-InterceptArrowKeys="true"

IncrementSettings-InterceptMouseWheel="true"

Width="35px"

runat="server"

ID="qty"

MaxValue="99"

MinValue="1"

Value="1"

AutoPostBack="true"

OnTextChanged="qty_TextChanged">

</telerik:RadNumericTextBox>

Another approach but failed: Instead of using the UpdatePanel, I tried using RadAjaxManager but it is not doing a PostBack when the RadNumericTextBox number changes.

Has anyone experienced this behavior and have suggestions?

General Discussions

answered on 07 Mar 2012

8 answers

330 views

[Solved] Max Length on Node Edit

Is there a way to set the max length for the edit box when editing an item in the tree view? I can see that when editing the name of a node in the tree view, the editable area is an input box. With input boxes, you should be able to set a maximum length. I just need a way to set the maximum length for the editable area so when a user goes to rename a node in the tree view, they can't give it a really long name.

Kai Thao

TreeView

answered on 07 Mar 2012