CODEWITHSUNDEEP
javascripthtmlkendo-ui
Viral Sarvaiya
Viral Sarvaiya

Reputation: 781

data-stretch True/false in kendo UI for Map and Chart in same View

We are Using kendo UI for IOS application.

I have a problem in data-stretch.

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

In that view I have 2 DIV tag,

1st Div with id="googleMap" which display Google Map

2nd Div with id="dashboard" which displays 2 chart and 2 tabular format data.

If I use data-stretch="true" then Dashboard DIV cannot show the default scroll because height of data is bigger then Apple tablet.

If I use data-stretch="false" then problem creates in googleMap DIV and it could not 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 problem of data-stretch?

I have used like below to set value of data-stretch form java script,

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

But it is not working.

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

Please help me.

Thanks in advance.

Upvotes: 4

Views: 1894

Answers (3)

Abdul Hannan
Abdul Hannan

Reputation: 82

I just used the following attribute in my 'view' which contains a div for map and one other div for something else.

data-use-native-scrolling="true"

It Solved my problem

Upvotes: 1

Petyo Ivanov
Petyo Ivanov

Reputation: 1137

The mobile view stretch configuration option cannot be set runtime (after the view is initialized), as a touch scroller widget is initialized depending on its value. You may consider instantiating a touch scroller on the dashboard div, while keeping the data-stretch view option set to true. Something like this:

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

Upvotes: 4

Jasmine
Jasmine

Reputation: 4029

You can set attributes on tags with JQuery...

JQuery:

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

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

Upvotes: 1

Related Questions