Datepicker not appearing after adding rows to editable gridview

Question

I have an editable Gridview with columns as below:

Answer 1

$(function () {

        $('.DateTimePicker').datepick({ dateFormat: 'dd MM yyyy' });
    });

It means it will hit once time. Try to use forEach function Like this:

$(function () {
        $('.DateTimePicker').each(function () {
            $(this).datepick({ dateFormat: 'dd MM yyyy' });
         });
        //$('.DateTimePicker').datepick({ dateFormat: 'dd MM yyyy' });
    });

Answer 2

The only case that this happens is when you use UpdatePanel.

Now when you use UpdatePanel, on each UpdatePanel the Dom is change and the javascript need re-initializations. Now in your case you add new lines, and you make ajax update, so you need to re-initialize the date picker.

This can be done from the functions that come with UpdatePanel as:

<script type="text/javascript"> 
   // when dom is ready we initialize the UpdatePanel requests
   $(document).ready(function () {
       var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);

       // Place here the first init of the DatePicker           
       $('.DateTimePicker').datepick({ dateFormat: 'dd MM yyyy' });
    });        

    function InitializeRequest(sender, args) {
       // make unbind before update the dom, to avoid memory leaks.
       $('.DateTimePicker').unbind();
    }

    function EndRequest(sender, args) {
       // after update occur on UpdatePanel re-init the DatePicker
       $('.DateTimePicker').datepick({ dateFormat: 'dd MM yyyy' });
    }
</script>

Similar: Asp.Net UpdatePanel in Gridview Jquery DatePicker
Datepicker for dynamically created controls