SmartGWT client only includeFrom example

[slartidan]

I am trying to build an example for the usage of includeFrom. I want to use only client side code and "clientOnly" data sources. I'm trying to stick as close as possible to the example lines in the documentation of the "includeFrom" API.

Thanks in advance!!!

I'm trying to create a grid that shows this information:

== Expected Grid ==
Position                | Manager Id
------------------------|----------
Chief Executive Officer | Anthony Benoit
Software Developer      | Chris Fisher

== This is my current Grid ==
Position                | Manager Id
------------------------|----------
Chief Executive Officer | 
Software Developer      |

The raw data is:

== employeeDataSource ==
id | Name
---|-----------------
17 | Anthony Benoit
23 | Chris Fisher

== organizationDataSource ==
position                | managerId
------------------------|----------
Chief Executive Officer | 17
Software Developer      | 23

My Java code:

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.DataSourceField;
import com.smartgwt.client.types.FieldType;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;

public class Tryout implements EntryPoint {

	@Override
	public void onModuleLoad() {

		/** A data source that maps employee ids to names */
		DataSource employeeDataSource = defineEmployeeDataSource();
		fillEmployeeDataSource(employeeDataSource);
		
		/** A data source that tells, which of the employees has which position in the organization */
		DataSource organizationDataSource = defineOrganizationDataSource();
		fillOrganizationDataSource(organizationDataSource);
		
		/** show data in grid */
		ListGrid grid = createListGrid();
		grid.setDataSource(organizationDataSource);
		grid.show();
	}

	private DataSource defineEmployeeDataSource() {
		
		/* The primary key id field for employees */
		final DataSourceField employeeIdDataSourceField = new DataSourceField("id", FieldType.INTEGER) {{
			setPrimaryKey(true);
		}};
		
		/* The name field for employees (consisting of firstname and lastname) */
		final DataSourceField employeeNameDataSourceField = new DataSourceField("name", FieldType.TEXT);

		return new DataSource() {{
			setID("employee");
			setFields(employeeIdDataSourceField, employeeNameDataSourceField);
			setClientOnly(true);
		}};
	}

	private void fillEmployeeDataSource(DataSource dataSource) {
		ListGridRecord record1 = new ListGridRecord() {{
			setAttribute("id", 17);
			setAttribute("name", "Anthony Benoit");
		}};

		ListGridRecord record2 = new ListGridRecord() {{
			setAttribute("id", 23);
			setAttribute("name", "Chris Fisher");
		}};

		dataSource.setCacheData(new ListGridRecord[] {record1, record2});
	}

	private DataSource defineOrganizationDataSource() {

		// Define a primary key column with the name of the position within the organization
		final DataSourceField organizationPositionDataSourceField = new DataSourceField("position", FieldType.TEXT) {{
			setPrimaryKey(true);
		}};

		// Define a field for the joined name of the employee
		// I tried to keep as close as possible to this documentation: http://www.smartclient.com/smartgwtee/javadoc/com/smartgwt/client/docs/serverds/DataSourceField.html#includeFrom
		//   <field name="managerName" includeFrom="employee.name" hidden="true"/>
		final DataSourceField organizationManagerNameDataSourceField = new DataSourceField("managerName", FieldType.TEXT) {{
			// setIncludeFrom not available in API (we will set this attribute in the list grid field afterwards)
			setHidden(true);
		}};

		// Define a field for the foreign key to the id of the employee
		// I tried to keep as close as possible to this documentation: http://www.smartclient.com/smartgwtee/javadoc/com/smartgwt/client/docs/serverds/DataSourceField.html#includeFrom
		//   <field name="managerId" foreignKey="employee.id" displayField="managerName"/>
		final DataSourceField organizationManagerIdDataSourceField = new DataSourceField("managerId", FieldType.INTEGER) {{
			setForeignKey("employee.id");
			setDisplayField("managerName");
		}};

		// create new data source using the defined fields
		return new DataSource() {{
			setID("organization");
			setFields(organizationPositionDataSourceField, organizationManagerNameDataSourceField, organizationManagerIdDataSourceField);
			setClientOnly(true);
		}};
	}

	private void fillOrganizationDataSource(DataSource dataSource) {
		final ListGridRecord record1 = new ListGridRecord();
		record1.setAttribute("position", "Chief Executive Officer");
		record1.setAttribute("managerId", 17);

		final ListGridRecord record2 = new ListGridRecord();
		record2.setAttribute("position", "Software Developer");
		record2.setAttribute("managerId", 23);

		dataSource.setCacheData(new ListGridRecord[] {record1, record2});
	}

