Questions on UI for ASP.NET AJAX Forum

1 answer

230 views

I am using a RadUpload control to select an image on the client machine to load into the image editor. I use a RadAjaxManager and its OnAjaxRequest event to load the image into the editor. That all works fine except I can't get the RadImageEditor's dialogue's to render correctly. The dialogue's work for the most part except their controls don't display images and the slider in the zoom dialogue renders as a set of link buttons. I see in the known issues that if the image editor is in an update panel the UpdateMode should be set to Conditional. But I don't know how to handle this with the RadAjaxManager.

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">

</telerik:RadStyleSheetManager>

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

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadFormDecorator runat="server" DecoratedControls="All" />

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadImageEditor1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

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

<script type="text/javascript">

var radUpload;

var radUploadInputs;

var radImageEditor;

function pageLoad()

{

radUpload = $find("<%= RadUpload1.ClientID %>");

radUploadInputs = $find("<%= RadUpload1.ClientID%>").getFileInputs();

}

function RadUpload1_ClientFileSelected(sender, args)

{

var item = radUploadInputs[0].value;

var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");

ajaxManager.ajaxRequest(item);

}

function RadImageEditor1_ClientLoad(sender, args)

{

radImageEditor = $find(sender.get_id());

radImageEditor = $telerik.toImageEditor(radImageEditor);

//radImageEditor.zoomBestFit();

}

function ImageEditor_OnClientSaved(imgEditor, args)

{

radUpload.clearFileInputAt(0);

Close();

}

function Close()

{

GetRadWindow().close();

}

function GetRadWindow()

{

var oWindow = null;

if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including classic dialog

else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)

return oWindow;

}

</script>

</telerik:RadCodeBlock>

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

</telerik:RadAjaxLoadingPanel>

<telerik:RadUpload ID="RadUpload1" runat="server" AllowedFileExtensions="jpg,jpeg,png,gif,bmp"

OnClientFileSelected="RadUpload1_ClientFileSelected" MaxFileInputsCount="1" FocusOnLoad="true"

InitialFileInputsCount="1" ControlObjectsVisibility="None">

</telerik:RadUpload>

<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ExternalDialogsPath="~/App/ImageEditorDialogs"

Width="300px" Height="300px" OnClientSaved="ImageEditor_OnClientSaved" StatusBarMode="Hidden"

ToolsLoadPanelType="XmlHttpPanel" EnableResize="false" OnClientLoad="RadImageEditor1_ClientLoad">

<Tools>

<telerik:ImageEditorToolGroup>

<telerik:ImageEditorTool CommandName="Save" />

<telerik:ImageEditorTool CommandName="Print" />

<telerik:ImageEditorToolSeparator />

<telerik:ImageEditorToolStrip CommandName="Undo" Text="Undo" />

<telerik:ImageEditorToolStrip CommandName="Redo" Text="Redo" />

<telerik:ImageEditorToolSeparator />

<telerik:ImageEditorTool CommandName="Crop" />

<telerik:ImageEditorTool CommandName="Resize" Text="Resize" IsToggleButton="false" />

<telerik:ImageEditorTool CommandName="Zoom" />

</telerik:ImageEditorToolGroup>

</Tools>

</telerik:RadImageEditor>

</form>

</body>

</html>

Imports System

Imports System.Drawing

Imports System.IO

Imports EHR.Web.UI

Imports Telerik.Web.UI

Imports Telerik.Web.UI.ImageEditor

Imports System.Collections.Generic

Imports System.Web

Imports Telerik.Web.UI.Widgets

Imports System.Xml

Imports System.Text.RegularExpressions

Public Class AddPatImage

Inherits EhrPage

'Private pathToImage As String = "~/PatImages/Images/shield.png"

Private pathToImage As String = "~/Images/silhouette.gif"

Private pathToThumbs As String = "~/PatImages/Thumbs/"

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Me.PatID = 42815

Me.UserID = 61

If Not IsPostBack Then

End If

End Sub

