Data-stretch True / false in kendo UI for map and chart in the same view

Question

We use the kendo user interface for the iOS app.

I have a problem in data-stretch .

I have one data-role="view" with data-stretch="true" .

In this view, I have a DIV tag,

1st Div with id="googleMap" displaying a Google map

2nd Div with id="dashboard" , which displays 2 charts and 2 tabular data formats.

If I use data-stretch="true" , then the Dashboard DIV will not be able to display the default scroll, because the height of the data is greater than the Apple tablet.

If I use data-stretch="false" , then the problem occurs in googleMap DIV and it cannot display Google map.

My code is:

 <div id="divmap" data-role="view" data-title="Expenditures" data-layout="Operationlayout" data-before-show="cleanview" data-show="OperationMenuList" data-stretch="false" data-init="ChartLoading"> <div id="googleMap"> </div> <div id="dashboard"> <div id="Fleet"> <table width="100%" cellpadding="0" cellspacing="0">....</table> </div> </div> </div> 

How can I solve my data-stretch problem?

I used, as shown below, to set the value of the data stretch form of a java script,

 var view = $("#divmap").data("kendoMobileView"); view.stretch = false; 

But it does not work.

How can I set data-stretch true/false dynamically from javascript?

Please help me.

Thanks in advance.

Answer 1

The stretch configuration parameter of the mobile view cannot be set at runtime (after the presentation is initialized), since the touch scroller widget is initialized depending on its value. You can consider creating a touch scroller in the toolbar of the panel, while the data stretch view option is set to true. Something like that:

 <div id="dashboard" data-role="scroller" height="100%"> <div id="Fleet"> <table width="100%" cellpadding="0" cellspacing="0">....</table> </div> </div> 

Answer 2

You can set attributes in tags using jQuery ...

JQuery

 $("#divmap").attr("data-stretch","true"); 

Keep in mind that "data-stretch" is a single DIV attribute, not a data source.

Answer 3

I just used the following attribute in my “view”, which contains a div for the map and another div for something else.

 data-use-native-scrolling="true" 

This solved my problem.