Kendo UI Slider not draggable in Kendo UI Mobile View set with jQuery

4 posts, 1 answers
  1. hansdenbraber
    hansdenbraber avatar
    12 posts
    Member since:
    Apr 2007

    Posted 21 Mar 2014 Link to this post

    Kendo UI version: 2013.3.1324
    OS's:
    - Windows 8.1 Pro
    - Windows Server 2008 R2 Datacenter SP1
    - Android 4.42 (Nexus 7 Build)
    Browser versions:
    - Internet Explorer 11.0.9600.16518 in emulation mode with user agent string Apple Safari (iPad)
    - Google Chrome 33.0.1750.154m in emulation mode with devices "Apple iPad 3 / 4" and "Samsung Galaxy Tab 7.7, 8.9, 10.1"
    - Google Chrome 33.0.1750.166 on Android 4.42 (Nexus 7 Build)
    jQuery version: 2.1.0

    On success of a jQuery post, we are setting the HTML contents of a Kendo UI Mobile View DIV with the content string below:
    <form action="/Legend/Edit/89C29D66-7414-425F-89CD-3A580DFA8695" class="form-horizontal" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#AjaxReplace" id="form0" method="post" role="form">
    <input data-val="true" data-val-number="The field Maximaal must be a number." data-val-required="The Maximaal field is required." id="ZoomMax" max="20" min="0" name="ZoomMax" type="range" value="20" />
    <script>
    jQuery(function(){jQuery("#ZoomMax").kendoSlider({"tickPlacement":"none","showButtons":true,"largeStep":5,"min":0,"max":20});});
    </script>
    <button class="btn btn-primary" type="submit">Submit</button>
    </form>

    As you can see, the ZoomMax value is 20, but the slider handle is positioned left and not draggable in the Mobile View. This is the case in IE and Chrome mobile emulation, as well on real mobile devices like the Asus/ Google Nexus 7. There are no errors in the browser console. See also the attached screenshot.

    When setting an ASP.NET MVC view DIV with the same contents, the slider works normally.

    Also, when setting Kendo Mobile View directly with the same contents, the slider works normally:
    @(Html.Kendo().MobileView()
    .Content(@<text>
    <div id="legenditem-edit-container">
    <form action="/Legend/Edit/89C29D66-7414-425F-89CD-3A580DFA8695" class="form-horizontal" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#AjaxReplace" id="form0" method="post" role="form">
    <input data-val="true" data-val-number="The field Maximaal must be a number." data-val-required="The Maximaal field is required." id="ZoomMax" max="20" min="0" name="ZoomMax" type="range" value="20" />
    <script>
    jQuery(function(){jQuery("#ZoomMax").kendoSlider({"tickPlacement":"none","showButtons":true,"largeStep":5,"min":0,"max":20});});
    </script>
    <button class="btn btn-primary" type="submit">Submit</button>
    </form>
    </div>
    </text>)
    .Layout("MobileLayoutLegend")
    .Name("LegendItemEdit")
    .Title("Wijzig legenda-item")
    )

    How can we make a slider show the correct value and be draggable in a Mobile View which content is set using jQuery?
  2. Answer
    Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 25 Mar 2014 Link to this post

    Hello hensdenbraber,

    Could you please give me a sample project that reproduce the problem thus I will be able to observe the problem and advice you further.

    Regards,
    Hristo Germanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. hansdenbraber
    hansdenbraber avatar
    12 posts
    Member since:
    Apr 2007

    Posted 26 Mar 2014 in reply to Hristo Germanov Link to this post

    Hello Hristo,

    The sample project you requested is too large to attach with a forum post, so I created ticket 802757 for this, with the sample project.

    Kind regards,

    Hans den Braber
  5. hansdenbraber
    hansdenbraber avatar
    12 posts
    Member since:
    Apr 2007

    Posted 27 Mar 2014 in reply to Hristo Germanov Link to this post

    The problem was that on success of a jQuery post, I first set the Mobile View HTML including the Slider initialization, and then navigated to the View. But on Slider initialization, the View was still invisible, so the Slider couldn't initialize its dimensions.

    If you first navigate to the View and then set its HTML, the Slider renders correctly. For example:
    success: function (response) {
         kendoMobileApp.navigate("#MobileViewName");
         $("#MobileViewWrapper").html(response);
    }

    Thanks Hristo and Kamen!
Back to Top
Kendo UI is VS 2017 Ready