ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: bsolteam on April 08, 2015, 12:14:49 pm

Title: Datetimepicker calendar is hiding inside the grid
Post by: bsolteam on April 08, 2015, 12:14:49 pm

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.

Title: Re: Datetimepicker calendar is hiding inside the grid
Post by: paramvir on April 08, 2015, 01:10:12 pm

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.

Title: Re: Datetimepicker calendar is hiding inside the grid
Post by: bsolteam on April 08, 2015, 06:41:08 pm

      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?

Title: Re: Datetimepicker calendar is hiding inside the grid
Post by: bsolteam on April 13, 2015, 11:22:14 am

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/ (http://jsfiddle.net/rtzxsa3e/11/)