Node.js to Update Scheduler and Multiple Grids

[mister.magic]

I have a layout whereby I use Scheduler and multiple Grids to display different views of the same data. All the data is from the same table, and is mainly based on the events table schema used by scheduler.

Each grids shows a particular portion of the database table filtered by month. i.e:

grid1 shows 1-4-2015 to 30-4-2015
grid2 shows 1-5-2015 to 31-5-2015

The scheduler shows another portion of the data, and defaults to showing the current month + 15 days.

As shown below:

When I double click on an item in the grid, it is set to open a customized version of the scheduler lightbox, by use of:

function doOnRowDblClicked(rowId){ scheduler.showLightbox(rowId); }

The same effect is achieved by double clicking on the event in the schedule.

If I update data by moving an item in the schedule, or editing any of the data in the lightbox, to synchronize all the different views, I use:

dp_sched_1.attachEvent("onFullSync",function(){ scheduler.load("p_planner_data.php?win=scheduler&uid="+scheduler.uid(), "json"); grid_1.clearAndLoad("p_planner_data.php?win=plan&grid="+mnth1); grid_2.clearAndLoad("p_planner_data.php?win=plan&grid="+mnth2); }
I have a similar onFullSync function assigned to each of the grids also.

With multiple users accessing this data, and the fact that the data changes frequently on an regular basis. - I wanted to be able to utilize the live update Mode in conjunction with a node server.

I have setup a functioning dev node server correctly generating sync.js.

I can get the scheduler view to automatically update other instances of the scheduler if edits are made.

Also… If I remove the doOnRowDblClicked function linking the grid to the scheduler lightbox, I can get the grids to automatically update each other and other instances too.

But what I can’t do, is get the scheduler to sync with the grids through node.

What I would like to do, would be to bind the scheduler data to the grid data, using datastore.
I don’t know if this is possible, or compatible with the live update functions.

Is there a way to get the data to talk to each other without having to use the clearAndLoad function onFullSync and provides realtime updates to other instances???

Thank you for your time…

[Stanislav]

You can use live update on all involved components, just use the same url in the

myDP.live_updates("http://localhost:8008/sync");

for all components. As result after changing data in one component, all other component on the page will get update signal and will reload updated data automatically.

Solution with DataCollection is possible as well ( you can have all grids and scheduler linked to the single DataCollection ) but I’m not sure that you will be able to use live_update ( to sync data between clients ) in such design.

[mister.magic]

That is interesting, I am not experiencing the result you say I should be expecting, with all the dataprocessors using the same url:

Grid 1:
dp_plan1.live_updates(“http://mit:8008/sync”);

Grid2:
dp_plan2.live_updates(“http://mit:8008/sync”);

Scheduler:
dp_sched_1.live_updates(“http://mit:8008/sync”);

When I observe the sync process, I see the sceduler synchronizes, but no effect on the grids…
I am however, receiving this error from the console on live_updates.js - line 90.

for (var i = 0; i < data.length; i++) {

88.	dhtmlXGridObject.prototype.update = function(id, data) {
89.		data = data.data;
90.		for (var i = 0; i < data.length; i++) {
91.			var cell = this.cells(id, i);
92.			cell.setValue(data[i]);
93.		}
94.	};

This is why I think the scheduler data needs to be mapped to the grid cells data, otherwise how does it know what cell relates to the event items from the scheduler?

[mister.magic]

Sorry… I forgot to mention the console error:

Uncaught TypeError: Cannot read property ‘length’ of undefined

[Stanislav]

Yes, try to add grid.setColumnIds(…) to initialization of grids. This command allows to define column ids, and data from scheduler will be mapped based on those ids ( when you change event.somethign in the scheduler, the column with id “something” will be changed in the grid )

[mister.magic]

The column id’s are now defined with the inclusion of grid.setColumnIds(…);
I also had to add grid.enableDataNames(true); to get this function to operate.

But I’m still experiencing the same error:
ncaught TypeError: Cannot read property ‘length’ of undefined
on live_updates.js - line 90.

Do you think it might be because the scheduler dataprocessor is using json and the grid dataprocessor is using xml?

I have also posted the bare minimum config for one of the grids and also the scheduler… does anything stand out as why this might be a problem?

[code]function doOnRowDblClicked(rowId){ scheduler.showLightbox(rowId); }

grid_1.attachEvent(“onRowDblClicked”,doOnRowDblClicked);
grid_1.setImagePath(“dsuite/dhtmlxGrid/codebase/imgs/”);
grid_1.setSkin(“dhx_skyblue”);
grid_1.setHeader([“Start Date”,“Job No.”,“Serial”,“Type”,“Customer”,"",“Revenue”,“Finish Date”,“Quantity”]);
grid_1.setColTypes(“dhxCalendarA,ro,ro,ro,ro,ro,edn,dhxCalendarA,ro”);
grid_1.enableColSpan(true);
grid_1.enableAutoWidth(true);
grid_1.setDateFormat("%d-%m-%Y");
grid_1.setColumnIds(“start_date,job,serial,type,cust,event_name,price,end_date,qty”);
grid_1.setColSorting(“date,str,str,str,str,str,int,date,int”);
grid_1.setColAlign(“left,left,left,left,left,center,center,left,right”);
grid_1.setInitWidthsP(“9,8,14,16,20,2,22,9,2”);
grid_1.setNumberFormat(“£0,000.00”,6,".",",");
grid_1.setColumnHidden(8,true);
grid_1.init();
grid_1.groupBy(3,["#title","#cspan","#cspan","#cspan","#cspan","#cspan","#stat_total","",""]);
grid_1.loadXML(“p_planner_data.php?win=plan&grid=”+mnth1);
var dp_plan1 = new dataProcessor(“p_planner_data.php?win=plan&grid=”+mnth1);
dp_plan1.enableDataNames(true);
dp_plan1.setTransactionMode(“POST”, true);
dp_plan1.live_updates(“http://mit:8008/sync”);
dp_plan1.init(grid_1);

scheduler.load(“p_planner_data.php?win=scheduler&uid=”+scheduler.uid(), “json”);
var dp_sched_1 = new dataProcessor(“p_planner_data.php?win=scheduler&uid=”+scheduler.uid());
dp_sched_1.setTransactionMode(“POST”, true);
dp_sched_1.enablePartialDataSend(true);
dp_sched_1.live_updates(“http://mit:8008/sync”);
dp_sched_1.init(scheduler);[/code]

[Stanislav]

Hi, is the “p_planner_data.php” contains a code of PHP connector or a custom server side code?

If it helps, I can provide a working sample with Grid and Scheduler synced through server side code.

[mister.magic]

Hi Stanislav,

Yes, there’s a small amount of customization in p_planner_data.php for each object.

But only really in so much that there’s a customs sql query, and some minor before render / update formatting.

This is the connector for the grid:

if ($_GET["win"] == "plan") {

	include ("dsuite/dhtmlxConnector/codebase/grid_connector.php");
	require("dsuite/dhtmlxConnector/codebase/db_sqlsrv.php");
	require_once '../setup/macsqlsrv_config.inc.php';
	
	if ($_GET["grid"] == "1") { $firstDayNextMonth = date('Y-m-d', mktime(0, 0, 0, date('m')+1, 1, date('Y')));
								$firstDayThisMonth = date('Y-m-d', mktime(0, 0, 0, date('m'), 1, date('Y'))); }								
	if ($_GET["grid"] == "2") { $firstDayNextMonth = date('Y-m-d', mktime(0, 0, 0, date('m')+2, 1, date('Y')));
								$firstDayThisMonth = date('Y-m-d', mktime(0, 0, 0, date('m')+1, 1, date('Y'))); }					
	
	function formatting($row){
		$data = $row->get_value("end_date");
		$row->set_value("end_date",date("d-m-Y",strtotime($data)));	
		$data = $row->get_value("start_date");
		$row->set_value("start_date",date("d-m-Y",strtotime($data)));
	}

	function formattingrev($data){	
		$var = $data->get_value("end_date");
		$date = date_create($var);
		$data->set_value("end_date", date_format($date, 'Y-m-d'));	
		$var = $data->get_value("start_date");
		$date = date_create($var); 
		$data->set_value("start_date", date_format($date, 'Y-m-d'));		
	}

	$grid = new GridConnector($macsqlsrv_conn,"SQLSrv");
	$grid->event->attach("beforeRender","formatting");
	$grid->event->attach("beforeUpdate","formattingrev");

	$sql_line = "SELECT event_id, start_date, job, serial, type, LTRIM(RTRIM(cust)) AS cust, price, sls_amt, end_date, qty, status FROM schedule LEFT OUTER JOIN oelinhst_sql ON schedule.job=oelinhst_sql.extra_6
			WHERE end_date >= '".$firstDayThisMonth."' AND end_date < '".$firstDayNextMonth."' ORDER BY end_date ASC";

	if ($grid->is_select_mode()) {
		$grid->render_sql($sql_line,"event_id","start_date,job,serial,type,cust,sls_amt,price,end_date,qty,status");
	} else {
		$grid->render_table("schedule","event_id","start_date,job,serial,type,cust,event_name,price,end_date,qty");
	}
	
}

And a slightly less complicated one for the scheduler:

if ($_GET["win"] == "scheduler") {

	include ('dsuite/dhtmlxConnector/codebase/scheduler_connector.php');
	require("dsuite/dhtmlxConnector/codebase/db_sqlsrv.php");
	require_once '../setup/macsqlsrv_config.inc.php';

	$scheduler = new JSONSchedulerConnector($macsqlsrv_conn,"SQLSrv");

	$sql_line = "SELECT event_id, start_date, end_date, serial, LTRIM(RTRIM(cust)) AS cust, qty as event_name, details, type_id, job, LTRIM(RTRIM(type)) AS type, price, status, color, qty FROM schedule ORDER BY end_date ASC";

	if ($scheduler->is_select_mode()) {	
		$scheduler->render_sql($sql_line,"event_id","start_date,end_date,serial,cust,event_name,details,type_id,job,type,price,status,color,qty");
	} else {
		$scheduler->render_table("schedule","event_id","start_date,end_date,serial,cust,event_name,details,type_id,job,type,price,status,color,qty");
	} 

}

Have a look, see what you think… - though if you were able to get a running sample with grid and scheduler synced… - that would be fantastic and greatly appreciated.

Thanks.

[menehune]

Hi, I’m attempting to do something similar but less complex…no live updates needed. If a scheduler is in the top part of a layout I’d like to click on scheduler element (school classes), then filter the grid (students) in the bottom part of layout for just that element (single school class). The data is in two tables (classes/students) using a 1:M relationship. I don’t know the correct API terms to search for the method…this thread and the posted image is the closest I could find, so any help or sample code would be great! Thanks