Protected Sub RadAjaxManager1_AjaxRequest(sender As Object, e As AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest

pathToImage = e.Argument

RadImageEditor1.ImageUrl = pathToImage

End Sub

Protected Sub RadImageEditor1_ImageSaving(sender As Object, args As Telerik.Web.UI.ImageEditorSavingEventArgs) Handles RadImageEditor1.ImageSaving

Dim image = args.Image.Clone().Image

'image.Resize(32, 32)

'Dim ms = New MemoryStream()

'image.Image() '.Save(ms, image.RawFormat)

'File.WriteAllBytes([String].Format("{0}{1}.{2}", MapPath(pathToThumbs),

'args.FileName, image.Format), DirectCast(ms.ToArray(), Byte()))

'Save image to Patients record using the PatientImage_Insert web method.

With clsEMR

.PatientPhoto_Insert(Me.PatID, ImageToByte(image), Me.UserID)

End With

End Sub

Public Shared Function ImageToByte(ByVal img As System.Drawing.Image) As Byte()

Dim imgStream As MemoryStream = New MemoryStream()

img.Save(imgStream, System.Drawing.Imaging.ImageFormat.Jpeg)

imgStream.Close()

Dim byteArray As Byte() = imgStream.ToArray()

imgStream.Dispose()

Return byteArray

End Function

Protected Sub RadImageEditor1_ImageLoading(sender As Object, args As Telerik.Web.UI.ImageEditorLoadingEventArgs) Handles RadImageEditor1.ImageLoading

args.Image = New EditableImage(MapPathSecure(pathToImage))

args.Cancel = True

End Sub

End Class

ImageEditor

answered on 24 May 2012

1 answer

78 views

ReBinding Grid on ParentPage on Close of RadWindow

Hi Guys hope someone can help, i know this is covered in another thread but im having an issue with the radwindow and rebinding the grid on my parent page.

I have a RadWindow that i open when i click a button on the ParentPage, the window opens as a modal window i am using thos to have a document upload on the new window. Once the document is uploaded i want the user to be able to click a close button on the radwindow and this close the window and rebind my grid on my parent page.

When my radWindow opens it is modal as the background is greyed out,once i have uploaded a document when i click my close button which is Button1 in this case , the window closes rebinds the grid as i want it to but then the radwindow opens again but not in a modal state and i am unable to close it.

Javascript on my parent page is

<script type="text/javascript">

function openWin() {

var value = '<%=MeetingID %>';

var oWnd = radopen("DocumentUpload.aspx?MeetingID=" + value, "WindowDocumentUpload");

}

function getRadWindow() {

var oWindow = null;

if (window.radWindow) oWindow = window.radWindow;

else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;

return oWindow;

}

function refreshGrid(arg) {

if (!arg) {

$find("<%= RadAjaxManagerCreateMeeting.ClientID %>").ajaxRequest("Rebind");

}

else {

$find("<%= RadAjaxManagerCreateMeeting.ClientID %>").ajaxRequest("RebindAndNavigate");

}

function OnClientFileOpen(oExplorer, args) {

//get the extension of the opened item

// var item = args.get_item();

// var fileExt = args.get_item().get_extension();

// if (fileExt == "xlsx" || fileExt == "docx") {

// args.set_cancel(true);

// var requestImage = "FileSystemHandler.ashx?path=" + item.get_url();

// document.location = requestImage;

// }

//if (fileExt && fileExt.toLowerCase() == "pdf") {

//cancel the default behavior

args.set_cancel(true);

//open new RadWindow

var oWnd = radopen(args.get_item().get_path(), "RadWindow1");

//set size to the newly opened RadWindow

oWnd.center;

oWnd.setSize(850, 500);

//if you want to open the PDF file in a new browser window

//you can use the following code

//window.open(args.get_item().get_path());

// }

}

</script>

Javascript in my radwindow page is

<script type="text/javascript">

function CloseAndRebind(args) {

GetRadWindow().BrowserWindow.refreshGrid(args);

GetRadWindow().close();

}

function GetRadWindow() {

var oWindow = null;

if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog

else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)

return oWindow;

}

function CancelEdit() {

GetRadWindow().close();

}

</script>

Then the VB in my Radwindow Page is

Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click

ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CloseAndRebind();", True)

End Sub

Hope you can help

Thanks

Window

answered on 24 May 2012

1 answer

282 views

RadWindow RestrictionZoneID and Modal.

Hi,

I have 2 questions regarding RestrictionZoneId and modal which are inter related to each other.

Can i set RestrictionZoneId of a RadWindow to another RadWindows' Id. If not is there any alternative to achieve this via code?
If i set RestrictionZoneId of a RadWindow to a div then can i set it to modal only for the div and not for the entire page.

Will appreciate your quick response.

Window

answered on 24 May 2012

1 answer

61 views

FindNodeByText - Couple of Questions

HI,

I provided a textbox for user to find tree view nodes. The find functionality is working good, but I have couple of questions

1. After node.expand() and node.select(), how to make the tree view to load a page which is tied to that node. Each node on my tree view has NavigateURL set to a aspx page.

2. Is there a way to find the node based on partial value entered? For example if node text is 'Employee Engagements', I want to find the node if user enters 'Employee' or 'Engagements'.. I mean like text.contains..

Thanks

TreeView

answered on 24 May 2012

1 answer

119 views

Self Adjusting Floating RadDocks

Hello Telerik,

Is there a way to make floating RadDocks self-adjust its' Top and Left properties when the size of the window changes? Maybe, programatically change these properties relative to an enclosing "box" or area in response to a window-size-changed event?

Thanks for any input.

Virgil

Dock

answered on 24 May 2012

1 answer

71 views

RadSpell does not remove repeated words

In our RadSpell configuration, we have chosen NOT to ignore repeated words. As a result, when the spell check runs, it identifies and highlights the repeated word. However, there is no option to remove the word and clicking on the "Change" button only updates the word to the current suggestion which, assuming the word is spelled correctly, is the same word so the repeated word still exists. The only way to remove the repeated word when the spell checker finds it is to manually delete the word. Is there a way to configure the RadSpell that provides an option to remove the repeated word when one is found?

Here is the RadSpell configuration we are using:

<telerik:RadSpell



    runat

="server"

ID

="radSpellChecker"



    AllowAddCustom

="false"



    ButtonType

=

"None" 

    DialogsCssFile="~/App_Themes/TelerikStyles/Spell/RadSpellDialog.css"



    DictionaryLanguage

=

"en-us" 

    EnableEmbeddedBaseStylesheet="false"> 

    EnableEmbeddedSkins="false"



    FragmentIgnoreOptions

=

"None" 

    Skin="XYZ"



    SpellCheckProvider

="PhoneticProvider"



    SupportedLanguages

="en-US,English"
WordIgnoreOptions="UPPERCASE,WordsWithNumbers"

</

telerik:RadSpell

Thanks,
Curtis

Spell

answered on 24 May 2012

3 answers

257 views

AddAjaxSetting Object reference not set to an instance of an object

Hi

I am currently working on upgrading our application to your latest controls. We are moving from using Telerik.WebControls (Class controls) to the Telerik.Web.UI (Ajax controls)

I have got the application compiling and I am working through the errors the application is throwing.

I have come into a stumbling block when the pages load which contain the below syntax:

RadAjaxManager.AjaxSettings.AddAjaxSetting(RadAjaxManager, updatePanel, AjaxLoadingPanel);

Obviously the parameters that are passed are different between pages however i am constantly getting an Object reference not set to an instance of an object error message and have been unable to find any relevant help on this.

The AddAjaxSetting is varying between being defined in the Page_Load, On_Init and On_PreRender methods.

If you need any more information please let me know.

Regards,
Jonathan

Ajax

answered on 24 May 2012

1 answer

81 views

Grid data Update

Hi all,
I am updating my grid data using update command. I use edit form template,I want the parent item of the edited item.How can I get this?
Please help.

Thanks in advance.

Grid

answered on 24 May 2012

1 answer

370 views

How do i validate "valid" decimal value with Radmaskedtextbox

Hi Team,

We are using masked textbox in few important places in our system for different type of input validation.

Now, i am dead stuck with how to i validate the "Valid" Decimal value with masked text box.

"#" or "9" format must need the that many number of digits.

e.g. valid decimal numbers are:
111.124
11.12455
11111.12455

Making mask "######.######" like that, must require user to type in leading "0(zero)", which is real pain.

If you could be of any help solving this mystry will be great help.

Thanks,
J. Ramesh

General Discussions

answered on 24 May 2012

3 answers

1.4K+ views

Adding scripts with RadScriptManager

Hi, I’m updating an ASP.NET AJAX application so that the jQuery library loaded by the Telerik.Web.UI assembly can be re-used by other scripts. I have two questions which I’d appreciate some advice on:

I have a RadScriptManager on my master page and need to include a private javascript file that can be used by all content pages. Should I include the script as a reference within the RadScriptManager or should I use conventional script tags after the RadScriptManager? I’ve illustrated both methods below. Both seem to work but what is the recommended approach?

METHOD 1
<telerik:RadScriptManager ID="rsmMain" runat="server" >
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<script type="text/javascript" src="../Scripts/Utility.js"></script>

METHOD 2
<telerik:RadScriptManager ID="rsmMain" runat="server" >
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
<asp:ScriptReference Path="~/Scripts/Utility.js" />
</Scripts>
</telerik:RadScriptManager>

My second question relates to adding a client-side script from a page programmatically. Previously I used the RegisterStartupScript() method of ClientScriptManager to add a script from code behind but I note from some forum posts that it’s suggested you should use RadScriptManager.RegisterStartupScript() instead. What’s the difference and is there a recommended approach?

Regards, Ian

ScriptManager and StyleSheetManager

answered on 24 May 2012