Grid scroll vertical and horizontal in the same view(iPad)

Discontinued products DHTMLX Touch
#1

Currently i have my grid with multiple columns and rows. I am able to generate this columns and rows. But scroll property can be set for x or y(not both). So if i will set x, it will scroll horizontally but no vertical scrolling. One more issue is, if i set horizontal scrolling, headers are not scrolling along with the columns.

Below is my code:
dhx.ui({container: “grid_container”, rows: [{id: “my_grid”,view: “grid”,select: “multiselect”,scroll:“y”,datatype: “xml”,url: “Data.xml”}] });
$$(‘my_grid’).define(“fields”,[{id:‘DepartmentCode’,label:‘Department Code’, width:‘400’},{id:‘DepartmentDescription’,label:‘Department Description’, gravity:‘1’},{id:‘NetSales’,label:‘Net Sales’, gravity:‘1’},{id:‘SalesTarget’,label:‘Sales Target’, width:‘120’},{id:‘ActualToTargetSalesPercentage’,label:‘Actual To Target Sales %’, width:‘240’},{id:‘NetSalesLY’,label:‘Net Sales LY’, width:‘120’},{id:‘SalesTargetLY’,label:‘Sales Target LY’, width:‘150’},{id:‘ActualToTargetSalesLYPercentage’,label:‘Actual To Target Sales LY %’, width:‘270’},{id:‘YOYNetSalesGrowthPercentage’,label:‘YOY Net Sales Growth %’, width:‘220’},{id:‘YOYActuaTolargetSalePercentageVariance’,label:‘YOY Actual To Target Sale % Variance’, width:‘360’}]");
$$(‘my_grid’).refresh();

I was trying for all possible combinations of these properties, but no luck. Your help will be really appreciated.

#2

Technically you can set
scroll:“xy” ( or scroll:“yx” )
to enable bi-direction scroll.
The “x” scroll problem with headers is a known limitation - we plan to fix it the next versions.

#3

I’m pretty sure this is an outstanding issue (headers not scrolling along with the grid). Is there at least a workaround that you guys have come up with?

Thanks,
Michael

#4

Michael,

I have attached the fixed touch libraries - the position of header scroll is set after Grid body stops scrolling.
codebase.zip (188 KB)

#5

I still cannot get the headers to scroll with the grid data.

I downloaded the new touch libraries but the headers on my grid still do not scroll (x direction). My grid is set for scroll:“xy” and the data scrolls but the headers do not. Is there additional code needed?

#6

The header scroll is corrected after data scrolling is finished. However, it doesn’t scrolled with grid body. Please have a look at my previous answer: “the position of header scroll is set after Grid body stops scrolling”

We will try to solve the issue with header scrolling in the future versions.

#7

Alexandra,

Sorry I wasn’t specific enough. In my case the headers do not move, even after I am done scrolling the grid body stops scrolling. In other words, I scroll the body to the right, but when I stop scrolling the headers do not move.

#8

Please check attached sample. Locally the header is scrolled after grid body stops scrolling.
grid.zip (190 KB)

#9

Hi,
We are using this version of dhtmlxtouch and we think there is one little bug…
E.g. I have grid, that is scrollable in xy -> “scroll: ‘xy’”… When width of this grid is bigger then width of view (we are using/testing it on more devices) and height of grid is also bigger as height of view than it’s all behaving well… But if width of grid is less then width of view and then we perform y scroll -> it make’s a problem… And the problem is:

  1. touch and drag in y direction - up -> it scroll’s grid to a certain position
  2. when I’m close to be out of display touch range, then logically I touch the screen again and perform the same move (drag up)…
  3. and that’s the problem, because grid or list or everything what is scrollable jump’s again to the top and I can start from beginning…

this is my grid:

{ view: ‘grid’,
type: {},
fields: [
{ width: 80, label: app.trans(‘o_grid_info’), template: ‘#order_info_state#’, type: ‘custom’, align: ‘left’,
sort: { by: ‘#order_info_state#’, dir: ‘asc’, as: ‘string’}, id: ‘to_grid_order_info_state’, select: false
},
{ width: 200, label: app.trans(‘o_grid_order’), template: ‘#order_id#’, type: ‘custom’, align: ‘left’,
sort: { by: ‘#order_id#’, dir: ‘asc’, as: ‘string’}, id: ‘mo_grid_order’, select: false
},
{ width: 200, label: app.trans(‘o_grid_extOrder’), template: ‘#order_ext_id#’, type: ‘custom’, align: ‘left’,
sort: { by: ‘#order_ext_id#’, dir: ‘asc’, as: ‘string’}, id: ‘mo_grid_extOrder’, select: false
},
{ width: 400, label: app.trans(‘o_grid_customer’), template: ‘#order_cust#’, type: ‘custom’, align: ‘left’,
sort: { by: ‘#order_cust#’, dir: ‘asc’, as: ‘string’}, id: ‘mo_grid_customer’, select: false
}
], select: true, header: true, scroll: ‘xy’, id: ‘mo_grid’
},

#10

Hi,

we have not managed to reproduce the problem locally. Please attach the complete demo.

#11

Hi Alexandra,

there is my demo.zip…
I also made a movie clip… it has approximately 40MB so I placed it on my ftp: [url]http://jandb.sk/dhtmlxTouchScroll.avi[/url]

I’m using chrome… my version is 21.0.1180.75 m

It’s behaving this way also on real devices… So if grid width is bigger then layout width, then it’s OK (e.g. try layout witdh: 600)

Please have a look also at bottom button → there should be text label “back” (but it’s under the button)… if I remove “, type: ‘prev’” then it’s OK…
demo.zip (245 KB)

#12

Hi,

I have attached the fixed libs.

The issue was caused by incorrect “xy” scroll rendering.
libs.zip (168 KB)

#13

Thank you Alexandra… scrolling is now OK :slight_smile: