Questions on UI for ASP.NET AJAX Forum

1 answer

65 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

121 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

191 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

140 views

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

95 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

107 views

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

282 views

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

12 answers

696 views

Dynamically loaded RadComboBox using JavaScript

Hi,

I have trouble to set selected value for a RadComboBox using Javascript.

I think the trouble I have is because the RadComboBox is loaded dynamically in a user control.

Actually the whole website is built based on multiple user controls with AJAX, which mean, there is no post back.

I tried:

function JSSelect() {

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

var itm = combo.findItemByValue('04');

itm.select();

}

I want to call this function at a proper time when the user control which contain my RadComboBox is loaded. But I think it's because of "<%=" and "%>", the page will try to find RadComboBox1 first when the page is first request, but at this time, the user control which contains my RadComboBox has not been loaded. How can I solve this problem?

Ajax

answered on 07 Mar 2012

1 answer

161 views

Hide All Properties button inside Insert Link popup

Is there a way to hide the "All Properties..." button in the "Insert Link" popup on the RadEditor?

Editor

answered on 07 Mar 2012

1 answer

63 views

Rad Editor Not working in IE9.

Hi All,

I have a page in which a radeditor will be opened in a radwindow on a button click.

RadEditor works fine in IE8. But not working in IE9.

I cant add anything to radeditor or even copy paste anything in rad editor.

Version I am using is :2012.1.215.35.

Editor

answered on 07 Mar 2012