Updating foundset and displaying data in grid

Forum to discuss the new web client version of Servoy.

Updating foundset and displaying data in grid

Postby jay.rao » Mon Apr 10, 2017 1:43 pm

I am trying to create the grid using angular grid or devEx grid,using properties like columns' dataprovider and foundset->dp0,dp1.
But as I provide dataSource to grid it only considers json data and not columns' dataprovider i.e $scope.model.foundset.viewPort.rows.As soon as I try to sort the data using $scope.model.foundset.sort(startIndex,size) servoy fires the sql query which says Select top 201 xyz from table xyz order by id but my foundset doesnt update the data at the same instance,and as soon as I try to get next 50 data using loadRecordsAsync(startIndex,size) it skips first 100 data and returns on sorted data starting from 101.
I have my viewport size as 50.
jay.rao
 
Posts: 59
Joined: Mon Apr 10, 2017 1:32 pm

Re: Updating foundset and displaying data in grid

Postby lvostinar » Mon Apr 10, 2017 1:51 pm

jay.rao wrote:I am trying to create the grid using angular grid or devEx grid,using properties like columns' dataprovider and foundset->dp0,dp1.
But as I provide dataSource to grid it only considers json data and not columns' dataprovider i.e $scope.model.foundset.viewPort.rows.As soon as I try to sort the data using $scope.model.foundset.sort(startIndex,size) servoy fires the sql query which says Select top 201 xyz from table xyz order by id but my foundset doesnt update the data at the same instance,and as soon as I try to get next 50 data using loadRecordsAsync(startIndex,size) it skips first 100 data and returns on sorted data starting from 101.
I have my viewport size as 50.


I think we need your component in order to give it a try and give some advice.
Laurian Vostinar
Servoy
lvostinar
 
Posts: 1062
Joined: Tue Feb 19, 2008 10:53 am

Re: Updating foundset and displaying data in grid

Postby Andrei Costescu » Mon Apr 10, 2017 2:48 pm

You should describe the problem(s) better as well.

jay.rao wrote:But as I provide dataSource to grid it only considers json data and not columns' dataprovider i.e $scope.model.foundset.viewPort.rows.

I don't understand what you mean here. (what do you mean json data and not columns' dataprovider)

You also mentioned sorting, getting more records... Did you check (for example with a breakpoint in your browser tools in "foundset.js" at the end of "fromServerToClient" method) how the client side foundset value (so "newValue" at the end of that function) changes as a result of your operations? Is there a problem in that or is the component not updating although the content of the foundset property changes as expected? (do check also startIndex, viewport size, foundset size, not just the rows)

jay.rao wrote:I have my viewport size as 50.

Do not assume your viewport size is always the same. For example, if the server-side foundset shrinks for any reason (delete or records, requery, ...) below that value then the client side viewport size will get updated as well. Also requesting a loadMore... or loadLess... will change the viewport size.
Andrei Costescu
Servoy
Andrei Costescu
 
Posts: 1018
Joined: Tue Jun 26, 2007 3:14 pm

Re: Updating foundset and displaying data in grid

Postby jay.rao » Tue Apr 11, 2017 7:13 am

Hello Andrei,Ivostinar

I am using DevEx grid to display data.
Code: Select all
$scope.dataGridOptions ={
               dataSource:{store:data}
}
where data is json object which is retrieved using foundset shown in 2.png
2.PNG

I've implemented lazy loading so that I keep on scrolling to load more records.Initially I get 50 records and keep on loading more records using
Code: Select all
fs.loadRecordsAsync(fs.viewPort.startIndex+fs.viewPort.size,fs.viewPort.size)

Now as soon as I try to sort the data using below code
Code: Select all
fs.sortColumns=columnName+ " " +sqlSortDirection; fs.sort([{ name: columnName, direction: sqlSortDirection }]);

