Getting foundset column data client side

Forum to discuss the new web client version of Servoy.

Getting foundset column data client side

Postby robrecht » Sat Feb 04, 2017 9:47 pm

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

Code: Select all
[{"_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 ?

Code: Select all
[{"_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 :

Code: Select all
   "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
robrecht
 
Posts: 52
Joined: Wed Aug 01, 2012 4:30 pm

Re: Getting foundset column data client side

Postby paronne » Mon Feb 06, 2017 10:12 am

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)"

<div ng-bind='column.dataprovider[model.foundset.viewPort.rows.indexOf(row)]| getDisplayValue:column.valuelist | formatFilter:column.format.display:column.format.type'
ng-show="getUrl(column,row) === null">
</div></td>

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
paronne
 
Posts: 61
Joined: Fri Nov 02, 2012 3:21 pm

Re: Getting foundset column data client side

Postby robrecht » Mon Feb 06, 2017 10:53 am

Hi Paolo,

I am building a grid component based on DevExtreme dataGrid : https://js.devexpress.com/Demos/WidgetsGallery/Demo/Data_Grid/CustomDataSource/AngularJS/Light/

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

HTML
Code: Select all
<div class="demo-container">
   <div id="gridContainer" dx-data-grid="dataGridOptions">
   </div>
</div>


JS
Code: Select all
...
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..
robrecht
 
Posts: 52
Joined: Wed Aug 01, 2012 4:30 pm

Re: Getting foundset column data client side

Postby Andrei Costescu » Mon Feb 06, 2017 12:53 pm

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).
Andrei Costescu
Servoy
Andrei Costescu
 
Posts: 835
Joined: Tue Jun 26, 2007 3:14 pm

Re: Getting foundset column data client side

Postby robrecht » Mon Feb 06, 2017 12:57 pm

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
robrecht
 
Posts: 52
Joined: Wed Aug 01, 2012 4:30 pm

Re: Getting foundset column data client side

Postby Andrei Costescu » Mon Feb 06, 2017 1:42 pm

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.
Andrei Costescu
Servoy
Andrei Costescu
 
Posts: 835
Joined: Tue Jun 26, 2007 3:14 pm

Re: Getting foundset column data client side

Postby paronne » Mon Feb 06, 2017 3:20 pm

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.

Code: Select all
              /** 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
paronne
 
Posts: 61
Joined: Fri Nov 02, 2012 3:21 pm

Re: Getting foundset column data client side

Postby robrecht » Mon Feb 06, 2017 9:16 pm

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
robrecht
 
Posts: 52
Joined: Wed Aug 01, 2012 4:30 pm

Re: Getting foundset column data client side

Postby paronne » Tue Feb 07, 2017 1:07 pm

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
paronne
 
Posts: 61
Joined: Fri Nov 02, 2012 3:21 pm

Re: Getting foundset column data client side

Postby robrecht » Tue Feb 07, 2017 3:17 pm

Hi Paolo,

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

Thanks
Robrecht
robrecht
 
Posts: 52
Joined: Wed Aug 01, 2012 4:30 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 1 guest

cron