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

[Ewoud]

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?

[Hristo Germanov]

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

 

 

[Ewoud]

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

[Ewoud]

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!