KendoDatePicker z-index

4 posts, 0 answers
  1. Bill
    Bill avatar
    9 posts
    Member since:
    Jun 2013

    Posted 25 Nov 2014 Link to this post

    Hi,

    My colleague has passed this issue to me. What can I advise him? He has also posted to Stack Overflow: http://stackoverflow.com/questions/27127078/kendo-datepicker-z-index


    I have a dynamically generated list of inputs inside a kendo accordion panel.The inputs are generated like this:

    rowContent += "<td><input " + checked + " class='" + field.FieldTypeInput + "' type='" + field.FieldTypeInput + "' id='FldList_" + rowLength + "__UpdatedValue'  value='" + currentValue + "' name='FldList[" + rowLength + "].UpdatedValue' ></td>";

    Some of these inputs are dates which are turned into Kendo date pickers :

    $('.datepicker').kendoDatePicker();

    The problem I am facing is the date popup is appearing beneath the panel (Or anything outside of the li it is in.I have tried this:

    $('.datepicker').kendoDatePicker({
        open: function () {        setTimeout(function () {
                 $('.ui-datepicker').css('z-index', 8888);
             }, 1);
         }
    });


    If I break the script by calling $('.datepicker').bob it breaks the script and therefore works (But obviously breaks the rest of the javascript functionality too.I have also tried this:

    $("input[type=date]").kendoDatePicker({
        open:function(e)
            {               
                window.setTimeout(function(){ $(".k-calendar-container").parent(".k-animation-container").css("zIndex", "11000"); }, 1);
            }
      });


    I have also tried changing the style:position: relative; z-index: 100000; And now I am completely out of ideas.Is anyone able to help me?
    Many thanks
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 27 Nov 2014 Link to this post

    Hello Bill,

    I am trying to reproduce the same issue, but to no avail. Can you please check the following Dojo sample and let me know what I missed(you can edit it as well)?

    http://dojo.telerik.com/IdEbi

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Qds
    Qds avatar
    1 posts
    Member since:
    Dec 2016

    Posted 05 Jul Link to this post

    Hi , I have the same problem.. its already a solution for this issue?..

    I try changing the zIndex of the kendoWindow .. i try almost every single code, but the "k-animation-container" are cutted by the  popUp.. 

    Please Help..

  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1945 posts

    Posted 07 Jul Link to this post

    Hello,

    We are not able to replicate such problem. Could it be possible to provide a sample dojo and some replication steps? 

    Regards,
    Boyan Dimitrov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top