Questions on UI for ASP.NET AJAX Forum

1 answer

124 views

[Solved] Enabling AutoPostBackOnFilter causes loading panel to display non-modal

Hello. I'm noticing that when I set the AutoPostBackOnFilter=true for a column that filtering on that column by pressing the enter key causes display of a non-modal loading panel. The two cases I have observed are:

Case 1 - Incorrect modal behavior when ShowFilterIcon="false" and AutoPostBackOnFilter="true"
Case 2 - Correct modal behavior when ShowFilterIcon="true" and AutoPostBackOnFilter="true"

I am using ASP.NET AJAX controls version 2011.1.519.40 and observed this behavior on the following browsers:

IE 9
Firefox 5.0
Chrome 13.0.782.112 m
Safari 5.0.5

Below is markup, code-behind and a sample data item class that demonstrates the problem. Thank you.

Markup

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

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

<title>When AutoPostBackOnFilter is on Loading Panel is not modal</title>

</head>

<body>

<form id="form1" runat="server">

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

</telerik:RadScriptManager>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="grid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="loading" runat="server" Skin="Windows7" Transparency="1">

</telerik:RadAjaxLoadingPanel>

<p>

The setting of ShowFilterIcon along with AutoPostBackOnFilter for grid columns causes inconsistent

behavior of the loading panel modality.

<ul>

<li>

Case 1 - Incorrect modal behavior when ShowFilterIcon="false" and AutoPostBackOnFilter="true"

</li>

<li>

Case 2 - Correct modal behavior when ShowFilterIcon="true" and AutoPostBackOnFilter="true"

</li>

</ul>

</p>

<p>

To have time to observe the behavior, long filter times are simulated by Thread.Sleep() - about 5 seconds - in

code behind.

<br />

<h4>Steps to reproduce the incorrect behavior:</h4>

<ol>

<li>

Enter filter text in the 'Case 1' column.

</li>

<li>

Press enter.

</li>

<li>

Using mouse, click anywhere on the grid. Note that the filter textbox will also recieve focus if clicked.

</li>

<li>

Observe the loading panel disappears, and after 5 or so seconds, the filter operation finishes successfully.

</li>

</ol>

<h4>Steps to observe the correct behavior:</h4>

<ol>

<li>

Enter filter text in the 'Case 2' column

</li>

<li>

Click the filter button.

</li>

<li>

Using mouse, click anywhere on the grid or the filter textbox.

</li>

<li>

Observe the loading panel is modal and does not disappear until completion of the filter process.

</li>

</ol>

</p>

<br />

<telerik:RadGrid ID="grid" runat="server" AllowFilteringByColumn="True" AutoGenerateColumns="False"

AllowPaging="True" Skin="Windows7" OnNeedDataSource="grid_NeedDataSource">

<MasterTableView>

<Columns>

<telerik:GridBoundColumn DataField="Id" UniqueName="Id" AllowFiltering="false" HeaderText="Id"/>

<telerik:GridBoundColumn DataField="Name" UniqueName="Name" ShowFilterIcon="false"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

HeaderText="Case 1 - Incorrect - Loading panel will not be modal when filtering on this column by pressing the enter key">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Title" UniqueName="Title" ShowFilterIcon="true"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

HeaderText="Case 2 - Correct - Loading panel will still be modal when filtering on this column by clicking the filter button">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</form>

</body>

</html>

Code-behind

using System;

using System.Linq;

using System.Collections.Generic;

using System.Threading;

using Telerik.Web.UI;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

Thread.Sleep(3000);

if (!this.IsPostBack)

{

this.BuildData();

}

protected void grid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

this.grid.DataSource = this.Data;

}

private List<SampleDataItem> Data

