Datetimepicker calendar is hiding inside the grid

[bsolteam]

I am using bootstrap datetimepicker. Here when I click picker Icon, the bootstrap calendar is open. But it is hiding inside the grid. If I give "overflow:visible", calendar is visible fine but datas are visible outside the grid. I have attached the image. In this image the calendar is hiding inside the grid.

      div.pq-cont
      {
       overflow:visible
       }

If I give this is pqgrid.min.css file, it is working. But grid datas are visible outside.

[paramvir]

you are facing this issue because it seems you have made use of column.render callback to attach bootstrap datetimepicker to the grid cell.

It would be more appropriate to use bootstrap datetimepicker as custom editor.

[bsolteam]

      Fromdate : "From Date",
      minWidth:200,
      width : '25%',      
      dataType : "String",
      align : "center",
      dataIndx : "from_date",
      halign : "center",
      editable : false,
      sortable : false,
                 render : function(ui) {
               var data = $("#hire_rate").pqGrid('option','dataModel.data');
               var rowIndx = ui.rowIndx;
               var rowData = ui.rowData;
               var value=data.length;                                       
               var  cellData = rowData["from_date"];                                    
               return '<div class="form-group" style="margin-left:50px;text-align:center;"><div class="input-group date" id="datetimepicker'+rowIndx+'"><input type="text" class="form-control" value="'+data[rowIndx].from_date+'" id="fromdate'+rowIndx+'" ><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div></div>' ;                                                                                                                              
            }
             

This is my "From Date" column. Here only I have written my datetimepicker code. In "Editor" function i can't able to write div tag. Thats why i am writing in render function. Is any other way to resolve this issue?

[bsolteam]

Please see the below fiddle, Here If I open in 5th or 6th row calendar, I can't able to select time. The calendar is hiding inside the grid. Please help me How can I resolve this issue?

http://jsfiddle.net/rtzxsa3e/11/