Question

I am using a WebForms GridView control. When a user clicks “Update” on a row, I want to check the values they entered against some other records.

From that, if I return true, I’d like to display a confirm dialog asking the user if they’d like to continue with their update.

A javascript confirm dialog probably won’t work because I don’t always want to show this dialog, only when the values entered meet a certain condition.

Any suggestions?

Answer 1

I would suggest using the RowDataBound event to check for those conditions and add the confirmation dialog where needed.

EDIT : Compare dates and show a confirmation if they’re different

See this jsFiddle for a demonstration.

<script type="text/javascript">        
   validateInput = function(inputDate, compareDate, confirmButtonID) {           
       var confirmButton = document.getElementById(confirmButtonID);       
       if (confirmButton) {               
           $(confirmButton).one("click", function() {
               var result = dates.compare(inputDate, compareDate);
               if (result != 0){ //change to suit your needs
                   return confirm("Are you sure you want to save these changes?");        
               }
               return true;
           });                                                                                 
       }
    }             
</script>

And here’s the code for the dates class used for the comparison (link):

<script type="text/javascript">
    var dates = {
        convert:function(d) {
            return (
                d.constructor === Date ? d :
                d.constructor === Array ? new Date(d[0],d[1],d[2]) :
                d.constructor === Number ? new Date(d) :
                d.constructor === String ? new Date(d) :
                typeof d === "object" ? new Date(d.year,d.month,d.date) :
                NaN
            );
        },
        compare:function(a,b) {
            return (
                isFinite(a=this.convert(a).valueOf()) &&
                isFinite(b=this.convert(b).valueOf()) ?
                (a>b)-(a<b) :
                NaN
            );
        },
        inRange:function(d,start,end) {
           return (
                isFinite(d=this.convert(d).valueOf()) &&
                isFinite(start=this.convert(start).valueOf()) &&
                isFinite(end=this.convert(end).valueOf()) ?
                start <= d && d <= end :
                NaN
            );
        }
    }
</script>

In the RowDataBound event of the GridView, assign the onchange function for each row:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    var inputCtrl = e.Row.FindControl("txtEnteredDate") as TextBox;
    if (inputCtrl != null)
    {
        var updateButtonCtrl = e.Row.FindControl("btnUpdate") as Button;
        if (updateButtonCtrl != null)
        {
            inputCtrl.Attributes["onchange"] = string.Format("return validateInput(this.value, '{0}', '{1}');", DataBinder.Eval("DateToCompare"), updateButtonCtrl.ClientID);
        }
    }
}    

jQuery Confirmation Dialog

If you need something more flexible than a regular JavaScript confirm dialog, you can change the above to use the jQuery UI Dialog as a confirmation instead.