{

get

{

return (List<SampleDataItem>)this.ViewState["Data"];

}

set

{

this.ViewState["Data"] = value;

}

private void BuildData()

{

var query =

from i

in Enumerable.Range(1, 10000)

select new SampleDataItem()

{

Id = i,

Name = Guid.NewGuid().ToString(),

Title = Guid.NewGuid().ToString()

};

this.Data = query.ToList();

}

App_Code sample data item class

using System;

[Serializable]

public class SampleDataItem

{

public SampleDataItem()

{

}

public long Id

{

get;

set;

}

public string Name

{

get;

set;

}

public string Title

{

get;

set;

}

Grid

answered on 22 Aug 2011

2 answers

176 views

External javascript file problem

Hello,

I have a problem in using a javascript function which is intended to close a radwindow control.
If I set the javascript directly into the page (see the following code), then the radwindow will be closed by clicking the Close button, but if I set the javascript code in into an external javascript file then I will get a web page error "Error: The value of the property 'Close' is null or undefined, not a Function object".

Here is my page code when the javascript is included into the head ContentPlaceHolder:

<%@ Page Title="<%$ Resources:RLResource, PagesRWForgottenPasswordTitle %>" Language="C#" MasterPageFile="~/Common/MasterPages/BaseMasterPage.master" AutoEventWireup="true" CodeFile="rwForgottenPassword.aspx.cs" Inherits="GeneralNS.RL_Pages_rwForgottenPassword" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

<script type="text/javascript">

//Get RadWindow

function GetRadWindow() {

var oWindow = null;

if (window.radWindow)

oWindow = window.radWindow;

else if (window.frameElement.radWindow)

oWindow = window.frameElement.radWindow;

return oWindow;

}

//Close RadWindow

function Close() {

GetRadWindow().Close();

}

</script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<asp:Panel ID="TopCloseLinkButtonPanel" runat="server" HorizontalAlign="<%$ Resources:RLResource, NoContentFloat %>" >

<asp:Label ID="excuteWindowClose" runat="server" Width="410px"></asp:Label>

<asp:LinkButton ID="TopCloseLinkButton" runat="server" Text="<%$ Resources:RLResource, PagesRWForgottenPasswordTopCloseLinkButton %>" OnClick="CloseLinkButton_Click" ></asp:LinkButton>

</asp:Panel>

</asp:Content>

c# code:

using System;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

using System.Linq;

using System.Xml;

using System.Xml.Linq;

namespace GeneralNS

{

public partial class RL_Pages_rwForgottenPassword : BasePage

{

protected void Page_Load(object sender, EventArgs e)

{

}

//Close the forgotten password radwindow

protected void CloseLinkButton_Click(object sender, EventArgs e)

{

excuteWindowClose.Text = "<script type='text/javascript'>Close();</" + "script>";

}

Here is head ContentPlaceHolder content when the javascript is included into an external javascript file:

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

<script src="http://localhost:53965/abcde.com/Common/Design/Javascript/General.js" type="text/javascript"></script>

</asp:Content>

Note: the javascript code which is apears in the first code block (above) is exists in the General.js file.

Please, I need your help in order to solve the above problem and to able to set radwindow javascript code into an external file.
It is very appreciated to send me the modified code.

Regards,
Bader

Window

answered on 22 Aug 2011

1 answer

88 views

Disable drag on row by row basis

I have AllowRowsDragDrop enabled on my grid, but have the need to disable it on a row by row basis
in my Grid I have a GridCheckBoxColumn

<

telerik:GridCheckBoxColumn DataField="IsChildDictionary" Visible="false" UniqueName="IsChildDictionary" DataType="System.Boolean" AllowFiltering="false">

on the basis of this checkbox state I want to disable darg and drop feature of row please suggest me how can I check the state of this checkbox ?

I want to use this condition in below function to disable drag and drop feature on row

function OnRowDragStarted(sender, eventArgs)

{

}

Grid

answered on 22 Aug 2011

9 answers

773 views

RadWindow close on server side

I have a page with a RadWindow. The page that loads in the radwindow is a login form. Basically when teh Login button is pressed an integer is returned based on if the credentials are successfull or not. If the integer is 0, it simply lets them know they have the wrong password, this is already setup and works. However if the returned integer is 1, i want it to close the radwindow, run some serverside code based on a value passed from the RadWindow (ie the Users primary key) and redirect the parent page to another page. Here is my server side code for the login page:

    
            protected void submitbutton_Click(object sender, EventArgs e) 
        
                { 
        
                    //checks credentials, returns 1 or 0 
        
                    int authStatus = Authentication.AuthenticateEmployee(txtUsername.Text.Trim(), 
        
                        Encryption.encryptStringSHA256(txtPassword.Text.Trim())); 
        
                    switch (authStatus) 
        
                    { 
        
                        case 0: 
        
                            lblStatus.Text = "code0: Your user does not have access"; 
        
                            break; 
        
                        case 1: 
        
                            lblStatus.Text = "code1: Successfull"; 
        
                            //here i want it to close the radwindow and run some server side code. 
        
                            break; 
        
                    } 
        
                }

I know how to pass values from the radwindow to the parent page, but I'm not sure how to access those values server side.

Window

answered on 22 Aug 2011

1 answer

516 views

[Solved] Changing RadAlert icons based on success/failure alert.

Hi Telerik,

I have the following code:

function SaveDashboard(pane, eventArgs) {

loadingPanel = $find(radAjaxLoadingPanel1ID);

loadingPanel.show(baseSplitterID);

eventArgs.set_cancel(true);

window.PageMethods.SaveToDatabase(

function (result) {

if (result == true) {

window.radalert('Dashboard saved successfully.', 275, 100, "Save Successful");

}

else {

window.radalert('Dashboard NOT saved successfully.', 240, 100, "Save Unsuccessful");

}

loadingPanel.hide(baseSplitterID);

});

}

I would like to display icons indicative of success/failure. That is, changing the titlebar LHS icon and the LHS icon in the body of the window. Do I need to use a full radwindow to do this?

Window

answered on 22 Aug 2011

5 answers

116 views

AdvancedInsertTemplate not closing after button click

I am having problems closing AdvancedInsertTemplate after users click on Insert button. I can use a redirect but that would not be the best solution. Here is what happens:

Users go to Scheduler page
In code-behind I bind the scheduler to the dataset using BindScheduler() subroutine
When users double-click on the timeslot the AdvancedInsertTemplate opens up with our custom Insert Appointment form
The AdvancedInsertTemplate from as 2 buttons: Create (CommandName: Insert) and Cancel (CommandName: Cancel)
After users enter the appointment details and click Create button a radSchedule1_AppointmentCommand is fired and data is saved into the DB. After save I fire BindScheduler() again in order to bind the newly updated data.
At this point I need to close the modal AdvancedInsertTemplate but it does not close

What is the solution to this issue? thanks

Scheduler

answered on 22 Aug 2011

2 answers

274 views

forcing refresh of uploaded content

I am using the AsyncUpload control to upload an employee picture to a telerik AJAX Manager enabled website. The <ASP:IMAGE> tag that displays the picture is embedded in a Telerik Rad Ajax Loading Panel.

When I upload the picture (to the temporary folder) and then click the page submit button, the employee picture is correctly saved to the temporary folder and then moved to the target folder.

As people can potentially upload pictures with the same filename, they can clobber each other's previously uploaded files inside the target folder. I've added logic in the server side submit button handler to rename each uploaded targetfolder file so that it is always unique to a particular employee. Each employee will end up retaining this filename as it is based on a formula that uses an employee number, even for future subsequent uploads. At the end of the submit button handler, I repopulate the screen controls.

If I upload two different pictures for the same screen without leaving it, the first upload renders the picture. On the second upload, the picture doesn't change even though its content and timestamp HAS changed in the target folder. The reason it doesn't refresh on the second upload is that the <ASP:IMAGE> tag is using the same filename it had from the first upload. The ajax mechanism doing the background postback isn't telling something (internet explorer?) to reload the image from the targetfolder.

How do I get the uploaded file to be marked as being dirty so that a refresh on the <ASP:IMAGE> tag is forced?

protected void btnSave_Click(object sender, EventArgs e)

{

System.String result = "OK";

System.String strUploadedFileName = "";

System.String strUploadedFileExtension = "";

System.String strNewEmployeePhotoName = "";

System.String strEmployeePicturesPath = "";

try

{

System.String strCoordinatorID = lblCoordinatorID.Text.Trim();

if (strCoordinatorID != "")

{

EmployeeInfo coordinator = EmployeeInfo.GetEntity(strCoordinatorID);

if (upldPicture.UploadedFiles.Count>0)

{

strEmployeePicturesPath = getMappedFolderPathTo("EmployeePictures");

strUploadedFileName = upldPicture.UploadedFiles[0].FileName; //file is located in targetfolder at this point

strUploadedFileExtension = upldPicture.UploadedFiles[0].GetExtension();

strNewEmployeePhotoName = "COORDINATOR_" + strCoordinatorID + strUploadedFileExtension;

//rename the file so that it can't be clobbered by someone else uploading another file with same name

if (File.Exists(@strEmployeePicturesPath + strNewEmployeePhotoName) == true)

{

File.Delete(@strEmployeePicturesPath + strNewEmployeePhotoName); //delete any leftover picture

}

File.Move(@strEmployeePicturesPath + strUploadedFileName, @strEmployeePicturesPath + strNewEmployeePhotoName); //do a move incase the source is still open

File.Delete(@strEmployeePicturesPath + strUploadedFileName); //delete the original file that was uploaded

}

if (coordinator != null)

{ //update existing coordinator

if (strNewEmployeePhotoName!="")

{

coordinator.employeePhotoFileName = strNewEmployeePhotoName;

}

EmployeeInfo.Update(coordinator);

}

else

{

//its a new coordinator so add it

}

result = LoadCoordinator(ref coordinator, userpage.editor); //refresh the page

}//strCoordinatorID != ""

}

catch (Exception ex)

{

System.Object oe = (Object)ex;

result = "btnSave_Click: " + et.rptError(ref oe);

}//try

lblMsg.Text = result;

}//EOF btnSave_Click

AsyncUpload

answered on 22 Aug 2011

5 answers

163 views

rad window is still in memory while I close it using title bars close button.

Hi,
In my aspx page , I have more than 2 Rad windows.

1. we have a radWindow that opens as a popup window.
2. This popup radWindow has a close button in title bar.
3. Even after the user closes this window using titlebars close button & opens another popup radwindow from altogether different link, the popup opens earlier(First) radwindow instead of opening second radwindow.

This is causing lot of problems.
Please advise how to fix this issue.

Window

answered on 22 Aug 2011

1 answer

164 views

[Solved] Scrollbar disappears in Firefox

I have code where I open a RadWindow upon click of a button, which loads the content correctly and accurately shows the scrollbars. If I close the window using the RadWindow's "X" in the upper right corner and then click the button again to re-open the window, the content loads, but the scrollbars no longer appear even though the content is long enough to warrant the scrollbars. NOTE: this ONLY happens in Firefox. IE displays the correct behavior, showing the scrollbars as necessary.

I've loaded an example of this here: xxxxxxxxxxxxxxx. Load this in Firefox and press the button that says "See RadWindow ScrollBar Problem". The first time you press it, the scrollbars appear. Close the window and then press the button again. The scrollbars disappear.

Any help would be greatly appreciated.

Thank you,

Rachael

Window

answered on 22 Aug 2011

1 answer

82 views

$find(...) results in a null object

I had some code that was working until the latest release of 2011.2.712.40. From RadGrid's OnMasterTableViewCreated:

Looked like this:

function DoStuff(sender, args) {

var tabStrip = $find("<%= MainTabStrip.ClientID %>");

var pageViewID = tabStrip.get_multiPage().get_selectedPageView()._id;

...

}

BUT tabStrip.get_multiPage() was null!! If I did NOT call this code, it was NOT null a second later, but if I DID call it, it would be stuck as null. Seems like the JS objects weren't loading as [I] expected. Perhaps the order of events changed somwhere?

This is my fix, using setTimeout:

function DoStuff(sender, args) {

setTimeout(function() {

var tabStrip = $find("<%= MainTabStrip.ClientID %>");

var pageViewID = tabStrip.get_multiPage().get_selectedPageView()._id;

}, 0);

...

}

General Discussions