IsDirty - Ajax Dirty Panel

[Jon]

Hi..
Does anyone have code that will implement a 'DirtyPanel' and prevent users from navigating away from a page and not saving thier changes?
I have seen examples using the AjaxToolKit and ASP.Net... but it doesn't work with the Telerik controls.
Any ideas how I can create a Telerik IsDirty Panel????

thanks in advance

[Nikolay Rusev]

Hello Jon The Nerd,

For your convenience I've prepared sample application which imitates "DirtyPanel" behavior.
You can find sample application attached to this post. Please review the code.

I hope this is helpful.

Kind regards,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jon]

Thanks!!!!!!!!!!!!!!!!   You guys are great....

I changed it to use the RadTextBox....  How can I include the RadCombo and RadGrids on my page?

RadAjaxPanel1.Controls.OfType<

RadTextBox>().Select

 

[Jon]

Hi..
One thing...
I have RadCombo on the page too...

As soon as I select a radcombo and change the value and try to navigate off the the page - It allows me... !
If I just just change radtextboxes and try and nagivate off I receilve the message..

What's the difference..???.. thanks again

[Nikolay Rusev]

Hello Jon The Nerd,

Attached to this post you will find example how to handle RadTextBox and RadComboBox in "DirtyPanel" implementation.

I hope this is helpful.

Kind regards,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jon]

Hi.. Something is not working right....  I have 16 controls but when it runs it steps into 8 and jumps to the new page... 
It never checks the 

case "RadComboBox":

 

Any ideas... I can't find what wrong with the logic... thanks again

 

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">

 

 

<script type="text/javascript">

 

window.onbeforeunload =

function(e) {

 

 

if (IsDirty() == true) {

 

 

var ev = e || window.event;

 

ev.returnValue =

"Are you sure?";

 

}

}

 

function IsDirty() {

 

 

if (controls == null)

 

 

return false;

 

 

for (var i = 0, j = controls.length; i < j; i++) {

 

 

var control;

 

 

switch (controls[i].Type) {

 

 

case "TextBox":

 

control = $get(controls[i].ID);

 

if (control.value != controls[i].Value)

 

 

return true;

 

 

break;

 

 

case "RadTextBox":

 

control = $find(controls[i].ID);

 

if (control.GetValue() != controls[i].Value)

 

 

return true;

 

 

break;

 

 

case "RadComboBox":

 

control = $find(controls[i].ID);

 

if (control.get_selectedIndex() != controls[i].Value)

 

 

return true;

 

 

break;

 

}

}

 

return false;

 

}

 

</script>

 

 

</telerik:RadScriptBlock>

 

[Nikolay Rusev]

Hi Jon The Nerd,

It seems to be working properly on my end.
Please check the code once again and ensure that you are using latest version of RadControls for ASP.NET AJAX.

Kind regards,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jon]

Hi..
I have 16 controls on my page... It loops through 8 and then goes to the next page... It only checks the first 8.  I can't figure out why it loops through 8 controls and then navigates to the next page  ?????????????????????    thanks for your help

for

 

(var i = 0, j = controls.length; i < j; i++) {

 

 

var control;

 

 

switch (controls[i].Type) {

 

 

case "RadComboBox":

 

control = $find(controls[i].ID);

 

if (control.get_selectedIndex() != controls[i].Value)

 

 

return true;

 

 

break;

 

 

case "TextBox":

 

control = $get(controls[i].ID);

 

if (control.value != controls[i].Value)

 

 

return true;

 

 

break;

 

 

case "RadTextBox":

 

control = $find(controls[i].ID);

 

if (control.GetValue() != controls[i].Value)

 

 

return true;

 

 

break;

 

 

}

}

[Jon]

Hi..
Found the issue.
If you have hidden controls on the form - they are not found and the 'loop'  breaks - only checking a few controls before the
page 'closes'.  Also how can I include grids in the check?
thanks again!!!!!!

[Jon]

Hi again
Also how can I include grids in the check? 
thanks again!!!!!!

[Nikolay Rusev]

Hi Jon The Nerd,

Please find the attached project.
It demonstrates how to add support for hierarchy index of RadGrid selected item.
It is implemented similar to the other controls.

Greetings,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jon]

HI..
I'm getting an error  on

control[

"Value"] = ((GridDataItem)t.SelectedItems[0]).ItemIndexHierarchical;

Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index

Any ideas ? 

thanks again!

 

[Jon]

Hi.. again..
What if I just want to check if the data bound to the grid has been changed.
I don't use the grid by selecting rows or items.. just by changing values.
Thanks again!!!!!!!!!!!!!!!!!!

[Hilton]

