This is a migrated thread and some comments may be shown as answers.

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

3 Answers 101 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Ewoud
Top achievements
Rank 1
Ewoud asked on 21 Mar 2014, 12:29 PM
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?

3 Answers, 1 is accepted

Sort by
0
Accepted
Hristo Germanov
Telerik team
answered on 25 Mar 2014, 11:46 AM
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!
 
0
Ewoud
Top achievements
Rank 1
answered on 26 Mar 2014, 07:39 AM
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
0
Ewoud
Top achievements
Rank 1
answered on 27 Mar 2014, 02:48 PM
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!
Tags
Slider
Asked by
Ewoud
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Ewoud
Top achievements
Rank 1
Share this question
or