Questions on UI for ASP.NET AJAX Forum

0 answers

90 views

I have a RadGrid in a UpdatePanel (standard .net one) which in turn is in a modal pop up. When the popup is first shown the grid displays correctly however if the popup is closed and reopened then the styling for the grid is missing, there are no gridlines. If I look at the CSS loaded for the page (using FireFox webdeveloper plugin) I can see that the CSS for the radGrid is missing on the second load, even though CSS for other rad components are there. Any idea what might cause this? The gird has visible="false" when the popup is opened and is only displayed after the user presses a button in the popup.

Grid

asked on 24 May 2012

9 answers

1.2K+ views

how to refresh controls using RadAjaxManager from codebehind.

RadAjaxManager

<telerik:RadAjaxManager ID="ajaxManager" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="gvMemberList">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="gvMemberList" LoadingPanelID="ajaxLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnRefresh">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="gvMemberList" LoadingPanelID="ajaxLoadingPanel" />

<telerik:AjaxUpdatedControl ControlID="tabDetails" LoadingPanelID="ajaxLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="ajaxLoadingPanel" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

<asp:ImageButton ID="btnRefresh" ImageUrl="~/Images/refresh.png" OnClick="btnRefresh_Click"

runat="server" ToolTip="Refresh all list." />

<telerik:RadGrid ID="gvMemberList" runat="server" AllowPaging="True" OnInit="gvMemberList_Init"

AllowCustomPaging="true" AllowSorting="True" SkinsPath="RadControls/Skins" EnableAJAX="True"

OnSortCommand="gvMemberList_SortCommand" OnPageIndexChanged="gvMemberList_PageIndexChanged"

OnItemDataBound="gvMemberList_ItemDataBound" OnItemCommand="gvMemberList_ItemCommand"

GridLines="None" EnableEmbeddedSkins="true" PageSize="10" Visible="true" ShowStatusBar="true"

LoadingTemplateTransparency="45" Width="90%" CellSpacing="0" CellPadding="0"

AutoGenerateColumns="false" AllowFilteringByColumn="True" Skin="WebBlue">

<GroupingSettings CaseSensitive="false" />

<MasterTableView DataKeyNames="EmpID" FilterItemStyle-Width="1%" AllowFilteringByColumn="true"

AllowMultiColumnSorting="false">

<Columns>

<telerik:GridBoundColumn DataField="EmpName" HeaderText="EmployeeName" UniqueName="EmployeeName"

HeaderStyle-HorizontalAlign="Center" FilterControlWidth="25px">

<ItemStyle HorizontalAlign="Center" Width="1%" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Address" HeaderText="Emploee Address" UniqueName="Emploee Address"

HeaderStyle-HorizontalAlign="Center" FilterControlWidth="25px">

<ItemStyle HorizontalAlign="Center" Width="1%" />

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<telerik:RadTabStrip ID="tabMemberDetails" runat="server" Skin="WebBlue" MultiPageID="tabDetails"

SelectedIndex="0" Align="Justify" ClickSelectedTab="true" EnableViewState="false"

ReorderTabsOnSelect="true" Width="1139px" OnTabClick="tabMemberDetails_Click"

ScrollChildren="true">

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="tabDetails" ScrollBars="Auto" runat="server" SelectedIndex="0"

CssClass="pageView" Width="1137px" Height="470px">

</telerik:RadMultiPage>

protected void tabMemberDetails_Click(object sender, RadTabStripEventArgs e)

{

StatusNotes control = LoadControl("~/Controls/StatusNotes.ascx") as StatusNotes;

control.btnSaveClk += new StatusNotes.btnStatus_Click(control_btnSaveClk);

}

void control_btnSaveClk(object sender, EventArgs e)

{

btnRefresh_Click(this, new ImageClickEventArgs(0,0));

}

protected void btnRefresh_Click(object sender, ImageClickEventArgs e)

{

gvMemberList.Rebind();

}

I have a problem to refresh my grid using RadAjaxManager from the button click of usercontrol. I have provided a very little portion of my code here. I have a grid,tab control and a refresh button. For partial post-back, I have used RadAjaxManger. When Rows are clicked on the grid, the grid is refreshed. Similarly, when refresh button is clicked grid and tabControl is partially refreshed thru AjaxManager. Till now there is no problem while performing Ajaxifying. Now i want to refresh the grid when user clicks a button in a usercontrol. I am dynamically loading different usercontrol inside tabMemberDetails_Click based on Tabs clicked. For Simplicity lets assume I have a button inside the dynamically loaded usercontrol and btnSaveClk is the event exposed from that usercontrol. I am calling btnRefresh_Click on occurence of that button click. when i debugged the code, everthing works, btnRefresh_Click is called and NeedDataSource of gvMemberList is called and the datasource shows the lates data. But the problem is the Grid doesnt show the lates data. The problem is obvious, Its just that the controls are not being refreshed because btnRefresh didnt occur by clicking on refresh button but another event called it.
I am having this problem for long time and I need to get over it very soon. Is it true that we can refresh control with the ones specified in the AjaxSettings in RadAjaxManager.Can anyone help me.

Ajax

answered on 24 May 2012

3 answers

119 views

help with calendar control and time picker

Hi
This may sound stupid but i need to add a date and time to a database and am using the calendar control and the time picker as the time slots we are using are at 2 hr intervals ho do i pull the date out of the calender and the time out of the time picker and put the 2 together?

Many thanks

Calendar

answered on 24 May 2012

1 answer

237 views

Dialog controls not rendering correctly

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

80 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

291 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

63 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

127 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

79 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

275 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