bootstrap datetimepicker внутри jqgrid - управление не видно полностью

Question

Я использую bootstrap datetimepicker control внутри jqgrid. Элемент управления datetimepicker не отображается должным образом.

http://jsfiddle.net/cmpgtuwy/103/

Please help 

Answer 1

Вы демо использовали старый jqGrid 4.6, который не совместим с Bootstrap. Я предлагаю вам вместо этого использовать free jqGrid 4.13.6. Более того, bootstrap-datetimepicker имеет проблему, если поле редактирования находится внутри блока, которое не имеет стиля position: relative. Таким образом, я предлагаю, чтобы поместить сетку внутри внешнего DIV:

<div id="outer" style="position: relative"> 
    <table id='grid'></table> 
</div> 

Следующая проблема: ваши входные данные в формате data: "01/01/2015 03:30". Вы должны добавить srcformat: 'd/m/Y H:i', чтобы сообщить об этом formatter: "date".

Окончательно код может быть

var mydata = [ 
    { 
     data: "01/01/2015 03:30", 
     status: "OPEN" 
    }, 
    { 
     data: "02/02/2015 03:45", 
     status: "ENTERED" 
    }]; 

$("#grid").jqGrid({ 
    data: mydata, 
    colModel: [ 
     { name: 'act', template: "actions" }, 
     { 
      name: 'data', 
      editrules: { required: true }, 
      formatter: 'date', 
      formatoptions: { 
       srcformat: 'd/m/Y H:i', 
       newformat: 'd/m/Y H:i' 
      }, 
      editable: true, 
      editoptions: { 
       dataInit: function (el) { 
        $(el).datetimepicker({ 
         locale: 'en-GB', 
         //debug: true, 
         widgetPositioning: { 
          horizontal: 'auto', 
          vertical: 'auto' 
         }, 
         widgetParent: '#outer' 
        }); 
        // fix the position of the datetimepicker 
        $(el).bind("dp.show", function() { 
         var $datepicker = $("#outer .bootstrap-datetimepicker-widget"); 
         if ($datepicker.length > 0) { 
          $datepicker.css("top", 
           this.getBoundingClientRect().top + 
           window.pageYOffset + 
           $(this).outerHeight()); 
         } 
        }); 
       } 
      } 
     }, 
     { 
      name: 'status', 
      width: 180 
     } 
    ], 
    iconSet: "fontAwesome", 
    guiStyle: "bootstrap", 
    hoverrows: false, 
    pager: true 
}); 

Смотреть демо http://jsfiddle.net/OlegKi/duooa5oy/1/