Servoy fires the query Select top 201 xyz from table xyz order by asc xyz.id
but the problem arising here is my foundset gets sorted data starting from index 51/101 i.e the startIndex of the sorted data would be 51 or 101(incase i have scrolled to 100 data using lazy loading),in short which means as I sort the data it would skip the record index which are already fetched.
Lets suppose I have data starting from 0 to 49 and try to sort ascending, my initial 50 records would remain on the screen but as i scroll using lazy loading I would get sorted records starting from index 101 and not 0,it skips my 100 records.
Now continuing with this,if I sort the same column to descending the first 50 records on the screen would be same but the next set of 50 records would start from the index of 151 skipping my 150 records(it should have been 0 as starting index but it took 151 as startIndex)

Code: Select all
controller: function($scope, $element, $attrs) {
var data=new DevExpress.data.CustomStore({
            load:function(loadOptions){
               var fs = $scope.model.foundset;
var deferred = $.Deferred()
                  if(loadOptions.sort){
                  var sqlSortDirection = "asc";
                  var columnName=loadOptions.sort[0].selector;
                  if(loadOptions.sort[0].desc==false){
                     sqlSortDirection="asc";
                  }
                  else{
                     sqlSortDirection="desc";
                  }
                
                     fs.sortColumns=columnName+ " " +sqlSortDirection;
                     fs.sort([{ name: columnName, direction: sqlSortDirection }]);
                     fs.loadRecordsAsync(fs.viewPort.startIndex+fs.viewPort.size,fs.viewPort.size);
                  deferred.resolve(fs.viewPort.rows);
                 
                  }
                 else
                 {
                    if(loadOptions.sort)
                   {
                       fs.loadRecordsAsync(fs.viewPort.startIndex+fs.viewPort.size,fs.viewPort.size)
                    }
                   
                     deferred.resolve(fs.viewPort.rows);
                 }
               return deferred.promise();
            }
         });
$scope.dataGridOptions ={
               dataSource:
                  {store:data
                  }}


I am not sure if had explained my problem exactly as you need but this is pretty much the problem which I am facing right now.
Thank you,
Globis_Jay.Rao
You do not have the required permissions to view the files attached to this post.
jay.rao
 
Posts: 59
Joined: Mon Apr 10, 2017 1:32 pm

Re: Updating foundset and displaying data in grid

Postby Andrei Costescu » Tue Apr 11, 2017 9:24 am

I think it is clear now, thanks :).
From what I understand you cache the 0-50 viewport (or any other initially) in a separate place.

What you should do is keep in the viewport all rows that you use on client.
So instead of
Code: Select all
fs.loadRecordsAsync(fs.viewPort.startIndex+fs.viewPort.size,fs.viewPort.size)

you can do
Code: Select all
fs.loadExtraRecordsAsync(50)

so your viewPort will contain after the first scroll rows 1-100. In this way you will see changes comming in for all 100 rows when they happen.

The way you had it, the property requested viewport 50-99 and that is what it got. But you are interested in changes for all rows that are on client.
You could I guess if you really want to cache the rows in a different place and keep the viewport small, when you do sort, reload the whole thing - so manually request a viewport change. But it doesn't help much, because the first 50 rows that are no longer in the viewport but are shown could change due to changes in other forms, or maybe in other clients as well, not just due to sort. And I guess you want to detect that as well.

