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
20 Answers, 1 is accepted
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.
![](/forums/images/avatarimages/a4710649-c95b-41a8-b90f-ff2b19b2827dhomer-brain.jpg)
I changed it to use the RadTextBox.... How can I include the RadCombo and RadGrids on my page?
RadAjaxPanel1.Controls.OfType<
RadTextBox>().Select
![](/forums/images/avatarimages/a4710649-c95b-41a8-b90f-ff2b19b2827dhomer-brain.jpg)
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
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.
![](/forums/images/avatarimages/a4710649-c95b-41a8-b90f-ff2b19b2827dhomer-brain.jpg)
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>
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.
![](/forums/images/avatarimages/a4710649-c95b-41a8-b90f-ff2b19b2827dhomer-brain.jpg)
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;
}
}
![](/forums/images/avatarimages/a4710649-c95b-41a8-b90f-ff2b19b2827dhomer-brain.jpg)
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!!!!!!
![](/forums/images/avatarimages/a4710649-c95b-41a8-b90f-ff2b19b2827dhomer-brain.jpg)
Also how can I include grids in the check?
thanks again!!!!!!
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.
![](/forums/images/avatarimages/a4710649-c95b-41a8-b90f-ff2b19b2827dhomer-brain.jpg)
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!
![](/forums/images/avatarimages/a4710649-c95b-41a8-b90f-ff2b19b2827dhomer-brain.jpg)
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!!!!!!!!!!!!!!!!!!
![](/forums/images/avatarimages/default.gif)
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.
![](/forums/images/avatarimages/default.gif)
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.
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.
All the best,
Antonio Stoilkov
the Telerik team
![](/forums/images/avatarimages/default.gif)
![](/forums/images/avatarimages/default.gif)
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;
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.
Greetings,
Antonio Stoilkov
the Telerik team
![](/forums/images/avatarimages/45b601a2-67d2-4e62-a712-7e63355b08a88535-129010453526-610223526-2525170-2645265-n.jpg)
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