Is it possible to set the alignment of kendo datepicker's dropdown calendar in kendo grid with respect to the textbox

Question

When the datatype is Date, the kendo grid uses a kendo datepicker with dropdown calendar for the column.

The datepicker's dropdown calendar usually aligns itself flush with the left edge of the input box. If there isn't room for that, it is moved to the left, but not quite enough. This presents a problem when the rightmost column in the grid is a Date, and the grid is occupying 100% of the width available on the screen: the Saturday column in the dropdown calendar gets "cut off". See pic attached.

Is it possible to tell the calendar dropdown (for a particular column) to align itself flush with the right edge of the text input?

Answer 1

I know that bug. Your datepicker animation container is hidden under right scrollbar. If you set body overflow to hidden, you will not have a scrollbars and calendar will fit and touch right border of screen, like in this example: http://dojo.telerik.com/UCOhA

However if you can't turn off the body scrollbars you need to set calendar position manually dirty way like this:

$("#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
   }
  }
});

Running example: http://dojo.telerik.com/Imiqa/2