You can listen for changes by shallow watches on viewport size, startindex, serversize, ... if you need them and deep (or collection) angular watch on viewport.rows or on each row/cell (if you want to know more precisely what changed); as a note - in Servoy 8.1.3 there is an undocumented listener you can add to the foundset property to get row updates (it doesn't notify of full viewport changes or other changes, just when only some rows are removed/added/updated); this listener is used by servoy-extra table to get rid of some deep watches and do granular updates to the UI in some scenarios. But you shouldn't use that yet because it will change; I am currently working on improving and then documenting that listener for 8.2 (cases SVY-10781 and SVY-10706).
Andrei Costescu
Servoy
Andrei Costescu
 
Posts: 1018
Joined: Tue Jun 26, 2007 3:14 pm

Re: Updating foundset and displaying data in grid

Postby jay.rao » Tue Apr 11, 2017 10:53 am

Hello Andrei,

Thank you for the suggestion.I changed to fs.loadExtraRecordsAsync(50) and I am able to get records as per my requirement in fs.viewPort.rows similiar to that of servoy-extra component table's viewPort.Also at foundset.js in function fromServerToClient I am able to get proper serverJSON value but now the problem is even if my viewPort rows are properly fetched my grid keeps on repeating similiar 50 records again and again at front end.Although new records are appended on scroll end and viewPort.rows contains perfect records(i.e my records are properly added in the viewPort rows,also if I try ascending sorting it resets my records and gives proper records in the viewPort),am not sure why does my grid keeps on repeating first 50 records.
You do not have the required permissions to view the files attached to this post.
jay.rao
 
Posts: 59
Joined: Mon Apr 10, 2017 1:32 pm

Re: Updating foundset and displaying data in grid

Postby Andrei Costescu » Tue Apr 11, 2017 1:09 pm

You are welcome. Good to hear that it works.
Why the front-end shows only still 50 records I don't know. That depends on how the component you use works.

Where does the underlying grid component take that data from? Maybe it needs a call to a refresh/update/rerender API on the grid component as well if you change the data or ...
Andrei Costescu
Servoy
Andrei Costescu
 
Posts: 1018
Joined: Tue Jun 26, 2007 3:14 pm

Re: Updating foundset and displaying data in grid

Postby jay.rao » Tue Apr 11, 2017 3:43 pm

Hello Andrei,

What actually I am facing right now is after loading records I am trying to bind those foundset record to grid data but it ends up showing repeated data.
Code: Select all
var data=new DevExpress.data.CustomStore({
            load:function(loadOptions){
               var fs = $scope.model.foundset;
               var deferred = $.Deferred();
                  if(loadOptions.sort){
                  var sqlSortDirection = "asc";
                  var columnName=loadOptions.sort[0].selector;
                  if(loadOptions.sort[0].desc==false){
                     sqlSortDirection="asc";
                  }
                  else{
                     sqlSortDirection="desc";
                  }
   
                     fs.sortColumns=columnName+ " " +sqlSortDirection;
                     fs.sort([{ name: columnName, direction: sqlSortDirection }]);
              
                  deferred.resolve(fs.viewPort.rows);                
                  }     
                 else
                 {
                     fs.loadExtraRecordsAsync(50).then(function(){
                       $scope.data=fs.viewPort.rows;
                       alert("then");
                    })
                 }
                               deferred.resolve(fs.viewPort.rows);
                       return deferred.promise();
                    }
         });

So now i get initial 50 records and try to scroll to next 50 records using loadExtraRecordsAsync it works, my viewPort increase to 100 records. But the problem arises at the grid it shows the same set of 50 records again,because untill this async call finishes
Code: Select all
fs.loadExtraRecordsAsync(50)
,this
Code: Select all
deferred.resolve(fs.viewPort.rows); return deferred.promise();
already has done its execution and the grid binds 50 data which will be repeative.
While to display grid data I only uses the above code piece and the data source to grid is provided by
Code: Select all
dataSource:{store:data}

As soon as i scroll down again it keeps on appending same set of data again and again.

I believe its getting much of this but :/

Thank you,
Globis_jay.rao
jay.rao
 
Posts: 59
Joined: Mon Apr 10, 2017 1:32 pm

Re: Updating foundset and displaying data in grid

Postby Andrei Costescu » Wed Apr 19, 2017 3:27 pm

I apologize for the time it took to answer - I was busy with a couple of other things.
In case you didn't figure it out already: looking at the code snippet you posted - that last "deferred.resolve(fs.viewPort.rows);" should be inside the "then" of "loadExtraRecordsAsync".
Andrei Costescu
Servoy
Andrei Costescu
 
Posts: 1018
Joined: Tue Jun 26, 2007 3:14 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 6 guests