2 datasources, with one-to-many relation

Discontinued products DHTMLX Touch
#1

Hi,

I have a database with soccer teams, and then a database with players. I’d like to show a list of players when looking at team’s details. Teams’ database has an “id” field. Players’ database has a “team” field, that refers to the player’s team.
In team’s detail I’ve defined a row with team’s data, and a row, view:“list”, with players. In index.html I create to DataCollection:

var datastore =  new dhx.DataCollection({
					datatype:"json"
				}); 
				dhx.delay(function(){
					datastore.load("data/teams.js");
				});
				
				var datastore2 =  new dhx.DataCollection({
					datatype:"json"
				}); 
				dhx.delay(function(){
					datastore2.load("data/players.js");
				});

Then, in showTeam function (that opens team’s details), I load players list, but I’d like to filter and view only this team’s players.

function showDescription(id,title){
	var data = this.item(id);
	var team = id;
	$$("teamInfo").data = dhx.copy(data);
	$$("teamInfo").refresh();
	showToolbarBatch("back");
        $$("selectedTeam").show();
	$$("viewname").setValue(title);

	$$("Players").sync(datastore2, true);
	$$("Players").bind(datastore2);
	$$("Players").filter(function(obj){
	        if (obj.team == team) return true;
	        return false;
	})	
	return true;
}

But filter is not working… Any ideas?
Thank you for your help,
Ruben

#2

You need to use code like

$$(Players).bind(datastore2, function(obj, master){ if (!master) return false; return obj.team == master.id; });

now you can use use datastore2.setCursor(id); to point to the some item in the data collection, and as result list will be refiltered to show only related records.

Basically you need to use bind or filter, but not both in the same time.

#3

Hi Stanislav,

thank you for your help. I’ve tried what you said and no success :frowning:

datastore2.bind should be made inside function? And then apply filter using setCursor? In Doku I see setCursor is for filtering a list, in this case Players, but you use it in datastore2 wich is a DataCollection.

Thank you,

#4

In standard samples you can check
server/01_loading/05_list_list_client.html

It shows how two list can be linked, and selecting record in one ( setting cursor ) will filter second one.

If problem still occurs - can you provide some kind of demo page, where it occurs ( you can attach it here, or send directly to the support@dhtmlx.com )

#5

Hi Stanislav,

I see the example, and have tried to use in my page, but no luck. I’ll send you a demo page.

Thanks,
Ruben

#6

Hi Stanislav,

I’ve sended you the demo page. Meanwhile I’ve test another solution, and it works at 50%. Now my example uses a films billboard. In a cinema you can view different films at different hours. I have a DB with films and a DB with showtimes. “id” is key field in films’ DB, and “film” is field in showtimes’ DB, that refers to the film.

In index.html

$$("filmShows").sync(datastore3,this); $$("filmShows").bind(datastore3);

In function that shows the film’s details and a list of showing times:

function showDescription(id,title){
	var data = this.item(id);
	$$("filmInfo").data = dhx.copy(data);
	$$("filmInfo").refresh();
	$$("filmDescription").data = dhx.copy(data);
	$$("filmDescription").refresh();
	$$("filmShows").filter("#film#",id);
	$$("filmShows").refresh();				
	showToolbarBatch("back");
        $$("selectedFilm").show();
	$$("viewname").setValue(title);
	return true;
}

The first time you enter in a film’s detail you see ALL showtimes, it doesn’t filter. But if you go back and enter another film, the filter works, and it shows only this film’s showtimes. And from now on, the filter works.

Thanks!

#7

I think you are overusing bind and datastore.
Check the attached sample, it implements the same use-case.

#8

Hi Stanislav,

I’ve changed my code, to approach the sample. Instead of loading bind, to load data in filmShows (the list that I need to filter), I use url.

{ id:"filmShows", view:"list", type:"Sessions", url:"data/sessions.js", datatype:"json" }

Then in dhx.ready

$$("filmShows").bind($$("filmInfo"), function(linked, master){ if (!master) return true; return linked.film == master.id; });

In filmInfo I’ve got the film’s details. But the app does’nt work. I also have tried to put the bind in function that shows the details page.

Thanks,

#9

Hi,

now it works, with this code:

{ id:"filmShows", view:"list", type:"Sessions", height:"auto", url:"data/sessions.js", datatype:"json" }

And then in function that shows the view:

function showDescription(id,title){ var data = this.item(id); $$("filmInfo").data = dhx.copy(data); $$("filmInfo").refresh(); $$("filmDescription").data = dhx.copy(data); $$("filmDescription").refresh(); $$("filmShows").filter("#film#",id); showToolbarBatch("back"); $$("selectedFilm").show(); $$("viewname").setValue(title); return true; }

Thank you four your help,