position calendar popup to the right

6 posts, 1 answers
  1. Michael
    Michael avatar
    8 posts
    Member since:
    Dec 2013

    Posted 01 Nov 2014 Link to this post

    Can the popup calendar be moved to the right on a datepicker when the input field is 100% wide?

    The datepicker is created as this:

    @(Html.Kendo().DatePickerFor(m => m).Format("dd-MM-yyyy").ParseFormats(new string[] { "dd-MM-yyyy", "MM/dd/yyyy" }).Culture("da-DK").HtmlAttributes(new { @class = "form-control datepicker", @style="width:100%" } ))

  2. Michael
    Michael avatar
    8 posts
    Member since:
    Dec 2013

    Posted 02 Nov 2014 in reply to Michael Link to this post

    Got it working as to this answer: http://www.telerik.com/forums/popup-align-to-the-right-side-of-input

    only problem is that I get "Uncaught TypeError: Cannot read property 'dateView' of undefined" when i use the className.

    Its works if using the ID
  3. Kendo UI is VS 2017 Ready
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 05 Nov 2014 Link to this post

    Hello Michael,

    If the correct input element is found using a jQuery class selector, then there should be no difference. I suppose that you are using a custom CSS class, which will be copied to the wrapper by default. If you use more specific selector, for instance "input.custom-class" then the approach from the mentioned forum should work flawlessly.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Michael
    Michael avatar
    8 posts
    Member since:
    Dec 2013

    Posted 05 Nov 2014 in reply to Georgi Krustev Link to this post

    if I use the class I get
    uncaught TypeError: Cannot read property 'dateView' of undefined 

    In another view i have these to datetime pickers:

    <input data-val="true" data-val-date="The field Starter must be a date." data-val-required="Feltet Starter skal udfyldes." id="Start" name="Start" type="text" value="12-12-2014 17:30" data-role="datetimepicker" class="k-input" role="combobox" aria-expanded="false" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-activedescendant="45288f8d-147a-448d-8748-100b06667e38_cell_selected">


    <input data-val="true" data-val-date="The field Slutter must be a date." data-val-required="Feltet Slutter skal udfyldes." id="End" name="End" type="text" value="12-12-2014 23:30" data-role="datetimepicker" class="k-input" role="combobox" aria-expanded="false" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-activedescendant="End_option_selected">


    and this to position the calendar:

    $("input[data-role='datetimepicker']").kendoDateTimePicker()<br>        {<br>            // Reposition DatePicker calendar popup so it opens at button position!<br>            var pickerDateViewPopup = $("input[data-role='datetimepicker']").data("kendoDateTimePicker").dateView.popup;<br>            pickerDateViewPopup.options.origin = "bottom right";<br>            pickerDateViewPopup.options.position = "top right";<br>        };

    I get: Uncaught TypeError: Cannot read property 'dateView' of null 

    If i copy the javascript into the console of Chrome i moves the first calendar ?




  6. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 06 Nov 2014 Link to this post

    Hello Michael,

    This "$("input[data-role='datetimepicker']")" will return an array of inputs, hence the data() will not be the correct one. You will need to loop the result and set the popup position to every widget separately. Here is a Dojo demo that demonstrates this.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Michael
    Michael avatar
    8 posts
    Member since:
    Dec 2013

    Posted 06 Nov 2014 in reply to Georgi Krustev Link to this post

    it works beautifully! thanks a million:-)
Back to Top
Kendo UI is VS 2017 Ready