Dirty Check with RadComboBox and DatePicker

[Divyang]

Hi,

Requirement:
     if any value of control change a flaf "dirty" is set to true else it is false. When user leave that page and if dirty flag is true. He is asked to save records or close window without saving.

We are using below script to find dirty flag for all the controls.

<script>
 
 
    var isDirty = false;
    var resetControls = ""; // should be in , separated with # in ids
	var msg = 'You haven\'t saved your changes.\n Do you want to save changes ?';
 
 
 
 
	$(document).ready(function () {
	    alert($(".section :hidden").length);
	    
	    $(":submit,:reset ").click(function () {
	        isDirty = false;
	        alert("Dirty flag reset");
	    });
	    $(':input').change(function () {
	        if (!isDirty) {
	            alert("Dirty flag set")
	            isDirty = true;
	        }
	    });
 
	    window.onbeforeunload = function () {
	        if (isDirty) {
	            return msg;
	        }
	    };
 
	});
 
 
</script>

Above script is working fine with all input controls except hidden fields. Specifically RadComboBox and RadDatePicker are using hidden fields to post data.

Could you please provide solution so that we can check dirty flag with rad controls ?

[Kalina]

Hello Divyang,

You can try attaching the "change" event handler at RadComboBox input in this manner:

$(document).ready(function() {
    var isDirty = false;
    $(".rcbInput").change(function() {
        if (!isDirty) {
            alert("Dirty flag set")
            isDirty = true;
        }
    });
})

However I am not sure that this approach is applicable at the RadDataPicker control – but you can easily set the isDirty variable by handling the OnDateSelected event:

<telerik:RadDatePicker ID="RadDatePicker" runat="server"
    Width="140px" MinDate="01/01/1000"
    MaxDate="01/01/3000">
    <Calendar>
        <SpecialDays>
            <telerik:RadCalendarDay Repeatable="Today" />
        </SpecialDays>
    </Calendar>
    <ClientEvents OnDateSelected="DateSelected" />
</telerik:RadDatePicker>

function DateSelected(sender, eventArgs) {
    // your code here...
    alert(eventArgs.get_newDate());

}

All the best,
Kalina
the Telerik team