I know this post is old but I am trying to do something similar and downloaded the example DirtyPanel.zip. It works great in IE but not in Safari or Firefox. It seems that in the window.onbeforeunload function, "returnvalue" only works in IE, other browsers use "return" but that isn't the major problem here. What I am having a problem is in FireFox and Safari, any controls inside of the update panel will not post back to the server after the user clicks the cancel button to stay on the page.Any ideas?

For example, if you have a asp:button control inside of a telerik:RadAjaxPanel or a asp:UpdatePanel for that matter, the button will not postback to the server. Try the example inside of the DirtyPanel.zip example and add a button server control and place something inside of the server side event and test in Safari or Firefox and nothing will happen. Thanks in advance for any help or guidance that you may be able to supply.

[Hilton]

I know this post is old but I am trying to do something similar and downloaded the example DirtyPanel.zip. It works great in IE but not in Safari or Firefox. It seems that in the window.onbeforeunload function, "returnvalue" only works in IE, other browsers use "return" but that isn't the major problem here. What I am having a problem is in FireFox and Safari, any controls inside of the update panel will not post back to the server after the user clicks the cancel button to stay on the page.Any ideas?

For example, if you have a asp:button control inside of a telerik:RadAjaxPanel or a asp:UpdatePanel for that matter, the button will not postback to the server. Try the example inside of the DirtyPanel.zip example and add a button server control and place something inside of the server side event and test in Safari or Firefox and nothing will happen. Thanks in advance for any help or guidance that you may be able to supply.

[Antonio Stoilkov]

Hello,

I have tried to replicate the described issue but to no avail. I have defined a ASP Button control inside the RadAjaxPanel. You could take a look at the attached project in order to observe if there are any differences at your end. Additionally, I have created a video showing the behavior on my side in Firefox.

• http://screencast.com/t/VcYmEf3XQf0a

All the best,
Antonio Stoilkov
the Telerik team

[Hilton]

Thanks Antonio for the reply. Hmmm, interesting, the only thing I see different in your implementation and mine is that I use master pages. I wonder if it is something else in my project causing it. I have a few 3rd party JQuery libraries that I am using in my master page. Maybe I need to take them out and see if that solves the problem. Thanks for confirming that it works in FireFox. :-)

[Hilton]

I have another issue with using the example code for the DirtyPanel. In the SerializeControlProperties() method, the JavaScriptSerializer() doesn't seem to work well with a RadEditor when it contains lengthy html. The JavaScriptSerializer modifies the value in control["Value"] so even if you don't change the RadEditor's contents it will prompt you to save changes. Is there any kind of "work around" for this?

public static void SerializeControlProperties(Page MyPage, RadAjaxPanel RadAjaxPanel1)

        {

            Dictionary<string, string> control;

            List<Dictionary<string, string>> controlsCollection = new List<Dictionary<string, string>>(); ;

 

// other controls to check .....

 

            RadAjaxPanel1.Controls.OfType<RadEditor>().Select

            (

                  t =>

                  {

                      control = new Dictionary<string, string>();

                      control["ID"] = t.ClientID;

                      control["Type"] = "RadEditor";

                      control["Value"] = t.Content;

                      controlsCollection.Add(control);

                      return controlsCollection;

                  }

              ).Count();

 

            StringBuilder json = new StringBuilder();

            JavaScriptSerializer jss = new JavaScriptSerializer();

            jss.Serialize(controlsCollection, json);

            //json.Append(controlsCollection.ToArray());

            json.Insert(0, "var controls = ");

            json.Append(";");

 

            ScriptManager.RegisterClientScriptBlock(MyPage.Page, typeof(Page), "MyKey", json.ToString(), true);

        }

and in the javascript IsDirty() function

case "RadEditor":
                control = $find(controls[i].ID);
                var newVal = control.get_html(true);
                var oldVal = controls[i].Value;
                // even if you make no changes it will not match
                if (newVal != oldVal)
                    return true;
                break;

[Antonio Stoilkov]

Hello,

The described issue is caused by the maxJsonLenght property which limits the number of characters which could be transferred between the server and the client. You could resolve your issue by configuring the property as shown in the article below.

• http://geekswithblogs.net/frankw/archive/2008/08/05/how-to-configure-maxjsonlength-in-asp.net-ajax-applications.aspx

Greetings,
Antonio Stoilkov
the Telerik team

[Anna]

Was the masterpage problem ever resolved? I am having the same issue.  The javascript finds the controls and the values just fine.  The window.onbeforeunload doesn't seem to fire in Firefox or IE.

[Maria Ilieva]

Hi Anna,

As the current thread is rather old I would suggest you to open a separate thread for your case and provide as much information as possible for the current state of the issue you are facing and for how it can be replicated. Thus we will be able to investigate it locally and advise you further.

Regards,
Maria Ilieva
Telerik