Getting foundset column data client side

[robrecht]

Hi,

I am trying to build a table component with a foundset and variable amount of columns available in developer properties, with the servoy bootstrap table component as an example.
In developer, the foundset property is “article”, and I have 2 columns : “article_code” and “remarks”
In browser, foundset.viewPort.rows is giving something like

[{"_svyRowId": "36.860a62bd-2413-47a9-8cba-000021d19442;_0"}, {...}, {...}, ...]

With 860a62bd-2413-47a9-8cba-000021d19442 being my actual PK of an article record in my database.
So far so good but actually I was expecting my column data in the same object ?

[{"_svyRowId": "36.860a62bd-2413-47a9-8cba-000021d19442;_0", "article_code": "ARTICLE", "remarks": "REMARKS"}, {...}, {...}, ...]

I found out that I can get this column data through columns[0].dataprovider in browser.
But then I have to build my JSON manually, it would be nice to just provide the foundset.viewPort.rows to my component?
Am I doing something wrong?

Spec file :

	"model":
	{
		"columns":  { "type":"column[]", "droppable": true },
		"text" : {"type":"tagstring" , "initialValue":"Button", "tags": { "directEdit" : "true" }},
		"foundset": { "type": "foundset", "pushToServer": "allow"}
	},
	"types":
	{
		"column":
		{
			"dataprovider": {	"type": "dataprovider",	"forFoundset": "foundset" },
			"format" : {"for":["valuelist","dataprovider"] , "type" :"format"},
			"headerStyleClass" : { "type" :"styleclass", "tags": { "scope" :"design" }}, 
			"headerText": {"type" :"string", "initialValue" : "header", "tags": { "showInOutlineView" :true }},
			"styleClass" : { "type" :"styleclass", "tags": { "scope" :"design" }},
			"valuelist" : { "type" : "valuelist", "tags": { "scope" :"design" }, "for": "dataprovider"}
		}
		
	},
	"handlers":
	{
	},
	"api":
	{

Many thanks

Robrecht

[paronne]

Hi Robrecth,

there is nothing wrong with the configuration of your foundset and columns. The actual data of the dataprovider is kept in the column.dataprovider object; this is regular behavior when you have a foundset with dynamic dataproviders as you do.

If i may ask, what type of component are you building ? Do you necessarely need to merge all the data of a foundset row in a single row object ?
Since the data in dataproviders and in the foundset object will always have the same index, you can access them like this: “column.dataprovider[model.foundset.viewPort.rows.indexOf(row)”

This code is from our bootstrap table component, which is the simpler foundset based component we have https://github.com/Servoy/bootstrapcomp … ster/table.
Svy-extra table component is much richer and complex.

Regards,
Paolo

[robrecht]

Hi Paolo,

I am building a grid component based on DevExtreme dataGrid : Custom Data Source - React Data Grid | React Example

Problem is, I can’t bind my data in the html but instead I need to do it in the .js file:

HTML

<div class="demo-container">
	<div id="gridContainer" dx-data-grid="dataGridOptions">
	</div>
</div>

JS

...
var orders = new DevExpress.data.CustomStore({
              load: function (loadOptions) {
                  var deferred = $.Deferred()
                  
                  if(loadOptions.take)
                	  {
                	       $scope.model.foundset.loadRecordsAsync(loadOptions.skip+loadOptions.take,loadOptions.take)
                	  }
					
                   deferred.resolve($scope.model.foundset.viewPort.rows);
          
                  return deferred.promise();
                  }

...

This is one way to bind data for DevExpress amongst others but it seemed the best way to handle servoy foundsets (I can be wrong !)
This is btw a working example for infinite scrolling in the grid but I have the feeling something is wrong in my way of thinking… ?

I want to build a custom component next to the bootstrap table or svy-extra table because it offers a lot of functionalities like grouping, filtering, sorting, … which I miss in the servoy components.
All of this need to happen server-side but when I get a clear view on how foundset data has to be handled I suppose this component will do the job…

[Andrei_Costescu]

You can get the data where you want it to be as well.
See https://wiki.servoy.com/display/public/ … perty+type
Look at the “Defining/using a foundset property with a random set of dataproviders” section.

We used the column with dataprovider + “forFoundset” because we need more things for each column in extra-table component, not just the dataprovider and we want them in the same place. (+ it’s a dataprovider typed property which is more flexible depending on what you want then just direct data in the foundset’s viewport array of objects).

[robrecht]

Hi Andrei,

This indeed did the job, but then I am missing other usefull properties like ‘titleText’ and ‘valuelist’ in developer? Columns provide these properties, as far as I see dataproviders don’t…

Robrecht

[Andrei_Costescu]

Yes, that is what I was saying. You get just the plain data there.
As you also need the others you should do it through the columns property approach - where you can for example use the “for” in the valuelist.

[paronne]

Hi Robrecht,

indeed as Andrei says using the “forFoundset” property provides you more information related to the dataprovider.
You can of course merge the rows info into a single data object.

		        /** return the viewPort data in a new object */
				function getViewPortData() {
					//if($scope.model.myFoundset.viewPort.size == $scope.model.numRows){
					var data = [];
					for (var j = 0; j < $scope.model.myFoundset.viewPort.rows.length; j++) {
						data.push(getViewPortRow(j));
					}
                                return data;

				/** return the row in viewport at the given index */
				function getViewPortRow(index) {
					var r = new Object();
					// push the id so the rows can be merged
					r._svyRowId = $scope.model.myFoundset.viewPort.rows[index]._svyRowId;

					// push each dataprovider
					for (var i = 0; i < $scope.model.columns.length; i++) {
						var header = $scope.model.columns[i];
						r[header.dp] = header.dataprovider[index];
					}
					return r;
				}

About the grid you are developing, which feature does you offer that you can’t achieve with the Servoy tables ?
If you are looking for performance the table in servoy-extra-components is very fast, you should look at that.

Regards,
Paolo

[robrecht]

Hi Paolo,

I am missing e.g. grouping, filtering, customized columns, in-row master-detail, … and so on.
As far as I see the svy-extra table is like the “old” table view with styling options and ready to use in NG client.
Am I wrong ?
Other components like DevExtreme DataGrid offer all these functionalities out of the box.
The functionalities I mention all happen client-side but I have no problem to have a lot of server-side scripting as well for example to group a lot of records or to filter in a huge foundset…

Do you have some advice in this matter?

Thanks a lot

Robrecht

[paronne]

Hi Robrecht,

the table in svyextra component is a fast and light version of the table view. The functionalities you are mentioning are indeed not part of it.
There are plenty of grid components which can do grouping/filtering etc… client-side.
The challenge is to get this functionality working with a large dataset, and load them all client-side is not a solution since can impact performance and stability; as you said it requires server side scripting and/or ad-hoc api for the client foundset object.

How far have you got with this ? have you already figured out how to approach it ?
We recently prototyped a component which allow filtering/grouping on columns with lazy loading; when records are grouped each time a node is expanded it loads a subset of it’s child and more child records can be loaded with lazy loading. It requires more development to be finished, if you can consider to sponsor it, we would be happy to do complete the development. Let me know which are your though about.

Regards,
Paolo

[robrecht]

Hi Paolo,

I’ll contact you later to change exchange thoughts about it.

Thanks
Robrecht