DateTimePicker not working inside jqGrid. But it's working outside of it

Question

I have a field in jqGrid where I want to use a dataTimePicker. I am using this plugin, http://plugins.jquery.com/datetimepicker/.

I am able to create a dateTimePicker outside of the jqGrid as shown in the example in the site above. However, when I try to implement the datetimepicker inside of the jqGrid, it is not working. I am able to implement a datepicker inside of the jqGrid and it's working perfectly.

Here's the code

        <script type="text/javascript">
          $("#grid").jqGrid({ 
                url: 'listJSON',
                editurl:'editJSON',
                datatype: "json",
                colNames: ['Host', 'Value', 'Start Time', 'Stop Time', 'Requestor', 'Date Created', 'Last Updated','id'],
                colModel: [{
                    name: 'host', index: 'host', editable:true, searchoptions: { sopt: ['eq', 'ne', 'cn']}
                }, {
                    name: 'value', index: 'value' , editable:true
                }, {
                    name: 'startTime', index: 'startTime', editable:true
                }, {
                    name: 'stopTime', index: 'stopTime', editable:true,width:90, editoptions: {
                        size:20,
                        dataInit: function(el){
                            $(el).datetimepicker();
                            }}
                }, {
                    name: 'requestor', index: 'requestor', editable:true
                }, {
                    name: 'dateCreated', index: 'dateCreated'
                }, {
                    name: 'lastUpdated', index: 'lastUpdated'
                }, {
                    name: 'id', index: 'id', hidden:true
                }
                 ], 
                rowTotal: 2000,
                rowList : [10, 20,30,50],
                mtype: "GET",

                rownumWidth: 40,
                gridview: true,
                scroll:true,
                pager: '#pager',
                multiselect: true,
                viewrecords: true,
                sortname:"dateCreated",
                sortorder:"desc",
                caption: "Activity"




            });
            $("#grid").jqGrid('filterToolbar',{autosearch:true, searchOnEnter:false });
            jQuery("#grid").jqGrid('navGrid','#pager', { view: true,viewtext:'View', del: true,deltext:'Delete', add: true,addtext:'Add', edit: true, edittext:'Edit', search:false,refreshtext:'Refresh' },
                    {closeAfterEdit:true, editCaption: 'Edit NoAlert request', afterSubmit:afterSubmitEvent},
                    {closeAfterAdd:true,addCaption:'Create New NoAlert request', afterSubmit:afterSubmitEvent},
                    {closeAfterDelete:true,afterSubmit:afterSubmitEvent});

When I implement this, i am not getting an error. The page loads up, but when I try to click Add or Edit, the popup window refuses to show up. Please let me know where I am going wrong, and what can be done to rectify.

When I add timeOut, the popup shows up,but the field doesn't have DateTimePicker!

Appreciate your help, Thanks.

Answer 1

Finally figured out the solution. It seems that some plugins require the element to be in DOM to work. Since, dataInit is applied before the element is in DOM, this doesn't work. Therefore, we can use an onInitializeForm. Like the one below,

jQuery("#grid").jqGrid('navGrid','#pager', { view: true,viewtext:'View', del: true,deltext:'Delete', add: true,addtext:'Add', edit: true, edittext:'Edit', search:false,refreshtext:'Refresh' },
                    {closeAfterEdit:true, editCaption: 'Edit NoAlert request', afterSubmit:afterSubmitEvent,onInitializeForm : function(formid){
                        $("#stopTime",formid).datetimepicker();
                    }},
                    {closeAfterAdd:true,addCaption:'Create New NoAlert request', afterSubmit:afterSubmitEvent,onInitializeForm : function(formid){
                        $("#stopTime",formid).datetimepicker();
                    }},
                    {closeAfterDelete:true,afterSubmit:afterSubmitEvent});