是否可以相对于文本框设置kendo datepicker在kendo网格中的下拉日历的对齐方式

时间:2014-11-07 17:40:45

标签: kendo-ui kendo-grid kendo-datepicker

当数据类型为Date时,kendo网格使用带有下拉日历的kendo datepicker。

datepicker的下拉日历通常与输入框的 left 边缘齐平。如果没有空间,它会向左移动,但还不够。当网格中最右边的列是日期,并且网格占据屏幕上可用宽度的100%时,这会出现问题:下拉日历中的星期六列被“切断”。见附图。

是否可以告诉日历下拉列表(对于特定列)是否与文本输入的边缘齐平?

enter image description here

1 个答案:

答案 0 :(得分:1)

我知道那个bug。您的日期选择器动画容器隐藏在右侧滚动条下方。如果您将body overflow设置为hidden,则不会有滚动条,日历将适合并触摸屏幕的右边框,如下例所示:http://dojo.telerik.com/UCOhA

但是,如果您无法关闭正文滚动条,则需要手动设置日历位置,如下所示:

$("#piker").kendoDatePicker({
    open: function(e) {
      //setTimeout to let kendo make k-animation-container element at first open
      setTimeout(function(){
        var animationContainer = $("#" + e.sender.element.attr("id") + "_dateview").parent();
        var left = e.sender.element.offset().left + e.sender.element.closest('.k-datepicker').width() - animationContainer.width();
        animationContainer.css('left', left);
      });
    },
  //turnoff the animation to avoid strange visual effects
  animation: {
   open: {
     duration: 0
   }
  }
});

正在运行示例:http://dojo.telerik.com/Imiqa/2