	private ListGrid createListGrid() {

		final ListGridField positionListGridField = new ListGridField("position");

		//   <field name="managerName" includeFrom="employee.name" hidden="true"/>
		final ListGridField managerNameListGridField = new ListGridField("managerName") {{
			setIncludeFrom("employee.name");
			setHidden(true);
		}};

		//   <field name="managerId" foreignKey="employee.id" displayField="managerName"/>
		final ListGridField managerIdListGridField = new ListGridField("managerId") {{
			// setForeignKey not available in API (we have already set this attribute in the data source field)
			setDisplayField("managerName");
		}};

		return new ListGrid() {{
			setFields(positionListGridField, managerNameListGridField, managerIdListGridField);
			setAutoFetchData(true);
			
			setWidth100();
			setHeight100();
		}};
	}
}

My testing environment:

SmartGWT LPGL 5.0p
SmartClient Version: v10.0p_2014-11-30/LGPL Development Only (built 2014-11-30)
Firefox 31

[Isomorphic]

includeFrom is not currently supported for clientOnly DataSources. It would require performing the equivalent of a SQL join in memory in JavaScript, and we're not aware of a compelling use case for this feature.

We're not sure what purpose you had in mind for setting up this sample, but if you explain what you're trying to accomplish we could suggest another approach.

[slartidan]

Workaround with "OptionDataSource"

Just for completeness: There is a workaround using OptionDataSource, which seems not to be recommended by Isomorphic (according to this post http://forums.smartclient.com/showpost.php?p=124835&postcount=9 )

The workaround (using OptionDataSource instead of includeFrom):

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.DataSourceField;
import com.smartgwt.client.types.FieldType;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;

public class Tryout implements EntryPoint {

	@Override
	public void onModuleLoad() {

		/** A data source that maps employee ids to names */
		DataSource employeeDataSource = defineEmployeeDataSource();
		fillEmployeeDataSource(employeeDataSource);
		
		/** A data source that tells, which of the employees has which position in the organization */
		DataSource organizationDataSource = defineOrganizationDataSource();
		fillOrganizationDataSource(organizationDataSource);
		
		/** show data in grid */
		ListGrid grid = createListGrid(employeeDataSource);
		grid.setDataSource(organizationDataSource);
		grid.show();
	}

	private DataSource defineEmployeeDataSource() {
		
		/* The primary key id field for employees */
		final DataSourceField employeeIdDataSourceField = new DataSourceField("id", FieldType.INTEGER) {{
			setPrimaryKey(true);
		}};
		
		/* The name field for employees (consisting of firstname and lastname) */
		final DataSourceField employeeNameDataSourceField = new DataSourceField("name", FieldType.TEXT);

		return new DataSource() {{
			setID("employee");
			setFields(employeeIdDataSourceField, employeeNameDataSourceField);
			setClientOnly(true);
		}};
	}

	private void fillEmployeeDataSource(DataSource dataSource) {
		ListGridRecord record1 = new ListGridRecord() {{
			setAttribute("id", 17);
			setAttribute("name", "Anthony Benoit");
		}};

		ListGridRecord record2 = new ListGridRecord() {{
			setAttribute("id", 23);
			setAttribute("name", "Chris Fisher");
		}};

		dataSource.setCacheData(new ListGridRecord[] {record1, record2});
	}

	private DataSource defineOrganizationDataSource() {

		// Define a primary key column with the name of the position within the organization
		final DataSourceField organizationPositionDataSourceField = new DataSourceField("position", FieldType.TEXT) {{
			setPrimaryKey(true);
		}};

		// Define a field for the foreign key to the id of the employee which will be displayed as name
		final DataSourceField organizationManagerIdDataSourceField = new DataSourceField("managerId", FieldType.INTEGER);

		// create new data source using the defined fields
		return new DataSource() {{
			setID("organization");
			setFields(organizationPositionDataSourceField, organizationManagerIdDataSourceField);
			setClientOnly(true);
		}};
	}

	private void fillOrganizationDataSource(DataSource dataSource) {
		final ListGridRecord record1 = new ListGridRecord();
		record1.setAttribute("position", "Chief Executive Officer");
		record1.setAttribute("managerId", 17);

		final ListGridRecord record2 = new ListGridRecord();
		record2.setAttribute("position", "Software Developer");
		record2.setAttribute("managerId", 23);

		dataSource.setCacheData(new ListGridRecord[] {record1, record2});
	}

	private ListGrid createListGrid(final DataSource employeeDataSource) {

		final ListGridField positionListGridField = new ListGridField("position");

		// Create reference of managerId to foreign data source "employeeDataSource"
		// WARNING: this method was discussed here: http://forums.smartclient.com/showpost.php?p=124835&postcount=9
		final ListGridField managerIdListGridField = new ListGridField("managerId") {{
			setOptionDataSource(employeeDataSource);
			setValueField("id");
			setDisplayField("name");
		}};

		return new ListGrid() {{
			setFields(positionListGridField, managerIdListGridField);
			setAutoFetchData(true);
			
			setWidth100();
			setHeight100();
		}};
	}
}