Data scrolling in grid -- need VERY basic help

Discontinued products DHTMLX Touch
#1

Hi, I use the older version of DHX for standard web site design, with everything working fine with php data, the data connector, data processor, and grid. The data scrolls automatically within the grid, it does CRUD, etc.

Now I’m trying to learn TOUCH, and am using the latest 2.x version. Using a simple JSON data load (php), my grid brings up one page of data on Android and in Windows, but neither browser scrolls the data, and I’m sure it’s because I’m missing the most basic knowledge of how to do it. I’ve spent MANY hours searching the on-line documentation and forum posts, but can’t figure out the very basics. The php backend is a little more complex than it needs to be because I just modified the one I was using for the older non-Touch DHX. I use it this way because it’s a case of, “if it ain’t broke, don’t fix it.”

I’m somewhat confused about what parts of the std DHX also work with the Touch version. It appears that the data connectors and processors are the same. Is that true? There also appears to be more than one version of the grid that can be used with Touch. Or am I just reading it wrong?

I’m also confused about when the scroll property should be set “y” or true. I see examples with both. And what about AutoScroll? Does that apply to my needs?

In the MOST SIMPLE way, how do I implement data scrolling in my grid? I would greatly appreciate some specific code to get me going. I’ve had great success with the standard (non-Touch) version of DHX, and handle it fairly well, I think. But the Touch version has me feeling like a complete beginner (which I am to it).

Thanks very much, JS.

In my current test, I’m not using a dataprocessor. The front end:

====================================================== BACK END PHP: <?php class DB { public function connect($db='', $db_host='', $db_port='', $db_user='', $db_pass='', $db_name='') { $db = ($db)? $db : $_SESSION["db"]; $db_host = ($db_host)? $db_host : $_SESSION["db_host"]; $db_port = ($db_port)? $db_port : $_SESSION["db_port"]; $db_user = ($db_user)? $db_user : $_SESSION["db_user"]; $db_pass = ($db_pass)? $db_pass : $_SESSION["db_pass"]; $db_name = ($db_name)? $db_name : $_SESSION["db_name"]; @$link = mysql_connect($db_host.':'.$db_port, $db_user, $db_pass); if ($link) $db_select = mysql_select_db($db_name, $link); if (!$db_select) $link = false; return $link; } } require("../connectors/data_connector.php"); $res = DB::connect("MySQL", "abcdefg.db.xxxxxxxxx.hostedresource.com", "3306", "xxxxxxxxxxxx", "tdfsdfsdfsdfs", "sdfsdfds"); mysql_query("SET NAMES UTF8"); $grid= new JSONDataConnector($res); $grid->render_table("lang_dispname", "","Language, name_display"); ?>
#2

Hi,

Please check the sample with grid:
dhtmlxTouch_v12_120913/samples/06_grid/01_init.html
Vertical scroll is enabled by default.

try to make several modifications:

  1. html5 doctype:
  1. init views from dhx.ready:

dhx.ready(function(){ dhx.ui({ view:"grid", ... }); })

I’m somewhat confused about what parts of the std DHX also work with the Touch version.

The libraries are different. But touch chart, dataview and datastore are similar to desktop components.

It appears that the data connectors and processors are the same. Is that true?

All touch components use JSONDataConnector. Desktop components requires different connectors.

There also appears to be more than one version of the grid that can be used with Touch. Or am I just reading it wrong?

there is only one “grid” view in Touch.

I’m also confused about when the scroll property should be set “y” or true.

scroll: true enables “y” scroll as well as scroll:“y” There can be also “x” and “xy” scroll. Touch library doesn’t render scrollbar like on desktop. Scroll appears on drag.

If the problem is not solved, please attach the demo that reproduces the problem.

#3

Aha! Thanks very much. This cleared up my questions pretty well and I’ve got my app working with scrolling data, thanks to your help.

May I trouble you to address this question too:

My data set is so large as to make loading this way very slow. In the desktop version, I used the smart render technique to speed it up. Works great there.

I can’t figure out how to do something similar with the Touch version. I have applied the technique of adding a button to trigger a “load next x records” function, but the speed is the same. I get the impression that the problem is that the connector always loads all the JSON records, and that the html function somehow retriggers the complete reload to get the next x number of records.

Is there a way to limit the initial load from the data file? Should I restrict the number of records in the SQL statement in the connector? If so, how do I load the next set of records?

Sorry to not be able to figure this out. Part of my difficulty in doing so is that it’s sometimes hard to know what part of your documentation applies to Touch, and what part only to desktop. You helped with that in your answer, but it still is not clear. You might consider placing a message in the header to your (excellent) documentation stating which version the doc applies to, similar to the way you list components that apply.

Thanks, JS

#4

Please check the sample for list width dynamic loading:

dhtmlxTouch_v12_120913/samples/04_list/14_dyn_loading.html

The same approach can be used for grid. In connector code you need to call dynamic_loading method:

$data = new JSONDataConnector($db);
$data ->dynamic_loading(100);

#5

Thank you very much for your help. I am still quite unclear on the basics and have not managed to make it work.

Notice that I’ve used the render table method in my php script. Substituting dynamic_loading in the code does not work. I get the impression that it’s two completely different ways of working.

Also, your php example generates an array of json data programatically, not from a data table, so I can’t tell if I need to create a similar loop to read my table, one record at a time of if the data connector handles that aspect.

I hope I am making myself clear because it’s a little hard to explain when I don’t have a grasp of the very basics, despite having studied your examples for many hours. Also (as I said), I’ve been quite successful with using the desktop (earlier version) for some web sites, so it’s especially frustrating to not make the Touch version work.

I have to say, that if I had not already been successful with the desktop suite, I would have given up long ago on the Touch version. As it is, my associates advise me just to go with jQuery Mobile, which also looks good, but I would like to make DHX work.

Thanks again, JS.

#6

Hello,

we have found an issue with connector and dynamic loading. Please try to use touchui.js or touchui_debug.js from the attached demo.
demo.zip (241 KB)

#7

Hello,

That fixed it! Works perfectly now. I thank you VERY much for your patient help. JS